Introducción a Blade el motor de plantillas de Laravel 6

En esta lección continuaremos aprendiendo sobre Blade, el motor de plantillas de Laravel, para ello vamos a pasar algunas notas desde nuestra ruta hacia la vista y a iterarlas usando este motor de plantillas.

Esta lección incluye un video premium

Regístrate para ver este video y cientos de lecciones exclusivas.

Mira el código en GitHub: actual, resultado, comparación.

A continuación, vamos a hacer nuestro listado de notas dinámico pasando algunas notas ficticias a la vista:

Route::get('/', function () {
    $notes = [
        'Primera nota',
        'Segunda nota',
        'Tercera nota',
        'Cuarta nota',
        'Quinta nota',
        'Sexta nota',
    ];

    return view('notes', ['notes' => $notes]); // o ->with('notes', $notes) o ->withNotes($notes)
});

Y luego mostrándolas en la plantilla notes.blade.php:

@foreach ($notes as $note)
    <div class="card card-small">
        <div class="card-body">
            <h4>{{ $note }}</h4>
    
            <p>
                {{ $note }}
            </p>
        </div>
    
        <footer class="card-footer">
            <a href="link" class="action-link action-edit">
                <i class="icon icon-pen"></i>
            </a>
            <a class="action-link action-delete">
                <i class="icon icon-trash"></i>
            </a>
        </footer>
    </div>
@endforeach

Puedes ver que estoy utilizando la sintaxis de Blade, el motor de plantillas de Laravel.

La directiva @foreach reemplaza a <?php foreach(...) ?> y las interpolaciones con llaves reemplazan a <?php echo e($var) ?>

Cuando usamos Blade, Laravel se encarga de «compilar» este HTML con sintaxis de Blade a HTML mezclado con PHP y almacena el resultado en storage/framework/views, por lo que no perdemos rendimiento al trabajar con Blade.

Blade nos protege de ataques de tipo XSS al «compilar» nuestras interpolaciones a <?php echo e($var) ?>, puesto que la función helper e de Laravel escapa los caracteres con htmlspecialchars.

Blade nos permite usar directivas que no existen en el lenguaje PHP, como por ejemplo @forelse para mostrar un mensaje si el listado de notas está vacío:

@forelse ($notes as $note)
<div class="notes__item card shadow-sm">
    <!-- HTML -->
</div>
@empty
    <p>No has agregado ninguna nota hasta el momento. <a href="#">Agregar nota</a></p>
@endforelse

Si en routes/web.php pasas un arreglo vacío a la vista de notas, verás este último mensaje.

Por supuesto lo anterior lo habríamos podido lograr usando la directiva @if con @foreach y también podríamos no usar Blade sino PHP plano (para ello debes renombrar las extensiones de tus vistas de .blade.php a solo .php), pero trabajar con Blade es muy conveniente y nos permite escribir plantillas más limpias.

Puedes aprender más sobre Blade revisando la documentación en español.

En las lecciones siguientes continuaremos haciendo nuestras vistas más dinámicas, agregando los enlaces y mucho más.