Template Blade

Sintassi di base, condizioni, cicli ed ereditarietà dei layout del motore di template “Blade” di Laravel.

​

Introduzione

Blade è il semplice ma potente motore di template incluso in Laravel. A differenza di alcuni motori di template PHP, Blade non impone restrizioni sull’uso di codice PHP nudo all’interno dei template. Tutti i template Blade vengono compilati in codice PHP e memorizzati in cache, quindi Blade aggiunge un overhead trascurabile all’applicazione.

I file di template Blade usano l’estensione .blade.php e di norma sono conservati nella directory resources/views.

​

Flusso di compilazione di Blade

Vediamo come un file .blade.php viene trasformato in una risposta HTML. I file compilati sono in cache: dalla seconda richiesta in poi la compilazione dello stesso template viene saltata.

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

​

Visualizzazione dei dati

Per visualizzare i dati passati a una vista Blade racchiudi la variabile in doppie parentesi graffe.

Ciao, {{ $name }}.

{{ }} in Blade passa automaticamente la variabile attraverso htmlspecialchars di PHP per prevenire attacchi XSS.

Oltre alle variabili, puoi mostrare anche il risultato di funzioni PHP.

Timestamp UNIX corrente: {{ time() }}

​

Visualizzazione senza escape

Per omettere l’escape usa la sintassi {!! !!}.

Ciao, {!! $name !!}.

Quando mostri dati inseriti dagli utenti, usa sempre {{ }} per abilitare l’escape automatico. Usare {!! !!} su input non affidabili porta a vulnerabilità XSS.

​

Convivenza con i framework JavaScript

Se anche il framework JavaScript usa le parentesi graffe, il simbolo @ fa saltare il rendering di Blade.

<h1>Laravel</h1>

Ciao, @{{ name }}.

In questo caso @ viene rimosso da Blade, ma {{ name }} arriva così com’è al browser, dove viene renderizzato dal framework JavaScript.

Se vuoi confrontare l’uso di Blade in autonomia con Livewire o Inertia, consulta Frontend.

​

Direttive Blade

​

Condizioni (if)

@if (count($records) === 1)
    C'è un record.
@elseif (count($records) > 1)
    Ci sono più record.
@else
    Nessun record.
@endif

Con @unless scrivi la condizione “a meno che”.

@unless (Auth::check())
    Non sei autenticato.
@endunless

Per verificare se una variabile è definita o non vuota usa @isset e @empty.

@isset($records)
    // Se $records è definita e non null
@endisset

@empty($records)
    // Se $records è "vuota"
@endempty

​

Direttive di autenticazione

@auth
    // Contenuti per utenti autenticati
@endauth

@guest
    // Contenuti per utenti non autenticati
@endguest

​

Switch

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

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

    @default
        Caso di default...
@endswitch

​

Cicli

Blade fornisce direttive comode per i cicli.

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

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

@forelse ($users as $user)
    <li>{{ $user->name }}</li>
@empty
    <p>Nessun utente</p>
@endforelse

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

Nei cicli puoi usare @break e @continue.

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

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

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

Puoi anche passare la condizione direttamente alla direttiva.

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

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

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

​

Variabile del ciclo

Dentro un ciclo @foreach, la variabile $loop fornisce informazioni sul ciclo.

@foreach ($users as $user)
    @if ($loop->first)
        Questa è la prima iterazione.
    @endif

    @if ($loop->last)
        Questa è l'ultima iterazione.
    @endif

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

Proprietà	Descrizione
$loop->index	Indice del ciclo corrente (da 0)
$loop->iteration	Numero di iterazione (da 1)
$loop->remaining	Iterazioni rimanenti
$loop->count	Numero di elementi dell’array
$loop->first	È la prima iterazione?
$loop->last	È l’ultima iterazione?
$loop->even	Iterazione pari?
$loop->odd	Iterazione dispari?
$loop->depth	Profondità di annidamento del ciclo corrente
$loop->parent	Se il ciclo è annidato, la variabile del ciclo padre

​

Commenti

I commenti Blade non compaiono nella pagina renderizzata.

{{-- Questo commento non compare nell'HTML renderizzato --}}

​

Layout

​

Layout con componenti

L’approccio consigliato per costruire i layout in Laravel è usare i componenti Blade.

Crea prima un componente di layout.

<!-- resources/views/components/layout.blade.php -->
<html>
    <head>
        <title>{{ $title ?? 'Nome app' }}</title>
    </head>
    <body>
        <header>
            <nav>
                <!-- Navigazione -->
            </nav>
        </header>

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

Poi crea una vista che utilizza questo layout.

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

    <h1>Dashboard</h1>
    <p>Benvenuto!</p>
</x-layout>

​

Layout con ereditarietà di template

Come approccio classico esiste l’ereditarietà con @extends, @section e @yield.

Definizione del layout padre:

<!-- resources/views/layouts/app.blade.php -->
<html>
    <head>
        <title>Nome app - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            Sidebar predefinita
        @show

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

Vista figlia con ereditarietà del layout:

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

@section('title', 'Pagina figlia')

@section('sidebar')
    @parent

    <p>Contenuti aggiuntivi della sidebar</p>
@endsection

@section('content')
    <p>Contenuto principale</p>
@endsection

Con @parent puoi mantenere il contenuto della @section del layout padre e aggiungerne di nuovo.

​

Inclusione di sotto-viste

Con la direttiva @include puoi incorporare una vista Blade in un’altra vista. Tutte le variabili disponibili nella vista padre sono disponibili anche nella vista inclusa.

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

    <form>
        <!-- Contenuto del form -->
    </form>
</div>

Puoi passare anche variabili aggiuntive.

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

​

Protezione CSRF dei form

Nei form HTML che inviano richieste POST, PUT, PATCH o DELETE alle route web, includi sempre la direttiva @csrf.

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

    <!-- Campi del form -->
</form>

Per inviare richieste PUT, PATCH o DELETE da un form usa la direttiva @method.

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

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

Per la protezione CSRF pratica, inclusa la verifica dell’Origin e gli header X-CSRF-TOKEN / X-XSRF-TOKEN, consulta Protezione CSRF.

​

Riepilogo

Riepilogo delle principali funzionalità di Blade.

Visualizzazione dei dati

{{ $variable }} per la visualizzazione con escape, {!! $variable !!} senza escape.

Condizioni

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

Cicli

@for, @foreach, @forelse, @while con controllo tramite la variabile $loop.

Layout

Basati su componenti (<x-layout> e {{ $slot }}) o ereditarietà di template (@extends, @section, @yield).

Sotto-viste

@include per incorporare viste come frammenti riutilizzabili.