Welcome to this comprehensive guide on building a complete CRUD (Create, Read, Update, Delete) application in Laravel 10. I'm excited to take you through the step-by-step process of creating a fully functional CRUD application using Laravel 10.
As a popular PHP framework, Laravel offers an elegant and efficient way to develop web applications with robust database operations. In this tutorial, we will walk together through each stage of creating a seamless and user-friendly CRUD experience using Laravel's powerful features, including its ORM (Object-Relational Mapping) system, routing capabilities, and Blade templating engine.
Throughout this guide, we'll cover the essential steps to set up a Laravel project, configure the database, create a model and migration, define routes, develop a controller, and build the necessary views. By following along, you'll gain hands-on experience in implementing the fundamental CRUD operations in Laravel 10, empowering you to handle data efficiently in your own projects.
Whether you're a beginner eager to learn Laravel or an experienced developer seeking to enhance your skills, this tutorial aims to provide you with a solid foundation in building a complete CRUD application. Together, we'll explore the power and simplicity of Laravel 10 as we embark on this exciting journey of creating a robust and interactive web application.
So, let's dive in and get started.
To get started, make sure you have Laravel installed on your system. If not, follow the official Laravel 10 documentation for installation instructions. Once Laravel 10 is set up, open your terminal and navigate to the desired directory for your project. Run the following command to create a new Laravel 10 project.
composer create-project --prefer-dist laravel/laravel laravel-10-crud-app
Configure your database connection details in the .env file located in the root of your Laravel project. Update the DB_CONNECTION, DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, and DB_PASSWORD variables according to your database setup.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_10_crud
DB_USERNAME=root
DB_PASSWORD=
In Laravel, models represent database tables, and migrations are used to create and modify database tables. To create a new model and migration, run the following command.
php artisan make:model Todo -m
This command will generate a Todo model and its corresponding migration file.
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Todo extends Model
{
use HasFactory;
protected $fillable = [
'id', 'title', 'description'
];
}
Open the generated migration file (located in the database/migrations directory) and define the table schema. For example, if you want to create a Todo table with title and description columns, update the up() method as follows.
Migration:
public function up()
{
Schema::create('todos', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('description');
$table->timestamps();
});
}
Save the migration file, and then run the migration command to create the table in the database.
php artisan migrate
Next, we need to define the routes for CRUD operations. Open the routes/web.php file and add the following routes.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TodoController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group that
| contains the "web" middleware group. Now create something great!
|
*/
Route::resource('todos', TodoController::class);
Now let's create a controller to handle the CRUD operations. Run the following command to generate a controller.
php artisan make:controller TodoController
This command will create a new TodoController file in the app/Http/Controllers directory.
Open the TodoController file and add the necessary methods to handle the CRUD operations.
namespace App\Http\Controllers;
use App\Models\Todo;
use Illuminate\Http\Request;
class TodoController extends Controller
{
public function index()
{
$todos = Todo::all();
return view('todos.index', compact('todos'));
}
public function create()
{
return view('todos.create');
}
public function store(Request $request)
{
$request->validate([
'title' => 'required',
'description' => 'required',
]);
Todo::create($request->all());
return redirect()->route('todos.index')->with('success', 'Todo created successfully');
}
public function show($id)
{
$todo = Todo::find($id);
return view('todos.show', compact('todo'));
}
public function edit($id)
{
$todo = Todo::find($id);
return view('todos.edit', compact('todo'));
}
public function update(Request $request, $id)
{
$request->validate([
'title' => 'required',
'description' => 'required',
]);
$todo = Todo::find($id);
$todo->update($request->all());
return redirect()->route('todos.index')->with('success', 'Todo updated successfully');
}
public function destroy($id)
{
Todo::destroy($id);
return redirect()->route('todos.index')->with('success', 'Todo deleted successfully');
}
}
Create the necessary views to display the Todo data. You can create the following view files:
resources/views/todos/index.blade.php(to display the list of todos)resources/views/todos/create.blade.php(to create a new todo)resources/views/todos/show.blade.php(to display a single todo)resources/views/todos/edit.blade.php(to edit a todo)
resources/views/todos/index.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Building Complete CRUD Application in Laravel 10 - Vidvatek</title>
</head>
<body>
<h1>Building Complete CRUD Application in Laravel 10 - Vidvatek</h1>
<a href="{{ route('todos.create)}}">Create New Todo</a>
<ul>
@foreach($todos as $todo)
<li>
<a href="{{ route('todos.show',$todo->id) }} ">{{ $todo->title }}</a>
</li>
@endforeach
</ul>
</body>
</html>
resources/views/todos/create.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Create Todo</title>
</head>
<body>
<h1>Create Todo</h1>
<form action="{{ route('todos.store') }}" method="POST">
@csrf
<label for="title">Title:</label>
<input type="text" name="title" id="title" required>
<br>
<label for="description">Description:</label>
<textarea name="description" id="description" required></textarea>
<br>
<button type="submit">Create</button>
</form>
</body>
</html>
resources/views/todos/show.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Todo Details</title>
</head>
<body>
<h1>Todo Details</h1>
<p><strong>Title:</strong> {{ $todo->title }}</p>
<p><strong>Description:</strong> {{ $todo->description }}</p>
<a href="{{ route('todos.edit', $todo->id) }}">Edit</a>
<form action="{{ route('todos.destroy',$todo->id) }}" method="POST" style="display:inline">
@csrf
@method('DELETE')
<button type="submit">Delete</button>
</form>
</body>
</html>
resources/views/todos/edit.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Edit Todo</title>
</head>
<body>
<h1>Edit Todo</h1>
<form action="{{ route('todos.update', $todo->id) }}" method="POST">
@csrf
@method('PUT')
<label for="title">Title:</label>
<input type="text" name="title" id="title" value="{{ $todo->title }}" required>
<br>
<label for="description">Description:</label>
<textarea name="description" id="description" required>{{ $todo->description }}</textarea>
<br>
<button type="submit">Update</button>
</form>
</body>
</html>
Finally, run the development server using the following command.
php artisan serve
Open your browser and access the Laravel 10 CRUD application. From there, you should be able to create, read, update, and delete todos using the provided routes and views.
You might also like:
- Read Also: Python for Beginners: Getting Started with Python
- Read Also: Python: A Journey into the World's Most Popular Language
- Read Also: AJAX CRUD Operations In Laravel 10: Step-by-Step Guide
- Read Also: Importing Excel File into Database Using Python