3. Creando Cabecera y Menú

 Creando una Estructura de Plantillas en Laravel

Basado en la estructura de archivos mostrada en la imagen, voy a explicar cómo crear un sistema de plantillas en Laravel con una plantilla principal, páginas de ingreso, selección, cabecera y menú.

Estructura de Archivos

La imagen muestra una estructura típica de Laravel con:

  • Controladores (HomeController.php, InicioController.php)

  • Modelos (User.php, Inicio.php)

  • Vistas en la carpeta views con varios módulos

Plantilla Principal (plantilla.blade.php)

La plantilla principal sirve como base para todas las demás vistas. Aquí está el código mejorado:

php
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title') - Mi Aplicación</title>
    <!-- Google Font -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
    <!-- Estilos personalizados -->
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body class="hold-transition skin-blue">
    <div class="wrapper">
        @if(Auth::user())
            @include('modules.cabecera')
        @endif
        
        <div class="content-wrapper">
            @yield('content')
        </div>
    </div>

    <!-- jQuery 3 -->
    <script src="{{ asset('js/jquery.min.js') }}"></script>
    <!-- Bootstrap JS -->
    <script src="{{ asset('js/bootstrap.bundle.min.js') }}"></script>
    <!-- Scripts personalizados -->
    <script src="{{ asset('js/app.js') }}"></script>
    @yield('scripts')
</body>
</html>

Cabecera y Menú (cabecera.blade.php)

La cabecera incluirá el menú principal de la aplicación:

php
<header class="main-header">
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="{{ route('inicio') }}">Mi Aplicación</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto">
                    @auth
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('inicio') }}">Inicio</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('seleccionar') }}">Seleccionar</a>
                        </li>
                        <li class="nav-item">
                            <form method="POST" action="{{ route('logout') }}">
                                @csrf
                                <button type="submit" class="btn btn-link nav-link">Cerrar Sesión</button>
                            </form>
                        </li>
                    @endauth
                </ul>
            </div>
        </div>
    </nav>
</header>

Vista de Ingreso (Ingresar.blade.php)

Página de login para usuarios no autenticados:

php
@extends('plantilla')

@section('title', 'Ingresar')

@section('content')
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">{{ __('Ingresar') }}</div>

                <div class="card-body">
                    <form method="POST" action="{{ route('login') }}">
                        @csrf

                        <div class="form-group">
                            <label for="email">{{ __('Correo Electrónico') }}</label>
                            <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" required autocomplete="email" autofocus>
                            @error('email')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="password">{{ __('Contraseña') }}</label>
                            <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
                            @error('password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary btn-block">
                                {{ __('Ingresar') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Vista de Selección (Seleccionar.blade.php)

Página para seleccionar opciones después del login:

php
@extends('plantilla')

@section('title', 'Seleccionar')

@section('content')
<div class="container py-4">
    <h2 class="text-center mb-4">Seleccione una opción</h2>
    
    <div class="row">
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                <div class="card-body text-center">
                    <h5 class="card-title">Opción 1</h5>
                    <p class="card-text">Descripción de la opción 1</p>
                    <a href="#" class="btn btn-primary">Seleccionar</a>
                </div>
            </div>
        </div>
        
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                <div class="card-body text-center">
                    <h5 class="card-title">Opción 2</h5>
                    <p class="card-text">Descripción de la opción 2</p>
                    <a href="#" class="btn btn-primary">Seleccionar</a>
                </div>
            </div>
        </div>
        
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                <div class="card-body text-center">
                    <h5 class="card-title">Opción 3</h5>
                    <p class="card-text">Descripción de la opción 3</p>
                    <a href="#" class="btn btn-primary">Seleccionar</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Vista de Inicio (Inicio.blade.php)

Página principal después del login:

php
@extends('plantilla')

@section('title', 'Inicio')

@section('content')
<div class="container py-4">
    <h1 class="text-center mb-4">Bienvenido, {{ Auth::user()->name }}</h1>
    
    <div class="row">
        <div class="col-md-8 mx-auto">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Resumen de Actividad</h5>
                    <p class="card-text">Contenido principal de la página de inicio.</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Configuración de Rutas

En tu archivo routes/web.php, asegúrate de tener las rutas necesarias:

php
Route::get('/', function () {
    return view('Ingresar');
})->name('ingresar');

Route::get('/inicio', [InicioController::class, 'index'])->name('inicio')->middleware('auth');
Route::get('/seleccionar', [InicioController::class, 'seleccionar'])->name('seleccionar')->middleware('auth');

Auth::routes();

Consideraciones Finales

  1. La plantilla principal (plantilla.blade.php) sirve como base para todas las demás vistas.

  2. La cabecera (cabecera.blade.php) se muestra solo cuando el usuario está autenticado.

  3. Las vistas de ingreso, selección e inicio extienden la plantilla principal.

  4. Se utiliza Bootstrap para el diseño responsive.

  5. Las rutas protegidas con el middleware 'auth' solo son accesibles para usuarios autenticados.

Esta estructura proporciona una base sólida para construir una aplicación Laravel con autenticación y un sistema de plantillas organizado

Comentarios

Publicar un comentario

Entradas más populares de este blog

8-Creación de una API RESTful con Laravel

  Creación de una API RESTful con Laravel En este tutorial, te guiaré paso a paso para crear una API RESTful básica con Laravel, incluyendo autenticación, rutas, controladores y migraciones. Requisitos previos PHP ≥ 8.1 Composer instalado Laravel instalado globalmente Conocimientos básicos de PHP y Laravel Base de datos configurada (MySQL, PostgreSQL, SQLite, etc.) Paso 1: Crear un nuevo proyecto Laravel bash laravel nuevo mi-api-laravel # O usando composer composer create-project laravel/laravel mi-api-laravel Accede al directorio del proyecto: bash cd mi-api-laravel Paso 2: Configurar la base de datos Abre el archivo  .env  y configura las credenciales de tu base de datos: env DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=mi_api_laravel DB_USERNAME=root DB_PASSWORD= Paso 3: Crear un modelo con migración, controlador y factory Vamos a crear un modelo  Producto  como ejemplo: bash php artisan make:model Producto -mcr Esto creará: Un modelo ( ...
Leer más

02 -Rutas en Laravel

  Rutas en Laravel: Explicación y Ejemplos Las rutas en Laravel son el mecanismo que permite definir cómo responde tu aplicación a las solicitudes HTTP entrantes. Todas las rutas de Laravel se definen en los archivos dentro del directorio  routes/ . Tipos básicos de rutas 1. Rutas básicas php Copy Download Route :: get ( '/saludo' , function ( ) { return '¡Hola Mundo!' ; } ) ; Cuando se visita  /saludo  en el navegador, se mostrará "¡Hola Mundo!". 2. Rutas con parámetros php Copy Download Route :: get ( '/usuario/{id}' , function ( $id ) { return 'Usuario ' . $id ; } ) ; Esta ruta capturará el ID de la URL y lo pasará a la función. 3. Rutas con parámetros opcionales php Copy Download Route :: get ( '/post/{titulo?}' , function ( $titulo = 'Título por defecto' ) { return $titulo ; } ) ; El parámetro  titulo  es opcional y tiene un valor por defecto. 4. Rutas con restricciones php Copy Download Rout...
Leer más

3-Rutas

  Rutas en Laravel: Explicación y Ejemplos Las rutas en Laravel son el mecanismo que permite definir cómo responde tu aplicación a las solicitudes HTTP entrantes. Todas las rutas de Laravel se definen en los archivos dentro del directorio  routes/ . 2. Rutas con parámetros php Copy Download Route :: get ( '/usuario/{id}' , function ( $id ) { return 'Usuario ' . $id ; } ) ; Esta ruta capturará el ID de la URL y lo pasará a la función. 3. Rutas con parámetros opcionales php Copy Download Route :: get ( '/post/{titulo?}' , function ( $titulo = 'Título por defecto' ) { return $titulo ; } ) ; El parámetro  titulo  es opcional y tiene un valor por defecto. 5. Rutas con nombre php Copy Download Route :: get ( '/perfil' , function ( ) { // ... } ) -> name ( 'perfil' ) ; Puedes generar URLs a esta ruta usando  route('perfil') . Rutas hacia controladores php Copy Download Route :: get ( '/productos'...
Leer más