Laravel - Blade Templates: A Beginner's Guide

Bonjour là-bas, futurs développeurs web ! Aujourd'hui, nous allons plonger dans le merveilleux monde du moteur de templates Blade de Laravel. Ne vous inquiétez pas si vous n'avez jamais codé auparavant - je serai votre guide amical tout au long de ce voyage, et nous avancerons pas à pas.

Laravel - Blade Templates

Qu'est-ce que Blade ?

Blade est le puissant moteur de templates de Laravel. Imaginez-le comme un outil magique qui nous aide à créer des templates HTML dynamiques et réutilisables. C'est comme avoir un assistant super-intelligent qui peut remplir les blancs de vos pages web avec des données réelles.

Pourquoi utiliser Blade ?

C'est simple et facile à apprendre
Il rend votre code plus propre et plus lisible
Il vous aide à éviter la répétition (souvenez-vous, les développeurs sont paresseux - à bon escient !)

Maintenant, mettons-nous au travail !

Étapes pour créer un layout Blade

1. Créer un layout principal

Tout d'abord, nous devons créer un layout principal. C'est comme le squelette de votre site web - il contient les parties qui restent les mêmes sur chaque page.

Créez un nouveau fichier appelé layout.blade.php dans le répertoire resources/views :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title')</title>
</head>
<body>
<header>
<h1>Mon incroyable site web</h1>
</header>

<main>
@yield('content')
</main>

<footer>
<p>&copy; 2023 Mon incroyable site web</p>
</footer>
</body>
</html>

Reprenons cela :

@yield('title') : Cela indique à Blade, "Hey, nous remplirons plus tard le titre pour chaque page."
@yield('content') : C'est où le contenu principal de chaque page ira.

2. Créer des templates enfants

Maintenant, créons un template enfant qui utilise notre layout. Créez un nouveau fichier appelé home.blade.php :

@extends('layout')

@section('title', 'Page d\'accueil')

@section('content')
<h2>Bienvenue sur mon incroyable site web !</h2>
<p>Ceci est le contenu de la page d'accueil.</p>
@endsection

Voici ce qui se passe :

@extends('layout') : Cela indique à Blade d'utiliser notre fichier layout.blade.php comme base.
@section('title', 'Page d\'accueil') : Cela remplit le titre que nous avons laissé vide plus tôt.
@section('content') : C'est où nous mettons le contenu unique pour cette page.

3. Afficher des données

Blade brille vraiment lorsqu'il s'agit d'afficher des données. Disons que nous voulons montrer une liste de fruits. Nous mettrons à jour notre home.blade.php :

@extends('layout')

@section('title', 'Page d\'accueil')

@section('content')
<h2>Bienvenue sur mon incroyable site web !</h2>
<p>Ceci est le contenu de la page d'accueil.</p>

<h3Notre sélection de fruits :</h3>
@if(count($fruits) > 0)
<ul>
@foreach($fruits as $fruit)
<li>{{ $fruit }}</li>
@endforeach
</ul>
@else
<p>Désolé, nous sommes en rupture de stock de fruits !</p>
@endif
@endsection

Dans cet exemple :

@if et @else : Cela nous permet de prendre des décisions dans notre template.
@foreach : Cela nous aide à boucler sur notre liste de fruits.
{{ $fruit }} : Les doubles accolades indiquent à Blade d'afficher la valeur de la variable.

4. Utiliser des composants Blade

Les composants Blade sont comme des briques LEGO pour votre site web. Ce sont des pièces réutilisables que vous pouvez utiliser sur différentes pages. Créons un composant simple pour un bouton.

Créez un nouveau fichier resources/views/components/button.blade.php :

<button class="btn btn-{{ $type ?? 'primary' }}">
{{ $slot }}
</button>

Maintenant, nous pouvons utiliser ce bouton dans notre home.blade.php :

@extends('layout')

@section('title', 'Page d\'accueil')

@section('content')
<h2>Bienvenue sur mon incroyable site web !</h2>
<p>Ceci est le contenu de la page d'accueil.</p>

@component('components.button', ['type' => 'success'])
Cliquez-moi !
@endcomponent
@endsection

Cela créera un bouton avec le texte "Cliquez-moi !" et un style de succès.

Tableau de bord des directives Blade

Voici un tableau pratique des directives Blade courantes :

Directive	Objectif
@if	Condition
@else	Alternative à @if
@elseif	Condition alternative
@foreach	Boucle sur un tableau
@for	Boucle for
@while	Boucle while
@switch	Instruction switch
@yield	Définir une section dans un layout
@section	Définir le contenu pour un layout
@extends	Spécifier quel layout utiliser
@include	Inclure une autre vue
@auth	Vérifier si l'utilisateur est authentifié
@guest	Vérifier si l'utilisateur est invité

Souvenez-vous, la pratique rend parfait ! N'ayez pas peur d'expérimenter avec ces directives et de créer vos propres templates. Avant de vous en rendre compte, vous serez un ninja Blade, tranchant le HTML comme un couteau chaud dans le beurre !

Dans mes années d'enseignement, j'ai découvert que la meilleure façon d'apprendre est de faire. Alors, pourquoi ne pas essayer de créer une mise en page simple pour un blog en utilisant ce que nous avons appris ? Commencez par un layout principal, créez des pages pour l'accueil, la page à propos et les articles de blog, et utilisez les fonctionnalités puissantes de Blade pour rendre votre code propre et respectant le principe DRY (Ne vous répétez pas).

Bonne programmation, et que le Blade soit avec vous ! ?

Credits: Image by storyset

Tutoriel précédent:

Laravel - Vues

Tutoriel suivant:

Laravel - Redirections