Créer des vues dynamiques dans Laravel peut devenir répétitif et complexe sans une structure appropriée.
Sans centralisation, la duplication du code devient inévitable, rendant la maintenance fastidieuse et augmentant les risques d’erreurs.
Cet article explore comment utiliser les layouts Blade de Laravel pour structurer et centraliser vos vues efficacement.
Initiez-vous à Laravel et réalisez votre première application en toute confiance.
Laravel offre Blade comme moteur de template pour gérer vos vues dynamiques. Le layout agit comme un modèle principal que les autres vues peuvent hériter. Cela permet de réduire la duplication du code et de centraliser la structure de votre site web. Vous êtes sur le point d’apprendre à utiliser cette fonctionnalité comme un pro !
Voici la structure des fichiers
Layout principal avec Blade Laravel
Un layout principal sert de base pour toutes les vues de votre application. Dans Laravel, vous pouvez créer ce fichier dans le répertoire resources/views/layouts. Voici les étapes à suivre :
Étape 1 : Créer le fichier main.blade.php
- Naviguez vers le dossier resources/views/layouts.
- Créez un fichier nommé main.blade.php.
Voici exemple de code pour le fichier main.blade.php
Formation Laravel
@yield('content')
Pour bien comprendre voici l’explications des parties importantes :
@yield(‘content’) :
- C’est une directive Blade qui crée une zone dynamique dans le layout principal. Les vues enfants inséreront leur contenu ici.
- Pensez à cela comme un « trou » que chaque vue peut remplir.
Navigation et styles :
- Le fichier utilise Bootstrap pour le style. Cela vous simplifie le travail en utilisant des composants prêts à l’emploi.
Variables Blade ({{$title ?? » « }}) :
- Si une variable title est définie, elle sera affichée. Sinon, une chaîne vide est utilisée par défaut.
Bravo, vous venez de créer la structure principale de votre application !
Vues enfants sous layout Blade Laravel
Après avoir défini le layout , vous pouvez créer des vues spécifiques qui en héritent. Nous allons créer deux vues test.blade.php et test2.blade.php dans le dossier resources/views et utiliser le layout principal.
Avant de plonger dans le code, examinons les notions essentielles pour bien comprendre :
Directive | Description | Exemple d’utilisation |
---|---|---|
@extends | Permet de spécifier qu’une vue enfant hérite d’un layout principal. | @extends(‘layouts.main’) |
@section | Définit une section de contenu qui sera insérée dans une zone du layout via @yield. | @section(‘content’) … @stop |
@yield | Affiche le contenu d’une section dans le layout principal. | @yield(‘content’) |
@stop ou @endsection | Marque la fin d’une section définie par @section. | @stop ou @endsection |
@include | Inclut un autre fichier de vue dans la vue actuelle. | @include(‘partials.header’) |
@if | Conditionnelle qui exécute le code suivant si la condition est vraie. | @if($user->isAdmin()) … @endif |
@else | Utilisé après @if pour définir un bloc de code si la condition est fausse. | @if($user->isAdmin()) … @else … @endif |
@foreach | Permet de boucler sur une collection et d’exécuter un bloc de code pour chaque élément. | @foreach($users as $user) … @endforeach |
@forelse | Similaire à @foreach, mais s’exécute si la collection est vide. | @forelse($users as $user) … @empty … @endforelse |
@while | Exécute un bloc de code tant qu’une condition est vraie. | @while($i < 10) ... @endwhile |
@isset | Vérifie si une variable est définie et non null. | @isset($user) … @endisset |
@empty | Vérifie si une variable est vide. | @empty($users) … @endempty |
@csrf | Génère un token CSRF pour les formulaires. | |
@method | Spécifie la méthode HTTP d’un formulaire. | |
@auth | Vérifie si un utilisateur est authentifié. | @auth … @endauth |
@guest | Vérifie si un utilisateur n’est pas authentifié. | @guest … @endguest |
@component | Utilisé pour inclure un composant Blade. | @component(‘alert’) … @endcomponent |
@slot | Définit un contenu pour un composant à utiliser dans son template. | @slot(‘header’) Titre @endslot |
@error | Affiche les erreurs de validation pour une entrée donnée. | @error(’email’) {{ $message }} @enderror |
@lang | Affiche une chaîne de texte traduite. | @lang(‘messages.welcome’) |
Tableau 1 : tableau récapitulatif des directives Blade
Voici l’explication des directives :
- @extends :Utilisé pour lier une vue enfant à un layout principal. Cela permet à la vue enfant de remplir les sections définies dans le layout.
- @section et @stop :Utilisés pour définir un bloc de contenu à insérer dans une zone spécifique du layout principal.
- @include :Permet d’inclure une autre vue dans la vue actuelle, utile pour les éléments réutilisables comme des en-têtes ou des pieds de page.
- @foreach, @if, @while, @empty :Des directives conditionnelles et de boucle utilisées pour manipuler les données dans les vues.
- @csrf et @method :Utilisés pour les formulaires afin de garantir la sécurité des requêtes HTTP.
- @auth et @guest :Permettent de conditionner l’affichage des éléments en fonction de l’état de connexion de l’utilisateur.
Vous comprenez maintenant les directives Blade. Passons à la structure du projet en commençant par la création de pages Blade. Voici comment procéder :
- Vue test.blade.php
Cette vue héritera du layout main.blade.php en utilisant @extends(‘layouts.main’) et insérera son contenu dans la section @section(‘content’).
@extends('layouts.main')
@section('content')
Catégories
Laravel c'est top !
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente dicta fugit fugiat hic aliquam itaque facere, soluta. Totam id dolores, sint aperiam sequi pariatur praesentium animi perspiciatis molestias iure, ducimus!
Par Hamid
Il y'a 1 heure
Commentaires
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis et enim aperiam inventore, similique necessitatibus neque non! Doloribus, modi sapiente laboriosam aperiam fugiat laborum. Sequi mollitia, necessitatibus quae sint natus.
Jean le 25 Janvier à 19h02
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis et enim aperiam inventore, similique necessitatibus neque non! Doloribus, modi sapiente laboriosam aperiam fugiat laborum. Sequi mollitia, necessitatibus quae sint natus.
Paul le 29 Juin à 15h09
Laisser un commentaire
@stop
- Vue test2.blade.php
De manière similaire, voici une autre vue héritant de main.blade.php :
@extends('layouts.main')
@section('content')
Catégories
PHP c'est top !
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente dicta fugit fugiat hic aliquam itaque facere, soluta. Totam id dolores, sint aperiam sequi pariatur praesentium animi perspiciatis molestias iure, ducimus!
Par Hamid
Il y'a 1 heure
Commentaires
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis et enim aperiam inventore, similique necessitatibus neque non! Doloribus, modi sapiente laboriosam aperiam fugiat laborum. Sequi mollitia, necessitatibus quae sint natus.
Jean le 25 Janvier à 19h02
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis et enim aperiam inventore, similique necessitatibus neque non! Doloribus, modi sapiente laboriosam aperiam fugiat laborum. Sequi mollitia, necessitatibus quae sint natus.
Paul le 29 Juin à 15h09
Laisser un commentaire
@stop
Excellent travail, vous avez appris à faire hériter vos vues d’un layout principal. Cela rend votre code réutilisable et propre !
Configurer routes pour vues Laravel
Enfin, pour visualiser les vues test et test2, nous allons définir des routes dans le fichier web.php. Voici comment le faire :
Route::get('/test', function () {
return view('test')->withTitle('Laravel');
});
Route::get('/test2', function () {
return view('test2')->withTitle('PHP');
});
Pour afficher les pages créées dans votre navigateur, vous devez vous assurer que votre serveur Laravel est en cours d’exécution. Voici un guide pour vérifier l’affichage de vos vues test et test2.
Démarrer serveur pour vues Blade
Avant de vérifier l’affichage des vues, assurez-vous que votre serveur de développement Laravel est bien en cours d’exécution. Si ce n’est pas le cas, vous pouvez le démarrer avec la commande suivante
php artisan serve
Accéder aux vues test et test2
Vous pouvez maintenant tester l’affichage de vos vues test et test2 :
- Vue testRendez-vous sur l’URL suivante dans votre navigateur pour accéder à la vue test :
http://127.0.0.1:8000/test
Voici le résultat d’affichage :
- Vue test2Pour accéder à la vue test2, rendez-vous sur cette URL :
http://127.0.0.1:8000/test2
Voici l’affichage de cette vue
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment créer un layout principal dans Laravel ?
Comment les vues héritent-elles d'un layout dans Laravel ?
Quelles sont les directives Blade les plus courantes ?
Comment définir des routes pour afficher des vues dans Laravel ?
Comment démarrer un serveur Laravel pour voir les changements ?
Conclusion
Vous avez maintenant une compréhension approfondie de la création de layouts avec Laravel Blade. Quelle autre fonctionnalité de Laravel aimeriez-vous explorer pour améliorer vos compétences ?