Ya vimos cómo funcionan las vistas en Laravel y ahora sabemos que utilizan Blade.

Blade tiene muchas directivas que permiten hacer ciclos, mostrar cosas usando if o switch, generar el input para el token CSRF y muchas cosas más.

También nos permite definir componentes para más tarde usarlos en otras vistas superiores, e incluso incluir vistas en otras vistas.

Antes que nada, dejo el enlace a la documentación oficial.

El token CSRF

Hay dos maneras de obtener el token CSRF y Blade lo hace de manera muy sencilla. Si estamos dentro de un formulario, llamamos a @csrf y va a generar un input oculto:

<input type="hidden" name="_token" value="WZk5RjmAuNQfwQcxpgR0OGbjpe5EENlPZv9AlMY4">

Si en cambio queremos obtener el token “limpio”, por ejemplo, para inyectarlo en un encabezado HTTP, lo obtenemos llamando a la función csrf_token().

Nota: está de más decirlo, pero recuerda que el token cambiará en tu caso, pues es una cadena aleatoria.

Condicional if

Podemos llamar a @if, @elseif, @else y finalmente, para cerrarlo, a @endif. Dentro de cada expresión podemos evaluar algo que resulte en un booleano.

@if($edad >= 18)
    Eres mayor de edad
@elseif($edad === 17)
    Falta un año para alcanzar la mayoría de edad
@else
    Eres menor de edad
@endif

No es necesario poner todos los casos de elseif. Podría simplificarse a poner un @if y un @endif, o tener un @if, @else y @endif.

Dentro de las directivas podemos llamar a otras funciones. Por ejemplo, count, que devuelve la longitud de un arreglo.

Unless, isset y empty

Podríamos negar expresiones o llamar a isset y empty, pero Blade lo hace más fácil y creó unas directivas para hacer más fáciles las cosas.

Unless

Esto quiere decir “a no ser que”. Es decir, va a mostrar el código solo si no se cumple una condición.

La sintaxi es @unless(condicion) termina con @endunless.

isset

Lo mismo que haríamos con un @if:

@if(isset($valor))

Pero simplificado

@isset($valor)

Recuerda terminarlo con @endisset

Empty

Funciona de igual manera que isset, la sintaxis es @empty y @endempty.

Switch

Switch funciona igual que el switch de PHP. Se comienza con @switch($valor), se termina con @endswitch y para los casos se utiliza @case($unValor).

Recuerda que abajo de cada @case debe ir un @break. Y para el valor por defecto se usa @default.

Aquí un ejemplo que muestra el nombre del mes (faltan otros meses pero es un ejemplo):

@switch($numeroMes)
    @case(1)
        Enero
        @break
    @case(2)
        Febrero
        @break
    @case(3)
        Marzo
        @break
    @default
        Mes desconocido o no tomado en cuenta
        @break
@endswitch

Recorrer arreglo con foreach

Si pasamos un arreglo a los datos, podemos recorrerlos usando la directiva @foreach que se usa de la siguiente manera:

@foreach($usuarios as $usuario)
    <p>{{$usuario}}</p>
@endforeach

Dentro del ciclo, y antes de cerrarlo con @endforeach, podemos acceder a la variable que estamos recorriendo.

Ciclo for con Blade

También podemos definir un ciclo for que va desde un número a otro. Un ejemplo es el siguiente:

<p>
@for ($i = 1; $i <=10; $i++)
    5 x {{$i}} = {{5 * $i}}
    <br>
@endfor
</p>

Con ello imprimimos la tabla de multiplicar del número 5:

Forelse

Con forelse nos evitamos llamar a count y poner un if para recorrer un arreglo. Aquí un ejemplo con los usuarios:

@forelse($usuarios as $usuario)
    <p>{{$usuario}}</p>
@empty
    <p>No hay usuarios</p>
@endforelse

Dentro de @empty definimos el mensaje que se muestra si el arreglo está vacío. Usamos @forelse como si fuera un @foreach y terminamos con @endforelse.

Continue y break

Dentro de los ciclos foreach podemos evaluar una condición con un if y terminar la ejecución o saltar a la siguiente iteración.

Para continuar a la siguiente iteración llamamos a @continue dentro de un @foreach.

Si queremos terminar o romper el ciclo llamamos a @break dentro de un @foreach.

Como atajo, podemos llamar a @continue(condición) y @break(condición) para evitarnos un @if,

La variable loop

Cuando estemos en un foreach automáticamente se va a crear la variable $loop que es un objeto con determinadas propiedades. Vamos a analizarlas:

• index: el índice, comienza en 0.
• iteration: como el índice pero comienza en 1. Útil para mostrar el número pero en la forma no programadora.
• remaining: el número de iteraciones que faltan para terminar el ciclo.
• count: longitud del arreglo que está siendo recorrido.
• first: va a estar en true cuando estemos en el primer elemento.
• last: va a estar en true cuando estemos en el último elemento.
• depth: la profundidad del ciclo en el que estamos. Esto es útil en ciclos anidados.
• parent: si estamos en un ciclo anidado, $loop->parent se refiere al $loop del ciclo padre o del ciclo superior.

Recuerda que para acceder a una propiedad usas la flecha. Así: $loop->index.

Comentarios en Blade

Para marcar código de Blade como un comentario, usamos las llaves pero con dos guiones medios. Así:

{{-- soy un comentario --}}

Incluir subvistas

Justo como hacemos en PHP con include o require, podemos hacer lo mismo con Blade. Para incluir una subvista llamamos a @include("nombre") dentro de nuestra vista.

El nombre de la vista aplica igual: si las tenemos en directorios usamos el punto o barra para separar, y no es necesario indicar la extensión.

Por cierto, todas las variables de la vista actual serán visibles para la vista que incluimos.

Componentes y slots en Blade

Para terminar este post veamos lo que son los componentes y slots en Blade al trabajar con Laravel. La diferencia entre los componentes y las subvistas es que al incluir una vista no tenemos el control total sobre la misma.

En cambio con un componente definimos claramente que el mismo será modificado.

Por ejemplo, tenemos un div que mostrará una alerta. Puede ser así:

<div class="alert alert-danger">
    {{ $slot }}
</div>

Aquí la variable más importante es $slot, pues es el contenido que pasamos. Para renderizar el componente llamamos a @component y terminamos con @endcomponent. Todo lo que se encuentre entre esa sección va a ser pasado al componente.

Veamos un ejemplo:

@component("alerta")
  Esto que ves aquí, será inyectado en el componente. Podemos mandar <strong>texto</strong> con formato y en
  general <h2>Código HTML</h2>
@endcomponent

La ventaja de esto es que podemos pasar contenido HTML. Por cierto, si queremos definir más variables además del slot, hay que definirlas con @slot y @endslot. Así:

@component("alerta")
  Esto que ves aquí, será inyectado en el componente. Podemos mandar <strong>texto</strong> con formato y en
  general <h2>Código HTML</h2>
  
  @slot("pie")
    Esto va a ir en donde se imprima la variable llamada $pie en el componente
  @endslot
@endcomponent

Dentro del componente simplemente hay que imprimir $pie en este caso con {{$pie}} y listo. Así podemos definir más slots.

Conclusión

Un poco largo de leer pero al final nos da un panorama general de lo que podemos lograr con Blade y Laravel. Recuerda que puedes ver la documentación oficial para aprender más o ver otros tutoriales de Laravel que he escrito.