Tema 11.
BladeIntroducción
Blade es el sistema de plantillas de Laravel, que nos proporciona muchas características que
deberíamos tener en un lenguaje de plantillas. Las vistas en Laravel son la parte pública que
podrá ver el usuario de nuestro sistema, están escritas en HTML junto con el motor de plantillas
Blade. Las vistas están en la carpeta recursos/vistas .
Laravel por defecto trabaja con la idea de que debemos escribir la menor cantidad de código
repetido, modularizar nuestro código donde podamos y, si aplicamos esto a nuestros modelos,
controladores y otras partes de nuestro proyecto, las vistas no serán la excepción.
Laravel utiliza archivos llamados plantillas que suelen ser nuestros archivos principales, que
tienen los segmentos de código que se repiten en más de una vista, por ejemplo, la barra de
navegación, un menú de opciones, la estructura del diseño de nuestro proyecto, etc. Y, como
deben estar presentes prácticamente en todas partes, no tiene sentido estar repitiéndolos en
todas las vistas.
Explicación
11.1. Plantillas de cuchillas
Blade es el motor de plantillas simple pero potente que viene con Laravel. A diferencia de otros
motores de plantillas PHP populares, Blade no le impide utilizar código PHP simple en sus
vistas. De hecho, todas las vistas de Blade se compilan en código PHP simple y se almacenan
en caché hasta que se modifican, lo que significa que Blade prácticamente no agrega gastos
generales a su aplicación. Los archivos de vista Blade usan la extensión de archivo .[Link] y
generalmente se almacenan en el directorio de recursos/vistas .
Herencia de plantilla
Definiendo un diseño
Dos de los principales beneficios de usar Blade son la herencia de plantillas y las secciones.
Veamos un ejemplo sencillo, examinando primero un diseño de página "maestra". Dado que la
mayoría de las aplicaciones web mantienen el mismo diseño general en varias páginas, es
conveniente definir este diseño como una única vista Blade.
< ! -- Almacenado en resources/views/layouts/[Link] -->
<html>
<head>
<title>Nombre de la aplicación - @yield('title')</title>
</head>
<body>
@section ('barra lateral')
Esta es la barra lateral maestra.
@show
<div class="contenedor">
@yield( 'contenido')
</div>
</body>
</html>
Estructura típica de una vista maestra en Laravel Blade.
Laravel. (2022). Plantillas de cuchillas . Obtenido de [Link]
Como puede ver, este archivo contiene marcado HTML típico, sin embargo, debemos resaltar
las directivas @section y @yield . La directiva @section , como su nombre indica, define una
sección de contenido, mientras que la directiva @yield se utiliza para mostrar el contenido de
una sección determinada (Laravel, 2022).
Ahora que hemos definido un diseño para la aplicación, es posible utilizar una página
secundaria que herede el diseño.
Ampliar un diseño
Al definir una vista secundaria, la directiva Blade @extends se utiliza para especificar qué
diseño debe "heredar" la vista secundaria. Las vistas que amplían un diseño Blade pueden
inyectar contenido en secciones del diseño usando directivas @section . Recuerde que, como se
vio en el ejemplo anterior, el contenido de estas secciones se mostrará en el diseño usando
@yield .
< ! -- Almacenado en resources/views/[Link] -->
@extends('[Link]')
@section('title', 'Título de la página')
@section('sidebar')
@@parent
<p> Esto se adjunta a la barra lateral principal.</p>
@endsection
@section('content')
<p>Este es el contenido de mi cuerpo.</p>
@endsection
Ejemplo de una vista secundaria en Laravel Blade.
Laravel. 2022). Plantillas de cuchillas . Obtenido de [Link]
En este ejemplo, la sección de la barra lateral utiliza la directiva @parent para agregar (en lugar
de sobrescribir) contenido a la barra lateral de diseño. La directiva @parent será reemplazada
por el contenido del diseño al representar la vista (Laravel, 2022).
Importante : esta sección de la barra lateral termina con @endsection en lugar de @show. La
directiva @endsection solo definirá una sección, mientras que @show definirá y generará
inmediatamente la sección.
La directiva @yield también acepta un valor predeterminado como segundo parámetro. Este
valor estará representado si la sección que se está generando no está definida:
@yield('contenido', Ver ::make ('[Link]'))
Mostrando datos
Puede mostrar los datos pasados a sus vistas Blade envolviendo la variable entre llaves, por
ejemplo, dada la siguiente ruta:
Ruta ::get ('saludo', función() {
return view('bienvenido', ['nombre' => 'Tecmilenio']);
});
Puede mostrar el contenido de la variable de nombre de la siguiente manera:
Hola, { { $ nombre }}.
Importante : las declaraciones Blade {{ }} se envían automáticamente a través de la función
htmlspecialchars de PHP para evitar ataques XSS.
Otra característica de Blade es que no se limita a mostrar el contenido de las variables pasadas a
la vista. También puede hacerse eco de los resultados de cualquier función PHP (Laravel,
2022). De hecho, puedes poner cualquier código PHP que quieras dentro de una declaración de
eco de Blade .
La marca de tiempo actual de UNIX es { {time () }}.
Mostrar datos sin escapar
De forma predeterminada, las declaraciones Blade {{ }} se envían automáticamente a través de
la función htmlspecialchars de PHP para evitar ataques XSS. Si no desea que se escapen los
datos, puede utilizar la siguiente sintaxis:
Hola, { !! $ nombre!! }.
Importante : debemos tener mucho cuidado al hacernos eco de contenidos proporcionados por
los usuarios de la aplicación. Siempre debemos utilizar la sintaxis de llaves de doble escape
para evitar ataques XSS al mostrar datos proporcionados por el usuario (Laravel, 2022).
Estructuras de Control
Además de la herencia de plantillas y la visualización de datos, Blade también proporciona
atajos útiles a estructuras de control PHP comunes, como sentencias condicionales y bucles.
Estos atajos proporcionan una forma muy clara y concisa de trabajar con estructuras de control
de PHP, sin dejar de ser familiares para sus homólogos de PHP (Laravel, 2022).
Si estructura de declaración
En Blade podemos construir declaraciones if usando las directivas @if, @elseif, @else y
@endif . Estas directivas funcionan de manera idéntica a sus contrapartes PHP.
@ if (count($records) === 1)
¡Tengo un registro!
@ elseif (count($records) > 1) ¡
Tengo varios registros!
@ demás
¡No tengo ningún registro!
@terminara si
Habrá situaciones que lo requieran y, por conveniencia, Blade también proporciona una
directiva @unless.
@a menos que (Auth ::check ())
No hayas iniciado sesión.
@endunless
Además de las directivas condicionales, tenemos las directivas @isset y @empty que pueden
usarse como atajos convenientes para sus respectivas funciones PHP.
@isset( $records)
// $records está definido y no es nulo...
@endisset
@empty($records)
// $records está "vacío"...
@endempty
Directivas de autenticación
Las directivas @auth y @guest se pueden utilizar para determinar rápidamente si el usuario
actual está autenticado o es un invitado.
@auth
// El usuario está autenticado...
@endauth
@guest
// El usuario no está autenticado...
@endguest
Directivas medioambientales
Es posible comprobar si la aplicación se está ejecutando en el entorno de producción utilizando
la directiva @production .
@production
// Contenido específico de producción...
@endproduction
O podemos determinar si la aplicación se está ejecutando en un entorno específico utilizando la
directiva @env .
@env( 'staging')
// La aplicación se está ejecutando en "staging"...
@endenv
@env(['staging', 'production'])
// La aplicación se está ejecutando en "staging" o "producción". ..
@endenv
Declaración de estructura de interruptor
Las declaraciones de directiva switch se pueden construir usando las directivas @switch,
@case, @break, @default y @endswitch .
@switch( $i)
@case(1)
Primer caso...
@break
@case(2)
Segundo caso...
@break
@default
Caso predeterminado...
@endswitch
Declarar estructuras repetitivas
Además de las declaraciones condicionales, Blade proporciona directivas simples para trabajar
con las estructuras de ciclos repetitivos de PHP. Nuevamente, cada una de estas directivas
funciona de manera idéntica a sus contrapartes PHP.
@for ($i = 0; $i < 10; $i++)
El valor actual es {{ $i }}
@endfor
@foreach ($usuarios como $usuario)
<p>Este es el usuario {{ $usuario->id }}</p>
@endforeach
@forelse ($usuarios como $usuario)
<li>{{ $usuario->nombre }}</li>
@empty
<p>Sin usuarios</p>
@endforelse
@ while (true )
<p>Estoy en bucle para siempre.</p>
@end while
Al utilizar bucles, también puede finalizar el bucle u omitir la iteración actual.
@foreach ($usuarios como $usuario)
@if ($usuario->tipo == 1)
@continue
@endif
<li >{ { $usuario->nombre }}</li>
@if ($usuario->número = = 5)
@break
@endif
@endforeach
También puede incluir la condición con la declaración directiva en una línea.
@foreach ($usuarios como $usuario)
@continue( $usuario->tipo == 1)
<li>{{ $usuario->nombre }}</li>
@break($usuario->número == 5)
@endforeach
La variable de bucle
Al realizar un bucle, una variable $loop estará disponible dentro del bucle. Esta variable
proporciona acceso a algunos bits de información útiles, como el índice del bucle actual y si
esta es la primera o la última iteración del bucle.
@foreach ($usuarios como $usuario)
@if ($loop->first)
Esta es la primera iteración.
@endif
@if ($loop->last)
Esta es la última iteración.
@endif
<p>Este es el usuario { { $ usuario->id }}</p>
@endforeach
En un bucle anidado, se puede acceder a la variable $loop del bucle principal a través de la
propiedad principal.
@foreach ($usuarios como $usuario)
@foreach ($usuario->publicaciones como $publicación)
@if ($loop->parent->first)
Esta es la primera iteración del bucle principal.
@endif
@endforeach
@endforeach
Comentarios
Blade también le permite definir comentarios sobre las vistas. Sin embargo, a diferencia de los
comentarios HTML, los comentarios de Blade no se incluyen en el HTML devuelto por la
aplicación.
{{-- Este comentario no estará presente en el HTML renderizado --}}
PHP
En algunas situaciones, resulta útil incrustar código PHP en las vistas. Puede utilizar la
directiva Blade @php para ejecutar un bloque PHP simple dentro de su plantilla.
@php
//
@endphp
Formularios
Siempre que defina un formulario HTML en su aplicación, debe incluir un campo de token
CSRF oculto en el formulario para que el middleware de protección CSRF pueda validar la
solicitud. Puede utilizar la directiva @csrf de Blade para generar el campo token.
<form método="POST" acción="/perfil">
@csrf
...
</form>
Métodos
Dado que los formularios HTML no pueden realizar solicitudes PUT, PATCH o DELETE, se
debe agregar un campo _ método oculto para falsificar estos verbos HTTP. La directiva
@method de Blade puede crear este campo.
<formulario acción="/foo/bar" método="POST">
@método( 'PONER')
...
</formulario>
Errores de validación
La directiva @error se puede utilizar para comprobar rápidamente si hay mensajes de error de
validación de un atributo. Dentro de una directiva @error , se puede repetir la variable
$message para mostrar el mensaje de error.
< ! -- /resources/views/post/[Link] -->
<label for="title">Título de la publicación</label>
<input id="title" type="text" class="@error(' título') no es válido @enderror">
@error('título')
<div class="alert alert-danger">{{ $message }}</div>
@enderror
11.2. Localización
Las funciones de localización de Laravel proporcionan una manera conveniente de recuperar
cadenas de múltiples idiomas, lo que permite admitir fácilmente múltiples idiomas dentro de la
aplicación (Laravel, 2022). Las cadenas de idioma se almacenan en archivos dentro del
directorio resources/lang. Dentro de este directorio debe haber un subdirectorio para cada
idioma admitido por la aplicación.
/resources
/lang
/es
[Link]
/es
[Link]
Todos los archivos de idioma devuelven una serie de cadenas con clave.
Ejemplo
<? PHP
return [
'bienvenido' => 'Bienvenido a nuestra aplicación',
];
Configurar los ajustes locales
El idioma predeterminado para la aplicación se almacena en el archivo de configuración
config/[Link]. Es posible cambiar este valor para adaptarlo a las necesidades de la aplicación.
También puedes cambiar el idioma activo en tiempo de ejecución usando el método setLocale
con la aplicación Facade.
Ruta ::get ('bienvenido/{locale}', function ($locale) {
if (! in_array($locale, ['en', 'es', 'fr'])) {
abort(400);
}
Aplicación ::setLocale($locale);
//
});
11.3. Andamio frontal
Si bien Laravel no dicta qué preprocesadores de JavaScript o CSS usar, proporciona un punto
de partida básico con Bootstrap, React y/o Vue que será útil para muchas aplicaciones. De
forma predeterminada, Laravel usa NPM para instalar estos dos paquetes front-end (Laravel,
2022).
El andamio Bootstrap y Vue proporcionado por Laravel está contenido en el paquete laravel/ui
que se puede instalar usando Composer.
> el compositor requiere laravel/ui:^2.4
Una vez instalado el paquete laravel/ui, la interfaz de scaffolding se puede instalar usando el
comando ui de Artisan.
// Generar andamio básico...
php artisan ui bootstrap
php artisan ui vue
php artisan ui reaccionar
// Generar andamio de inicio de sesión/registro...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui reaccionar -- autenticación
CSS
Laravel Mix proporciona una API limpia y expresiva sobre cómo compilar SASS o Less, que
son extensiones CSS simples que agregan variables, mixins y otras características poderosas
que hacen que trabajar con CSS sea mucho más agradable. Se recomienda consultar la
documentación completa de Laravel Mix [ [Link] ] para obtener más
información sobre cómo compilar SASS or Less (Laravel, 2022).
javascript
Laravel no requiere que utilices un marco o biblioteca de JavaScript específico para crear tus
aplicaciones. De hecho, no es necesario utilizar JavaScript en absoluto. Sin embargo, Laravel
incluye algunos andamios básicos para que sea más fácil comenzar a escribir JavaScript
moderno utilizando la biblioteca Vue.
Vue proporciona una API expresiva para crear aplicaciones JavaScript sólidas utilizando
componentes. Al igual que con CSS, puedes usar Laravel Mix para compilar fácilmente
componentes JavaScript en un único archivo JavaScript listo para el navegador.
Escribir CSS
Después de instalar el paquete laravel/ui y generar la interfaz de scaffolding, el archivo
[Link] de Laravel incluirá el paquete bootstrap para ayudarlo a comenzar a crear
prototipos de la interfaz de su aplicación usando Bootstrap. Sin embargo, puede agregar o
eliminar paquetes del archivo [Link] según sea necesario para su aplicación. No es
necesario utilizar el framework Bootstrap para crear la aplicación Laravel; se proporciona como
un buen punto de partida para quienes decidan utilizarlo.
Antes de compilar el CSS, las dependencias de front-end del proyecto deben instalarse
utilizando Node Package Manager (NPM).
> instalación npm
Una vez que las dependencias se hayan instalado usando npm install, los archivos SASS se
pueden compilar en CSS simple usando Laravel Mix. El comando npm run dev procesará las
instrucciones en el archivo [Link]. Normalmente, el CSS compilado se colocará en el
directorio public/css .
> npm ejecutar desarrollo
El archivo [Link] incluido con el scaffolding frontend de Laravel compilará el archivo
SASS resources/sass/[Link] . Este archivo [Link] importa un archivo de variables SASS y
carga Bootstrap, lo que proporciona un buen punto de partida para la mayoría de las
aplicaciones. Puede personalizar el archivo [Link] o incluso utilizar un preprocesador
completamente diferente.
Conclusión
Blade es un potente motor de plantillas que le permite modularizar y diseñar HTML a un alto
nivel. Como recordatorio, aquí tienes algunas de las declaraciones de Blade junto con su
función.
@extends( 'template_name'): esta declaración ayuda a indicarle a una vista qué
plantilla usar.
@yield('nombre'): esta declaración permite declarar una sección futura del HTML a
definir en las vistas que se heredan y no puede agregar algún tipo de contenido por
defecto, esto solo se usa en archivos que toman la Plantilla
@section('nombre'): esta sentencia tiene dos usos dependiendo de lo que se quiera
declarar, el primero es que permite declarar, como su nombre lo dice, una sección
dentro de la plantilla que puede tener un contenido predeterminado que, si no se
redefine en la vista que hereda la plantilla, entonces aparecerá; el segundo permite
asignar el contenido en una sección que fue declarada en la plantilla , es decir, esta
palabra sección se usa tanto en la plantilla como en las vistas secundarias, una
diferencia más es que si se usa en la plantilla entonces la sección termina con
@show , pero si se usa en una vista secundaria, termina la sección con @stop .
@show: esta declaración se usa para indicar dónde está la sección definida en la
plantilla
@parent: esta declaración ayuda a cargar el contenido predeterminado de una sección
de la plantilla , se puede usar cuando quieras agregar más contenido dentro, pero sin
alterar el contenido predeterminado, es decir, agregar más HTML. Esta declaración
se utiliza dentro de una sección .
@stop: esta declaración permite saber dónde termina una sección cuando la sección se
usa dentro de las vistas secundarias.
@include( '[Link]'): esta declaración se agrega en el lugar donde se usa un
archivo [Link] que contiene un fragmento parcial o parcial de HTML, si ese
parcial está en la raíz de las vistas, no necesita más que el nombre sin la hoja de
extensión. php , pero si está dentro, por ejemplo, de la carpeta " views/admin/users / "
llamada [Link] , para incluirla se utilizaría la ruta junto con el nombre
quedando como @include( 'admin. [Link]'); Las vistas no están
contempladas, ya que es la raíz de las vistas.
Control
Asegúrate de que:
Comprender los enunciados Blade y la función de cada uno de ellos.
Familiarícese con la lógica de localización.
Identificar las diferentes interfaces de andamiaje que tiene Laravel.
Comprender la importancia de la recopilación de activos.
Referencias
Laravel. (2022). Instalación . Obtenido de [Link]
Recursos adicionales
Los siguientes enlaces no pertenecen a la Universidad Tecmilenio, al acceder a ellos
deberá aceptar sus términos y condiciones.
Vídeos
Para conocer Blade , mire el siguiente video:
Coder's Tape. (2019, 18 de septiembre). Laravel 6 Principiante - e6 - Plantillas
Blade [archivo de vídeo]. Obtenido de [Link]
v=ZqCzByro0uk
Para conocer Laravel Blade , mire el siguiente video:
Codificación (22 de enero de 2021). Tutorial de Laravel 8: 10 directivas de Blade
que debes conocer [archivo de vídeo]. Obtenido de [Link]
v=9bl-IjQnIYI
Para conocer los nuevos componentes de Blade , mire el siguiente video:
Coder's Tape. (2020, 26 de febrero). Nuevo en Laravel 7 - e01 - Nuevos componentes
de Blade [archivo de video]. Obtenido de [Link]
v=cQWeTnOwlm4
Lecturas
Para conocer más sobre las plantillas Blade , te recomendamos leer:
Laravel. (2022). Plantillas de cuchillas . Obtenido de
[Link]
Para conocer más sobre las plantillas Blade , recomendamos leer:
[Link]. (Dakota del Norte). Plantillas de cuchillas . Obtenido de
[Link]
Para conocer más sobre las plantillas Blade , te recomendamos leer:
kiwop. (2022). Todo lo que necesitas saber sobre Laravel . Obtenido de
[Link]
Actividad 11
Descripción
El estudiante creará un sistema con una vista primaria y vistas que reciben herencia.
Objetivo
Comprender y utilizar el sistema de plantillas Laravel Blade.
Requisitos
Computadora con acceso a Internet, tenga instalado XAMPP, o WAMP, MAMP, LAMP o
Laragon Stack.
Instrucciones
Crearás un nuevo proyecto llamado “menús”, en el cual harás lo siguiente:
1. Una vista principal que contiene un menú con al menos tres opciones (puedes poner
las opciones que quieras, por ejemplo, "casa, fotos, contacto" o "casa, ingresos,
gastos, informes").
2. Crearás una vista para cada opción del menú, el contenido de cada sección debe ser
diferente y debe quedar claro que la vista corresponde a la sección.
3. Cada vez que se accede a una vista, se debe resaltar la sección en el menú principal;
por ejemplo, si en el menú se selecciona "casa, fotos, contacto", al acceder a la
sección "contacto", el menú debe resaltar la opción de contacto ("casa, fotos,
contacto ").
4. Debes crear un pie de página con información sobre quién realiza la actividad. El pie
de página debe mostrarse desde todas las vistas (como recomendación, insértelo en la
vista principal).
5. Crea el proyecto en git y sube tu actividad a GitHub. Recuerde editar su archivo
[Link] con información sobre la actividad. No olvides que para que las vistas
funcionen, debes crear sus rutas y/o controlador(es) que resolverán las rutas.
Integra en un documento en formato informe las capturas de pantalla de cada apartado de la
actividad, así como la URL del proyecto en GitHub.
Entregables
Documento de informe que contiene las capturas de pantalla del proyecto, así como la URL de
su proyecto en GitHub.
Criterios de evaluación
1. Descripción en el archivo [Link]
2. Vista principal
3. Vistas secundarias (al menos tres) con información descriptiva de la sección
4. Pie de página
Tarea 9
Instrucciones
Luego de realizar la actividad 11, integraremos el contenido en un panel de administración.
Ejemplo
AdministradorLTE: [Link]
Busque documentación sobre cómo implementar AdminLTE 3 en Laravel 7, puede buscar en
YouTube o cualquier fuente que desee, luego haga lo siguiente:
1. Integre AdminLTE en un nuevo proyecto de Laravel 7 llamado "task9".
2. Estudiarás el contenido de AdminLTE para eliminar todas las secciones innecesarias.
3. Reemplace las opciones del menú lateral con las opciones de su proyecto de la
Actividad 11.
4. Coloca el contenido de cada sección de tu Actividad 11 en sus respectivas vistas en
AdminLTE.
5. Edite el pie de página para que contenga su información de la Actividad 11.
Le proporcionarás a tu profesor la URL del proyecto GitHub, así como las capturas de pantalla
en un documento.
Entregables
Envía tus resultados en el espacio correspondiente de la plataforma.
