Templates Blade

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.

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.

Bonjour, {{ $name }}.

{{ }} passe automatiquement par htmlspecialchars pour prévenir les attaques XSS.

Vous pouvez afficher le résultat de fonctions PHP.

Timestamp UNIX actuel : {{ time() }}

Affichage sans échappement

Pour omettre l’échappement, utilisez {!! !!}.

Bonjour, {!! $name !!}.

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

Cohabitation avec des frameworks JavaScript

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

<h1>Laravel</h1>

Bonjour, @{{ name }}.

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

Pour comparer Blade avec Livewire ou Inertia, consultez Frontend.

Directives Blade

Conditionnelles (if)

@if (count($records) === 1)
    Il y a 1 enregistrement.
@elseif (count($records) > 1)
    Plusieurs enregistrements.
@else
    Aucun enregistrement.
@endif

@unless inverse la condition.

@unless (Auth::check())
    Vous n'êtes pas connecté.
@endunless

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

@isset($records)
    // $records est défini et non null
@endisset

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

Directives d’authentification

@auth
    // Contenu pour utilisateur authentifié
@endauth

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

Switch

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

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

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

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

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

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

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

<!-- 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. Définition du layout parent :

<!-- 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 :

<!-- 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

@parent conserve le contenu du @section du layout parent tout en y ajoutant.

Piles

Utilisez @push et @stack pour transmettre des fragments comme du JavaScript ou du CSS entre un layout et ses vues enfants ou composants. Une vue enfant ou un composant ajoute du contenu à une pile nommée, et le layout l’affiche avec un @stack du même nom.

<!-- resources/views/components/chart.blade.php -->
@push('scripts')
    <script src="/js/chart.js"></script>
@endpush

Dans le layout, placez @stack après les composants qui ajoutent du contenu à la pile, comme <x-chart />.

<body>
    {{ $slot }}
    <x-chart />

    @stack('scripts')
</body>

@stack n’affiche que le contenu ajouté avant son exécution. Le contenu ajouté par des composants rendus après @stack n’est pas inclus, même au sein du même layout. Placez @stack après les composants concernés, par exemple à la fin de <body>. Pour plus de détails, consultez Stacks dans la documentation officielle de Laravel.

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.

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

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

Passez des variables supplémentaires si besoin.

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

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

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

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

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

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

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.

Récapitulatif

Principales fonctionnalités de Blade.

Affichage des données

{{ $variable }} échappé, {!! $variable !!} non échappé.

Conditionnelles

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

Boucles

@for, @foreach, @forelse, @while et pilotage avec la variable $loop.

Layouts

Par composant (<x-layout> et {{ $slot }}) ou par héritage (@extends, @section, @yield).

Sous-vues

Réutilisez des parties de vue avec @include.

Pour commencer

Bases

Traitement des requêtes

Base de données

Authentification

Helpers et communication externe

Tests et déploiement

Assistance au développement IA

Introduction

Flux de compilation Blade

Affichage des données

Affichage sans échappement

Cohabitation avec des frameworks JavaScript

Directives Blade

Conditionnelles (if)

Directives d’authentification

Switch

Boucles

Variable `$loop`

Commentaires

Layouts

Layout par composant

Layout par héritage

Piles

Inclusion de sous-vues

Protection CSRF dans les formulaires

Récapitulatif

​Introduction

​Flux de compilation Blade

​Affichage des données

​Affichage sans échappement

​Cohabitation avec des frameworks JavaScript

​Directives Blade

​Conditionnelles (if)

​Directives d’authentification

​Switch

​Boucles

​Variable $loop

​Commentaires

​Layouts

​Layout par composant

​Layout par héritage

​Piles

​Inclusion de sous-vues

​Protection CSRF dans les formulaires

​Récapitulatif

Introduction

Flux de compilation Blade

Affichage des données

Affichage sans échappement

Cohabitation avec des frameworks JavaScript

Directives Blade

Conditionnelles (if)

Directives d’authentification

Switch

Boucles

Variable `$loop`

Commentaires

Layouts

Layout par composant

Layout par héritage

Piles

Inclusion de sous-vues

Protection CSRF dans les formulaires

Récapitulatif