Desarrollo de un Sistema de Gestión de Tareas con Laravel y Bootstrap 5

Introducción

En el mundo del desarrollo web, Laravel se ha consolidado como uno de los frameworks PHP más utilizados debido a su facilidad de uso, escalabilidad y herramientas integradas. En este artículo, exploraremos el desarrollo de un Sistema de Gestión de Tareas, el cual tiene una particularidad interesante: en lugar de usar una base de datos, almacena la información en archivos de texto.

Este proyecto demuestra cómo se puede construir una aplicación funcional utilizando Laravel, combinando tecnologías modernas como Bootstrap 5 para el diseño de la interfaz y Blade para el manejo de plantillas.

📌 Tecnologías Utilizadas

Para el desarrollo de este proyecto, se utilizaron las siguientes tecnologías:

1️⃣ Lenguajes de Programación

✅ PHP → Utilizado en Laravel para la lógica del backend.

✅ HTML5 → Estructura de la aplicación web.

✅ CSS3 → Estilización de la interfaz.

✅ JavaScript → Para mejorar la interactividad, en combinación con Bootstrap.

2️⃣ Frameworks y Librerías

✅ Laravel 10 → Framework PHP para gestionar el backend y rutas.

✅ Bootstrap 5 → Framework CSS para un diseño moderno y responsivo.

✅ Blade (Laravel Views) → Motor de plantillas de Laravel para generar vistas dinámicas.

✅ Node.js & npm → Para manejar dependencias como Bootstrap y compilar estilos.

📌 3️⃣ Características Principales del Proyecto

Este Sistema de Gestión de Tareas cuenta con las siguientes funcionalidades:

✅ CRUD de Tareas → Permite agregar, editar y eliminar tareas.

✅ Estados de Tareas → Cada tarea puede estar en estado Pendiente, En Proceso o Completada.

✅ Almacenamiento en Archivos de Texto → Se usa storage/tareas/ en lugar de una base de datos tradicional.

✅ Interfaz Moderna con Bootstrap 5 → Diseño limpio, responsivo y atractivo.

✅ Uso de Blade para Plantillas → Código más organizado y reutilizable.

✅ Organización en MVC → Separación clara entre modelo, controlador y vista.

📌 4️⃣ Código Fuente del Proyecto

A continuación, se presenta el código por archivo para estructurar el sistema correctamente:

1️⃣ Estructura del Proyecto

📂 Citas/

┣ 📂 storage/tareas/ → Archivos de texto con las tareas guardadas.

┣ 📂 app/Models/Tarea.php → Modelo para gestionar los archivos de tareas.

┣ 📂 app/Http/Controllers/TareaController.php → Controlador para manejar las solicitudes HTTP.

┣ 📂 routes/web.php → Definición de rutas del sistema.

┣ 📂 resources/views/tareas/index.blade.php → Vista principal con Bootstrap 5.

┣ 📂 public/ → Archivos estáticos como CSS y JavaScript.

2️⃣ Modelo: Tarea.php

📌 Ubicación: app/Models/Tarea.php

Este modelo maneja la creación, lectura, actualización y eliminación de tareas en archivos de texto.

<?php

namespace App\Models;

class Tarea
{
    public static $ruta = 'storage/tareas/';

    public static function obtenerTodas()
    {
        $tareas = [];
        if (!file_exists(self::$ruta)) {
            mkdir(self::$ruta, 0777, true);
        }
        foreach (glob(self::$ruta . "*.txt") as $archivo) {
            $contenido = file_get_contents($archivo);
            $datos = explode('|', $contenido);
            $tareas[] = [
                'id' => basename($archivo, '.txt'),
                'titulo' => $datos[0] ?? 'Sin título',
                'descripcion' => $datos[1] ?? 'Sin descripción',
                'estado' => $datos[2] ?? 'Pendiente'
            ];
        }
        return $tareas;
    }

    public static function guardar($titulo, $descripcion, $estado = 'Pendiente')
    {
        $id = uniqid();
        file_put_contents(self::$ruta . "$id.txt", "$titulo|$descripcion|$estado");
    }

    public static function actualizar($id, $titulo, $descripcion, $estado)
    {
        file_put_contents(self::$ruta . "$id.txt", "$titulo|$descripcion|$estado");
    }

    public static function eliminar($id)
    {
        $archivo = self::$ruta . "$id.txt";
        if (file_exists($archivo)) {
            unlink($archivo);
        }
    }
}

3️⃣ Controlador: TareaController.php

📌 Ubicación: app/Http/Controllers/TareaController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Tarea;

class TareaController extends Controller
{
    public function index()
    {
        $tareas = Tarea::obtenerTodas();
        return view('tareas.index', compact('tareas'));
    }

    public function store(Request $request)
    {
        Tarea::guardar($request->titulo, $request->descripcion);
        return redirect()->route('tareas.index');
    }

    public function update(Request $request, $id)
    {
        Tarea::actualizar($id, $request->titulo, $request->descripcion, $request->estado);
        return redirect()->route('tareas.index');
    }

    public function destroy($id)
    {
        Tarea::eliminar($id);
        return redirect()->route('tareas.index');
    }
}

4️⃣ Rutas: web.php

📌 Ubicación: routes/web.php

use App\Http\Controllers\TareaController;
use Illuminate\Support\Facades\Route;

Route::get('/', [TareaController::class, 'index'])->name('tareas.index');
Route::post('/tareas', [TareaController::class, 'store'])->name('tareas.store');
Route::post('/tareas/{id}', [TareaController::class, 'update'])->name('tareas.update');
Route::delete('/tareas/{id}', [TareaController::class, 'destroy'])->name('tareas.destroy');

5️⃣ Vista: index.blade.php con Bootstrap 5

📌 Ubicación: resources/views/tareas/index.blade.php

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gestión de Tareas</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <div class="container py-5">
        <h1 class="text-center">📋 Gestión de Tareas</h1>

        <form action="{{ route('tareas.store') }}" method="POST">
            @csrf
            <input type="text" name="titulo" placeholder="Título" required class="form-control mb-2">
            <textarea name="descripcion" placeholder="Descripción" class="form-control mb-2"></textarea>
            <button type="submit" class="btn btn-primary w-100">Agregar</button>
        </form>

        <h2 class="mt-4">📌 Lista de Tareas</h2>
        <ul class="list-group">
            @foreach($tareas as $tarea)
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    {{ $tarea['titulo'] }} - {{ $tarea['estado'] }}
                </li>
            @endforeach
        </ul>
    </div>

</body>
</html>

📌 Conclusión

Este proyecto demuestra cómo es posible desarrollar un Sistema de Gestión de Tareas con Laravel, sin depender de bases de datos, utilizando archivos de texto para almacenar la información. La combinación con Bootstrap 5 proporciona un diseño elegante y funcional. 🚀😃