En este post voy a dar una introducción a cómo renderizar y mostrar vistas en el framework de Laravel. Será con la versión 5.8 pero aplica a casi todas las versiones actuales.

Lo que veremos será:

• Cómo crear vistas
• Ubicación de las vistas
• Pasar datos a las vistas
• Definir layouts o plantillas base
• Fomentar la reutilización de plantillas

Recuerda que ya vimos:

Cómo comenzar un proyecto de Laravel

Actualizar Laravel a versión 5.8

Rutas en Laravel

Rutas en Laravel parte 2

Comencemos.

El motor de plantillas Blade

Laravel utiliza el motor de Blade. Es un motor robusto, con protección contra ataques XSS y que compila el código a PHP nativo.

Ubicación de las vistas

Las vistas en Laravel están ubicadas en resources/views. Dentro de esa carpeta podemos ubicar las vistas directamente, o crear subcarpetas para tener una mejor organización.

Si te fijas bien, tienen la extensión .blade.php. Dentro de ellas defines el código HTML.

Por cierto, en los siguientes ejemplos vamos a renderizar pasando simplemente el nombre de la vista, sin extensiones:

view("nombre_de_la_vista")

Si organizas tus vistas en distintas carpetas, usa el punto para separar:

view("usuarios.mostrar")

También puedes usar la barra:

view("usuarios/mostrar")

Contenido de una vista

Para renderizar se utilizan los mostachos (bueno, no sé si se les dice así pero se parecen a unos mostachos) que en realidad son pares de llaves:

{{expresión}}

Como lo dije, automáticamente se previenen ataques XSS y no se imprime directamente código HTML dentro de la expresión.

Si quieres mostrar contenido HTML y exponerte a ataques XSS usa un signo de admiración:

{!! expresión !!}

Ejemplo de una vista

Veamos una simple vista:

See the gist on github.

Dentro de ella vamos a renderizar algunas cosas que podríamos hacer con PHP pero de una forma más elegante. También podríamos mostrar variables con:

{{$variable}}

Igualmente se pueden hacer ciclos, condicionales y eso pero lo veremos en otro post cuando analicemos Blade.

En la vista llamamos a la función time, mostramos el resultado de una suma y mostramos un mensaje con la primera letra mayúscula.

Pasar datos a vistas

Para pasar datos de las vistas normalmente definimos una ruta que llame a un controlador. Por ejemplo:

See the gist on github.

La vista será la siguiente:

See the gist on github.

Desde el controlador pasamos los datos llamando a with, pasándole un arreglo en donde las claves serán los nombres de las variables desde las vistas.

El contenido del método mostrar del controlador es el siguiente:

See the gist on github.

Dentro de las vistas accedemos a los datos. Como se observa, se pueden pasar arreglos y todo tipo de datos. En la vista hacemos un foreach para recorrer el arreglo, lo cual es una directiva de Blade.

La salida es la siguiente:

E igualmente podríamos pasar otros datos traídos desde el almacenamiento de la aplicación o cualquier otro lugar.

Alternativa para pasar datos

Si los datos no son muchos, podríamos llamar a Route::view y mandar un tercer argumento:

Route::view("urlVisitada", "nombreDeVista", ["titulo" => "Soy un título"]);

Layouts y plantillas base

Con Blade y Laravel la reutilización de plantillas, la creación de componentes y la definición de layouts base son unas cosas muy fáciles de lograr.

Por ejemplo, tenemos una plantilla base o maestra:

See the gist on github.

Hay que fijarnos en las directivas de yield. Tenemos dos:

• El título
• El contenido

Más tarde extendemos de esta vista (usando extends e indicando el nombre de la plantilla que extendemos):

See the gist on github.

Para remplazar el título, llamamos a @section. Luego, como el contenido es más grande, definimos un fragmento de sección y dentro ponemos lo que irá en el body.

El código HTML resultante es este:

See the gist on github.

Sin fijarnos en otras cosas como el token CSRF o las URL, vemos que tomó la plantilla maestra y mostró el título y contenido.

Gracias a esto podemos fomentar la reutilización de plantillas y la separación de componentes.

Te invito a ver más tutoriales de Laravel.