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.

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.

​

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.