Vistas¶

A través de las plantillas de Laravel vamos a escribir menos código PHP y tendremos nuestros archivos mejor organizados. Blade es el sistema de plantillas que trae Laravel, por eso los archivos de plantillas que guardamos en el directorio de views llevan la extensión blade.php. De esta manera sabemos inmediatamente que se trata de una plantilla de Laravel y que forma parte de una vista que se mostrará en el navegador.

Una plantilla (o template) es un archivo que define la estructura visual común de varias páginas de una aplicación web. Su objetivo principal es reutilizar código HTML que se repite en múltiples vistas, como cabeceras, menús, pies de página o contenedores generales. Esto permite mantener el código organizado, más limpio y fácil de mantener.

Aunque este concepto ya se ha introducido en el módulo de LMGSI, en Laravel adquiere un papel muy importante gracias a su motor de plantillas Blade.

Blade permite definir plantillas base con secciones dinámicas que pueden ser sobrescritas o completadas por otras vistas hijas. De esta manera, es posible crear una estructura común (por ejemplo, layouts/app.blade.php) y luego extenderla desde otras vistas sin tener que repetir todo el HTML.

Directivas¶

En Laravel, y más concretamente en su motor de plantillas Blade, una directiva es una instrucción especial que comienza con el símbolo @ y que Laravel interpreta para realizar una acción específica en una vista. Las directivas no son HTML ni PHP puro, sino una especie de "atajo" que simplifica tareas comunes que, de otro modo, requerirían escribir más código.

Podríamos decir que una directiva es una función ya preparada que Blade reconoce e interpreta en tiempo de renderizado de la vista. Estas directivas permiten desde estructurar vistas, incluir otras plantillas, mostrar contenido condicionalmente, recorrer bucles, proteger formularios o imprimir valores, entre muchas otras cosas.

Laravel incluye muchas directivas por defecto, aunque también se pueden definir directivas personalizadas si fuera necesario.

A continuación, algunos ejemplos básicos:

@yield Define el contenido dinámico que se va a cargar. Se usa conjuntamente con @section.
@section y @endsection bloque de código dinámico.
@extends importa el contenido de una plantilla ya creada.

Ejemplo¶

Veamos un ejemplo de cómo hacer uso del poder de Laravel para crear plantillas y no repetir código. Supongamos que tenemos ciertas estructuras HTML repetidas como puede ser una cabecera header, un menú de navegación nav y un par de secciones que hacen uso de este mismo código. Para este apartado tenemos 2 apartados en la web:

Blog
Fotos

Primero de todo tendremos que generar un archivo que haga de plantilla de nuestro sitio web. Para ello creamos el archivo plantilla.blade.php dentro de nuestro directorio de plantillas resources/views. Dicho archivo va a contener el típico código de una página simple de HTML y en el body añadiremos nuestros contenido estático y dinámico.

plantilla.blade.php

<body>
    <!-- CONTENIDO ESTÁTICO PARA TODAS LAS SECCIONES -->
    <h1>Bienvenid@s a Laravel</h1>
    <hr>

    <!-- MENÚ -->
    <nav>
        <a href={{ route('noticias') }}>Blog</a> | 
        <a href={{ route('galeria') }}>Fotos</a>
    </nav>

    <!-- CONTENIDO DINÁMICO EN FUNCIÓN DE LA SECCIÓN QUE SE VISITA -->
    <header>
        @yield('apartado')
    </header>
</body>

Cada sección que haga uso de esta plantilla contendrá el texto estático Bienvenid@s a Laravel seguido de un menú de navegación con enlaces a cada una de las secciones y el contenido dinámico de cada sección. Ahora crearemos los archivos dinámicos de cada una de las secciones, en nuestro caso blog.blade.php y fotos.blade.php

blog.blade.php

<?php
@extends('plantilla')

@section('apartado')
  <h2>Estás en BLOG</h2>
@endsection

Importamos el contenido de plantilla bajo la directiva @extends para que cargue los elementos estáticos que hemos declarado y con la directiva @section y @endsection definimos el bloque de código dinámico, en función de la sección que estemos visitando.

Ahora casi lo mismo para la sección de fotos:

fotos.blade.html

<?php
@extends('plantilla')

@section('apartado')
  <h2>Estás en FOTOS</h2>
@endsection

El último paso que nos queda es configurar el archivo de rutas routes/web.php

routes/web.php

<?php
Route::view('blog', 'blog') -> name('noticias');
Route::view('fotos', 'fotos') -> name('galeria');

De esta manera podremos hacer uso del menú de navegación que hemos puesto en nuestra plantilla y gracias a los alias noticias y galeria, la URL será más amigable.

Estructuras de control¶

Como en todo buen lenguaje de programación, en Blade también tenemos estructuras de control. Siempre que iniciemos un bloque de estructura de control debemos cerrarla:

@foreach ~ @endforeach lo usamos para recorrer arrays
@if ~ @endif para comprobar condiciones lógicas
@switch ~ @endswitch en función del valor de una variable ejecutar un código
@case define la casuística del switch
@break rompe la ejecución del código en curso
@default si ninguna casuística se cumple

<?php

$equipo = ['María', 'Alfredo', 'William', 'Verónica'];

@foreach ($equipo as $nombre)
  <p> {{ $nombre }} </p>
@endforeach

`@compact`¶

Cuando se trabaja con vistas en Laravel, es habitual necesitar pasar variables desde una ruta o un controlador hacia la plantilla correspondiente. Una de las formas más limpias y recomendadas de hacerlo es mediante la función nativa de PHP compact().

La función compact() crea un array asociativo a partir de nombres de variables. En Laravel se utiliza con frecuencia para enviar datos a las vistas sin necesidad de construir manualmente el array.

<?php

// Uso de @compact
$equipo = ['María', 'Alfredo', 'William', 'Verónica'];

// Route::view('nosotros', ['equipo' => 'equipo']);
Route::view('nosotros', @compact('equipo'));

Ambas formas son equivalentes, pero compact() permite reducir código y hacerlo más legible, especialmente cuando se están pasando varias variables a la vez. Esta técnica es especialmente útil en controladores, pero también puede aplicarse directamente en las rutas, como en el ejemplo anterior.

Actividades¶

AC 711. (RA8 / CE8c CE8d / IC1 / 3p) - Realiza la vista principal de la aplicación de tareas. Aprovecha que ya tienes el controlador y las rutas para comprobar que el servicio funciona.
AR 712. (RA8 / CE8c CE8d / IC1 / 3p) - Realiza las vistas necesarias de la aplicación de blog. Aunque la visualización es importante, en este punto de desarrollo no es vital. Las vistas pueden hacer que inviertas un tiempo muy valioso en dejarlas con la interfaz que deseas. De momento, céntrate en la estructura del lenguaje de marcas.
PR 713. (RA8 / CE8c CE8d / IC2 / 5p) - El encargado del SEO¹ del proyecto te solicita que le facilites la estructura semántica de la aplicación de e-commerce. Aunque no sea su labor, quiere que le pases también la parte de administración.

SEO responde a las siglas Search Engine Optimization. Fundamentalmente es cómo los diferentes motores de búsqueda ven nuestra web. ↩