Module 12 – Blade & Frontend Laravel

Niveau 3 – Laravel fondamental

Objectifs

Syntaxe Blade (echo, conditions, boucles), layouts et vues avec @extends/@section, composants, et formulaires sécurisés (CSRF, anciennes valeurs, erreurs).

Théorie

Syntaxe Blade

Blade est le moteur de templates Laravel. Les fichiers sont dans resources/views/ avec l’extension .blade.php.

Afficher une variable (échappée automatiquement) :

{{ $title }}
{{ $user->name }}

Afficher du HTML non échappé (à utiliser avec précaution) :

{!! $contenuHtml !!}

Ne l’utiliser que pour du contenu de confiance (ex. éditeur WYSIWYG contrôlé). Sinon risque XSS.

Directives courantes :

@if($condition)
    ...
@elseif($autre)
    ...
@else
    ...
@endif

@foreach($users as $user)
    {{ $user->name }}
@endforeach

@for($i = 0; $i < 10; $i++)
    {{ $i }}
@endfor

@isset($variable)
    ...
@endisset

@empty($tableau)
    Le tableau est vide
@endempty

Blade et PHP brut : si besoin, @php ... @endphp.

Layouts (héritage)

Un layout est un squelette (header, footer, zone de contenu). Les vues étendent le layout et remplissent les sections.

Layout (resources/views/layouts/app.blade.php) :

<!DOCTYPE html>
<html>
<head>
    <title>@yield('title', 'Mon App')</title>
</head>
<body>
    @include('partials.nav')
    <main>
        @yield('content')
    </main>
    @yield('scripts')
</body>
</html>

Vue enfant :

@extends('layouts.app')

@section('title', 'Contact')

@section('content')
    <h1>Contact</h1>
    <p>Contenu de la page.</p>
@endsection

@section('scripts')
    <script src="..."></script>
@endsection

@extends : indique le layout.
@section('name') … @endsection : contenu pour la section name.
@yield('name', 'default') : affiche la section ou une valeur par défaut.
@include('name') : inclut un autre template (ex. barre de navigation).

Composants Blade

Les composants permettent de réutiliser des blocs (bouton, carte, formulaire de champ). Laravel fournit des composants (ex. formulaire avec CSRF). On peut en créer avec php artisan make:component AlertButton.

Utilisation d’un composant :

<x-alert type="success" :message="$message" />
<x-button href="{{ route('home') }}">Accueil</x-button>

Définition (app/View/Components/Alert.php + resources/views/components/alert.blade.php) : la classe reçoit les attributs, la vue les affiche. Les composants permettent de centraliser la logique d’affichage (classes CSS, icônes, etc.).

Formulaires sécurisés

CSRF : Laravel exige un token CSRF sur chaque formulaire POST/PUT/DELETE pour éviter les requêtes forgées depuis un autre site. Avec Blade, utiliser @csrf dans le formulaire :

<form method="POST" action="{{ route('articles.store') }}">
    @csrf
    <input type="text" name="title" value="{{ old('title') }}">
    @error('title')
        <span class="error">{{ $message }}</span>
    @enderror
    <button type="submit">Create</button>
</form>

old('title') : réaffiche la valeur soumise en cas d’erreur de validation.
@error('title') … @enderror : affiche le message d’erreur du champ.

Méthode HTTP : pour PUT/PATCH/DELETE, ajouter @method('PUT') (Laravel simule la méthode via un champ caché).

Exemple : page avec layout et formulaire

Layout : layouts.app avec @yield('content').

Vue contact :

@extends('layouts.app')

@section('title', 'Contact')

@section('content')
    <h1>Nous contacter</h1>
    <form method="POST" action="{{ route('contact.store') }}">
        @csrf
        <label>Email <input type="email" name="email" value="{{ old('email') }}" required></label>
        @error('email') <span class="error">{{ $message }}</span> @enderror
        <label>Message <textarea name="message">{{ old('message') }}</textarea></label>
        @error('message') <span class="error">{{ $message }}</span> @enderror
        <button type="submit">Submit</button>
    </form>
@endsection

Bonnes pratiques

Toujours {{ }} pour le contenu dynamique (échappement automatique).
@csrf sur tous les formulaires en POST/PUT/DELETE.
old() pour pré-remplir les champs après une erreur de validation.
@error pour afficher les messages de validation à côté des champs.
Centraliser header/footer dans un layout et réutiliser les blocs avec @include ou composants.

Quiz – Module 12

Q1. Quelle est la différence entre {{ $var }} et {!! $var !!} ?
Q2. À quoi servent @extends et @section ?
Q3. Pourquoi doit-on mettre @csrf dans un formulaire Laravel ?
Q4. Comment afficher l’erreur de validation d’un champ dans Blade ?
Q5. Comment réafficher la valeur soumise d’un champ après une erreur ?

Réponses

R1. {{ }} échappe le HTML (protection XSS). {!! !!} affiche le contenu sans échappement (à réserver au contenu de confiance). (En MD, les accolades sont dans des backticks pour éviter l’interprétation.)

R2. @extends indique le layout parent. @section … @endsection définit le contenu d’une section que le layout affiche avec @yield.

R3. @csrf ajoute un token pour la protection CSRF ; Laravel rejette les requêtes POST/PUT/DELETE sans token valide.

R4. Avec @error('field_name') … @enderror ; à l’intérieur, $message contient le message d’erreur.

R5. Avec old('field_name') dans l’attribut value (ou le contenu du textarea).

Mini-projet : Interface utilisateur complète

Réaliser 2–3 pages (ex. accueil, liste d’articles, formulaire de contact) avec :

Un layout commun (navbar, footer).
Utilisation de @extends, @section, @include.
Un formulaire avec @csrf, validation côté contrôleur, affichage des erreurs et old().
Liens avec route('name') et boutons de navigation.

Suite

Module 13 – Base de données avec Eloquent (migrations, modèles, relations, seeders, factories).

Objectifs​

Théorie​

Syntaxe Blade​

Layouts (héritage)​

Composants Blade​

Formulaires sécurisés​

Exemple : page avec layout et formulaire​

Bonnes pratiques​

Quiz – Module 12​

Mini-projet : Interface utilisateur complète​

Suite​