Cómo Crear una ToDo List en Laravel Tutorial Completo

Laravel es un potente framework de PHP que permite desarrollar aplicaciones web de manera rápida y eficiente. En este tutorial, aprenderás a crear una aplicación simple de lista de tareas (ToDo List) utilizando Laravel. Vamos a cubrir desde la instalación del entorno hasta la creación de funcionalidades para agregar, editar y eliminar tareas.

Requisitos Previos

Antes de comenzar, asegúrate de tener los siguientes requisitos:

• PHP 7.3 o superior
• Composer
• Un servidor web como Apache o Nginx
• MySQL o cualquier otra base de datos soportada por Laravel

Instalación de Laravel

Para empezar, necesitas instalar Laravel en tu máquina. Abre tu terminal y ejecuta el siguiente comando:

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

Esto creará una nueva carpeta llamada todo-app con la estructura básica de un proyecto Laravel.

Configuración de la Base de Datos

Crear la Base de Datos

Accede a tu gestor de bases de datos (como phpMyAdmin) y crea una nueva base de datos llamada todo_list.

Configurar el Archivo .env

Localiza el archivo .env en el directorio raíz de tu aplicación y modifica las siguientes líneas para conectar tu aplicación a la base de datos que acabas de crear:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=todo_list
DB_USERNAME=tu_usuario
DB_PASSWORD=tu_contraseña

Ejecutar Migraciones

Laravel incluye migraciones para crear las tablas necesarias. Vamos a crear nuestra tabla de tareas. Ejecute el siguiente comando en la terminal:

php artisan make:migration create_tasks_table --create=tasks

Esto creará un archivo de migración en el directorio database/migrations. Abre el archivo y modifica el método up de la siguiente manera:

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

Ejecuta la migración para crear la tabla en tu base de datos:

php artisan migrate

Crear el Modelo y el Controlador

Crear el Modelo

Ahora, vamos a crear un modelo para nuestra tabla de tareas. Ejecuta el siguiente comando:

php artisan make:model Task

Esto creará un archivo de modelo en app/Models/Task.php. La clase del modelo se verá así:

namespace App\Models;

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

class Task extends Model
{
    use HasFactory;

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

Crear el Controlador

A continuación, vamos a crear un controlador para manejar la lógica de nuestra aplicación. Ejecuta el siguiente comando:

php artisan make:controller TaskController

Dentro del controlador, añade métodos para manejar las operaciones CRUD (Crear, Leer, Actualizar y Eliminar):

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();
    }
}

Definir las Rutas

Abre el archivo routes/web.php y define las rutas para nuestra aplicación de lista de tareas:

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']);

Crear las Vistas

Crear Layout Principal

Crea un archivo llamado app.blade.php dentro de resources/views/layouts con el siguiente contenido:

<!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>

Crear la Vista de Tareas

Crea un archivo llamado index.blade.php dentro de resources/views/tasks con el siguiente contenido:

@extends('layouts.app')

@section('content')
<h1>Lista de Tareas</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">Agregar Tarea</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()">Eliminar</button>
            </form>
        </li>
    @endforeach
</ul>
@endsection

Ejecutar la Aplicación

Ahora que hemos configurado nuestra aplicación, puedes ejecutarla utilizando el siguiente comando:

php artisan serve

Visita http://127.0.0.1:8000/tasks en tu navegador y verás tu lista de tareas en funcionamiento.

Conclusión

En este tutorial, hemos cubierto cómo crear una aplicación simple de lista de tareas utilizando Laravel. Aprendiste a configurar la base de datos, crear migraciones, modelos, controladores y vistas, así como definir rutas para manejar las operaciones CRUD. Ahora puedes extender esta aplicación agregando más funcionalidades como autenticación de usuarios, etiquetas para las tareas, o incluso un sistema de recordatorios.

Recuerda que practicar es la clave para dominar Laravel. ¡Feliz codificación!