Plantillas Blade

Introducción

Blade es el motor de plantillas simple pero potente que incluye Laravel. A diferencia de algunos motores de plantillas de PHP, Blade no limita el uso de código PHP puro dentro de las plantillas. Todas las plantillas Blade se compilan a código PHP y se cachean, por lo que apenas añade sobrecarga a la aplicación. Los archivos de plantilla Blade usan la extensión .blade.php y normalmente se guardan en el directorio resources/views.

Flujo de compilación de Blade

Muestra cómo un archivo .blade.php se convierte en una respuesta HTML. Una vez compilado, el archivo se cachea; las siguientes solicitudes de la misma plantilla saltan la compilación.

Route::get('/', function () {
    return view('greeting', ['name' => 'Taro']);
});

Mostrar datos

Para mostrar datos pasados a la vista, encierra la variable entre dobles llaves.

Hola, {{ $name }}.

{{ }} de Blade pasa automáticamente el valor por htmlspecialchars de PHP para prevenir ataques XSS.

También puedes mostrar el resultado de funciones PHP.

Timestamp UNIX actual: {{ time() }}

Mostrar sin escapar

Para mostrar sin escapar, usa la sintaxis {!! !!}.

Hola, {!! $name !!}.

Cuando muestres datos introducidos por el usuario, usa siempre {{ }} para mantener el escape automático. Usar {!! !!} con entrada no confiable provoca vulnerabilidades XSS.

Convivencia con frameworks JavaScript

Si tu framework JavaScript también usa llaves, escapa el renderizado de Blade con @.

<h1>Laravel</h1>

Hola, @{{ name }}.

Blade elimina la @ y {{ name }} llega tal cual al navegador para que lo procese el framework de JavaScript.

Si dudas entre centrarte en Blade o ampliar hacia Livewire o Inertia, consulta Frontend.

Directivas de Blade

Condicionales (if)

@if (count($records) === 1)
    Hay 1 registro.
@elseif (count($records) > 1)
    Hay varios registros.
@else
    No hay registros.
@endif

@unless permite escribir “salvo que…”.

@unless (Auth::check())
    No has iniciado sesión.
@endunless

Para comprobar si una variable está definida o no es null, usa @isset y @empty.

@isset($records)
    // Si $records está definido y no es null
@endisset

@empty($records)
    // Si $records está "vacío"
@endempty

Directivas de autenticación

@auth
    // Contenido para usuarios autenticados
@endauth

@guest
    // Contenido para usuarios no autenticados
@endguest

Switch

@switch($i)
    @case(1)
        Primer caso...
        @break

    @case(2)
        Segundo caso...
        @break

    @default
        Caso por defecto...
@endswitch

Bucles

Blade ofrece directivas cómodas para bucles.

@for ($i = 0; $i < 10; $i++)
    Valor actual: {{ $i }}
@endfor

@foreach ($users as $user)
    <p>Usuario: {{ $user->name }}</p>
@endforeach

@forelse ($users as $user)
    <li>{{ $user->name }}</li>
@empty
    <p>No hay usuarios</p>
@endforelse

@while (true)
    <p>Bucle infinito.</p>
@endwhile

Dentro del bucle, @break y @continue controlan el flujo.

@foreach ($users as $user)
    @if ($user->type == 1)
        @continue
    @endif

    <li>{{ $user->name }}</li>

    @if ($user->number == 5)
        @break
    @endif
@endforeach

También se puede pasar la condición directamente a la directiva.

@foreach ($users as $user)
    @continue($user->type == 1)

    <li>{{ $user->name }}</li>

    @break($user->number == 5)
@endforeach

Variable de bucle

Dentro de @foreach puedes usar $loop para obtener información del bucle.

@foreach ($users as $user)
    @if ($loop->first)
        Es la primera iteración.
    @endif

    @if ($loop->last)
        Es la última iteración.
    @endif

    <p>Usuario: {{ $user->name }}</p>
@endforeach

Propiedad	Descripción
`$loop->index`	Índice actual (empieza en 0)
`$loop->iteration`	Número de iteración (empieza en 1)
`$loop->remaining`	Iteraciones restantes
`$loop->count`	Número de elementos del array
`$loop->first`	¿Primera iteración?
`$loop->last`	¿Última iteración?
`$loop->even`	¿Iteración par?
`$loop->odd`	¿Iteración impar?
`$loop->depth`	Nivel de anidación actual
`$loop->parent`	En bucles anidados, la variable del bucle padre

Comentarios

Los comentarios de Blade no aparecen en la página renderizada.

{{-- Este comentario no aparecerá en el HTML renderizado --}}

Layouts

Layout con componentes

Para crear layouts en Laravel se recomiendan los componentes Blade. Primero, crea el componente de layout.

<!-- resources/views/components/layout.blade.php -->
<html>
    <head>
        <title>{{ $title ?? 'Nombre de la app' }}</title>
    </head>
    <body>
        <header>
            <nav>
                <!-- Navegación -->
            </nav>
        </header>

        <main>
            {{ $slot }}
        </main>
    </body>
</html>

Después, crea una vista que use ese layout.

<!-- resources/views/dashboard.blade.php -->
<x-layout>
    <x-slot:title>Dashboard</x-slot>

    <h1>Dashboard</h1>
    <p>¡Bienvenido!</p>
</x-layout>

Layout con herencia de plantillas

La forma clásica usa herencia con @extends, @section y @yield. Definición del layout padre:

<!-- resources/views/layouts/app.blade.php -->
<html>
    <head>
        <title>Nombre de la app - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            Sidebar por defecto
        @show

        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

Uso del layout en la vista hija:

<!-- resources/views/child.blade.php -->
@extends('layouts.app')

@section('title', 'Página hija')

@section('sidebar')
    @parent

    <p>Contenido adicional del sidebar</p>
@endsection

@section('content')
    <p>Cuerpo del contenido</p>
@endsection

Con @parent puedes conservar el contenido del @section padre y añadir más.

Incluir subvistas

@include incrusta una vista Blade dentro de otra. Todas las variables disponibles en la vista padre lo estarán también en la incluida.

<div>
    @include('shared.errors')

    <form>
        <!-- Contenido del formulario -->
    </form>
</div>

También puedes pasar variables adicionales.

@include('view.name', ['status' => 'complete'])

Protección CSRF en formularios

En formularios HTML que envíen POST, PUT, PATCH o DELETE en rutas del archivo web, incluye siempre @csrf.

<form method="POST" action="/profile">
    @csrf

    <!-- Campos del formulario -->
</form>

Para enviar PUT, PATCH o DELETE desde un formulario, usa @method.

<form method="POST" action="/post/1">
    @csrf
    @method('DELETE')

    <button type="submit">Eliminar</button>
</form>

Consulta Protección CSRF para los detalles operativos, como la validación de Origin y las cabeceras X-CSRF-TOKEN / X-XSRF-TOKEN.

Resumen

Resumen de las funcionalidades principales de Blade.

Mostrar datos

{{ $variable }} para mostrar con escape; {!! $variable !!} sin escape.

Condicionales

@if, @elseif, @else, @endif, @unless, @isset, @empty, @auth, @guest.

Bucles

@for, @foreach, @forelse, @while y la variable $loop.

Layouts

Basados en componentes (<x-layout> con {{ $slot }}) o con herencia (@extends, @section, @yield).

Subvistas

Reutilización de vistas con @include.

Introducción

Conceptos básicos

Manejo de solicitudes

Base de datos

Autenticación

Helpers y comunicación externa

Pruebas y despliegue

Asistencia de desarrollo con IA

Introducción

Flujo de compilación de Blade

Mostrar datos

Mostrar sin escapar

Convivencia con frameworks JavaScript

Directivas de Blade

Condicionales (if)

Directivas de autenticación

Switch

Bucles

Variable de bucle

Comentarios

Layouts

Layout con componentes

Layout con herencia de plantillas

Incluir subvistas

Protección CSRF en formularios

Resumen

​Introducción

​Flujo de compilación de Blade

​Mostrar datos

​Mostrar sin escapar

​Convivencia con frameworks JavaScript

​Directivas de Blade

​Condicionales (if)

​Directivas de autenticación

​Switch

​Bucles

​Variable de bucle

​Comentarios

​Layouts

​Layout con componentes

​Layout con herencia de plantillas

​Incluir subvistas

​Protección CSRF en formularios

​Resumen

Introducción

Flujo de compilación de Blade

Mostrar datos

Mostrar sin escapar

Convivencia con frameworks JavaScript

Directivas de Blade

Condicionales (if)

Directivas de autenticación

Switch

Bucles

Variable de bucle

Comentarios

Layouts

Layout con componentes

Layout con herencia de plantillas

Incluir subvistas

Protección CSRF en formularios

Resumen