Laravel 12 CRUD (Create, Read, Update and Delete) with Search and Pagination

Laravel 12 CRUD (Create, Read, Update and Delete) with Search and Pagination

Download Laravel App

https://laravel.com/docs/12.x/installation

Connecting our Database

open .env file root directory.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=laravel12dev
DB_USERNAME=root
DB_PASSWORD=root

Database Migration
php artisan migrate

myapp>php artisan migrate
Migration table created successfully.

check database table
Creating Controller

php artisan make:controller ProductController
myapp>php artisan make:controller ProductController
change it with the following codes:
app\Http\Controllers\ProductController.php

//app\Http\Controllers\ProductController.php
<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Models\Product;
use Illuminate\Support\Facades\DB;
 
class ProductController extends Controller
{
    public function index(Request $request)
    {
        //$products = Product::get();
        //$products = Product::Paginate(5); // Product::simplePaginate(5); (Next/Prev Buttons)
        $products = Product::orderBy('id', 'ASC')->paginate(5);
        return view('products.index', compact('products'));
    }
 
    public function search(Request $request)
    {
        if (!empty($request)) {
            $search = $request->input('search');
 
            $products = Product::where(
                'name',
                'like',
                "$search%"
            )
                ->orWhere('detail', 'like', "$search%")
                ->paginate(5);
 
            return view('products.index', compact('products'));
        }
 
        $products = DB::table('products')
            ->orderBy('id', 'DESC')
            ->paginate(5);
        return view('products.index', compact('products'));
    }
 
    public function create(Request $request)
    {
        return view('products.create');
    }
 
    public function store(Request $request)
    {
        $request->validate([
            "name" => "required",
            "detail" => "required",
        ]);
 
        Product::create([
            "name" => $request->name,
            "detail" => $request->detail
        ]);
 
        return redirect()->route('products.index')
            ->with('success', 'Product created successfully.');
    }
 
    public function show(Product $product)
    {
        return view('products.show', compact('product'));
    }
 
    public function edit(Product $product)
    {
        return view('products.edit', compact('product'));
    }
 
    public function update(Request $request, Product $product)
    {
        $request->validate([
            "name" => "required",
            "detail" => "required",
        ]);
 
        $product->update([
            "name" => $request->name,
            "detail" => $request->detail
        ]);
 
        return redirect()->route('products.index')
            ->with('success', 'Product updated successfully.');
    }
 
    public function destroy(Request $request, Product $product)
    {
        $product->delete();
        return redirect()->route('products.index')
            ->with('success', 'Product deleted successfully.');
    }
}

Creating Model
php artisan make:model Product -m
myapp>php artisan make:model Product -m

This will create our model in the form of File.php file located : app\Models\Product.php

we put -m when we create our model.
this will automatically make the migration for our model and you will see that in yourproject/database/migrations
myapp\database\migrations\create_products_table.php
edit code myapp\database\migrations\create_products_table.php

//myapp\database\migrations\create_products_table.php
return new class extends Migration
{
    public function up(): void
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string("name");
            $table->text("detail");
            $table->timestamps();
        });
    }
 
    public function down(): void
    {
        Schema::dropIfExists('products');
    }
};

php artisan migrate

myapp>php artisan migrate

Create View File resources/views/layouts/app.blade.php

//resources/views/layouts/app.blade.php
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel 12 CRUD (Create, Read, Update and Delete) with Search and Pagination</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
 
<body>
 
    <div class="container">
        @yield("content")
    </div>
 
</body>
 
</html>

resources/views/products/index.blade.php

//resources/views/products/index.blade.php
@extends("layouts.app")
 
@section("content")
<div class="card mt-5">
    <div class="bg-primary py-3">
        <h3 class="text-white text-center">Laravel 12 CRUD (Create, Read, Update and Delete) with Search and Pagination</h3>
    </div>
    <div class="card-header">
        <h4>Product List</h4>
    </div>
    <div class="card-body">
 
        @session("success")
        <div class="alert alert-success">{{ $value }}</div>
        @endsession
 
        <a href="{{ route('products.create') }}" class="btn btn-success btn-sm mb-3"> <i class="fa fa-plus"></i> Create Product</a>
        <form method="GET" action="/products/search">
            <div class="input-group" style="margin-right:5px;">
                <div class="form-outline" data-mdb-input-init>
                    <input class="form-control" name="search" placeholder="Searh..." value="{{ request()->input('search') ? request()->input('search') : '' }}">
                </div>
                <button type="submit" class="btn btn-success">Search</button>
            </div>
        </form>
 
        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th width="50px">ID</th>
                    <th>Name</th>
                    <th>Detail</th>
                    <th width="250px">Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach($products as $product)
                <tr>
                    <td>{{ $product->id }}</td>
                    <td>{{ $product->name }}</td>
                    <td>{{ $product->detail }}</td>
                    <td>
                        <form action="{{ route('products.destroy', $product->id) }}" method="POST">
                            @csrf
                            @method('DELETE')
 
                            <a href="{{ route('products.show', $product->id) }}" class="btn btn-primary btn-sm"><i class="fa fa-eye"></i> View</a>
                            <a href="{{ route('products.edit', $product->id) }}" class="btn btn-info btn-sm"><i class="fa fa-pencil"></i> Edit</a>
 
                            <button class="btn btn-danger btn-sm"><i class="fa fa-trash"></i> Delete</button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        <div class="d-flex custom-pagination">
            {{ $products->links('pagination::bootstrap-5') }}
        </div>
    </div>
</div>
@endsection

resources/views/products/create.blade.php

//resources/views/products/create.blade.php
@extends("layouts.app")
 
@section("content")
<div class="card mt-5">
    <div class="card-header">
        <h4>Product Create</h4>
    </div>
    <div class="card-body">
        <a href="{{ route('products.index') }}" class="btn btn-info btn-sm mb-3"><i class="fa fa-arrow-left"></i> Back</a>
 
        <form action="{{ route('products.store') }}" method="POST">
            @csrf
 
            <div class="mt-2">
                <label for="">Name:</label>
                <input type="text" name="name" placeholder="Name" class="form-control">
                @error("name")
                <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>
 
            <div class="mt-2">
                <label for="">Detail:</label>
                <textarea name="detail" placeholder="Detail" class="form-control"> </textarea>
                @error("detail")
                <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>
 
            <div class="mt-2">
                <button class="btn btn-success btn-sm" type="submit"><i class="fa fa-save"></i> Submit</button>
            </div>
 
        </form>
    </div>
</div>
@endsection

resources/views/products/edit.blade.php

//resources/views/products/edit.blade.php
@extends("layouts.app")
 
@section("content")
<div class="card mt-5">
    <div class="card-header">
        <h4>Product Edit</h4>
    </div>
    <div class="card-body">
        <a href="{{ route('products.index') }}" class="btn btn-info btn-sm mb-3"><i class="fa fa-arrow-left"></i> Back</a>
 
        <form action="{{ route('products.update', $product->id) }}" method="POST">
            @csrf
            @method('PUT')
 
            <div class="mt-2">
                <label for="">Name:</label>
                <input type="text" name="name" placeholder="Name" class="form-control" value="{{ $product->name }}">
                @error("name")
                <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>
 
            <div class="mt-2">
                <label for="">Detail:</label>
                <textarea name="detail" placeholder="Detail" class="form-control">{{ $product->detail }}</textarea>
                @error("detail")
                <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>
 
            <div class="mt-2">
                <button class="btn btn-success btn-sm" type="submit"><i class="fa fa-save"></i> Submit</button>
            </div>
 
        </form>
    </div>
</div>
@endsection

resources/views/products/show.blade.php

//resources/views/products/show.blade.php
@extends("layouts.app")
 
@section("content")
<div class="card mt-5">
    <div class="card-header">
        <h4>Product Show</h4>
    </div>
    <div class="card-body">
        <a href="{{ route('products.index') }}" class="btn btn-info btn-sm mb-3"><i class="fa fa-arrow-left"></i> Back</a>
 
        <div class="mt-4">
            <p><strong>Name:</strong> {{ $product->name }}</p>
            <p><strong>Detail:</strong> {{ $product->detail }}</p>
        </div>
    </div>
</div>
@endsection

Routes
routes/web.php

//routes/web.php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProductController;
 
Route::get('/', function () {
    return view('welcome');
});
 
Route::controller(ProductController::class)->group(function () {
    Route::get('/products', 'index')->name('products.index');
    Route::get('/products/show/{product}', 'show')->name('products.show');
    Route::get('/products/create', 'create')->name('products.create');
    Route::post('/products', 'store')->name('products.store');
    Route::get('/products/{product}/edit', 'edit')->name('products.edit');
    Route::put('/products/{product}', 'update')->name('products.update');
    Route::delete('/products/{product}', 'destroy')->name('products.destroy');
    Route::get('/products/search', 'search')->name('search');
});

Tutorial101

article

Friday, March 28, 2025

Laravel 12 CRUD (Create, Read, Update and Delete) with Search and Pagination

Related Post

Search This Blog

HOME

Category

Popular Posts