Laravel 11 crud application tutorial

Hi, In this tutorial, we will learn how to create a CRUD application using Laravel 11 .

First of all when creating a CRUD application using Laravel we will create a blog table with title and description field using the Laravel 11 migration. After that we will create routes , controller, views and model files for creating the CRUD application for blog modules. In this example we will use the Bootstrap 5 for design template. So, let's start the following steps to create a CRUD application using the Laravel 11

Steps to create CRUD application in Laravel 11

Step 1: How to install Laravel 11

Here we will install a fresh Laravel 11 version using the composer. To install the Laravel we need to open a command prompt to run the below command

composer create-project laravel/laravel blog

Step 2: MySQL Database Configuration

We are using MySql here. So we need to connect the database using the following details like database name, username and password in the .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=[#database_name]
DB_USERNAME=[#database_user_name]
DB_PASSWORD=[#database_password]

Step 3: Create Migration table

After the database connection we will create a blog table with a title & description field. To create the table we will run the following command to create the table using the Laravel migration.

php artisan make:migration create_blogs_table --create=blogs

After running the above command, that will create a migration file under the database/migrations folder. We will write the following code in the created migration file like below.

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
  
return new class extends Migration
{    
    public function up(): void
    {
        Schema::create('blogs', function (Blueprint $table) {
            $table->id();
            $table->string(‘title’);
            $table->text('description');
            $table->timestamps();
        });
    }
  
    public function down(): void
    {
        Schema::dropIfExists(‘blogs’);
    }
};

now by running the following command you can create the blogs table:

php artisan migrate

Step 3: Create Form Request Validation Class

Here we are going to create a form request validation class for creating and updating the blog events in the controller. In this class we will define validation rules and use it in the controller.

php artisan make:request BlogStoreRequest

Now just copy the below code paste in your file below

app/Http/Requests/BlogStoreRequest.php

  
namespace App\Http\Requests;  
use Illuminate\Foundation\Http\FormRequest;
  
class BlogStoreRequest extends FormRequest
{   
    public function authorize(): bool
    {
        return true;
    }
  
    public function rules(): array
    {
        return [
            'title' => 'required',
            'description' => 'required'
        ];
    }
}

Then, we are doing the same thing for Update request class

php artisan make:request BlogUpdateRequest

Just copy paste the code in your request class:

app/Http/Requests/BlogUpdateRequest.php

  
namespace App\Http\Requests;  
use Illuminate\Foundation\Http\FormRequest;
  
class BlogUpdateRequest extends FormRequest
{
    public function authorize(): bool
    {
        return true;
    }

    public function rules(): array
    {
        return [
            'title' => 'required',
            'description' => 'required'
        ];
    }
}

Step 5: Create Controller and Model

In this step, we are going to create a new resource controller named BlogController. So, to create the controller let’s run the following command that will create a controller.

php artisan make:controller BlogController --resource --model=Blog

After running the command, you will find a new file at this path: "app/Http/Controllers/BlogController.php".

So, let's copy and paste the code below in your controller BlogController.php file.

app/Http/Controllers/BlogController.php

namespace App\Http\Controllers;
    
use App\Models\Blog;
use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use Illuminate\View\View;
use App\Http\Requests\BlogStoreRequest;
use App\Http\Requests\BlogUpdateRequest;
    
class BlogController extends Controller
{
	
	public function index(): View
	{
    		$blogs = Blog::latest()->paginate(5);
     	 
    		return view('blogs.index', compact('blogs'))
                	->with('i', (request()->input('page', 1) - 1) * 5);
	}
    
	public function create(): View
	{
    		return view('blogs.create');
	}
    
	public function store(BlogStoreRequest $request): RedirectResponse
	{   
    		Blog::create($request->validated());
      	 
    		return redirect()->route('blogs.index')
                     	->with('success', 'Blog created successfully.');
	}
 
	
	public function show(Blog $blog): View
	{
    		return view('blogs.show',compact('blog'));
	}
 
	public function edit(Blog $blog): View
	{
    		return view('blogs.edit',compact('blog'));
	}
 
	public function update(BlogUpdateRequest $request, Blog $blog): RedirectResponse
	{
    		$blog->update($request->validated());
     	 
    		return redirect()->route('blogs.index')
                    	->with('success','Blog updated successfully');
	}
 
	public function destroy(Blog $blog): RedirectResponse
	{
    		$blog->delete();
      	 
    		return redirect()->route('blogs.index')
                    	->with('success','Blog deleted successfully');
	}
}

and also update the BlogModel to the following code

app/Models/Blog.php

  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class Blog extends Model
{
    use HasFactory;
  
    protected $fillable = [
        'title',
        'description',
    ];
}

Step 6: Add Resource Route

In this step we will add a Laravel resource route to create a CRUD application. So, open your “routes/web.php” file and add the following code below.

routes/web.php

  
use Illuminate\Support\Facades\Route;  
use App\Http\Controllers\BlogController;
  
Route::get('/', function () {
    return view('welcome');
});
  
Route::resource('blogs', BlogController::class);

Step 7: Add Blade View Files

In this step we will create a few blade files. So, first of all create a layout file and then a new folder called blogs and inside the blog folder we will create blade files used for the CRUD application. Now create the following blade files as below.

resources/views/blogs/layout.blade.php

<!DOCTYPE html>
<html>
<head>
	<title>Laravel 11 CRUD Application Tutorial - phpgeeks.in</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
</head>
<body>
 	 
<div class="container">
	@yield('content')
</div>
 	 
</body>
</html>

resources/views/blogs/index.blade.php

@extends(blogs.layout')
   
@section('content')
 
<div class="card mt-5">
  <h2 class="card-header">Laravel 11 CRUD tutorial - phpgeeks.in</h2>
  <div class="card-body">
     	 
    	@session('success')
        	<div class="alert alert-success" role="alert"> {{ $value }} </div>
    	@endsession
 
    	<div class="d-grid gap-2 d-md-flex justify-content-md-end">
        	<a class="btn btn-success btn-sm" href="{{ route('blogs.create') }}"> <i class="fa fa-plus"></i> Create New Blog</a>
    	</div>
 
    	<table class="table table-bordered table-striped mt-4">
        	<thead>
            	<tr>
                	<th width="80px">No</th>
                	<th>Title</th>
                	<th>Description</th>
                	<th width="250px">Action</th>
            	</tr>
        	</thead>
 
        	<tbody>
        	@forelse ($blogs as $blog)
            	<tr>
                	<td>{{ ++$i }}</td>
                	<td>{{ $blog->title }}</td>
                	<td>{{ $blog->description }}</td>
                	<td>
                    	<form action="{{ route('blogs.destroy',$blog->id) }}" method="POST">
        	 
                        	<a class="btn btn-info btn-sm" href="{{ route('blogs.show',$blog->id) }}"><i class="fa-solid fa-list"></i> Show</a>
         	 
                        	<a class="btn btn-primary btn-sm" href="{{ route('blogs.edit',$blog->id) }}"><i class="fa-solid fa-pen-to-square"></i> Edit</a>
        	 
                        	@csrf
                        	@method('DELETE')
           	 
                        	<button type="submit" class="btn btn-danger btn-sm"><i class="fa-solid fa-trash"></i> Delete</button>
                    	</form>
                	</td>
            	</tr>
        	@empty
            	<tr>
                	<td colspan="4">There are no data.</td>
            	</tr>
        	@endforelse
        	</tbody>
 
    	</table>
   	 
    	{!! $blogs->links() !!}
 
  </div>
</div>  
@endsection

resources/views/blogs/create.blade.php

@extends('blogs.layout')
    
@section('content')
 
<div class="card mt-5">
  <h2 class="card-header">Add New Blog</h2>
  <div class="card-body">
 
	<div class="d-grid gap-2 d-md-flex justify-content-md-end">
    	<a class="btn btn-primary btn-sm" href="{{ route('blogs.index') }}"><i class="fa fa-arrow-left"></i> Back</a>
	</div>
 
	<form action="{{ route('blogs.store') }}" method="POST">
    	@csrf
 
    	<div class="mb-3">
        	<label for="inputTitle" class="form-label"><strong>Title:</strong></label>
        	<input
            	type="text"
            	name="title"
            	class="form-control @error('title') is-invalid @enderror"
            	id="inputTitle"
            	placeholder="Title">
        	@error('name')
            	<div class="form-text text-danger">{{ $message }}</div>
        	@enderror
    	</div>
 
    	<div class="mb-3">
        	<label for="inputDescription" class="form-label"><strong>Description:</strong></label>
        	<textarea
            	class="form-control @error('description') is-invalid @enderror"
            	style="height:150px"
            	name="description"
            	id="inputDescription"
            	placeholder="Detail"></textarea>
        	@error('description')
            	<div class="form-text text-danger">{{ $message }}</div>
        	@enderror
    	</div>
    	<button type="submit" class="btn btn-success"><i class="fa-solid fa-floppy-disk"></i> Submit</button>
	</form>
 
  </div>
</div>
@endsection

resources/views/blogs/edit.blade.php

@extends('blogs.layout')
    
@section('content')
 
<div class="card mt-5">
  <h2 class="card-header">Edit Blog</h2>
  <div class="card-body">
 
	<div class="d-grid gap-2 d-md-flex justify-content-md-end">
    	<a class="btn btn-primary btn-sm" href="{{ route('blogs.index') }}"><i class="fa fa-arrow-left"></i> Back</a>
	</div>
 
	<form action="{{ route('blogs.update',$blog->id) }}" method="POST">
    	@csrf
    	@method('PUT')
 
    	<div class="mb-3">
        	<label for="inputTitle" class="form-label"><strong>Title:</strong></label>
        	<input
            	type="text"
            	name="title"
            	value="{{ $blog->title }}"
            	class="form-control @error('title') is-invalid @enderror"
            	id="inputTitle"
            	placeholder="Title">
        	@error('title')
            	<div class="form-text text-danger">{{ $message }}</div>
        	@enderror
    	</div>
 
    	<div class="mb-3">
        	<label for="inputDescription" class="form-label"><strong>Description:</strong></label>
        	<textarea
            	class="form-control @error('description') is-invalid @enderror"
            	style="height:150px"
            	name="description"
            	id="inputDescription"
            	placeholder="Description">{{ $product->description }}</textarea>
        	@error('description')
            	<div class="form-text text-danger">{{ $message }}</div>
        	@enderror
    	</div>
    	<button type="submit" class="btn btn-success"><i class="fa-solid fa-floppy-disk"></i> Update</button>
	</form>
 
  </div>
</div>
@endsection

resources/views/blogs/show.blade.php

@extends('blogs.layout')
 
@section('content')

<div class="card mt-5">
  <h2 class="card-header">Show Blog</h2>
  <div class="card-body">
 
	<div class="d-grid gap-2 d-md-flex justify-content-md-end">
    	<a class="btn btn-primary btn-sm" href="{{ route('blogs.index') }}"><i class="fa fa-arrow-left"></i> Back</a>
	</div>
 
	<div class="row">
    	<div class="col-xs-12 col-sm-12 col-md-12">
        	<div class="form-group">
            	<strong>Title:</strong> <br/>
            	{{ $blog->title }}
        	</div>
    	</div>
    	<div class="col-xs-12 col-sm-12 col-md-12 mt-2">
        	<div class="form-group">
            	<strong>Description:</strong> <br/>
            	{{ $blog->description }}
        	</div>
    	</div>
	</div>
 
  </div>
</div>
@endsection

Now,all the required steps that needed to create a CRUD application has been done. Now, you can run the below and and press the enter to see the above out on browser.

php artisan serve

Now, open your web browser and copy paste the following URL to see the app output:

http://localhost:8000/products