Lección: 24 Comó EXTENDER PLANTILLAS BLADE en la PLATAFORMA de PELICULAS con (LARAVEL y MYSQL) FULLSTACK

24 Comó EXTENDER PLANTILLAS BLADE en la PLATAFORMA de PELICULAS con (LARAVEL y MYSQL) FULLSTACK

Duración: 7 min

Módulo: 🖥️ Módulo de Arquitectura Admin y Vistas Blade Lección 6 de 8

Descripción

🏗️ Lección 24: Extensión y Personalización de Plantillas Blade (Layouts)

Esta lección avanzada se enfoca en la extensión y adaptación de la plantilla base de Laravel para integrar el diseño de AdminLTE como el nuevo layout principal del panel de administración. El objetivo es que todas las vistas del backend hereden el diseño de AdminLTE y solo se modifique el contenido central de cada página.

1. 🆕 Creación de una Plantilla Maestra Específica para AdminLTE [01:05]

Se crea un nuevo archivo de layout para contener el código estructural del panel de administración, separándolo del layout predeterminado de Laravel (layouts.app).

Archivo Maestro: Se crea admin.blade.php dentro de la carpeta resources/views/layouts [01:15].
Contenido: El código HTML base de AdminLTE (tomado del starter.html) se copia en este nuevo archivo [01:22].

2. 🔗 Vinculación de Estilos con la Directiva asset() [03:13]

La plantilla de AdminLTE deja de funcionar al ser copiada a la carpeta layouts porque pierde la referencia a sus archivos estáticos (plugins y dist). Esto se corrige utilizando la directiva de Laravel asset().

Problema de Referencias: Al cargar la plantilla, los estilos no se aplican porque las rutas a los archivos CSS y JS son relativas y ahora incorrectas [03:19].
Solución: Se recorre el archivo admin.blade.php y se reemplazan todas las rutas estáticas (dist/css/..., plugins/...) por la función {{ asset('...') }} [04:09].
- La función asset() genera una URL completa que siempre apunta a la carpeta public del proyecto, resolviendo el problema de las rutas estáticas sin importar dónde se encuentre el archivo Blade [04:36].

3. 🎯 Definición del Área de Contenido con @yield

El propósito principal de una plantilla maestra es definir dónde se inyectará el contenido único de cada vista secundaria.

Problema Inicial: Al heredar la plantilla (usando @extends('layouts.admin')), la vista de películas muestra el layout de AdminLTE, pero no inyecta el listado de películas en el lugar correcto [03:19].
Implementación de @yield: En la plantilla admin.blade.php, se define un bloque de contenido dinámico usando la directiva @yield('content'). Este es el espacio reservado donde se inyectará el código de la vista hija.
Implementación de @section: En la vista hija (ej., admin/peliculas/index.blade.php), el código específico (el listado de películas) se envuelve en la directiva @section('content') [00:18].
Resultado: Esto permite que el layout (AdminLTE) permanezca estático, mientras que el contenido único de la vista (el listado de la base de datos) se inyecta en el área definida por @yield [00:41], logrando una separación limpia entre la estructura y la lógica.

Apoya este proyecto

Si te gusta nuestro contenido, ¡apóyanos con una donación!

Donar por Airtm Donar por Binance

¡Gracias por tu apoyo! ❤️

Hilari Web