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

# Templates Blade

> Syntaxe de base, structures conditionnelles, boucles et héritage de layout du moteur de templates Blade de Laravel.

## Introduction

Blade est le moteur de templates simple et puissant inclus dans Laravel.
Contrairement à certains moteurs PHP, Blade n'interdit pas l'usage de PHP pur dans les templates.
Toutes les vues Blade sont compilées en PHP et mises en cache, donc Blade ajoute très peu de surcoût à l'application.

Les fichiers Blade ont l'extension `.blade.php` et se trouvent généralement dans `resources/views`.

### Flux de compilation Blade

Un `.blade.php` devient une réponse HTML de la manière suivante. Comme le fichier compilé est mis en cache, les requêtes suivantes sur le même template ignorent la compilation.

```mermaid theme={null}
flowchart LR
    A["Fichier .blade.php"] --> B{"Cache présent ?"}
    B -->|"Oui"| C["Utilise le PHP en cache"]
    B -->|"Non"| D["Compilateur Blade"]
    D --> E["Conversion en PHP"]
    E --> F["Enregistrement dans storage/framework/views/"]
    F --> G["Exécution du PHP"]
    C --> G
    G --> H["Réponse HTML"]
```

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

## Affichage des données

Pour afficher des données passées à une vue Blade, entourez la variable de doubles accolades.

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

<Info>
  `{{ }}` passe automatiquement par `htmlspecialchars` pour prévenir les attaques XSS.
</Info>

Vous pouvez afficher le résultat de fonctions PHP.

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

### Affichage sans échappement

Pour omettre l'échappement, utilisez `{!! !!}`.

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

<Warning>
  Pour les données saisies par les utilisateurs, utilisez toujours `{{ }}` (échappement automatique).
  Utiliser `{!! !!}` sur des données non fiables ouvre à des failles XSS.
</Warning>

### Cohabitation avec des frameworks JavaScript

Si un framework JS utilise aussi les accolades, préfixez avec `@` pour empêcher le rendu Blade.

```blade theme={null}
<h1>Laravel</h1>

Bonjour, @{{ name }}.
```

Blade retire le `@` et laisse `{{ name }}` intact pour que le framework JS le rende.

<Info>
  Pour comparer Blade avec Livewire ou Inertia, consultez [Frontend](/fr/frontend).
</Info>

## Directives Blade

### Conditionnelles (if)

```blade theme={null}
@if (count($records) === 1)
    Il y a 1 enregistrement.
@elseif (count($records) > 1)
    Plusieurs enregistrements.
@else
    Aucun enregistrement.
@endif
```

`@unless` inverse la condition.

```blade theme={null}
@unless (Auth::check())
    Vous n'êtes pas connecté.
@endunless
```

Pour vérifier qu'une variable est définie/non null : `@isset` et `@empty`.

```blade theme={null}
@isset($records)
    // $records est défini et non null
@endisset

@empty($records)
    // $records est « vide »
@endempty
```

### Directives d'authentification

```blade theme={null}
@auth
    // Contenu pour utilisateur authentifié
@endauth

@guest
    // Contenu pour visiteur non authentifié
@endguest
```

### Switch

```blade theme={null}
@switch($i)
    @case(1)
        Premier cas...
        @break

    @case(2)
        Deuxième cas...
        @break

    @default
        Cas par défaut...
@endswitch
```

### Boucles

Blade propose des directives pratiques pour les boucles.

```blade theme={null}
@for ($i = 0; $i < 10; $i++)
    Valeur actuelle : {{ $i }}
@endfor

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

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

@while (true)
    <p>Boucle infinie.</p>
@endwhile
```

Utilisez `@break` et `@continue` pour piloter la boucle.

```blade theme={null}
@foreach ($users as $user)
    @if ($user->type == 1)
        @continue
    @endif

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

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

Vous pouvez passer la condition directement à la directive.

```blade theme={null}
@foreach ($users as $user)
    @continue($user->type == 1)

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

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

### Variable `$loop`

À l'intérieur d'une `@foreach`, `$loop` fournit des infos sur l'itération.

```blade theme={null}
@foreach ($users as $user)
    @if ($loop->first)
        Première itération.
    @endif

    @if ($loop->last)
        Dernière itération.
    @endif

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

| Propriété          | Description                                  |
| ------------------ | -------------------------------------------- |
| `$loop->index`     | Index (commence à 0)                         |
| `$loop->iteration` | Numéro d'itération (commence à 1)            |
| `$loop->remaining` | Itérations restantes                         |
| `$loop->count`     | Nombre d'éléments                            |
| `$loop->first`     | Première itération ?                         |
| `$loop->last`      | Dernière itération ?                         |
| `$loop->even`      | Itération paire ?                            |
| `$loop->odd`       | Itération impaire ?                          |
| `$loop->depth`     | Profondeur d'imbrication                     |
| `$loop->parent`    | Variable de la boucle parente (si imbriquée) |

## Commentaires

Les commentaires Blade ne sont pas rendus dans le HTML.

```blade theme={null}
{{-- Ce commentaire n'apparaîtra pas dans le HTML rendu --}}
```

## Layouts

### Layout par composant

L'approche recommandée est d'utiliser des composants Blade.

Créez d'abord le composant de layout.

```blade theme={null}
<!-- resources/views/components/layout.blade.php -->
<html>
    <head>
        <title>{{ $title ?? 'Nom de l\'app' }}</title>
    </head>
    <body>
        <header>
            <nav>
                <!-- Navigation -->
            </nav>
        </header>

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

Utilisez-le ensuite dans une vue.

```blade theme={null}
<!-- resources/views/dashboard.blade.php -->
<x-layout>
    <x-slot:title>Tableau de bord</x-slot>

    <h1>Tableau de bord</h1>
    <p>Bienvenue !</p>
</x-layout>
```

### Layout par héritage

Approche classique via `@extends`, `@section`, `@yield`.

```mermaid theme={null}
flowchart TD
    A["Vue enfant<br>@extends('layouts.app')"] --> B["Layout parent<br>layouts/app.blade.php"]
    A --> C["@section('title', 'Page enfant')"]
    A --> D["@section('content')<br>Corps du contenu<br>@endsection"]
    B --> E["@yield('title')<br>← Injection de title"]
    B --> F["@yield('content')<br>← Injection de content"]
    C --> E
    D --> F
    E --> G["HTML final"]
    F --> G
```

**Définition du layout parent :**

```blade theme={null}
<!-- resources/views/layouts/app.blade.php -->
<html>
    <head>
        <title>Nom - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            Sidebar par défaut
        @show

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

**Héritage dans la vue enfant :**

```blade theme={null}
<!-- resources/views/child.blade.php -->
@extends('layouts.app')

@section('title', 'Page enfant')

@section('sidebar')
    @parent

    <p>Contenu supplémentaire de la sidebar</p>
@endsection

@section('content')
    <p>Corps du contenu</p>
@endsection
```

<Info>
  `@parent` conserve le contenu du `@section` du layout parent tout en y ajoutant.
</Info>

## Inclusion de sous-vues

`@include` insère une vue Blade dans une autre.
Les variables disponibles dans la vue parente le sont aussi dans la vue incluse.

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

    <form>
        <!-- Contenu du formulaire -->
    </form>
</div>
```

Passez des variables supplémentaires si besoin.

```blade theme={null}
@include('view.name', ['status' => 'complete'])
```

## Protection CSRF dans les formulaires

Pour les formulaires HTML envoyant `POST`, `PUT`, `PATCH` ou `DELETE` dans le fichier de routes `web`, incluez toujours `@csrf`.

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

    <!-- Champs du formulaire -->
</form>
```

Pour envoyer `PUT`, `PATCH` ou `DELETE` depuis un formulaire, utilisez `@method`.

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

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

<Info>
  Pour la protection CSRF de production, notamment la vérification d'Origin et les en-têtes `X-CSRF-TOKEN` / `X-XSRF-TOKEN`, consultez [Protection CSRF](/fr/csrf).
</Info>

## Récapitulatif

Principales fonctionnalités de Blade.

<AccordionGroup>
  <Accordion title="Affichage des données">
    `{{ $variable }}` échappé, `{!! $variable !!}` non échappé.
  </Accordion>

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

  <Accordion title="Boucles">
    `@for`, `@foreach`, `@forelse`, `@while` et pilotage avec la variable `$loop`.
  </Accordion>

  <Accordion title="Layouts">
    Par composant (`<x-layout>` et `{{ $slot }}`) ou par héritage (`@extends`, `@section`, `@yield`).
  </Accordion>

  <Accordion title="Sous-vues">
    Réutilisez des parties de vue avec `@include`.
  </Accordion>
</AccordionGroup>


## Related topics

- [Envoi d'e-mails](/fr/mail.md)
- [Bundling des assets avec Vite](/fr/vite.md)
- [Validation](/fr/validation.md)
- [Introduction à l'authentification](/fr/authentication.md)
- [⚡Introduction à Livewire 4 — créer des UI réactives sans JavaScript](/fr/blog/livewire-introduction.md)