Introduction à Blade : l'élégance au service de vos interfaces

Blade est le moteur de template simple mais puissant fourni avec Laravel. Contrairement à d'autres moteurs de template PHP populaires, Blade ne vous empêche pas d'utiliser du code PHP brut dans vos vues. En fait, toutes les vues Blade sont compilées en code PHP pur et mises en cache jusqu'à ce qu'elles soient modifiées, ce qui signifie que Blade n'ajoute pratiquement aucune surcharge à votre application. Les fichiers de vue Blade utilisent l'extension .blade.php et sont généralement stockés dans le répertoire resources/views.

L'objectif principal de Blade est de vous permettre de construire des interfaces utilisateur dynamiques de manière propre et lisible. Il offre une syntaxe concise pour les structures de contrôle PHP courantes telles que les conditions et les boucles, ainsi que des fonctionnalités avancées comme l'héritage de templates (layouts) et l'inclusion de sous-vues, favorisant ainsi le principe DRY (Don't Repeat Yourself). En séparant la logique de présentation de la logique métier (gérée par les contrôleurs et les modèles), Blade contribue à une architecture applicative plus claire et plus maintenable, conformément au modèle MVC.

Dans ce chapitre, nous allons explorer les fondations de Blade. Vous apprendrez sa syntaxe de base pour afficher des données et utiliser les structures de contrôle. Nous verrons ensuite comment transmettre efficacement des données depuis vos contrôleurs vers vos vues. Enfin, nous aborderons l'un des aspects les plus puissants de Blade : la création de layouts réutilisables pour structurer vos pages web de manière cohérente et professionnelle.

Syntaxe de base de Blade : afficher des données et structures de contrôle

L'une des tâches les plus courantes dans une vue est d'afficher des données. Blade fournit une syntaxe très simple pour cela, en utilisant des doubles accolades : {{ $variable }}. Par défaut, cette syntaxe échappe automatiquement la sortie HTML pour prévenir les attaques XSS (Cross-Site Scripting). Si vous avez besoin d'afficher du HTML non échappé (par exemple, du contenu provenant d'un éditeur WYSIWYG de confiance), vous pouvez utiliser la syntaxe {!! $variable !!}. Soyez extrêmement prudent lorsque vous utilisez cette dernière.

Bonjour, {{ $nomUtilisateur }} !


{!! $contenuHtmlArticle !!}

Blade facilite également l'écriture de structures de contrôle PHP. Pour les conditions, vous pouvez utiliser @if, @elseif, @else, et @endif. Il existe aussi des directives pratiques comme @unless (l'inverse de @if), @isset (vérifie si une variable existe et n'est pas nulle), et @empty (vérifie si une variable est "vide").

@if (count($enregistrements) === 1)
    Il y a un enregistrement.
@elseif (count($enregistrements) > 1)
    Il y a plusieurs enregistrements.
@else
    Il n'y a aucun enregistrement.
@endif

@isset($utilisateur)
    <p>Connecté en tant que : {{ $utilisateur->nom }}</p>
@endisset

@empty($commentaires)
    <p>Aucun commentaire pour le moment.</p>
@endempty

Pour les boucles, Blade propose plusieurs directives : @for, @foreach, @forelse, et @while. La directive @foreach est la plus couramment utilisée pour itérer sur des tableaux ou des collections. La directive @forelse est particulièrement utile car elle combine une boucle @foreach avec une condition @empty, vous permettant de spécifier un contenu à afficher si la collection est vide.

@foreach ($utilisateurs as $utilisateur)
    <li>{{ $utilisateur->nom }}</li>
@endforeach

@forelse ($produits as $produit)
    <div class="produit">{{ $produit->nom }} - {{ $produit->prix }} €</div>
@empty
    <p>Aucun produit disponible dans cette catégorie.</p>
@endforelse

A l'intérieur des boucles @foreach et @forelse, une variable $loop est automatiquement disponible. Elle fournit des informations utiles sur l'itération actuelle, comme $loop->index (index basé sur 0), $loop->iteration (index basé sur 1), $loop->first (booléen, vrai si c'est la première itération), $loop->last (booléen, vrai si c'est la dernière itération), $loop->count (nombre total d'éléments), etc. Les commentaires dans Blade se font avec {{-- Ceci est un commentaire Blade, il n'apparaîtra pas dans le HTML rendu --}}.

Passer des données du contrôleur à une vue Blade

Comme nous l'avons vu brièvement dans le chapitre sur les contrôleurs, pour rendre une vue dynamique, vous devez lui transmettre des données. La manière la plus courante de le faire est de passer un tableau associatif comme second argument à la fonction helper view() dans votre contrôleur. Les clés de ce tableau deviennent des variables accessibles dans votre vue Blade.

// Dans un contrôleur, par exemple ArticleController.php
public function show($slug)
{
    $article = Article::where('slug', $slug)->firstOrFail();
    $auteur = $article->auteur; // Supposons une relation
    $commentairesRecents = $article->commentaires()->orderBy('created_at', 'desc')->take(5)->get();

    return view('articles.detail', [
        'articleContent' => $article,
        'authorName' => $auteur->nom,
        'recentComments' => $commentairesRecents
    ]);
}

Dans la vue resources/views/articles/detail.blade.php, vous pourrez alors utiliser {{ $articleContent->titre }}, {{ $authorName }}, et itérer sur $recentComments.

Une alternative pour construire ce tableau de données est d'utiliser la fonction compact() de PHP. Si les noms de vos variables locales dans le contrôleur correspondent aux noms que vous souhaitez utiliser dans la vue, compact() peut rendre le code un peu plus concis :

public function profilUtilisateur(User $user)
{
    $nom = $user->name;
    $email = $user->email;
    $posts = $user->posts()->get();

    return view('utilisateur.profil', compact('nom', 'email', 'posts'));
    // Equivalent à : return view('utilisateur.profil', ['nom' => $nom, 'email' => $email, 'posts' => $posts]);
}

Il est également possible d'utiliser la méthode with() de manière fluide pour passer des données individuellement. Bien que moins fréquent pour plusieurs variables, cela peut être utile dans certains contextes :

public function index()
{
    return view('accueil')
            ->with('titre', 'Page d'accueil')
            ->with('messageBienvenue', 'Bienvenue sur notre plateforme !');
}

Quelle que soit la méthode choisie, l'important est que les données nécessaires à l'affichage de la vue soient clairement transmises et accessibles. Veillez à ne passer que les données strictement nécessaires à la vue pour maintenir une séparation claire des préoccupations.

Utiliser les layouts Blade : `@extends`, `@section` et `@yield` pour des templates réutilisables

L'une des fonctionnalités les plus puissantes de Blade est l'héritage de templates, qui vous permet de créer des "layouts" (ou gabarits) de base pour votre application. Un layout définit la structure HTML commune à plusieurs pages (comme l'en-tête, le pied de page, la barre de navigation) et des emplacements où les vues enfants peuvent injecter leur contenu spécifique. Cela évite de répéter du code HTML identique sur chaque page, rendant votre application plus facile à maintenir.

Pour définir un layout, vous créez un fichier Blade (par exemple, resources/views/layouts/app.blade.php). Dans ce fichier, vous utilisez la directive @yield('nomDeLaSection') pour définir des sections où le contenu pourra être injecté. Vous pouvez aussi définir des sections avec un contenu par défaut en utilisant @section('nomDeLaSection') ... @show.

    
     
    
    @stack('styles') 


    

        @include('partials.navigation') 
    

    

            @yield('contenuPrincipal')