Laravel Master

Chapitre 3

Tous les chapitres
Chapitre 3Projet SunuLearn

Blade — le moteur de templates

Layouts, composants, directives et syntaxe Blade

Concepts Théoriques

Blade est le moteur de templates de Laravel. Il transforme des fichiers .blade.php (du HTML avec des directives spéciales) en HTML pur que le navigateur affiche. Blade vous évite de mélanger du PHP brut dans le HTML — à la place, vous utilisez des syntaxes claires et lisibles.

Afficher des données — {{ }}

<h1>{{ $formation['title'] }}</h1>
<p>{{ $formation['description'] }}</p>

Les doubles accolades {{ }} affichent une variable en l'échappant automatiquement (protection contre les attaques XSS). Si $title contient <script>alert('hack')</script>, Blade l'affiche comme du texte, pas comme du JavaScript exécutable.

Pour afficher du HTML brut (quand vous faites confiance au contenu) : {!! $htmlContent !!}.

Conditions — @if, @auth, @guest

@if ($formations->count() > 0)
    <p>{{ $formations->count() }} formations disponibles</p>
@else
    <p>Aucune formation pour le moment.</p>
@endif

@auth
    <p>Bienvenue, {{ auth()->user()->name }}</p>
@endauth

@guest
    <a href="/login">Se connecter</a>
@endguest

@auth affiche le contenu seulement si l'utilisateur est connecté. @guest fait l'inverse.

Boucles — @foreach, @forelse

@foreach ($formations as $formation)
    <div>
        <h3>{{ $formation['title'] }}</h3>
        <span>{{ $formation['level'] }}</span>
    </div>
@endforeach

@forelse est un @foreach avec un cas "vide" intégré :

@forelse ($formations as $formation)
    <div>{{ $formation['title'] }}</div>
@empty
    <p>Aucune formation trouvée.</p>
@endforelse

Layouts — éviter la duplication

Chaque page de SunuLearn a le même header, le même footer, le même <head>. Sans layout, vous copieriez ce code dans chaque fichier. Blade offre deux approches :

Approche moderne — Composants Blade (recommandée en Laravel 12) :

<!-- resources/views/components/layout.blade.php -->
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>{{ $title ?? 'SunuLearn' }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <nav>
        <a href="{{ route('home') }}">SunuLearn</a>
        <a href="{{ route('formations.index') }}">Formations</a>
        <a href="{{ route('contact.show') }}">Contact</a>
    </nav>

    <main>
        {{ $slot }}
    </main>

    <footer>
        <p>&copy; {{ date('Y') }} SunuLearn — Dakar, Sénégal</p>
    </footer>
</body>
</html>

{{ $slot }} est l'endroit où le contenu spécifique de chaque page s'insère. Utilisation :

<!-- resources/views/home.blade.php -->
<x-layout title="Accueil — SunuLearn">
    <h1>Bienvenue sur SunuLearn</h1>
    <p>La plateforme de formations en ligne du Sénégal.</p>
</x-layout>

Tout ce qui est entre <x-layout> et </x-layout> remplace {{ $slot }}.

Approche classique — @extends/@section (encore très utilisée) :

<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html lang="fr">
<head>
    <title>@yield('title', 'SunuLearn')</title>
</head>
<body>
    <nav>...</nav>
    @yield('content')
    <footer>...</footer>
</body>
</html>
<!-- resources/views/home.blade.php -->
@extends('layouts.app')
@section('title', 'Accueil — SunuLearn')
@section('content')
    <h1>Bienvenue sur SunuLearn</h1>
@endsection

Les deux approches fonctionnent. Les composants Blade (<x-layout>) sont la direction recommandée par Laravel 12 — on les utilisera dans ce cours.

Composants réutilisables

Au-delà du layout, vous pouvez créer des composants pour tout élément répété :

php artisan make:component FormationCard

Cela crée deux fichiers :

  • app/View/Components/FormationCard.php (la logique)
  • resources/views/components/formation-card.blade.php (le HTML)

@csrf — protection des formulaires

Chaque formulaire POST doit inclure @csrf :

<form action="{{ route('contact.send') }}" method="POST">
    @csrf
    <input type="text" name="name">
    <button type="submit">Envoyer</button>
</form>

@csrf génère un token caché qui prouve que le formulaire vient bien de votre site. Sans @csrf, Laravel rejette la soumission (erreur 419).

@vite — inclure CSS et JS

@vite(['resources/css/app.css', 'resources/js/app.js'])

Vite compile et optimise vos fichiers CSS/JS. En développement, lancez npm run dev dans un second terminal pour le hot-reload.

Tous les chapitres