Laravel 11 CRUD Application Example Tutorial
Hi Guys,
In this post, you will be learning laravel 11 crud operation example. Here you will learn to build a laravel 11 crud application. We will use laravel 11 crud application for beginners. It's a simple example of how to create a crud in laravel 11.
so guys, in this crud example, we will create a product crud application using laravel 11. we will create a products table as laravel migration, then create routes, controller, view, and model files for the product module. To design the UI (user interface), we will use bootstrap 5.
So guys, let get started to create a crud operation with laravel 11.
Step 1: Install Laravel 11
let's install the Laravel 11 application. If you have already created the project, then you can just go ahead and skip the following step.
composer create-project laravel/laravel example-app
Step 2: Database Configuration
open .env file and update the database connection data as shown below:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel11
DB_USERNAME=root
DB_PASSWORD=
Step 3: Create Migration
create categories table into mysql database using migration laravel artisan command as follows:
php artisan make:migration create_categories_table --create=categories
After this command you will find one file in the following path "database /migrations /2024_00_00_000000_create_categories_table.php" and you have to put below code in your migration file to create the categories table as follows.
<?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('categories', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('description');
$table->boolean('status')->default(1)->comment('1=visible,0=hidden');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('categories');
}
};
Now, lets migrate this into our database with the following command:
php artisan migrate
Step 4: Create a Model with the following command:
php artisan make:model Category
after this command, you find this file "App/Models/Category.php" file, open and put the below code:
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Category extends Model
{
use HasFactory;
protected $table = 'categories';
protected $fillable = [
'name',
'description',
'status'
];
}
Step 5: Create a Controller named CategoryController with following command:
php artisan make:controller CategoryController --resource
once created, move to the CategoryController.php file in path: app /Http /Controller /CategoryController.php and paste the below code:
<?php
namespace App\Http\Controllers;
use App\Models\Category;
use Illuminate\Http\Request;
class CategoryController extends Controller
{
/**
* Display a listing of the resource.
*/
public function index()
{
$categories = Category::paginate(10);
return view('category.index', [
'categories' => $categories
]);
}
/**
* Show the form for creating a new resource.
*/
public function create()
{
return view('category.create');
}
/**
* Store a newly created resource in storage.
*/
public function store(Request $request)
{
$request->validate([
'name' => 'required|string|max:255',
'description' => 'required|string|max:255',
'status' => 'nullable',
]);
Category::create([
'name' => $request->name,
'description' => $request->description,
'status' => $request->status == true ? 1:0,
]);
return redirect('/category')->with('status','Category Created Successfully');
}
/**
* Display the specified resource.
*/
public function show(Category $category)
{
return view('category.show', compact('category'));
}
/**
* Show the form for editing the specified resource.
*/
public function edit(Category $category)
{
return view('category.edit', compact('category'));
}
/**
* Update the specified resource in storage.
*/
public function update(Request $request, Category $category)
{
$request->validate([
'name' => 'required|string|max:255',
'description' => 'required|string|max:255',
'status' => 'nullable',
]);
$category->update([
'name' => $request->name,
'description' => $request->description,
'status' => $request->status == true ? 1:0,
]);
return redirect('/category')->with('status','Category Updated Successfully');
}
/**
* Remove the specified resource from storage.
*/
public function destroy(Category $category)
{
$category->delete();
return redirect('/category')->with('status','Category Deleted Successfully');
}
}
Step 5: Add Resource Route in path routes/web.php file
Route::resource('category', CategoryController::class);
Step 6: Create the blade files
Go to path: resources/views/ and inside that Create a folder named category and then create the files listed below init.
1. layouts.blade.php
2. index.blade.php
3. create.blade.php
4. edit.blade.php
5. show.blade.php
So let's start creating the files and paste the below code.
resources /views /category /layout.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel 11 CRUD Application</title>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>
<div class="container">
@yield('content')
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
resources /views /category /index.blade.php
@extends('category.layout')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-12">
@session('status')
<div class="alert alert-success">
{{ session('status') }}
</div>
@endsession
<div class="card">
<div class="card-header">
<h4>Categories List
<a href="{{ url('category/create') }}" class="btn btn-primary float-end">Add Category</a>
</h4>
</div>
<div class="card-body">
<table class="table table-stiped table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Description</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach ($categories as $category)
<tr>
<td>{{ $category->id }}</td>
<td>{{ $category->name }}</td>
<td>{{ $category->description }}</td>
<td>{{ $category->status == 1 ? 'Visible':'Hidden' }}</td>
<td>
<a href="{{ route('category.edit', $category->id) }}" class="btn btn-success">Edit</a>
<a href="{{ route('category.show', $category->id) }}" class="btn btn-info">Show</a>
<form action="{{ route('category.destroy', $category->id) }}" method="POST" class="d-inline">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger">Delete</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
{{ $categories->links() }}
</div>
</div>
</div>
</div>
</div>
@endsection
resources /views /category /create.blade.php
@extends('category.layout')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h4>Create Category
<a href="{{ url('category') }}" class="btn btn-danger float-end">Back</a>
</h4>
</div>
<div class="card-body">
<form action="{{ route('category.store') }}" method="POST">
@csrf
<div class="mb-3">
<label>Name</label>
<input type="text" name="name" class="form-control" />
@error('name') <span class="text-danger">{{ $message }}</span> @enderror
</div>
<div class="mb-3">
<label>Description</label>
<textarea name="description" rows="3" class="form-control"></textarea>
@error('description') <span class="text-danger">{{ $message }}</span> @enderror
</div>
<div class="mb-3">
<label>Status</label>
<br/>
<input type="checkbox" name="status" checked style="width:30px;height:30px;" /> Checked=visible, unchecked=hidden
@error('status') <span class="text-danger">{{ $message }}</span> @enderror
</div>
<div class="mb-3">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
resources /views /category /edit.blade.php
@extends('category.layout')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h4>Edit Category
<a href="{{ url('category') }}" class="btn btn-danger float-end">Back</a>
</h4>
</div>
<div class="card-body">
<form action="{{ route('category.update', $category->id) }}" method="POST">
@csrf
@method('PUT')
<div class="mb-3">
<label>Name</label>
<input type="text" name="name" class="form-control" value="{{ $category->name }}" />
@error('name') <span class="text-danger">{{ $message }}</span> @enderror
</div>
<div class="mb-3">
<label>Description</label>
<textarea name="description" rows="3" class="form-control">{!! $category->description !!}</textarea>
@error('description') <span class="text-danger">{{ $message }}</span> @enderror
</div>
<div class="mb-3">
<label>Status</label>
<br/>
<input type="checkbox" name="status" {{ $category->status == 1 ? 'checked':'' }} style="width:30px;height:30px;" /> Checked=visible, unchecked=hidden
@error('status') <span class="text-danger">{{ $message }}</span> @enderror
</div>
<div class="mb-3">
<button type="submit" class="btn btn-primary">Update</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
resources /views /category /show.blade.php
@extends('category.layout')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h4>Show Category Detail
<a href="{{ url('category') }}" class="btn btn-danger float-end">Back</a>
</h4>
</div>
<div class="card-body">
<div class="mb-3">
<label>Name</label>
<p>
{{ $category->name }}
</p>
</div>
<div class="mb-3">
<label>Description</label>
<p>
{!! $category->description !!}
</p>
</div>
<div class="mb-3">
<label>Status</label>
<br/>
<p>
{{ $category->status == 1 ? 'checked':'' }}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
Step 7: Add the Pagination class in the app /providers /AppServiceProvider.php. if already added please skip this step.
use Illuminate\Pagination\Paginator;
public function boot(): void
{
Paginator::useBootstrapFive();
}
Step 8: Lets serve the application by following command:
php artisan serve
Now, Go to your web browser, type the given URL and view the app output:
http://localhost:8000/products
That's all. I hope this helps you.