Aller au contenu
Framework côté serveur

Views

Views

Introduction à Blade

Blade est le moteur de templates intégré à Laravel. Il te permet d'utiliser du code PHP de manière simplifiée dans tes fichiers de vue, tout en offrant une syntaxe propre et expressive. Les fichiers Blade se terminent par l'extension .blade.php et sont généralement stockés dans le répertoire resources/views.

Rendre une Vue et Passer des Données

Pour afficher une vue, tu peux utiliser la fonction globale view dans tes routes ou contrôleurs. Par exemple :

Route::get('/', function () {
    return view('accueil', ['nom' => 'Jean']);
});

Dans cet exemple, la vue accueil recevra une variable $nom avec la valeur 'Jean'. Dans ta vue Blade, tu peux afficher cette donnée ainsi :

<p>Bienvenue, {{ $nom }} !</p>

Les Composants Anonymes

Les composants anonymes sont des morceaux réutilisables de code Blade qui n'ont pas besoin d'une classe PHP associée. Ils permettent de simplifier la structure de ton application en évitant la création de classes inutiles.

Création d'un Composant Anonyme

Pour créer un composant anonyme, il te suffit de créer un fichier Blade dans le répertoire resources/views/components. Par exemple, pour un composant d'alerte :

<!-- resources/views/components/alerte.blade.php -->
<div class="alerte alerte-{{ $type }}">
    {{ $message }}
</div>

Ici, le composant utilise deux variables : $type et $message.

Utilisation d'un Composant Anonyme

Pour utiliser ce composant dans une vue, tu peux l'appeler ainsi :

<x-alerte :type="$type" :message="$message" />

Les deux-points : avant les noms d'attributs indiquent à Blade que ces attributs doivent être évalués comme du code PHP. Pas besoin de préfixer de : lorsqu’on passe une string au composant.

Passage de Données aux Composants

Pour passer des données à un composant, tu peux utiliser la directive @props en haut du fichier du composant :

<!-- resources/views/components/alerte.blade.php -->
@props(['type' => 'info', 'message'])

<div class="alerte alerte-{{ $type }}">
    {{ $message }}
</div>

Ici, @props définit les variables $type et $message avec des valeurs par défaut. Si aucune valeur n'est passée lors de l'appel du composant, $type sera 'info' par défaut.

Les Layouts et les Slots

Les layouts sont des modèles de base que tes vues peuvent étendre, ce qui te permet de maintenir une structure cohérente à travers ton application. Les slots sont des espaces réservés dans ces layouts où le contenu spécifique à chaque vue sera inséré.

Création d'un Layout avec Slots

Imaginons un layout de base situé dans resources/views/layouts/app.blade.php :

<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>{{ $title ?? 'Mon Application' }}</title>
</head>
<body>
    <header>
        <!-- Contenu de l'en-tête -->
    </header>

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

    <footer>
        <!-- Contenu du pied de page -->
    </footer>
</body>
</html>

Ici, {{ $slot }} représente l'endroit où le contenu spécifique de chaque vue sera inséré. La variable $title est optionnelle et peut être définie dans chaque vue.

Utilisation d'un Layout dans une Vue

Pour utiliser ce layout dans une vue, tu peux faire :

<!-- resources/views/accueil.blade.php -->
<x-layouts.app>
    <x-slot:title>
        Page d'accueil
    </x-slot:title>

    <h1>Bienvenue sur la page d'accueil</h1>
    <p>Ceci est le contenu de la page.</p>
</x-layouts.app>

Ici, x-slot:title permet de définir la valeur de la variable $title dans le layout. Le contenu entre les balises <x-layouts.app> sera inséré à la place de {{ $slot }} dans le layout.

Autres Fonctionnalités Utiles de Blade

  • Directives Conditionnelles : Blade offre des directives comme @if, @elseif, @else et @unless pour gérer les conditions.

    @if ($utilisateur->estAdmin())
    <p>Bienvenue, administrateur.</p>
@else
    <p>Bienvenue, utilisateur.</p>
@endif

  • Boucles : Pour itérer sur des collections ou des tableaux, tu peux utiliser @foreach, @for, @while et @forelse.

    @foreach ($articles as $article)
    <h2>{{ $article->titre }}</h2>
    <p>{{ $article->contenu }}</p>
@endforeach

  • Inclusion de Vues : Avec la directive @include, tu peux inclure une vue à l'intérieur d'une autre.

    @include('partials.entete')

En adoptant ces fonctionnalités de Blade, tu pourras créer des vues Laravel propres, modulaires et maintenables, ce qui facilitera le développement et améliorera la qualité globale de ton application.

Pour approfondir tes connaissances sur Blade, consulte la documentation :

Ouais, parfaitement clair (pour une fois, ça change 🥴).
Voici une liste révisée des exercices pour entraîner tes étudiants débutants à créer des vues Blade simples sans s'embourber avec une DB ou des layouts compliqués. Let's go 🚀 :

Exercices pratiques sur les vues Blade

Exercice 1 : Page d'Accueil simple

Objectif : Créer et afficher une vue basique.

  • Crée une route /accueil qui affiche une vue accueil.blade.php.
  • Dans cette vue, affiche un titre et un paragraphe de bienvenue.

Exercice 2 : Page "À propos"

Objectif : Passer et afficher des données simples dans une vue.

  • Crée une route /a-propos qui affiche une vue a-propos.blade.php.
  • Passe à la vue un tableau contenant plusieurs informations sur l'entreprise (nom, année de création, mission).
  • Affiche ces informations dans la vue sous forme de liste.

Exercice 3 : Affichage d'une liste avec conditions

Objectif : Utiliser les boucles et les conditions Blade.

Crée une route /membres qui transmet à la vue membres.blade.php un tableau de membres suivant :

$membres = [
    ['prenom' => 'Alice', 'age' => 29],
    ['prenom' => 'Bob', 'age' => 34],
    ['prenom' => 'Chloé', 'age' => 17],
    ['prenom' => 'Damien', 'age' => 42],
];
  • Affiche chaque membre dans une liste.
  • Si le membre est majeur (18+), affiche son âge. Sinon, affiche "Mineur".

Exercice 4 : Création d'un composant anonyme "Card"

Objectif : Créer et réutiliser un composant Blade anonyme.

  • Crée un composant anonyme nommé card.blade.php dans resources/views/components/.
  • Ce composant doit afficher un titre et un texte descriptif.
  • Crée une route /services avec une vue qui affiche trois cartes différentes présentant des services fictifs (ex : Design, Développement, Marketing).

Indice : Passe les données au composant via des attributs.

Exercice 5 : Liste de produits avec lien vers une vue détaillée

Objectif : Créer des vues dynamiques avec des liens et afficher des données spécifiques.

  • Crée une route /produits qui passe ce tableau de produits à la vue produits.blade.php :
$produits = [
    ['id' => 1, 'nom' => 'PC Portable', 'prix' => 1200, 'en_promo' => true],
    ['id' => 2, 'nom' => 'Souris Gaming', 'prix' => 80, 'en_promo' => false],
    ['id' => 3, 'nom' => 'Clavier Mécanique', 'prix' => 150, 'en_promo' => true],
    ['id' => 4, 'nom' => 'Casque Audio', 'prix' => 100, 'en_promo' => false],
];
  • Affiche chaque produit avec son nom et son prix.
  • Si un produit est en promo, affiche à côté "🔥 Promo !".
  • Chaque produit doit contenir un lien vers une route /produits/{id}.

Ensuite :

  • Crée la route /produits/{id} pour afficher une vue produit.blade.php présentant uniquement les détails du produit choisi.

Exercice 6 : Composant Blade pour produits

Objectif : Réutiliser du code Blade en créant un composant pour afficher chaque produit.

  • Reprends la liste des produits fournie précédemment (Exercice 5).
  • Crée un composant anonyme produit.blade.php qui affiche proprement un produit (nom, prix, promo éventuelle).
  • Modifie la vue précédente pour utiliser ton composant à chaque produit de la liste.