Building a Simple To-Do App with Laravel

Tweet
Share
Share
Pin

Laravel is known for its elegant syntax and robust toolkit, making it a great choice for web developers. In this blog post, we’ll guide you through creating a simple, functional To-Do application using Laravel.

Why Laravel?

Laravel simplifies the development process by providing built-in features like routing, authentication, and database migrations, all of which are essential for building a to-do app. The framework also follows the MVC (Model-View-Controller) pattern, making it easier to manage and scale your application.

Getting Started

Step 1: Install Laravel

First, you need to install Laravel. If you haven’t already, ensure Composer is installed and run the following command:

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

Step 2: Set Up the Database

In the .env file, update your database settings to connect Laravel with your database:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=todo_app
DB_USERNAME=root
DB_PASSWORD=

Then, run the following command to create the database tables:

php artisan migrate

Step 3: Create a Task Model and Migration

We’ll need a Task model and migration to store our tasks. Run the following command:

php artisan make:model Task -m

In the generated migration file (database/migrations/xxxx_xx_xx_create_tasks_table.php), add the necessary fields:

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

Run the migration to create the tasks table:

php artisan migrate

Step 4: Create a Task Controller

Next, create a controller to handle CRUD operations:

php artisan make:controller TaskController

In the TaskController, add methods to list, create, update, and delete tasks:

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

public function store(Request $request)
{
    $request->validate(['name' => 'required']);
    Task::create($request->all());
    return redirect()->route('tasks.index');
}

public function update(Task $task)
{
    $task->update(['completed' => !$task->completed]);
    return redirect()->route('tasks.index');
}

public function destroy(Task $task)
{
    $task->delete();
    return redirect()->route('tasks.index');
}

Step 5: Create Views for the App

In your resources/views/ directory, create a folder named tasks and a file index.blade.php for the task listing. Here’s a simple layout:

@extends('layout')

@section('content')
    <h1>Todo List</h1>
    <form action="{{ route('tasks.store') }}" method="POST">
        @csrf
        <input type="text" name="name" placeholder="New Task">
        <button type="submit">Add Task</button>
    </form>

    <ul>
        @foreach ($tasks as $task)
            <li>
                <form action="{{ route('tasks.update', $task) }}" method="POST" style="display:inline;">
                    @csrf
                    @method('PUT')
                    <input type="checkbox" onChange="this.form.submit()" {{ $task->completed ? 'checked' : '' }}>
                    {{ $task->name }}
                </form>

                <form action="{{ route('tasks.destroy', $task) }}" method="POST" style="display:inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit">Delete</button>
                </form>
            </li>
        @endforeach
    </ul>
@endsection

Step 6: Define Routes

Finally, in your routes/web.php file, define routes for your application:

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

Conclusion

Congratulations! You now have a basic to-do app built with Laravel. This app allows users to create, update, and delete tasks. From here, you can expand the functionality by adding features like user authentication, task deadlines, or task categorization.

Laravel makes developing applications like this both simple and scalable. If you’d like to explore more advanced features, you can integrate Vue.js or React for a more dynamic user interface.

Happy coding!