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');
});
