7-Gestor de Tareas Sencillo con Layout en Blade

 Gestor de Tareas Sencillo con Layout en Blade

Aquí tienes una versión organizada con un layout principal que heredan todas las vistas:

1. Layout Principal (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('titulo') - Gestor de Tareas</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            color: #333;
        }
        header {
            background: #f5f5f5;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 5px;
        }
        nav a {
            margin-right: 15px;
            text-decoration: none;
            color: #333;
        }
        nav a:hover {
            color: #666;
        }
        .tarea {
            border: 1px solid #ddd;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 5px;
        }
        .completada {
            background-color: #e6ffe6;
            border-left: 4px solid #4CAF50;
        }
        .pendiente {
            background-color: #fff9e6;
            border-left: 4px solid #FFC107;
        }
        .btn {
            display: inline-block;
            padding: 8px 15px;
            background: #333;
            color: white;
            border-radius: 4px;
            text-decoration: none;
            margin-right: 10px;
        }
        .btn:hover {
            background: #666;
        }
        form div {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"], textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        textarea {
            height: 100px;
        }
    </style>
</head>
<body>
    <header>
        <h1>Gestor de Tareas</h1>
        <nav>
            <a href="{{ route('tareas.index') }}">Inicio</a>
            <a href="{{ route('tareas.crear') }}">Crear Tarea</a>
            <a href="{{ route('salir') }}">Salir</a>
        </nav>
    </header>

    <main>
        @yield('contenido')
    </main>

    <footer style="margin-top: 30px; text-align: center; color: #666;">
        <p>Sistema de Gestión de Tareas &copy; {{ date('Y') }}</p>
    </footer>
</body>
</html>

2. Vista de Listado (resources/views/tareas/index.blade.php)

html
@extends('layouts.app')

@section('titulo', 'Lista de Tareas')

@section('contenido')
    <h2>Lista de Tareas</h2>

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

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

html
@extends('layouts.app')

@section('titulo', 'Crear Nueva Tarea')

@section('contenido')
    <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"></textarea>
        </div>
        <div>
            <button type="submit" class="btn">Guardar Tarea</button>
            <a href="{{ route('tareas.index') }}" class="btn" style="background: #666;">Cancelar</a>
        </div>
    </form>
@endsection

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

html
@extends('layouts.app')

@section('titulo', 'Detalles de Tarea')

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

5. 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()
    {
        // Tareas de ejemplo
        $this->tareas = [
            [
                'id' => $this->ultimoId++,
                'titulo' => 'Aprender Laravel',
                'descripcion' => 'Estudiar los conceptos básicos de Laravel y Blade',
                'completada' => false
            ],
            [
                'id' => $this->ultimoId++,
                'titulo' => 'Crear proyecto práctico',
                'descripcion' => 'Implementar un CRUD completo con Laravel',
                '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');
    }
}

6. 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');

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

Características de esta implementación:

  1. Layout principal: Todas las vistas heredan de layouts/app.blade.php

  2. Sistema de plantillas: Uso de @extends, @section y @yield

  3. Diseño consistente: Mismo header, navegación y footer en todas las páginas

  4. CSS interno: Estilos básicos en el layout para mantenerlo simple

  5. Estructura organizada:

    • Layout en resources/views/layouts/

    • Vistas de tareas en resources/views/tareas/

Ventajas de este enfoque:

  1. Reutilización de código: El layout se usa en todas las vistas

  2. Mantenimiento fácil: Cambios en el layout se aplican a toda la aplicación

  3. Consistencia visual: Todas las páginas tienen el mismo diseño base

  4. Organización clara: Separación lógica entre layout y contenido específico

Esta versión mantiene la simplicidad del arreglo en el controlador pero añade una estructura más profesional con el sistema de layouts de Blade

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