Blade : une syntaxe intuitive pour dynamiser vos vues HTML

Blade est le moteur de template intégré à Laravel, conçu pour être à la fois simple à apprendre et puissant à utiliser. Il permet d'intégrer de la logique PHP et d'afficher des données dynamiques au sein de vos fichiers HTML de manière propre et lisible, sans la verbosité du PHP brut. Les fichiers Blade, portant l'extension .blade.php, sont compilés en code PHP optimisé et mis en cache par Laravel, garantissant ainsi d'excellentes performances.

L'un des premiers besoins lorsqu'on construit une interface utilisateur est d'afficher des données provenant de l'application (par exemple, le nom d'un utilisateur, le titre d'un article, une liste de produits). Blade offre une syntaxe concise pour cela. Ensuite, il est crucial de pouvoir contrôler le flux d'affichage en fonction de certaines conditions (par exemple, afficher un message si l'utilisateur est connecté) ou de répéter des blocs de HTML pour chaque élément d'une collection (par exemple, lister les articles d'un blog). Pour cela, Blade propose des directives élégantes qui se traduisent par des structures de contrôle PHP classiques.

Ce chapitre se concentre sur les éléments fondamentaux de la syntaxe Blade : comment afficher des variables de manière sécurisée, et comment utiliser les directives de structure de contrôle les plus courantes, à savoir @if pour les conditions et @foreach pour les boucles. Maîtriser ces bases est essentiel pour commencer à construire des interfaces utilisateur dynamiques et interactives avec Laravel.

Afficher des données avec les doubles accolades {{ }}

La façon la plus courante d'afficher la valeur d'une variable dans Blade est d'utiliser la syntaxe des doubles accolades : {{ $maVariable }}. Cette syntaxe est l'équivalent Blade de l'instruction PHP . Cela signifie que par défaut, toute sortie HTML contenue dans $maVariable sera automatiquement échappée pour prévenir les vulnérabilités de type Cross-Site Scripting (XSS). C'est une mesure de sécurité importante.

Voici quelques exemples d'affichage de données :

{{ $titreDeLaPage }}


Nom de l'utilisateur : {{ $utilisateur->nom }}


Email : {{ $utilisateur['email'] }}


Date actuelle : {{ date('d/m/Y') }}
Nombre d'articles : {{ count($articles) }}

Si la variable $titreDeLaPage contenait , Blade l'afficherait comme du texte littéral (<script>alert('hack!');</script>), empêchant l'exécution du script.

Dans les rares cas où vous avez besoin d'afficher du HTML brut et que vous êtes certain de la sécurité de la source de ces données (par exemple, du contenu formaté par un administrateur via un éditeur WYSIWYG de confiance), vous pouvez utiliser la syntaxe {!! $variableHtml !!}. Cette syntaxe n'échappera pas la sortie.

    {!! $article->contenuHtml !!}

Il est également possible d'afficher une variable avec une valeur par défaut si elle n'existe pas ou est nulle, en utilisant l'opérateur de coalescence nulle de PHP à l'intérieur des accolades :

{{ $nomVariable ?? 'Valeur par défaut' }}

Enfin, les commentaires dans Blade se font en entourant le texte de {{-- et --}}. Ces commentaires ne seront pas présents dans le code HTML final rendu par le navigateur, contrairement aux commentaires HTML classiques .

{{-- Ceci est un commentaire Blade. Il n'apparaîtra pas dans la source HTML. --}}

Structures de contrôle conditionnelles : @if, @elseif, @else, et @endif

Blade fournit des directives pour la plupart des structures de contrôle conditionnelles de PHP, rendant leur écriture plus propre et plus lisible dans le contexte d'un template HTML. La directive la plus fondamentale est @if, qui est suivie par @elseif (optionnel), @else (optionnel), et se termine toujours par @endif.

Voici un exemple simple :

@if ($utilisateur->estAdmin())
    <p>Vous êtes un administrateur.</p>
@elseif ($utilisateur->estModerateur())
    <p>Vous êtes un modérateur.</p>
@else
    <p>Vous êtes un utilisateur standard.</p>
@endif

Vous pouvez utiliser n'importe quelle expression PHP valide à l'intérieur des parenthèses de @if et @elseif.

Blade propose également des directives conditionnelles de commodité :

• @unless (condition) : C'est l'inverse de @if. Le bloc de code est exécuté si la condition est fausse.

@unless (Auth::check()) 
    
Veuillez vous connecter pour accéder à cette section.
@endunless

• @isset ($variable) : Exécute le bloc si $variable est définie et n'est pas null.

@isset($messageDeSucces)
    <div class="alert alert-success">{{ $messageDeSucces }}</div>
@endisset

• @empty ($variable) : Exécute le bloc si $variable est considérée comme "vide" (null, chaîne vide, tableau vide, 0, etc., selon la fonction empty() de PHP).

@empty($commentaires)
    <p>Aucun commentaire n'a été posté pour cet article.</p>
@endempty

Ces directives peuvent rendre votre code de vue plus expressif et plus facile à comprendre d'un seul coup d'oeil.

Structures de contrôle itératives : @foreach et la variable $loop

Pour itérer sur des tableaux ou des collections (comme les collections Eloquent), la directive @foreach est la plus utilisée. Sa syntaxe est très similaire à celle de la boucle foreach en PHP.

@if (!empty($articles))
    <ul>
        @foreach ($articles as $article)
            <li>
                <h3>{{ $article->titre }}</h3>
                <p>Publié le {{ $article->date_publication->format('d/m/Y') }}</p>
            </li>
        @endforeach
    </ul>
@else
    <p>Aucun article à afficher pour le moment.</p>
@endif

Vous pouvez également récupérer la clé (pour les tableaux associatifs) :

@foreach ($options as $cle => $valeur)
    <option value="{{ $cle }}">{{ $valeur }}</option>
@endforeach

A l'intérieur d'une boucle @foreach (et aussi @forelse), Blade met à disposition une variable spéciale $loop. Cette variable est un objet qui fournit des informations utiles sur l'état de la boucle actuelle :

• $loop->index: L'index de l'itération actuelle (commence à 0).
• $loop->iteration: L'itération actuelle (commence à 1).
• $loop->remaining: Le nombre d'itérations restantes dans la boucle.
• $loop->count: Le nombre total d'éléments dans le tableau ou la collection sur laquelle on itère.
• $loop->first: Un booléen qui est true si c'est la première itération.
• $loop->last: Un booléen qui est true si c'est la dernière itération.
• $loop->even: Un booléen qui est true si l'itération actuelle est paire (2ème, 4ème, etc.).
• $loop->odd: Un booléen qui est true si l'itération actuelle est impaire (1ère, 3ème, etc.).
• $loop->depth: Le niveau de profondeur si la boucle est imbriquée dans d'autres boucles.
• $loop->parent: Si la boucle est imbriquée, donne accès à la variable $loop de la boucle parente.

Exemple d'utilisation de $loop :

@foreach ($elements as $element)
    <div class="{{ $loop->even ? 'ligne-paire' : 'ligne-impaire' }}">
        {{ $loop->iteration }}. {{ $element->nom }}
        @if ($loop->last)
            <span>(Dernier élément)</span>
        @endif
    </div>
@endforeach

Blade fournit également la directive @forelse, qui combine une boucle @foreach avec une vérification @empty. C'est très pratique lorsque vous voulez afficher quelque chose si la collection est vide, sans avoir à écrire une condition @if séparée.

@forelse ($produits as $produit)
    <div class="produit-item">
        <h4>{{ $produit->nom }}</h4>
        <p>Prix : {{ $produit->prix }} €</p>
    </div>
@empty
    <p class="text-muted">Aucun produit ne correspond à votre recherche.</p>
@endforelse

D'autres directives de boucle comme @for et @while existent également et fonctionnent de manière similaire à leurs équivalents PHP :

@for ($i = 0; $i < 10; $i++)
    Le nombre est {{ $i }}

@endfor

@php $compteur = 0; @endphp
@while ($compteur < 5)
    
Compteur : {{ $compteur }}
    @php $compteur++; @endphp
@endwhile

Notez l'utilisation de @php ... @endphp pour insérer du code PHP brut lorsque c'est nécessaire, bien qu'il soit généralement préférable de minimiser son utilisation dans les vues pour maintenir une bonne séparation des préoccupations. La maîtrise de ces syntaxes de base de Blade vous permettra de construire la majorité des interfaces utilisateur dynamiques dont vous aurez besoin avec Laravel.