How to Create a ToDo List in Laravel Complete Tutorial

Laravel is a powerful PHP framework that allows you to develop web applications quickly and efficiently. In this tutorial, you will learn how to create a simple ToDo List application using Laravel. We will cover everything from setting up the environment to creating features for adding, editing, and deleting tasks.

Prerequisites

Before you begin, make sure you have the following requirements:

PHP 7.3 or higher
Composer
A web server like Apache or Nginx
MySQL or any other database supported by Laravel

Installing Laravel

To get started, you need to install Laravel on your machine. Open your terminal and run the following command:

composer create-project --prefer-dist laravel/laravel todo-app

This will create a new folder called todo-app with the basic structure of a Laravel project.

Setting Up the Database

Create the Database

Access your database management tool (like phpMyAdmin) and create a new database called todo_list.

Configure the .env File

Locate the .env file in the root directory of your application and modify the following lines to connect your application to the database you just created:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=todo_list
DB_USERNAME=your_username
DB_PASSWORD=your_password

Run Migrations

Laravel includes migrations to create the necessary tables. Let’s create our tasks table. Run the following command in the terminal:

php artisan make:migration create_tasks_table --create=tasks

This will create a migration file in the database/migrations directory. Open the file and modify the up method as follows:

public function up()
{
    Schema::create('tasks', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->boolean('completed')->default(false);
        $table->timestamps();
    });
}

Run the migration to create the table in your database:

php artisan migrate

Create the Model and Controller

Create the Model

Now, we will create a model for our tasks table. Run the following command:

php artisan make:model Task

This will create a model file at app/Models/Task.php. The model class will look like this:

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Task extends Model
{
    use HasFactory;

    protected $fillable = ['title', 'completed'];
}

Create the Controller

Next, we will create a controller to handle the logic of our application. Run the following command:

php artisan make:controller TaskController

Inside the controller, add methods to handle CRUD operations (Create, Read, Update, and Delete):

namespace App\Http\Controllers;

use App\Models\Task;
use Illuminate\Http\Request;

class TaskController extends Controller
{
    public function index()
    {
        $tasks = Task::all();
        return view('tasks.index', compact('tasks'));
    }

    public function store(Request $request)
    {
        $request->validate(['title' => 'required|max:255']);
        Task::create($request->all());
        return redirect()->back();
    }

    public function update(Request $request, Task $task)
    {
        $task->update($request->all());
        return redirect()->back();
    }

    public function destroy(Task $task)
    {
        $task->delete();
        return redirect()->back();
    }
}

Define the Routes

Open the routes/web.php file and define the routes for our ToDo List application:

use App\Http\Controllers\TaskController;

Route::get('/tasks', [TaskController::class, 'index']);
Route::post('/tasks', [TaskController::class, 'store']);
Route::put('/tasks/{task}', [TaskController::class, 'update']);
Route::delete('/tasks/{task}', [TaskController::class, 'destroy']);

Create the Views

Create the Main Layout

Create a file called app.blade.php inside resources/views/layouts with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDo List</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        @yield('content')
    </div>
</body>
</html>

Create the Tasks View

Create a file called index.blade.php inside resources/views/tasks with the following content:

@extends('layouts.app')

@section('content')
<h1>Task List</h1>
<form action="/tasks" method="POST">
    @csrf
    <input type="text" name="title" class="form-control" required>
    <button type="submit" class="btn btn-primary mt-2">Add Task</button>
</form>

<ul class="list-group mt-3">
    @foreach ($tasks as $task)
        <li class="list-group-item d-flex justify-content-between align-items-center">
            <form action="/tasks/{{ $task->id }}" method="POST">
                @csrf
                @method('PUT')
                <input type="checkbox" onChange="this.form.submit()" {{ $task->completed ? 'checked' : '' }}>
                <input type="text" name="title" value="{{ $task->title }}" required>
            </form>
            <form action="/tasks/{{ $task->id }}" method="POST">
                @csrf
                @method('DELETE')
                <button class="btn btn-danger" onClick="this.form.submit()">Delete</button>
            </form>
        </li>
    @endforeach
</ul>
@endsection

Run the Application

Now that we have set up our application, you can run it using the following command:

php artisan serve

Visit http://127.0.0.1:8000/tasks in your browser, and you will see your ToDo List in action.

Conclusion

In this tutorial, we covered how to create a simple ToDo List application using Laravel. You learned how to set up the database, create migrations, models, controllers, and views, as well as define routes to handle CRUD operations. Now you can extend this application by adding more features like user authentication, tags for tasks, or even a reminder system.

Remember that practice is key to mastering Laravel. Happy coding!