Laravel : Utilisation du moteur de templates Blade
Laravel est un framework PHP populaire pour le développement d'applications web. L'un de ses atouts majeurs est son moteur de templates intégré, Blade, qui facilite la création de vues dynamiques. Blade permet de gérer les layouts, les inclusions, les sections, les conditions, les boucles, et plus encore, de manière élégante et intuitive.
1. Introduction à Blade
Blade est le moteur de templates de Laravel. Les fichiers Blade utilisent l'extension .blade.php
. Blade fournit une syntaxe simple et puissante pour inclure des layouts, gérer des sections, et plus encore.
1.1 Affichage de Données
Pour afficher des données dans une vue Blade, vous utilisez des accolades doubles {{ }}
:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Salutations</title>
</head>
<body>
<h1>Bonjour, {{ $name }}</h1>
</body>
</html>
Exemple :
Imaginons que vous ayez un contrôleur qui passe des données à cette vue :
php
// routes/web.php
Route::get('/greeting', function () {
return view('greeting', ['name' => 'Jean']);
});
Quand vous visitez /greeting
, vous verrez "Bonjour, Jean".
1.2 Logique de Contrôle
Blade permet d'utiliser des structures de contrôle comme les conditions et les boucles de manière élégante :
Conditions
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Condition</title>
</head>
<body>
@if ($age >= 18)
<p>Vous êtes adulte.</p>
@else
<p>Vous êtes mineur.</p>
@endif
</body>
</html>
Boucles
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Boucle</title>
</head>
<body>
<ul>
@foreach ($items as $item)
<li>{{ $item }}</li>
@endforeach
</ul>
</body>
</html>
2. Layouts et Sections
Blade permet de définir des layouts que d'autres vues peuvent étendre. Cela est particulièrement utile pour éviter la duplication de code.
2.1 Définir un Layout
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>@yield('title')</title>
</head>
<body>
<header>
<h1>Mon Application</h1>
</header>
<div class="container">
@yield('content')
</div>
<footer>
<p>© 2024 Mon Application</p>
</footer>
</body>
</html>
2.2 Étendre un Layout
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>@yield('title')</title>
</head>
<body>
<header>
<h1>Mon Application</h1>
</header>
<div class="container">
@yield('content')
</div>
<footer>
<p>© 2024 Mon Application</p>
</footer>
</body>
</html>
@extends('layouts.app')
@section('title', 'Page Enfant')
@section('content')
<p>Ceci est le contenu de la page enfant.</p>
@endsection
Exemple :
En visitant une route qui renvoie cette vue, le contenu sera injecté dans le layout défini.
php
// routes/web.php
Route::get('/child', function () {
return view('child');
});
3. Inclusions de Vue
Blade permet également d'inclure des vues dans d'autres vues, ce qui est utile pour les composants réutilisables.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Bienvenue</title>
</head>
<body>
<h1>Bienvenue sur mon site Laravel</h1>
</body>
</html>
<nav>
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/about">À propos</a></li>
</ul>
</nav>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Bienvenue</title>
</head>
<body>
@include('includes.navbar')
<h1>Bienvenue sur mon site Laravel</h1>
</body>
</html>
4. Transfert de Données aux Vues
Les données peuvent être transférées aux vues via les contrôleurs ou directement depuis les routes.
Depuis un Contrôleur
php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class PageController extends Controller
{
public function show($id)
{
$page = Page::find($id);
return view('page.show', ['page' => $page]);
}
}
Depuis une Route
php
//```html
// routes/web.php
Route::get('/page/{id}', function ($id) {
$page = Page::find($id);
return view('page.show', ['page' => $page]);
});
5. Utilisation Avancée de Blade
5.1 Composants Blade
Les composants Blade vous permettent de créer des blocs réutilisables de code de vue.
Définir un Composant
<!-- resources/views/components/alert.blade.php -->
<div class="alert alert-{{ $type }}">
{{ $message }}
</div>
Utiliser un Composant
<x-alert type="danger" message="Une erreur s'est produite!" />
5.2 Slots de Composants
Les slots permettent de passer du contenu à l'intérieur d'un composant.
Définir un Slot
<!-- resources/views/components/layout.blade.php -->
<div class="container">
<!-- Contenu par défaut -->
{{ $slot }}
</div>
Utiliser un Slot
<x-layout>
<p>Ceci sera inséré dans le slot par défaut.</p>
</x-layout>
5.3 Directives Blade Personnalisées
Vous pouvez créer vos propres directives Blade pour simplifier vos vues.
php
// AppServiceProvider.php
use Illuminate\Support\Facades\Blade;
public function boot()
{
Blade::directive('datetime', function ($expression) {
return "<?php echo ($expression)->format('m/d/Y H:i'); ?>";
});
}
Utiliser une Directive Personnalisée
@datetime($date)
6. Scénarios Pratiques
Exemple 1 : Gestion des Erreurs
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Page Non Trouvée</title>
</head>
<body>
<h1>404 - Page Non Trouvée</h1>
<p>La page que vous cherchez n'existe pas.</p>
</body>
</html>
Exemple 2 : Affichage des Messages de Session
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Bienvenue</title>
</head>
<body>
@include('includes.messages')
<h1>Bienvenue sur mon site Laravel</h1>
</body>
</html>
@if (session('status'))
<div class="alert alert-success">
{{ session('status') }}
</div>
@endif
Conclusion
Blade est un moteur de templates puissant et flexible qui facilite la création de vues dynamiques dans Laravel. En utilisant les fonctionnalités de Blade comme les layouts, les sections, les inclusions, et la logique de contrôle, vous pouvez créer des applications web maintenables et modulaires. Blade permet également des personnalisations avancées grâce aux composants et aux directives personnalisées, ce qui en fait un outil essentiel pour tout développeur Laravel.