CRUD (Create, Read, Update, Delete) operations are an essential part of any web application. In Laravel 10, performing CRUD operations is made easier with the help of the built-in features and functionalities. In this article, we will discuss how to perform CRUD operations in Laravel 10 step by step.
Step 1: Install Laravel 10 To get started with Laravel 10, we need to install it first. You can install Laravel 10 by using composer. Open your terminal or command prompt and run the following command:
composer create-project laravel/laravel laravel-8-crud
Step 2: Create Database and Configure .env File Next, we need to create a database and configure our .env file. Open the .env file and configure the database settings as per your requirements.
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravel_8_crud DB_USERNAME=root DB_PASSWORD=
Step 3: Generate Model and Migration Now, we will generate a model and migration using the following command:
php artisan make:model Todo -m
This command will create a Todo model and migration file in the app/Models directory and the database/migrations directory, respectively.
Step 4: Define Schema in Migration File Open the migration file created in the previous step and define the schema for the Todo table. For example, we can define the following schema:
public function up()
{
Schema::create('todos', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('description');
$table->timestamps();
});
}
Step 5: Run Migration Now, we can run the migration to create the Todo table in the database using the following command:
php artisan migrate
Step 6: Create Routes Next, we need to create routes for performing CRUD operations on Todo. Open the routes/web.php file and define the following routes:
Route::get('/', [TodoController::class, 'index'])->name('todo.index');
Route::get('/create', [TodoController::class, 'create'])->name('todo.create');
Route::post('/store', [TodoController::class, 'store'])->name('todo.store');
Route::get('/edit/{id}', [TodoController::class, 'edit'])->name('todo.edit');
Route::put('/update/{id}', [TodoController::class, 'update'])->name('todo.update');
Route::delete('/delete/{id}', [TodoController::class, 'destroy'])->name('todo.destroy');
Step 7: Create TodoController Now, we will create a controller named TodoController using the following command:
php artisan make:controller TodoController --resource
This command will create a TodoController in the app/Http/Controllers directory with all the necessary methods for performing CRUD operations.
Step 8: Define Methods in TodoController Open the TodoController and define the following methods for performing CRUD operations:
public function index()
{
$todos = Todo::latest()->paginate(5);
return view('todo.index', compact('todos'))
->with('i', (request()->input('page', 1) - 1) * 5);
}
public function create()
{
return view('todo.create');
}
public function store(Request $request)
{
$request->validate([
'title' => 'required',
'description' => 'required',
]);
Todo
::create($request->all());
return redirect()->route('todo.index')
->with('success', 'Todo created successfully.');
}
public function edit(Todo $todo)
{
return view('todo.edit', compact('todo'));
}
public function update(Request $request, Todo $todo)
{
$request->validate([
'title' => 'required',
'description' => 'required',
]);
$todo->update($request->all());
return redirect()->route('todo.index')
->with('success', 'Todo updated successfully.');
}
public function destroy(Todo $todo)
{
$todo->delete();
return redirect()->route('todo.index')
->with('success', 'Todo deleted successfully.');
}
Step 9: Create Views
Now, we need to create views for displaying Todo data and forms for creating and updating Todo data.
Create the index.blade.php file in the resources/views/todo directory and define the following code to display Todo data:
@extends('todo.layout')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Laravel 8 Todo Application</h2>
</div>
<div class="pull-right">
<a class="btn btn-success" href="{{ route('todo.create') }}"> Create New Todo</a>
</div>
</div>
</div>
@if ($message = Session::get('success'))
<div class="alert alert-success">
<p>{{ $message }}</p>
</div>
@endif
<table class="table table-bordered">
<tr>
<th>No</th>
<th>Title</th>
<th>Description</th>
<th width="280px">Action</th>
</tr>
@foreach ($todos as $todo)
<tr>
<td>{{ ++$i }}</td>
<td>{{ $todo->title }}</td>
<td>{{ $todo->description }}</td>
<td>
<form action="{{ route('todo.destroy', $todo->id) }}" method="POST">
<a class="btn btn-info" href="{{ route('todo.show', $todo->id) }}">Show</a>
<a class="btn btn-primary" href="{{ route('todo.edit', $todo->id) }}">Edit</a>
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger">Delete</button>
</form>
</td>
</tr>
@endforeach
</table>
{!! $todos->links() !!}
@endsection
Create the create.blade.php file in the resources/views/todo directory and define the following code to display the form for creating Todo data:
@extends('todo.layout')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Create New Todo</h2>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('todo.index') }}"> Back</a>
</div>
</div>
</div>
@if ($errors->any())
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{
$error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('todo.store') }}" method="POST">
@csrf
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Title:</strong>
<input type="text" name="title" class="form-control" placeholder="Title">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Description:</strong>
<textarea class="form-control" style="height:150px" name="description" placeholder="Description"></textarea>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
@endsection
Create the edit.blade.php file in the resources/views/todo directory and define the following code to display the form for updating Todo data:
@extends('todo.layout')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Edit Todo</h2>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('todo.index') }}"> Back</a>
</div>
</div>
</div>
@if ($errors->any())
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('todo.update',$todo->id) }}" method="POST">
@csrf
@method('PUT')
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Title:</strong>
<input type="text" name="title" value="{{ $todo->title }}" class="form-control" placeholder="Title">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Description:</strong>
<textarea class="form-control" style="height:150px" name="description" placeholder="Description">{{ $todo->description }}</textarea>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
@endsection
Create the show.blade.php file in the resources/views/todo directory and define the following code to display Todo data:
@extends('todo.layout')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Show Todo</h2>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('todo.index') }}"> Back</a>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Title:</strong>
{{ $todo->title }}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Description:</strong>
{{ $todo->description }}
</div>
</div>
</div>
@endsection
Create the index.blade.php file in the resources/views/todo directory and define the following code to display all Todo data:
@extends('todo.layout')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Todo List</h2>
</div>
<div class="pull-right">
<a class="btn btn-success" href="{{ route('todo.create') }}"> Create New Todo</a>
</div>
</div>
</div>
@if ($message = Session::get('success'))
<div class="alert alert-success">
<p>{{ $message }}</p>
</div>
@endif
<table class="table table-bordered">
<tr>
<th>No</th>
<th>Title</th>
<th>Description</th>
<th width="280px">Action</th>
</tr>
@foreach ($todo as $key => $value)
<tr>
<td>{{ ++$i }}</td>
<td>{{ $value->title }}</td>
<td>{{ $value->description }}</td>
<td>
<form action="{{ route('todo.destroy',$value->id) }}" method="POST">
<a class="btn btn-info" href="{{ route('todo.show',$value->id) }}">Show</a>
<a class="btn btn-primary" href="{{ route('todo.edit',$value->id) }}">Edit</a>
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger">Delete</button>
</form>
</td>
</tr>
@endforeach
</table>
{!! $todo->links() !!}
@endsection
Finally, run the application and test the CRUD operations for the Todo model by accessing the URL of the application in your web browser. You should be able to create, read, update, and delete Todo data using the forms and buttons provided in the application’s UI.
That’s it! You’ve successfully implemented CRUD operations for the Todo model using Laravel 10.
Conclusion In this tutorial, we’ve covered the basics of Laravel 10 and built a simple CRUD application to manage Todo data. We started by setting up the development environment and creating a new Laravel project. Then, we created a migration file to define the database schema for the Todo model and ran the migration to create the corresponding database table. We also created a controller to handle the CRUD operations for the Todo model and defined routes to map HTTP requests to the corresponding controller methods. Finally, we created views to display and manipulate Todo data using forms and buttons.
Laravel 10 provides a powerful and flexible framework for building web applications, with features like routing, middleware, controllers, views, migrations, and database seeding. It also offers a rich set of helper functions and packages to simplify common tasks, such as authentication, validation, caching, and localization. With its elegant syntax and expressive syntax, Laravel 10 makes it easy and enjoyable to write clean, maintainable, and scalable code.
We hope this tutorial has given you a good introduction to Laravel 10 and inspired you to explore its capabilities further. Happy coding!
This Article Ideas has been taken from the following websites; which are following:
Laravel 10 CRUD Application Example Tutorial
How To Create CRUD Operation In Laravel 10
Laravel 10 CRUD Example Tutorial for Beginners
Laravel 10 CRUD Operation Step By Step
Laravel 10 CRUD Application Tutorial for Beginners
Laravel 10 CRUD and Image Upload Tutorial with Laravel Breeze and Repo Example
Leave a Reply