Blade est le moteur de rendu HTML natif de Laravel. Sans ralentir votre application (les fichiers .blade.php sont compilés en PHP pur et mis en cache), il offre une syntaxe d'une clarté remarquable, une protection native contre les failles XSS et un système de composants modernes.
La façon moderne de concevoir vos layouts : <x-layout> et <x-alert> avec passage de props et slots.
Fini le PHP verbeux : utilisez @if, @auth, @guest, et le puissant @forelse ... @empty.
La syntaxe {{ $variable }} filtre et échappe systématiquement les balises malveillantes via htmlspecialchars().
Chargez CSS et JavaScript compilés avec rechargement à chaud ultra-rapide via la directive @vite().
<!-- 1. resources/views/components/layout.blade.php (Layout Moderne en Composant) -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ $titre ?? 'LearnWeb Laravel' }}</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-gray-50 text-gray-900">
<header class="border-b bg-white p-4">
<div class="container mx-auto flex justify-between">
<h1 class="font-bold text-red-600">Mon Blog Laravel</h1>
@auth
<span>Bienvenue, {{ auth()->user()->name }}</span>
@else
<a href="{{ route('login') }}">Se connecter</a>
@endauth
</div>
</header>
<main class="container mx-auto p-4">
{{ $slot }} <!-- Emplacement réservé au contenu injecté -->
</main>
</body>
</html>
<!-- 2. resources/views/articles/index.blade.php (Utilisation du composant) -->
<x-layout>
<x-slot:titre>Nos Derniers Articles</x-slot:titre>
<h2 class="text-2xl font-bold mb-4">Articles Récents</h2>
@forelse ($articles as $article)
<article class="p-4 bg-white rounded shadow mb-3">
<h3 class="font-bold">{{ $article->name }}</h3>
<p class="text-gray-600">{{ $article->description }}</p>
<span @class(['badge', 'badge-success' => $article->stock > 0, 'badge-danger' => $article->stock === 0])>
{{ $article->stock > 0 ? 'En stock' : 'Épuisé' }}
</span>
</article>
@empty
<p class="text-muted">Aucun article disponible pour le moment.</p>
@endforelse
</x-layout> Modifiez l'état de l'utilisateur et les données transmises à la vue pour observer en direct comment le moteur Blade compile les directives @auth, @forelse et @empty.
<!-- Navigation selon statut -->
@auth
<p class="text-success">Connecté en tant que : {{ $user->name }}</p>
@else
<p class="text-muted">Vous naviguez en tant qu'invité.</p>
@endauth
<!-- Boucle avec gestion du vide -->
@forelse ($articles as $item)
<div class="card p-2 mb-2">
<h5>{{ $item['titre'] }}</h5>
<span @class(['badge', $item['en_stock'] ? 'bg-success' : 'bg-danger'])>
{{ $item['en_stock'] ? 'Disponible' : 'Rupture' }}
</span>
</div>
@empty
<div class="alert alert-warning">
Aucun article dans le catalogue.
</div>
@endforelse| Directive Blade | Fonction & Utilisation | Exemple Pratique |
|---|---|---|
@auth / @guest | Conditionne l'affichage selon que l'utilisateur est authentifié ou visiteur. | @auth <button>Profil</button> @endauth |
@forelse / @empty | Boucle sur une collection avec affichage de secours si elle est vide. | @forelse($posts as $p)...@empty Pas de post @endforelse |
@csrf | Injecte un champ caché avec jeton CSRF obligatoire pour tout formulaire POST. | <form method="POST"> @csrf ... </form> |
@method('PUT') | Simule les verbes HTTP PUT, PATCH ou DELETE non supportés nativement par les formulaires HTML. | @method('DELETE') |
@class([...]) | Ajoute conditionnellement des classes CSS selon des expressions booléennes. | @class(['btn', 'btn-success' => $isActive]) |