Chapitre 5.1: Les modèles Blade dans Laravel

Temps d'étude: 40 minutes

1. Qu'est-ce que Blade? Votre "plan intelligent"

Jusqu'à présent, nous avons travaillé avec deux extrêmes: un index.html pur et une réponse JSON pure d'une API. Mais comment créer des pages web complètes qui affichent dynamiquement des données de notre backend?

Blade est le moteur de templating intégré à Laravel. Il nous permet d'écrire du HTML ordinaire, mais avec des "super-pouvoirs":

Insérer des variables et exécuter du code PHP avec une syntaxe élégante.
Créer des "layouts" de pages réutilisables (en-têtes, pieds de page).
Utiliser des boucles et des conditions directement dans le code HTML.
Se protéger automatiquement des attaques XSS.

💡 Analogie spatiale:

Imaginez que le HTML est un simple plan de vaisseau spatial. Blade est un système de CAO avancé. Vous ne dessinez pas seulement des lignes, vous ajoutez des objets "intelligents". Vous dites: "Voici la liste de l'équipage", et Blade demande automatiquement les données et la remplit. "Voici l'écran principal", et Blade insère l'interface standard.

Tous les fichiers Blade ont l'extension .blade.php et sont stockés dans le dossier resources/views/.

2. Les bases de la syntaxe: Affichage des données

La chose la plus simple que Blade fait est d'afficher des données.

Syntaxe {{ }}

Ces doubles accolades sont la commande pour Blade "prendre une variable et afficher son contenu en toute sécurité".

Exemple:

Route dans routes/web.php:

<?php
Route::get('/mission-briefing', function () {
    $mission = 'Исследовать систему Kepler-186';
    return view('briefing', ['mission_name' => $mission]); // indique à Laravel de trouver le fichier resources/views/briefing.blade.php
});

view('briefing', ...) indique à Laravel de trouver le fichier resources/views/briefing.blade.php.
['mission_name' => $mission] — c'est un tableau de données que nous "passons" à notre vue.

Vue dans resources/views/briefing.blade.php:

<h1>Mission du Centre de Contrôle</h1>
<p>Tâche actuelle: {{ $mission_name }}</p>

Résultat dans le navigateur à l'adresse /mission-briefing:

<h1>Mission du Centre de Contrôle</h1>
<p>Tâche actuelle: Explorer le système Kepler-186</p>

🛡️ Important à savoir: Blade échappe automatiquement toutes les données à l'intérieur de {{ }}. Cela signifie que si une variable contient des balises HTML ou un script malveillant, elles seront affichées comme du texte brut et non exécutées. C'est une protection intégrée contre les attaques XSS.

Pour afficher du HTML non échappé (faites-le avec prudence!), utilisez la syntaxe {!! $variable !!}.

3. Directives: Ajouter de la logique au HTML

Les directives Blade commencent par le symbole @. Elles permettent d'utiliser des boucles, des conditions et bien plus encore.

Conditions (@if, @else):

@if($planet->is_habitable)
    <p style="color: green;">La planète est habitable!</p>
@else
    <p style="color: red;">Combinaison spatiale requise. L'atmosphère est hostile.</p>
@endif

Boucles (@foreach, @forelse):

@forelse est une directive très pratique qui combine une boucle et une vérification de vide.

<h2>Liste des planètes du système:</h2>
<ul>
    @forelse($planets as $planet)
        <li>
            {{ $loop->iteration }}. {{ $planet->name }}
            <!-- $loop - variable spéciale disponible dans la boucle -->
        </li>
    @empty
        <li>Aucune planète détectée dans ce système.</li>
    @endforelse
</ul>

4. Layouts et sections: Ne vous répétez pas (DRY)

La fonctionnalité la plus puissante de Blade est la création de layouts réutilisables. Vous n'avez pas besoin de copier l'en-tête et le pied de page du site sur chaque page.

Étape 1: Créer un layout maître

Créez le fichier resources/views/layouts/app.blade.php:

<?php
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Centre de Contrôle - @yield('title')</title>
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
    <header>
        <h1>Centre de Commandement de la Flotte Galactique</h1>
    </header>

    <main>
        @yield('content') <!-- Le contenu unique de la page sera ici -->
    </main>

    <footer>
        <p>&copy; {{ date('Y') }} Space Command. Tous droits réservés.</p>
    </footer>
</body>
</html>

- @yield('title') et @yield('content') sont des "slots" ou "placeholders".

Étape 2: Créer une vue enfant qui utilise le layout

Créez le fichier resources/views/planets/index.blade.php:

<?php
@extends('layouts.app') {{-- Hérite de notre layout maître --}}

@section('title', 'Liste des planètes') {{-- Remplit la section 'title' --}}

@section('content') {{-- Remplit la section principale 'content' --}}
    <h2>Planètes enregistrées</h2>
    <p>Ceci est une liste de tous les mondes que nous connaissons.</p>
    {{-- Votre boucle @forelse pour afficher les planètes peut être ici --}}
@endsection

Maintenant, lorsque Laravel rendra planets.index, il prendra d'abord layouts.app, puis insérera le contenu des sections @section.

Quiz pour la consolidation

🚀 Résumé du chapitre:

Vous avez appris les bases de Blade — un outil puissant pour créer des pages web dynamiques. Vous savez maintenant comment:

Afficher des données avec une protection automatique contre les XSS.
Utiliser des directives pour ajouter de la logique (@if, @forelse).
Créer des layouts réutilisables à l'aide de @extends et @yield.

Nous avons préparé les "plans" pour les panneaux de contrôle de notre vaisseau. Dans le chapitre suivant, nous créerons des "panneaux" (vues) spécifiques pour notre API et y afficherons des données réelles.