Laravel 10 CRUD Tutorial Step By Step

In this Laravel 10 CRUD Tutorial you will learn How to create a Laravel 10 CRUD Application step by step. You will Learn How to Create, Read, Update & Delete record data using Laravel 10.

What is Laravel?

Laravel is an open-source PHP web application framework that is used for building web applications and APIs. It provides developers with a set of tools and features to simplify and expedite the development process by promoting a clean and elegant syntax.

Laravel follows the Model-View-Controller (MVC) architectural pattern, which helps in organizing code and separating concerns.

Some of the key features of Laravel are Routing, Eloquent ORM, Blade Templating Engine, Middleware, Authentication and Authorization, Artisan CLI, Database Migrations and Seeding,

Dependency Injection, Events and Listeners, API Support.

What is Laravel CRUD?

Laravel CRUD refers to the basic operations that can be performed on a database using the Laravel framework: Create, Read, Update, and Delete. These operations are fundamental to most web applications that involve interacting with a database to manage data. Laravel provides tools and conventions that make it easier to implement these operations in a consistent and organized manner.

Installing Laravel 10

Laravel 10 requires PHP 8.1.0 or greater & Composer 2.2.0 or greater, so make sure that you have installed these before proceeding further.

You can check this article to know How to install Laravel step by step.

HOW TO INSTALL LIVEWIRE V3 IN WINDOWS

In this tutorial I assume that you have basic knowledge of How to install Laravel 10.

Go to your directory & open your terminal, enter below command to install Laravel 10.

laravel new your-project-name

Or if you want to install Laravel 10 using Composer enter the below command into your terminal.

composer create-project laravel/laravel your-project-name

It will take some time to download Laravel, depending on your Internet Connection. After the download completes you will see screen like below image.

Laravel Installed Successfully - Laravel 10 CRUD Tutorial phpnodetuts.in

Now type cd your-project-name & press enter.

Now to run the Laravel app, type below command & press enter.

php artisan serve

Open your browser & type localhost:8000 in your address bar, & you will see that Laravel app is running successfully.

Welcome Page - Laravel 10 CRUD Tutorial phpnodetuts.in

Creating a Database

First we will create a Database for our Laravel CRUD application.

Type http://localhost/phpmyadmin in your browser to open phpMyAdmin & create a database named as laravel10_crud(you can give whatever name you like)

Now open your project folder in your favorite IDE, open .env file and enter database name as shown below.

Adding Database name in .env file - Laravel 10 CRUD Tutorial phpnodetuts.in

Creating Post Model

We will now create a Post model for our database. Open your terminal and enter below command, it will create a Post Model & create_posts_table migration file.

php artisan make:model Post -m

Here we are using -m flag which will automatically generate create_posts_table migration file.

Now we need to add fields in our migration file. Open create_posts_table migration file, which is inside database->migrations folder.

Now we will add two fields into our migration file, title & body .

The datatype of title will be string & the datatype of body field will be text.

Enter below lines after $table->id();

$table->string('title');
$table->text('body');

Now run the below command to migrate the database.

php artisan migrate

You will see the below screen after successful migration.

Creating migrations - Laravel 10 CRUD Tutorial phpnodetuts.in

Creating Layout File

We will create a layout file & add tailwind css cdn for styling for our Laravel 10 CRUD application.

Open views/components folder & create a folder/directory called “layouts”.

Now in the components folder, create a layout.blade.php file & add below code inside it.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>{{ $title ?? 'Laravel CRUD' }}</title>
  <script src="https://cdn.tailwindcss.com"></script>
    </head>
    <body class="bg-gray-100 dark:bg-gray-800 h-screen flex items-center justify-center transition duration-500">
        {{ $slot }}
    </body>
</html>

Creating Post Controller

Now We need to create PostController for our Laravel 10 CRUD app, so open your terminal & type below command to create PostController.

php artisan make:controller PostController

The above command will create a PostController.php file in Http/Controllers folder.

Create Method

First we will define create method, this method will be used to display the form to create/store data into the database. In your PostController.php file enter the below code :

public function create()
  {  
      return view('posts.create');
   }

create method - Laravel 10 CRUD Tutorial phpnodetuts.in

The above code will be used to display a view file named as create.blade.php which is inside posts Folder.

Creating View File

To display the Create form, we need to create a view file for our Laravel 10 CRUD Application.

Open resources/views folder & create a folder inside it named as “posts”.

Now in the posts folder, create a file called create.blade.php & enter below code inside it.

<x-layout>
    <div class="bg-white dark:bg-gray-900 p-8 rounded-lg shadow-md w-full md:w-1/2 lg:w-1/2">
        <h2 class="text-2xl font-semibold mb-4 text-gray-700 dark:text-yellow-500">Create Post</h2>
        <form>
            <div class="mb-4">
                <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Title</label>
                <input type="text" id="title" name="title" class="mt-1 p-2 border border-gray-300 dark:border-gray-600 rounded-md w-full" required>
            </div>
            <div class="mb-4">
                <label for="body" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Body</label>
                <textarea id="body" name="body" rows="4" class="mt-1 p-2 border border-gray-300 dark:border-gray-600 rounded-md w-full" required></textarea>
            </div>
            <button type="submit" class="bg-blue-500 dark:bg-yellow-500 text-white dark:text-gray-700 px-4 py-2 rounded-md hover:bg-blue-600 dark:hover:bg-yellow-400 dark:hover:text-gray-800">Create</button>
        </form>
    </div>
</x-layout>

Adding Route

Open routes/web.php file & enter our first route for create method. Add the below code inside web.php file.

Route::get('/posts/create', [PostController::class,'create'])->name('posts.create');

Don’t forget to import PostController.

use App\Http\Controllers\PostController;

create route - Laravel 10 CRUD Tutorial phpnodetuts.in

Now go to your browser & enter the url http://localhost:8000/posts/create, it will display the create form as below.

create view in browser - Laravel 10 CRUD Tutorial phpnodetuts.in

Store Method

Now we will create store method for our Laravel CRUD app, which will be used to store data into the database. Open PostController.php file & enter the below code.

public function store(Request $request)
    {
        $post = Post::create([
            'title' => $request->title,
            'body' => $request->body,
        ]);
    }

Don’t forget to Import Post model.

use App\Models\Post;

store method - Laravel 10 CRUD Tutorial phpnodetuts.in

Adding Validation

Now we will add validation to validate the inputs. Add below code into the store method.

$request->validate([
            'title' => 'required|unique:posts|max:255',
            'body' => 'required|min:3',
        ]);

Here in the validation rule required means the title field is required, it can not be blank. Moreover it should be unique title in the database & the maximum characters can be 255. The validation rule for body says that it is required & minimum 3 characters are required.

Livewire 3 Image CRUD(Image Upload) Tutorial

Now the store method should look like this:

public function store(Request $request)
    {
          $request->validate([
            'title' => 'required|unique:posts|max:255',
            'body' => 'required|min:3',
        ]);

        $post = Post::create([
            'title' => $request->title,
            'body' => $request->body,
        ]);

    }

Now add below code to redirect after the data has been inserted & to show the success message that the data has been inserted into the database.

return back()->with('success', 'Post Created');

The final code for store() method will look like this :

public function store(Request $request): RedirectResponse
    {
          $request->validate([
            'title' => 'required|unique:posts|max:255',
            'body' => 'required|min:3',
        ]);
        $post = Post::create([
            'title' => $request->title,
            'body' => $request->body,
        ]);
        return back()->with('success', 'Post Created');
    }

Now open create.blade.php file and add below code in form

<form action="{{route('posts.store')}}" method="POST">
     @csrf

Your form should look as below :

   <form action="{{route('posts.store')}}" method="POST">
                @csrf
            <div class="mb-4">
                <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Title</label>
                <input type="text" id="title" name="title" class="mt-1 p-2 border border-gray-300 dark:border-gray-600 rounded-md w-full" required>
            </div>
            <div class="mb-4">
                <label for="body" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Body</label>
                <textarea id="body" name="body" rows="4" class="mt-1 p-2 border border-gray-300 dark:border-gray-600 rounded-md w-full" required></textarea>
            </div>
            <button type="submit" class="bg-blue-500 dark:bg-yellow-500 text-white dark:text-gray-700 px-4 py-2 rounded-md hover:bg-blue-600 dark:hover:bg-yellow-400 dark:hover:text-gray-800">Create</button>
        </form>

Now before proceeding further we need to add route for our store() method, So open web.php file and enter below code after the create route.

Route::post('/posts/create', [PostController::class,'store'])->name('posts.store');

route for store - Laravel 10 CRUD Tutorial phpnodetuts.in

Now go to http://localhost:8000/posts/create

Enter title and body and click on the Create button.

create post form with data - Laravel 10 CRUD Tutorial phpnodetuts.in

Check the database and you will see that the entered data has been inserted into the database(table). See the image below.

data inserted into database - Laravel 10 CRUD Tutorial phpnodetuts.in

Show Success Message After data insert

Now, to display the flash message/success message enter below code into the create.blade.php file before <h2> tag.

	@if (session()->has('success'))
    <div class="relative flex flex-col sm:flex-row sm:items-center bg-gray-200 dark:bg-green-700 shadow rounded-md py-5 pl-6 pr-8 sm:pr-6 mb-3 mt-3">
        <div class="flex flex-row items-center border-b sm:border-b-0 w-full sm:w-auto pb-4 sm:pb-0">
            <div class="text-green-500" dark:text-gray-500>
                <svg class="w-6 sm:w-5 h-6 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            </div>
            <div class="text-sm font-medium ml-3">Success!.</div>
        </div>
        <div class="text-sm tracking-wide text-gray-500 dark:text-white mt-4 sm:mt-0 sm:ml-4"> {{ session('success') }}</div>
        <div class="absolute sm:relative sm:top-auto sm:right-auto ml-auto right-4 top-4 text-gray-400 hover:text-gray-800 cursor-pointer">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
        </div>
    </div>
@endif

display success message - Laravel 10 CRUD Tutorial phpnodetuts.in

Now if you try to add data, you will see a success message after the data has been inserted into the database.

Display success message in create view - Laravel 10 CRUD Tutorial phpnodetuts.in

Display Error Messages

Now we need to display the error message. Open create.blade.php file and add the below code after input title :

@error('title')
    <span class="text-red-500">{{ $message }}</span>
  @enderror

Add the below code after textarea input :

@error(body)
    <span class="text-red-500">{{ $message }}</span>
  @enderror

displaying error message for title and body - Laravel 10 CRUD Tutorial phpnodetuts.in

Now if you try to submit the form without entering data into title & textarea, you will see error messages :

displaying error messages in create form - Laravel 10 CRUD Tutorial phpnodetuts.in

Display Data

Now to display the posts we need to create index method. Open PostController.php file and add below code before the create() method :

public function index()
    {
        $posts = Post::all();
        return view('posts.index', compact('posts'));
    }

index method for showing all posts - Laravel 10 CRUD Tutorial phpnodetuts.in

Now we need to create a route for the index method, open web.php file and add below code before create route :

Route::get('/posts', [PostController::class,'index'])->name('posts.index');

route for index - Laravel 10 CRUD Tutorial phpnodetuts.in

Now we need to display posts in a table, so create a blade file called index.blade.php in views/posts folder. Add below code inside index.blade.php file

<x-layout>
        <div class="bg-white dark:bg-gray-900 p-8 rounded-lg shadow-md w-full md:w-1/2 lg:w-1/2">
            <div class="border h-full bg-slate-800 text-white p-10"> <span>
                    <h1 class="text-3xl font-semibold text-center mb-4 text-yellow-300">Posts</h1>
                </span>
                <div class="mt-6 leading-7 text-center">
                    @if(session()->has('success'))
                    <div class="text-green-500">
                        {{ session()->get('success') }}
                    </div>
                @endif
                {{-- table starts --}}
<div class="relative overflow-x-auto">
    <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 mb-2">
        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
            <tr>
                <th scope="col" class="px-6 py-3">
                    Title
                </th>
                <th scope="col" class="px-6 py-3">
                    Body
                </th>
                <th scope="col" class="px-6 py-3">
                    Actions
                </th>
            </tr>
        </thead>
        <tbody>
            @forelse ($posts as $post)
            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap 
                   dark:text-white">
                    {{$post->title}}
                </th>
                <td class="px-6 py-4">
                    {{$post->body}}
                </td>
                <td class="px-6 py-4">
                    <div class="flex">
                        <a class="" href="">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="ml-2 mt-0 w-4 h-4">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" />
                              </svg>
                            </a>
                            <a href="" class="">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="ml-2 mt-0 w-4 h-4">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                                  </svg></a>
                    </div>
                </td>
            </tr>
            @empty
                <p>No post found</p>
            @endforelse
        </tbody>
    </table>
</div>
                {{-- table ends --}}
                </div>
            </div>

        </div>
</x-layout>

Now open http://localhost:8000/posts and you will see all posts are displayed in the table.

showing all posts - Laravel 10 CRUD Tutorial phpnodetuts.in

Adding Pagination

Now, we will add pagination in the table. Open PostController.php file & add below code in the index method():

$posts = Post::paginate(5);

Showing pagination in index page - Laravel 10 CRUD Tutorial phpnodetuts.in

Now open index.blade.php file and enter below code after the </table> tag :

  {{ $posts->links()}}

Now add 10-20 posts & you will see pagination links .

Edit Post

Now to edit the post open PostController.php file and add below code after store() method:

  public function edit(Post $post)
    {
        return view('posts.edit', compact('post'));
    }

edit method - Laravel 10 CRUD Tutorial phpnodetuts.in

Here we are using Route Model binding.

Now open web.php file and add a route for edit method.

Route::get('/posts/{post}/edit', [PostController::class,'edit'])->name('posts.edit');

route for edit - Laravel 10 CRUD Tutorial phpnodetuts.in

Now we need to create a view file for showing Edit Form.

Create edit.blade.php file inside resources/views/posts folder. Add the below code inside edit.blade.php file.

<x-layout>
    <div class="bg-white dark:bg-gray-900 p-8 rounded-lg shadow-md w-full md:w-1/2 lg:w-1/2">
        @if (session()->has('success'))
        <div class="relative flex flex-col sm:flex-row sm:items-center bg-gray-200 dark:bg-green-700 shadow rounded-md py-5 pl-6 pr-8 sm:pr-6 mb-3 mt-3">
            <div class="flex flex-row items-center border-b sm:border-b-0 w-full sm:w-auto pb-4 sm:pb-0">
                <div class="text-green-500" dark:text-gray-500>
                    <svg class="w-6 sm:w-5 h-6 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                </div>
                <div class="text-sm font-medium ml-3">Success!.</div>
            </div>
            <div class="text-sm tracking-wide text-gray-500 dark:text-white mt-4 sm:mt-0 sm:ml-4"> {{ session('success') }}</div>
            <div class="absolute sm:relative sm:top-auto sm:right-auto ml-auto right-4 top-4 text-gray-400 hover:text-gray-800 cursor-pointer">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
            </div>
        </div>
    @endif
        <h2 class="text-2xl font-semibold mb-4 text-gray-700 dark:text-yellow-500">Edit Post</h2>
        <form>
         
            <div class="mb-4">
                <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Title</label>
                <input type="text" id="title" name="title" class="mt-1 p-2 border border-gray-300 dark:border-gray-600 rounded-md w-full" value="{{$post->title}}">
                @error('title')
                <span class="text-red-500">{{ $message }}</span>
            @enderror
            </div>

            <div class="mb-4">
                <label for="body" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Body</label>
                <textarea id="body" name="body" rows="4" class="mt-1 p-2 border border-gray-300 dark:border-gray-600 rounded-md w-full">{{$post->body}}
                </textarea>
                @error('body')
                <span class="text-red-500">{{ $message }}</span>
            @enderror
            </div>

            <button type="submit" class="bg-blue-500 dark:bg-yellow-500 text-white dark:text-gray-700 px-4 py-2 rounded-md hover:bg-blue-600 dark:hover:bg-yellow-400 dark:hover:text-gray-800">Update</button>
        </form>
    </div>
</x-layout>

Now open index.blade.php file and add below code in edit link :

<a class="" href="{{ route('posts.edit', $post)}}">

edit link in index view - Laravel 10 CRUD Tutorial phpnodetuts.in

Now click on edit link/button and you will see Edit Form with the data as below image.

edit view - Laravel 10 CRUD Tutorial phpnodetuts.in

Update Data

Now we need to update data, so we need to create update method. Open PostController.php file and add update() method below edit() method :

public function update(Post $post, Request $request)
    {
       $request->validate([
            'title' => 'required|max:255|unique:posts,title,' . $post->id,
            'body' => 'required|min:3',
        ]);
        $post->update($request->all());
        return redirect()->route('posts.index')->with('success', 'Post updated');
    }

update method - Laravel 10 CRUD Tutorial phpnodetuts.in

Now we need to create a route for update. Open web.php and enter below code after edit route.

Route::put('/posts/{post}', [PostController::class,'update'])->name('posts.update');

route for update - Laravel 10 CRUD Tutorial phpnodetuts.in

Now open edit.blade.php file and add below code in the form :

<form action="{{route('posts.update', $post)}}" method="POST">
    @csrf
   @method('PUT')

Now click on edit link and try to edit a post & the post will get updated.

button for edit - Laravel 10 CRUD Tutorial phpnodetuts.in

edit view for updating data - Laravel 10 CRUD Tutorial phpnodetuts.in

As you can see the post has been updated and you will be redirected to the index page.

success message for update - Laravel 10 CRUD Tutorial phpnodetuts.in

Deleting Post

Open PostController.php file & add below code after update method.

 public function destroy(Post $post)
    {
        $post->delete();
        return redirect()->route('posts.index')->with('success', 'Post deleted');
    }

destroy method - Laravel 10 CRUD Tutorial phpnodetuts.in

Now we need to add route for delete method. Open web.php file and add below code after update method.

Route::delete('/posts/{post}', [PostController::class,'destroy'])->name('posts.destroy');

route for destroy - Laravel 10 CRUD Tutorial phpnodetuts.in

Now we need to add the delete route in Delete link/button. Open index.blade.php file and replace delete button/link code with below code :

<form action="{{ route('posts.destroy', $post->id) }}" method="POST">
                          @csrf
                          @method('DELETE')
                            <button type="submit" class="">
                                <a href="{{ route('posts.destroy', $post)}}" class="btn btn-secondary" type="submit">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="ml-2 mt-0 w-4 h-4">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                                    </svg>
                                  </a>
                            </button>
                    </form>

link for delete in index view - Laravel 10 CRUD Tutorial phpnodetuts.in

Now try to delete any Post and you will see that the Post can be deleted now.

Show Single Post

Now if you want to show a single Post then open PostController.php file and add below code after the store() method.

public function show(Post $post)
    {
        return view('posts.show', compact('post'));
    }

show method - Laravel 10 CRUD Tutorial phpnodetuts.in

Now open web.php file and enter the below route after the store route.

Route::get('/posts/{post}', [PostController::class,'show'])->name('posts.show');

route for show - Laravel 10 CRUD Tutorial phpnodetuts.in

Now create show.blade.php file inside resources/views/posts folder. Add below code inside the show.blade.php file.

<x-layout>

    <div class="bg-white dark:bg-gray-900 p-8 rounded-lg shadow-md w-full md:w-1/2 lg:w-1/2">
        <div class="border h-full bg-gray-100 dark:bg-slate-800 text-white p-10"> <span>
                <h1 class="text-3xl font-semibold text-center mb-4 text-gray-800 dark:text-yellow-300">Show Post</h1>
            </span>
            {{-- table starts --}}
<div class="relative overflow-x-auto">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 mb-2">
    <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
        <tr>

            <th scope="col" class="px-6 py-3">
                Title
            </th>
            <th scope="col" class="px-6 py-3">
                Body
            </th>
            <th scope="col" class="px-6 py-3">
                Actions
            </th>
        </tr>

    </thead>
    <tbody>
        <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
            <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                {{$post->title}}
            </th>
            <td class="px-6 py-4">
                {{$post->body}}
            </td>
            <td class="px-6 py-4">
                <div class="flex">
                    <a class="" href="{{ route('posts.edit', $post)}}">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="ml-2 mt-0 w-4 h-4">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" />
                          </svg>
                        </a>
                 <form action="{{ route('posts.destroy', $post->id) }}" method="POST">
                      @csrf
                      @method('DELETE')
                        <button type="submit" class="">
                            <a href="{{ route('posts.destroy', $post)}}" class="btn btn-secondary" type="submit">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="ml-2 mt-0 w-4 h-4">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                                </svg>
                              </a>
                        </button>
                </form>
                </div>
            </td>
        </tr>
    </tbody>
</table>
</div>
            {{-- table ends --}}
            </div>
        </div>
    </div>
</x-layout>

We need to add a link in the index.blade.php file to view the single post. Open index.blade.php file and add the below code after edit link/button.

<a class="" href="{{ route('posts.show', $post)}}">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="ml-2 mt-0 w-4 h-4">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                 </svg>
                            </a>

Now open your browser and go to the url http://localhost:8000/posts. You can see that now the show icon is visible.

Now click on any show icon of a Post, a single post will be displayed.

single post view - Laravel 10 CRUD Tutorial phpnodetuts.in

Adding Create Button

Now we will add a button on the index page to create a Post.

Open index.blade.php file and add below code before the <h1> tag.

<a href="{{ route('posts.create') }}" class="bg-blue-500 dark:bg-yellow-500 text-white dark:text-gray-700 px-4 py-2 rounded-md hover:bg-blue-600 dark:hover:bg-yellow-400 dark:hover:text-gray-800">Create</a>

link for create button in index view - Laravel 10 CRUD Tutorial phpnodetuts.in

You will see a Create button as shown in the below image.

Adding Back button

Now we will add Back button in create, edit & show file. Open create.blade.php file and add below code before the success message starts.

<div class="flex">
            <a href="{{ route('posts.index') }}" class="mb-2 bg-blue-500 dark:bg-yellow-500 text-white dark:text-gray-700 px-4 py-2 rounded-md hover:bg-blue-600 dark:hover:bg-yellow-400 dark:hover:text-gray-800">
                Back</a> <br>
        </div>

link for back button in create view - Laravel 10 CRUD Tutorial phpnodetuts.in

Open edit.blade.php file and add below code before the success message starts.

<div class="flex">
            <a href="{{ route('posts.index') }}" class="mb-2 bg-blue-500 dark:bg-yellow-500 text-white dark:text-gray-700 px-4 py-2 rounded-md hover:bg-blue-600 dark:hover:bg-yellow-400 dark:hover:text-gray-800">
                Back</a> <br>
        </div>

link for back button in edit view - Laravel 10 CRUD Tutorial phpnodetuts.in

You will see Back button as shown in below image.

back button in edit view - Laravel 10 CRUD Tutorial phpnodetuts.in

Open show.blade.php file and add below code before the <h1> tag.

<div class="flex">
            <a href="{{ route('posts.index') }}" class="mb-2 bg-blue-500 dark:bg-yellow-500 text-white dark:text-gray-700 px-4 py-2 rounded-md hover:bg-blue-600 dark:hover:bg-yellow-400 dark:hover:text-gray-800">
                Back</a> <br>
        </div>

link for back button in show view - Laravel 10 CRUD Tutorial phpnodetuts.in

Conclusion

This Laravel 10 CRUD tutorial has provided a comprehensive overview of building a complete web application that performs Create, Read, Update, and Delete operations. We covered setting up the development environment, creating models and migrations, implementing routes and controllers, handling forms and validation, and enhancing the user interface with Blade templating. By mastering these concepts, you’re now equipped to create dynamic and interactive web applications using Laravel’s powerful features. This tutorial serves as a strong foundation for further exploration and development in the Laravel ecosystem.