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
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:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Yo soy el título</title>
</head>
<body>
<p>
Aquí vive el código HTML
</p>
<h2>Pero puede ser combinado con Blade:</h2>
<p>
¿Cuánto es 5 + 5? {{5 + 5}}
<br>
Tiempo actual: {{time()}}
<br>
Podemos llamar a funciones nativas: {{ucwords('hola')}}
</p>
</body>
</html>
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:
Route::get("usuarios", "UsuariosController@mostrar");
La vista será la siguiente:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{$titulo}}</title>
</head>
<body>
<h1>Aquí renderizamos los datos pasados por el controlador</h1>
@foreach($usuarios as $usuario)
<p>{{$usuario}}</p>
@endforeach
</body>
</html>
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:
<?php
namespace App\Http\Controllers;
class UsuariosController extends Controller
{
public function mostrar(){
return view("usuarios")
->with([
"usuarios" => [
"Luis",
"Maggie",
"Raúl"
],
"titulo" => "Soy un título"
]);
}
}
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:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>@yield("titulo")</title>
<style>
/*
Poner bordes a las tablas. Tomado de:
[https://parzibyte.me/blog/posts/tabla-html-bordes-css/](https://parzibyte.me/blog/posts/tabla-html-bordes-css/)
*/
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 5px;
}
</style>
</head>
<body>
<a href="{{route('inicio')}}">Inicio</a>
<a href="{{route('formAgregar')}}">Agregar</a>
@yield("contenido")
<hr>
<p>
CRUD de MySQL con Laravel. Creado por <a href="//parzibyte.me">parzibyte</a>
</p>
</body>
</html>
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):
@extends("principal")
@section("titulo", "Agregar canción")
@section("contenido")
<h1>Agregar canción</h1>
<form method="POST" action="{{ route('agregarCancion') }}">
@csrf
<input autocomplete="off" required type="text" name="nombre" placeholder="Nombre de la canción">
<br><br>
<input autocomplete="off" required type="text" name="artista" placeholder="Artista que la canta">
<br><br>
<input autocomplete="off" required type="text" name="album" placeholder="Álbum">
<br><br>
<input autocomplete="off" required type="number" name="anio" placeholder="Año">
<br><br>
<input type="submit" value="Guardar">
</form>
@endsection
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:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Agregar canción</title>
<style>
/*
Poner bordes a las tablas. Tomado de:
[https://parzibyte.me/blog/posts/tabla-html-bordes-css/](https://parzibyte.me/blog/posts/tabla-html-bordes-css/)
*/
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 5px;
}
</style>
</head>
<body>
<a href="http://localhost/crud-laravel-mysql/public">Inicio</a>
<a href="http://localhost/crud-laravel-mysql/public/agregar">Agregar</a>
<h1>Agregar canción</h1>
<form method="POST" action="http://localhost/crud-laravel-mysql/public/agregar">
<input type="hidden" name="_token" value="WZk5RjmAuNQfwQcxpgR0OGbjpe5EENlPZv9AlMY4"> <input autocomplete="off" required type="text" name="nombre" placeholder="Nombre de la canción">
<br><br>
<input autocomplete="off" required type="text" name="artista" placeholder="Artista que la canta">
<br><br>
<input autocomplete="off" required type="text" name="album" placeholder="Álbum">
<br><br>
<input autocomplete="off" required type="number" name="anio" placeholder="Año">
<br><br>
<input type="submit" value="Guardar">
</form>
<hr>
<p>
CRUD de MySQL con Laravel. Creado por <a href="//parzibyte.me">parzibyte</a>
</p>
</body>
</html>
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.