8-Gestor de Tareas Sencillo con Blade y Arreglo

 Gestor de Tareas Sencillo con Blade y Arreglo

Aquí tienes una versión ultra simplificada usando solo un arreglo en el controlador, sin sesiones ni base de datos:

1. Controlador (app/Http/Controllers/TareaController.php)

php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class TareaController extends Controller
{
    private $tareas = [];
    private $ultimoId = 1;

    public function __construct()
    {
        // Ejemplo con algunas tareas iniciales
        $this->tareas = [
            [
                'id' => $this->ultimoId++,
                'titulo' => 'Aprender Laravel',
                'descripcion' => 'Estudiar los conceptos básicos de Laravel',
                'completada' => false
            ],
            [
                'id' => $this->ultimoId++,
                'titulo' => 'Practicar Blade',
                'descripcion' => 'Crear templates con el motor Blade',
                'completada' => true
            ]
        ];
    }

    public function index()
    {
        return view('tareas.index', ['tareas' => $this->tareas]);
    }

    public function crear()
    {
        return view('tareas.crear');
    }

    public function guardar(Request $request)
    {
        $nuevaTarea = [
            'id' => $this->ultimoId++,
            'titulo' => $request->input('titulo'),
            'descripcion' => $request->input('descripcion'),
            'completada' => false
        ];

        $this->tareas[] = $nuevaTarea;

        return redirect()->route('tareas.index');
    }

    public function mostrar($id)
    {
        $tarea = collect($this->tareas)->firstWhere('id', $id);

        if (!$tarea) {
            abort(404);
        }

        return view('tareas.mostrar', ['tarea' => $tarea]);
    }

    public function eliminar($id)
    {
        $this->tareas = array_filter($this->tareas, function($tarea) use ($id) {
            return $tarea['id'] != $id;
        });

        return redirect()->route('tareas.index');
    }
}

2. Rutas (routes/web.php)

php
<?php

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

Route::get('/', [TareaController::class, 'index'])->name('tareas.index');
Route::get('/tareas/crear', [TareaController::class, 'crear'])->name('tareas.crear');
Route::post('/tareas/guardar', [TareaController::class, 'guardar'])->name('tareas.guardar');
Route::get('/tareas/{id}', [TareaController::class, 'mostrar'])->name('tareas.mostrar');
Route::get('/tareas/eliminar/{id}', [TareaController::class, 'eliminar'])->name('tareas.eliminar');

// Ruta para salir
Route::get('/salir', function() {
    return redirect('/');
})->name('salir');

3. Vista Principal (resources/views/tareas/index.blade.php)

html
<!DOCTYPE html>
<html>
<head>
    <title>Gestor de Tareas</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
        .tarea { border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; border-radius: 5px; }
        .completada { background-color: #e6ffe6; }
        .pendiente { background-color: #fff9e6; }
        nav { background: #f5f5f5; padding: 10px; margin-bottom: 20px; }
    </style>
</head>
<body>
    <nav>
        <a href="{{ route('tareas.index') }}">Inicio</a> |
        <a href="{{ route('tareas.crear') }}">Crear Tarea</a> |
        <a href="{{ route('salir') }}">Salir</a>
    </nav>

    <h1>Lista de Tareas</h1>

    @if(count($tareas) > 0)
        @foreach($tareas as $tarea)
            <div class="tarea {{ $tarea['completada'] ? 'completada' : 'pendiente' }}">
                <h3>{{ $tarea['titulo'] }}</h3>
                <p>{{ $tarea['descripcion'] }}</p>
                <p>ID: {{ $tarea['id'] }}</p>
                <a href="{{ route('tareas.mostrar', $tarea['id']) }}">Ver</a> |
                <a href="{{ route('tareas.eliminar', $tarea['id']) }}">Eliminar</a>
            </div>
        @endforeach
    @else
        <p>No hay tareas registradas.</p>
    @endif
</body>
</html>

4. Vista para Crear Tarea (resources/views/tareas/crear.blade.php)

html
@extends('tareas.index')

@section('content')
    <h2>Crear Nueva Tarea</h2>

    <form action="{{ route('tareas.guardar') }}" method="POST">
        @csrf
        <div>
            <label for="titulo">Título:</label>
            <input type="text" id="titulo" name="titulo" required>
        </div>
        <div>
            <label for="descripcion">Descripción:</label>
            <textarea id="descripcion" name="descripcion" rows="3"></textarea>
        </div>
        <button type="submit">Guardar</button>
        <a href="{{ route('tareas.index') }}">Cancelar</a>
    </form>
@endsection

5. Vista para Mostrar Tarea (resources/views/tareas/mostrar.blade.php)

html
@extends('tareas.index')

@section('content')
    <div class="tarea {{ $tarea['completada'] ? 'completada' : 'pendiente' }}">
        <h2>{{ $tarea['titulo'] }}</h2>
        <p>{{ $tarea['descripcion'] }}</p>
        <p>ID: {{ $tarea['id'] }}</p>
        <p>Estado: {{ $tarea['completada'] ? 'Completada' : 'Pendiente' }}</p>
        <a href="{{ route('tareas.index') }}">Volver</a>
    </div>
@endsection

Características de esta implementación:

  1. Súper simple: Solo un arreglo en el controlador

  2. Sin persistencia: Los datos se pierden al actualizar la página

  3. Funcionalidades básicas:

    • Listar tareas

    • Crear nuevas tareas

    • Ver detalles

    • Eliminar tareas

  4. Diseño minimalista: HTML y CSS básico

  5. Sin sesiones ni base de datos: Ideal para entender los conceptos básicos

Limitaciones:

  1. Los datos no persisten entre refrescos de página

  2. No hay edición de tareas (solo crear, ver y eliminar)

  3. Todos los usuarios ven las mismas tareas

  4. No hay validación de formularios avanzada

Esta versión es perfecta para entender cómo funciona el flujo básico de Laravel y Blade sin complicaciones con bases de datos o sesiones.


Te ayudo a crear un layout básico (layouts/app.blade.php) para que tus vistas funcionen correctamente:

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title') - Gestor de Tareas</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    
    <style>
        body {
            background-color: #f8f9fa;
            padding-top: 20px;
        }
        .container {
            max-width: 1200px;
        }
        .card {
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            border-radius: 0.5rem;
        }
        .btn {
            border-radius: 0.375rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Header -->
        <header class="mb-4">
            <nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded">
                <div class="container-fluid">
                    <a class="navbar-brand" href="{{ route('tasks.index') }}">
                        <i class="bi bi-check2-square"></i> Gestor de Tareas
                    </a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav ms-auto">
                            <li class="nav-item">
                                <a class="nav-link" href="{{ route('tasks.index') }}">
                                    <i class="bi bi-list-task"></i> Lista de Tareas
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{{ route('tasks.create') }}">
                                    <i class="bi bi-plus-circle"></i> Nueva Tarea
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>

        <!-- Main Content -->
        <main>
            <!-- Mensajes Flash -->
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="bi bi-check-circle-fill"></i> {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="bi bi-exclamation-triangle-fill"></i> {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            @yield('content')
        </main>

        <!-- Footer -->
        <footer class="mt-5 py-3 text-center text-muted">
            <div class="container">
                <p class="mb-0">&copy; {{ date('Y') }} Gestor de Tareas - Desarrollado con Laravel</p>
            </div>
        </footer>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- Scripts adicionales -->
    @stack('scripts')
</body>
</html>

Este layout incluye:

  1. Estructura básica HTML5 con metatags esenciales

  2. Bootstrap 5 para los estilos y componentes

  3. Bootstrap Icons para iconos

  4. Sistema de grid responsive de Bootstrap

  5. Navbar con navegación entre las diferentes secciones

  6. Sistema de mensajes flash para mostrar alertas de éxito/error

  7. Footer básico

  8. Estilos CSS personalizados mínimos para mejorar la apariencia

  9. Responsive design que se adapta a diferentes dispositivos

  10. Área para scripts adicionales usando @stack('scripts')

Comentarios

Publicar un comentario

Entradas más populares de este blog

0-Sistema de Tareas

Guía de CRUD en Laravel para Principiantes: Sistema de Gestión de Tareas Comandos para crear un proyecto de lista de tareas en Laravel Aquí tienes los comandos necesarios para crear tu proyecto de lista de tareas en Laravel: 1. Crear el proyecto Laravel bash composer create-project laravel/laravel gestor-tareas cd gestor-tareas 2. Crear el modelo (aunque en este caso usamos un array, es buena práctica crear el modelo) bash php artisan make:model Tarea -m El flag  -m  crea automáticamente una migración para el modelo. 3. Crear la migración (si no se creó con el modelo) bash php artisan make:migration create_tareas_table 4. Ejecutar las migraciones bash php artisan migrate 5. Crear el controlador bash php artisan make:controller TareaController 6. Crear las vistas (manual) Necesitarás crear manualmente las carpetas y archivos de vistas: resources/views/layouts/app.blade.php resources/views/tareas/index.blade.php resources/views/tareas/crear.blade.php resources/views/tareas/mos...
Leer más

13-CRUD en Laravel para Web y API con Rutas Normales (No Resource)

  Tutorial Actualizado: CRUD en Laravel para Web y API con Rutas Normales (No Resource) Te mostraré la implementación  completa y detallada  con rutas normales (no resource), perfecto para principiantes. Estructura del Proyecto text gestor-tareas/ ├── app/ │ ├── Http/ │ │ ├── Controllers/ │ │ │ ├── Api/ │ │ │ │ └── TareaController.php │ │ │ └── Web/ │ │ │ └── TareaController.php ├── routes/ │ ├── api.php │ └── web.php └── resources/views/tareas/ ├── index.blade.php ├── create.blade.php ├── show.blade.php └── edit.blade.php Paso a Paso Detallado 1. Crear el Proyecto bash composer create-project laravel/laravel gestor-tareas cd gestor-tareas 2. Configurar Base de Datos Editar el archivo  .env : env DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=gestor_tareas DB_USERNAME=root DB_PASSWORD= 3. Crear Modelo y Migración bash php artisan make:model Tarea -m 4. Configurar la Migración Editar  datab...
Leer más

10-Introducción a Blade en Laravel con un Ejemplo Práctico

    Introducción a Blade en Laravel con un Ejemplo Práctico Blade es el motor de plantillas de Laravel que permite crear vistas de manera elegante y eficiente. A continuación te mostraré un ejemplo completo de cómo usar Blade para crear una aplicación simple de gestión de tareas. Estructura del Proyecto Vamos a crear: Una plantilla base (layout) Una página de índice para ver todas las tareas Una página para agregar nueva tarea Una página para ver los detalles de una tarea Un menú de navegación Funcionalidad para salir (logout) 1. Plantilla Base (resources/views/layouts/app.blade.php) html <! DOCTYPE html > < html lang = " es " > < head > < meta charset = " UTF-8 " > < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " > < title > @yield('title') - Gestor de Tareas </ title > < link href = " https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/d...
Leer más