Inicio > Desarrollo Web > Tutoriales de Laravel > Cómo Crear una ToDo List en Laravel Tutorial Completo

Cómo Crear una ToDo List en Laravel Tutorial Completo

Diego Cortés
Diego Cortés
September 14, 2024
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!

Diego Cortés
Diego Cortés
Full Stack Developer, SEO Specialist with Expertise in Laravel & Vue.js and 3D Generalist

Categorías

Page loaded in 24.64 ms