Laravel : Vues et Blade Templating
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 aux Vues
Les vues dans Laravel sont des fichiers qui contiennent le HTML de votre application. Elles sont stockées dans le répertoire resources/views. Une vue simple peut ressembler à ceci :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Bienvenue</title>
</head>
<body>
<h1>Bienvenue sur mon site Laravel</h1>
</body>
</html>
2. Blade Templating
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.
2.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".
2.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>
3. 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.
3.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>
3.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');
});
4. 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```html
Laravel</h1>
</body>
</html>
5. 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
// routes/web.php
Route::get('/page/{id}', function ($id) {
$page = Page::find($id);
return view('page.show', ['page' => $page]);
});
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.