En el Manual de Laravel hasta el momento hemos ido aprendiendo Blade, el sistema de templates, principalmente sobre la marcha. En un artículo anterior explicamos cómo llamar a las vistas de Laravel, lo que ya fue en si una introducción a Blade. Sin embargo, Blade es un sistema bastante sofisticado y con enormes posibilidades, que no se llegaron a mencionar.

En este artículo vamos a abordar un tema importante para ir ganando pericia con el sistema de templates de Laravel, que es todo lo relacionado con la sintaxis de Blade, así como las estructuras de control y principales directivas que tenemos a nuestra disposición.

Sintaxis básica de Blade

Básicamente en las vistas Blade podemos escribir HTML estándar, que será enviado tal cual al navegador. Además, existen una serie de códigos específicos para hacer tareas útiles que vamos a ver a continuación.

Cómo mostrar datos de variables

El volcado de datos que se disponen en variables al mostrar una vista se pueden interpolar en el código HTML generado por Blade. Para ello volcamos los valores de variables con la sintaxis de las dobles llaves.

{{ $mi_variable }}

Todo el código que contenga esa variable se mostrará tal cual en la vista. Pero ojo, si no es una cadena, PHP lo tendrá que convertir a string y esa conversión a veces la tienes que hacer explícitamente. Por ejemplo, si intentamos escribir un array directamente de esta manera, PHP no lo podrá convertir directamente y te saldrá este mensaje de error.

Argument #1 ($string) must be of type string, array given

Soluciones pueden haber varias, dependiendo de la estructura de texto que quieras mostrar. Si el array tiene cadenas como contenido, simplemente tendrás que mostrar la casilla del array que corresponda. Si quieres mostrar todo el contenido del array, separado por una coma u otro separador, puedes invocar alguna función que convierta ese array en string.

{{ implode(" - ", $array) }}

Otra cosa importante es que Laravel realiza el escapado de todos los caracteres especiales del HTML, para evitar ataques por inyecciones de código XSS.

Cómo mostrar código sin escapar

Si tienes algún código que contenga etiquetas HTML y lo quieras mostrar tal cual en la página, sin escapado de los caracteres especiales del HTML, entonces tienes que usar una sintaxis de interpolación diferente.

{!! $cadena_con_codigo_html !!}

Debes tener especial cuidado con esta utilidad, puesto que cualquier código HTML o scripts Javascript se volcará en la página y será interpretado por el navegador, provocando posibles problemas si ese HTML no está depurado. Sobre todo, si el HTML viene por parte del usuario, debes tener mucha precaución.

Cómo colocar unas llaves dobles

Hay ocasiones en las que necesitas usar el código de las dobles llaves para algo y no deseas que sea interpretado por Blade como una interpolación de variables. Esto puede ocurrir por ejemplo si estás generando código que luego deba ser interpretado por algún framework como Angular, o quizás algún sistema de templates del cliente como Handlebars.

Para colocar dobles llaves utilizarás esta sintaxis:

@{{ variable_de_javascript }}

Otra vía de conseguir esto es con la directiva @verbatim de Blade, que permite colocar dentro todo el código que sea necesario, donde cada vez que uses dobles llaves, Laravel las dejará inalteradas

@verbatim
    <h1>
        Bienvenido {{ nombre }} {{ apellido }}.
    </h1>
@endverbatim

Esta directiva te ahorra tener que escribir todo el tiempo @{{ para usar las dobles llaves. Es útil si tienes una larga porción de código Javascript que lleve dobles llaves.

Estructuras de control en Blade

Ahora vamos a abordar las estructuras de control que disponemos en Blade para hacer control lógico en templates. Encontraremos condicionales y bucles de varios tipos que nos permitirán tomar decisiones e iterar en colecciones y arrays.

Estructura @if

Para hacer toma de decisiones condicional usamos el famoso if. En Blade funciona tal cual, pero sin colocar llaves y con cierres como @endif.

@if ($manuales->count() > 0)
    Tenemos manuales que mostrar!
@endif

Por supuesto, también podemos añadir un bloque @else o incluso un @elseif, tal como ya conoces en la programación del día a día.

@if ($dia == "sabado")
    Es sabado!!
@elseif ($dia == "domingo")
    Es domingo!!
@else
    No estamos en final de semana
@endif

Estructura @switch

Puedes hacer una toma de decisiones con la estructura switch típica de PHP. La sintaxis es parecida a la que puedas conocer del lenguaje de programación, pero sin llaves, igual que el @if.

@switch($estado)
    @case("a")
        Estado es "a"
        @break
    @case("b")
        El estado es "b"
        @break
    @default
        Es el código que se ejecutará si no era ninguno de los estados anteriores.
@endswitch

Estructura @foreach

El bucle @foreach es el más típico que vas a usar en Blade para recorrer elementos como Arrays y colecciones. Su sintaxis es la siguiente.

@foreach($certificado as $cert)
      <article class="Cert-card">
          <h3>{{ $cert->nombre }}</h3>
          <div>{{ $cert->descripcion }}</div>
      </article>
@endforeach

Dado el anterior código se realizará una iteración por cada elemento en el array $certificado. Dentro del bucle la variable $cert tomará el valor del certificado de la iteración actual. En resume, ocurre igual que el bucle foreach que ya conoces en PHP.

La variable $loop

Resulta muy interesante el uso de la variable $loop en los bucles, que se crea automáticamente en el cuerpo de los bucles y toma valores cambiantes a lo largo de la ejecución de éstos.

$loop te ofrece una información útil sobre la iteración actual. Por ejemplo, te puede decir el índice de la iteración, si es la última vez que se va a iterar, la primera, si es par o impar, etc.

@foreach($certificados as $certificate)
    @if($loop->first)
        <p>Este es el primer certificado</p>
    @endif
    @if($loop->last)
        <p>Este es el último certificado</p>
    @endif
    <article @if($loop->even) class="par" @endif>
          <h3>{{ $loop->index }} - {{ $certificate->name }}</h3>
          ...
      </article>
@endforeach

Como estás viendo, con $loop->first es un boleano que podemos evaluar para saber si es la primera vez que se ejecuta el bucle. $loop->last serviría para saber si es la última ejecución.

También son útiles $loop->even para saber si la iteración es par y $loop->odd que te dice si el índice de la iteración es par.

Por supuesto, otra muy útil es $loop->index que nos indica el índice de esta iteración. Ten en cuenta que ese valor de índice comienza en cero.

Otra más que podría venirte bien es $loop->parent, que permite acceder a la variable $loop que está en el bucle padre. Esto es útil cuando tienes un bucle anidado y quieres acceder a la variable $loop del bucle de nivel superior.

@foreach ($articulos as $articulo)
    @foreach ($articulo->comentarios as $comentario)
            Este es el comentario número {{ $loop->index }} del artículo {{ $loop->parent->index }}
        @endif
    @endforeach
@endforeach

Ejecutar código PHP dentro de Blade

Como hemos dicho generalmente las plantillas de Blade deberían estar libres de procesamientos complejos, dado que todo lo que son cálculos y algoritmos debería realizarse en otras partes del código, nunca en las vistas. No obstante, en situaciones especiales puede ser necesario ejecutar código PHP para realizar cualquier tipo de tratamiento.

En estos casos puedes usar la directiva @php que permite englobar todo un bloque de código PHP a ejecutar antes de proseguir con el template.

@php
    $salida = $venta->obtenerDatos();
    if($salida["estado"] == "canceled") {
	$cancelado = true;
    } else {
	$cancelado = false;
    }
@endphp

Conclusión

Hemos visto una gran cantidad de utilidades dentro del sistema de templates de Laravel, Blade. Nos hemos limitado a ver la sintaxis de Blade, el modo de interpolar variables, código PHP y la realización de estructuras de control, toma de decisiones y bucles.

Para un próximo artículo nos queda por ver cómo estructurar el código de Blade para mantener lo que serían plantillas y parciales, de modo que podamos organizar el diseño de las áreas comunes del sitio o aplicación web.