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