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.
Antes de comenzar, asegúrate de tener los siguientes requisitos:
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.
Accede a tu gestor de bases de datos (como phpMyAdmin) y crea una nueva base de datos llamada todo_list.
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
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
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']; }
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(); } }
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']);
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>
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
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.
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!
Page loaded in 24.64 ms