Organización de vistas en Laravel

Tutorial de vistas con Blade en Laravel

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.

Organización de vistas en Laravel
Organización de vistas en Laravel

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:

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:

La vista será la siguiente:

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:

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:

Vista renderizada desde el controlador
Vista renderizada desde el controlador

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:

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):

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:

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.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

2 comentarios en “Tutorial de vistas con Blade en Laravel”

  1. Pingback: Declarar variable de PHP en vista de Blade con Laravel - Parzibyte's blog

  2. Pingback: Blade y Laravel: ciclos, condicionales, token CSRF y componentes - Parzibyte's blog

Dejar un comentario