En esta lección aprenderemos 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.
Mira el código en GitHub: actual, resultado, comparación.
Podemos usar las rutas para enviar datos a nuestras vistas en Laravel. Por ejemplo, desde la ruta de notas, vamos a pasar un listado simple de notas a nuestra plantilla notes.index.
Route::get('/', function () {
$notes = [
'Primera nota',
'Segunda nota',
'Tercera nota',
'Cuarta nota',
'Quinta nota',
];
return view('notes', ['notes' => $notes]);
});
También puedes usar el método –>with('notes', $notes) o el método ->withNotes($notes)
Podemos mostrar las notas en nuestra plantilla de la siguiente manera:
@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
Blade nos permite utilizar una sintaxis abreviada para nuestro código que nos permitirá trabajar de una manera más limpia utilizando menos PHP plano.
La directiva @foreach reemplaza a <?php foreach(...) ?> y las interpolaciones con llaves reemplazan a <?php echo e($var) ?>
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.
Además, Blade no solo nos permite usar directivas habituales de PHP, sinó que también nos permite usar algunas directivas adicionales bastante útiles.
Podemos usar @forelse para validar si tenemos o no datos para iterar y {!! $note !!} para renderizar código HTML.
Si estás usando frameworks o librerías como Vue.js o Alpine, es posible que quieras que ciertas interpolaciones sean ignoradas, para que sean enviadas de forma literal al navegador. Para ello, simplemente antecede un signo de arroba antes de la interpolación y ésta será ignorada por Blade: @{{ javascript }}. Lo anterior enviará al navegador la cadena literal: {{ javascript }}
También puedes ignorar directivas de Blade con 2 signos de arroba: @@foreach. Esto enviará al navegador la cadena literal: @foreach
Para ignorar fragmentos largos de una plantilla de Blade, puedes utilizar la directiva @verbatim:
@verbatim
<p>{{ var }}</p>
@endverbatim
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
Lección anterior Copiar plantillas de HTML a Laravel 10 Lección siguiente Layouts tradicionales con Laravel 10 y Blade