Tutorial de vistas con Blade en Laravel

Organización de vistas 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

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:

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:

<!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:
        
    */    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:
        
    */    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.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

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.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/