> ## Documentation Index
> Fetch the complete documentation index at: https://kawax.biz/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

```mermaid theme={null}
flowchart LR
    A["File .blade.php"] --> B{"Cache presente?"}
    B -->|"Sì"| C["Usa il PHP in cache"]
    B -->|"No"| D["Compilatore Blade"]
    D --> E["Converti in codice PHP"]
    E --> F["Salva in storage/framework/views/"]
    F --> G["Esegui PHP"]
    C --> G
    G --> H["Risposta HTML"]
```

```php theme={null}
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.

```blade theme={null}
Ciao, {{ $name }}.
```

<Info>
  `{{ }}` in Blade passa automaticamente la variabile attraverso `htmlspecialchars` di PHP per prevenire attacchi XSS.
</Info>

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

```blade theme={null}
Timestamp UNIX corrente: {{ time() }}
```

### Visualizzazione senza escape

Per omettere l'escape usa la sintassi `{!! !!}`.

```blade theme={null}
Ciao, {!! $name !!}.
```

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

### Convivenza con i framework JavaScript

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

```blade theme={null}
<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.

<Info>
  Se vuoi confrontare l'uso di Blade in autonomia con Livewire o Inertia, consulta [Frontend](/it/frontend).
</Info>

## Direttive Blade

### Condizioni (if)

```blade theme={null}
@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".

```blade theme={null}
@unless (Auth::check())
    Non sei autenticato.
@endunless
```

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

```blade theme={null}
@isset($records)
    // Se $records è definita e non null
@endisset

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

### Direttive di autenticazione

```blade theme={null}
@auth
    // Contenuti per utenti autenticati
@endauth

@guest
    // Contenuti per utenti non autenticati
@endguest
```

### Switch

```blade theme={null}
@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.

```blade theme={null}
@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`.

```blade theme={null}
@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.

```blade theme={null}
@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.

```blade theme={null}
@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.

```blade theme={null}
{{-- 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.

```blade theme={null}
<!-- 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.

```blade theme={null}
<!-- 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`.

```mermaid theme={null}
flowchart TD
    A["Vista figlia<br>@extends('layouts.app')"] --> B["Layout padre<br>layouts/app.blade.php"]
    A --> C["@section('title', 'Pagina figlia')"]
    A --> D["@section('content')<br>Contenuto principale<br>@endsection"]
    B --> E["@yield('title')<br>← incorpora title"]
    B --> F["@yield('content')<br>← incorpora content"]
    C --> E
    D --> F
    E --> G["HTML finale"]
    F --> G
```

**Definizione del layout padre:**

```blade theme={null}
<!-- 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:**

```blade theme={null}
<!-- 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
```

<Info>
  Con `@parent` puoi mantenere il contenuto della `@section` del layout padre e aggiungerne di nuovo.
</Info>

## 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.

```blade theme={null}
<div>
    @include('shared.errors')

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

Puoi passare anche variabili aggiuntive.

```blade theme={null}
@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`.

```blade theme={null}
<form method="POST" action="/profile">
    @csrf

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

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

```blade theme={null}
<form method="POST" action="/post/1">
    @csrf
    @method('DELETE')

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

<Info>
  Per la protezione CSRF pratica, inclusa la verifica dell'Origin e gli header `X-CSRF-TOKEN` / `X-XSRF-TOKEN`, consulta [Protezione CSRF](/it/csrf).
</Info>

## Riepilogo

Riepilogo delle principali funzionalità di Blade.

<AccordionGroup>
  <Accordion title="Visualizzazione dei dati">
    `{{ $variable }}` per la visualizzazione con escape, `{!! $variable !!}` senza escape.
  </Accordion>

  <Accordion title="Condizioni">
    `@if`, `@elseif`, `@else`, `@endif`, `@unless`, `@isset`, `@empty`, `@auth`, `@guest`.
  </Accordion>

  <Accordion title="Cicli">
    `@for`, `@foreach`, `@forelse`, `@while` con controllo tramite la variabile `$loop`.
  </Accordion>

  <Accordion title="Layout">
    Basati su componenti (`<x-layout>` e `{{ $slot }}`) o ereditarietà di template (`@extends`, `@section`, `@yield`).
  </Accordion>

  <Accordion title="Sotto-viste">
    `@include` per incorporare viste come frammenti riutilizzabili.
  </Accordion>
</AccordionGroup>


## Related topics

- [Viste](/it/views.md)
- [Localizzazione](/it/localization.md)
- [Cos'è Laravel](/it/introduction.md)
- [Autorizzazione (Gate e Policy)](/it/authorization.md)
- [Invio di email](/it/mail.md)