Laravel 11 CRUD Application Example Tutorial

Mar 2024

ITSolutionsGuides

Category: Laravel

Welcome To ITSolutionsGuides,

Laravel 11 CRUD Application Example Tutorial ! We'll guide you through creating a model, migration, routes, and controller methods to manage data (Create, Read, Update, Delete) using Artisan commands and Blade views. By following these steps, you'll establish a solid foundation for building dynamic Laravel applications using it solutions guides tutorial Laravel 11 CRUD Application Example Tutorial . By following the steps we will learn the Laravel 11 CRUD easier,

Laravel 11 CRUD Application Example Tutorial,

Step 1: Install Laravel 11
Step 2: Update Database Configuration
Step 3: Create Migration & Model
Step 4: Create Request Validation Class
Step 5: Create Controller
Step 6: Create Route
Step 7: Update AppServiceProvider
Step 8: Create Blade Files
Step 9: Run Laravel App

In this example we will create CRUD operations with the product example by create, read, update, and delete,

Let's Start Coding

Lets install laravel 11 using the artisan command,

laravel new laravel11_crud

after installing lets setup the database configurations in .env file

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database name
DB_USERNAME=database username
DB_PASSWORD=database password

Let's Create Model & Migration

Let's Create Model & Migration using the artisan command,

php artisan make:model Product -m

This command will create both the models and the migration files, for detailed explanation about creating migration

app/Models/Product.php

<?php
  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class Product extends Model
{
    use HasFactory;
  
    protected $fillable = [
        'name',
        'detail',
    ];
}

Let's Create Migration

Lets add the required columns in the migration,

<?php
  
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
  
return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->text('detail');
            $table->timestamps();
        });
    }
  
    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('products');
    }
};

Let's Create Form Request Validation Class

Lets run the migrations using the following artisan command,

php artisan migrate

afterrunning the migrations lets create the validation class using the following artisan command,

php artisan make:request ProductStoreRequest

app/Http/Requests/ProductStoreRequest.php

<?php
  
namespace App\Http\Requests;
  
use Illuminate\Foundation\Http\FormRequest;
  
class ProductStoreRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     */
    public function authorize(): bool
    {
        return true;
    }
  
    /**
     * Get the validation rules that apply to the request.
     *
     * @return array|string>
     */
    public function rules(): array
    {
        return [
            'name' => 'required',
            'detail' => 'required'
        ];
    }
}

Let's Create Form Request Validation Class

Lets create the request validation using the following artisan command,

php artisan make:request ProductUpdateRequest

app/Http/Requests/ProductUpdateRequest.php

<?php
   
namespace App\Http\Requests;
  
use Illuminate\Foundation\Http\FormRequest;
  
class ProductUpdateRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     */
    public function authorize(): bool
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array|string>
     */
    public function rules(): array
    {
        return [
            'name' => 'required',
            'detail' => 'required'
        ];
    }
}

Let's Create Controller

Lets create the resource controller using the artisan command,

php artisan make:controller ProductController --resource

the above artisan command will create the resource controller with default functions index(), create(), store(), show(), edit(), update(), destroy() since we used the --resource flag in the artisan command.

app/Http/Controllers/ProductController.php

<?php
    
namespace App\Http\Controllers;
    
use App\Models\Product;
use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use Illuminate\View\View;
use App\Http\Requests\ProductStoreRequest;
use App\Http\Requests\ProductUpdateRequest;
    
class ProductController extends Controller
{
    /**
     * Display a listing of the resource.
     */
    public function index(): View
    {
        $products = Product::latest()->paginate(5);
          
        return view('products.index', compact('products'))
                    ->with('i', (request()->input('page', 1) - 1) * 5);
    }
    
    /**
     * Show the form for creating a new resource.
     */
    public function create(): View
    {
        return view('products.create');
    }
    
    /**
     * Store a newly created resource in storage.
     */
    public function store(ProductStoreRequest $request): RedirectResponse
    {   
        Product::create($request->validated());
           
        return redirect()->route('products.index')
                         ->with('success', 'Product created successfully.');
    }
  
    /**
     * Display the specified resource.
     */
    public function show(Product $product): View
    {
        return view('products.show',compact('product'));
    }
  
    /**
     * Show the form for editing the specified resource.
     */
    public function edit(Product $product): View
    {
        return view('products.edit',compact('product'));
    }
  
    /**
     * Update the specified resource in storage.
     */
    public function update(ProductUpdateRequest $request, Product $product): RedirectResponse
    {
        $product->update($request->validated());
          
        return redirect()->route('products.index')
                        ->with('success','Product updated successfully');
    }
  
    /**
     * Remove the specified resource from storage.
     */
    public function destroy(Product $product): RedirectResponse
    {
        $product->delete();
           
        return redirect()->route('products.index')
                        ->with('success','Product deleted successfully');
    }
}

Let's Create Routes

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\ProductController;
  
Route::get('/', function () {
    return view('welcome');
});
  
Route::resource('products', ProductController::class);

Let's Update AppServiceProvider

We will use bootstrap 5 for pagination, In laravel 11 we need to update the AppServiceProvider.php

app/Provides/AppServiceProvider.php

<?php
  
namespace App\Providers;
  
use Illuminate\Support\ServiceProvider;
use Illuminate\Pagination\Paginator;
  
class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
           
    }
  
    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        Paginator::useBootstrapFive();
    }
}

Let's Create Blade Files

resources/views/products/layout.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 11 CRUD Application Example Tutorial - ITSolutionsGuides</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>

Let's Create Blade Files

resources/views/products/index.blade.php

@extends('products.layout')
   
@section('content')
  
<div class="card mt-5">
  <h2 class="card-header">Laravel 11 CRUD Application Example Tutorial - ITSolutionsGuides</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('products.create') }}"> <i class="fa fa-plus"></i> Create New Product</a>
        </div>
  
        <table class="table table-bordered table-striped mt-4">
            <thead>
                <tr>
                    <th width="80px">No</th>
                    <th>Name</th>
                    <th>Details</th>
                    <th width="250px">Action</th>
                </tr>
            </thead>
  
            <tbody>
            @forelse ($products as $product)
                <tr>
                    <td>{{ ++$i }}</td>
                    <td>{{ $product->name }}</td>
                    <td>{{ $product->detail }}</td>
                    <td>
                        <form action="{{ route('products.destroy',$product->id) }}" method="POST">
             
                            <a class="btn btn-info btn-sm" href="{{ route('products.show',$product->id) }}"><i class="fa-solid fa-list"></i> Show</a>
              
                            <a class="btn btn-primary btn-sm" href="{{ route('products.edit',$product->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>
        
        {!! $products->links() !!}
  
  </div>
</div>  
@endsection

Let's Create Blade Files

resources/views/products/create.blade.php

@extends('products.layout')
    
@section('content')
  
<div class="card mt-5">
  <h2 class="card-header">Add New Product</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('products.index') }}"><i class="fa fa-arrow-left"></i> Back</a>
    </div>
  
    <form action="{{ route('products.store') }}" method="POST">
        @csrf
  
        <div class="mb-3">
            <label for="inputName" class="form-label"><strong>Name:</strong></label>
            <input 
                type="text" 
                name="name" 
                class="form-control @error('name') is-invalid @enderror" 
                id="inputName" 
                placeholder="Name">
            @error('name')
                <div class="form-text text-danger">{{ $message }}</div>
            @enderror
        </div>
  
        <div class="mb-3">
            <label for="inputDetail" class="form-label"><strong>Detail:</strong></label>
            <textarea 
                class="form-control @error('detail') is-invalid @enderror" 
                style="height:150px" 
                name="detail" 
                id="inputDetail" 
                placeholder="Detail"></textarea>
            @error('detail')
                <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

Let's Create Blade Files

resources/views/products/edit.blade.php

@extends('products.layout')
    
@section('content')
  
<div class="card mt-5">
  <h2 class="card-header">Edit Product</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('products.index') }}"><i class="fa fa-arrow-left"></i> Back</a>
    </div>
  
    <form action="{{ route('products.update',$product->id) }}" method="POST">
        @csrf
        @method('PUT')
  
        <div class="mb-3">
            <label for="inputName" class="form-label"><strong>Name:</strong></label>
            <input 
                type="text" 
                name="name" 
                value="{{ $product->name }}"
                class="form-control @error('name') is-invalid @enderror" 
                id="inputName" 
                placeholder="Name">
            @error('name')
                <div class="form-text text-danger">{{ $message }}</div>
            @enderror
        </div>
  
        <div class="mb-3">
            <label for="inputDetail" class="form-label"><strong>Detail:</strong></label>
            <textarea 
                class="form-control @error('detail') is-invalid @enderror" 
                style="height:150px" 
                name="detail" 
                id="inputDetail" 
                placeholder="Detail">{{ $product->detail }}</textarea>
            @error('detail')
                <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

Let's Create Blade Files

resources/views/products/show.blade.php

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

<div class="card mt-5">
  <h2 class="card-header">Show Product</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('products.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>Name:</strong> <br/>
                {{ $product->name }}
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 mt-2">
            <div class="form-group">
                <strong>Details:</strong> <br/>
                {{ $product->detail }}
            </div>
        </div>
    </div>
  
  </div>
</div>
@endsection

Let's Run the Application

Lets run laravel 11 application using the following artisan command,

php artisan serve

We hope it helps everyone. Thanks for supporting ITSolutionsGuides and keep supporting us also follow us in social media platforms.

Tools

Color Picker HEX, RGB,HSLA

Webp Convertor

Words & Character Counter

Image Size Compresser

Online Text Editor

Image Any Format Convertor

Laravel 11 CRUD Application Example Tutorial

Let's Start Coding

Let's Create Model & Migration

Let's Create Migration

Let's Create Form Request Validation Class

Let's Create Form Request Validation Class

Let's Create Controller

Let's Create Routes

Let's Update AppServiceProvider

Let's Create Blade Files

Let's Create Blade Files

Let's Create Blade Files

Let's Create Blade Files

Let's Create Blade Files

Let's Run the Application

Recent Posts

How To Create Typing Animation Effect Using JQuery

How To Create Typing Animation Effect In CSS

How To Check Plain Text Matches Hashed Password In Laravel

How To Create One to One Model Relationship In Laravel 11 using Example

Ajax CRUD Operation In Laravel 11 Example

How To Change Date Format In Laravel 11

How To Create Custom Helper Functions In Laravel 11

How To Generate PDF File In Laravel 11 using DomPDF

How to Create Form Validation in Laravel 11

How To Import and Export Excel and CSV File In Laravel 11

Popular Posts

Take Photo and Save From Webcam Camera Laravel

How to Add Dynamic Carousel Slider in Laravel

Laravel 10 REST API Authentication Using Sanctum

How to Capitalize First Letter of String in Laravel

Create Custom Forgot Password Using Email Verification In Laravel 10

How To Create Custom Login and Registration In Laravel 10

How To Create AJAX CRUD Operation In Laravel 10

How to Create Laravel Signature Pad Example

How To Install Laravel 11 Unreleased Developer Version

How to Disable a Anchor Tag in HTML

Category

Recent Posts

How To Create Typing Animation Effect Using JQuery

How To Create Typing Animation Effect In CSS

How To Check Plain Text Matches Hashed Password In Laravel

How To Create One to One Model Relationship In Laravel 11 using Example

Ajax CRUD Operation In Laravel 11 Example

How To Change Date Format In Laravel 11

How To Create Custom Helper Functions In Laravel 11

How To Generate PDF File In Laravel 11 using DomPDF

How to Create Form Validation in Laravel 11

How To Import and Export Excel and CSV File In Laravel 11

Tools

Subscribe for NewsLetter

Quick Links

Contact US