Blog Alphorm Logo de blog informatique spécialisé en technologie et solutions IT
  • Développement
  • 3D et Animation
  • Cybersécurité
  • Infrastructure
  • Virtualisation
  • Réseaux
  • Bureautique
  • BDD
En cours de lecture : Créer des Layouts Efficaces avec Laravel Blade
Agrandisseur de policeAa
Blog AlphormBlog Alphorm
  • Développement
  • 3D et Animation
  • Cybersécurité
  • Infrastructure
  • Virtualisation
  • Réseaux
  • Bureautique
  • BDD
Search
  • Développement
  • 3D et Animation
  • Cybersécurité
  • Infrastructure
  • Virtualisation
  • Réseaux
  • Bureautique
  • BDD
Suivez-nous
© Alphorm 2024 - Tous droits réservés
Développement

Créer des Layouts Efficaces avec Laravel Blade

L'Équipe Alphorm Par L'Équipe Alphorm 9 janvier 2025
Partager
Partager

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.

Table de matière
Layout principal avec Blade LaravelVues enfants sous layout Blade LaravelLaravel c'est top !PHP c'est top !Configurer routes pour vues LaravelDémarrer serveur pour vues BladeFAQConclusion

Formation Laravel : Le Guide Complet du Débutant

Initiez-vous à Laravel et réalisez votre première application en toute confiance.

Découvrir cette formation

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

Diagramme de répertoires Blade dans Laravel

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

				
					
 <!DOCTYPE html>
<html lang="fr">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<title>Formation Laravel</title>
<link data-minify="1" rel="stylesheet" href="https://blog.alphorm.com/wp-content/cache/min/1/bootstrap/4.5.2/css/bootstrap.min.css?ver=1751809487" crossorigin="anonymous">
<style>
body {
padding-top: 56px;
}
h1.title{
font-size: 1.25rem;
}
</style>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https://blog.alphorm.com/wp-content/plugins/jet-tabs/assets/images/spinner-32.svg');}.rll-youtube-player .play{--wpr-bg-62da81c4-add9-4a1a-9302-00a5e9469234: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".jet-image-accordion__item-loader span","style":".jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg');}","hash":"b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-62da81c4-add9-4a1a-9302-00a5e9469234: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"62da81c4-add9-4a1a-9302-00a5e9469234","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<h1 class="title"><a class="navbar-brand" href="#">{{$title ?? " "}}</a></h1>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Connexion</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Inscription</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
@yield('content')
</div>
<!-- /.container -->
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright &copy; Formation Laravel 2020</p>
</div>
<!-- /.container -->
</footer>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>

				
			

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.
@csrf
@method
Spécifie la méthode HTTP d’un formulaire.
@method(‘PUT’)
@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')
<div class="row">
<div class="col-lg-3">
<div class="my-4">Catégories</div>
<div class="list-group">
<a href="#" class="list-group-item active">Laravel</a>
<a href="#" class="list-group-item">PHP</a>
<a href="#" class="list-group-item">Javascript</a>
</div>
</div>
<!-- /.col-lg-3 -->
<div class="col-lg-9">
<div class="card mt-4">
<div class="card-body">
<h2 id="laravel-cest-top" class="rb-heading-index-5 card-title"><a href="" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">Laravel c'est top !</a></h2>
<p class="card-text">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!</p>
<span class="auhtor">Par <a href="" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">Hamid</a></span> <br>
<span class="time">Il y'a 1 heure</span>
</div>
</div>
<!-- /.card -->
<div class="card card-outline-secondary my-4">
<div class="card-header">
Commentaires
</div>
<div class="card-body">
<p>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.</p>
<small class="text-muted">Jean le 25 Janvier à 19h02</small>
<hr>
<p>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.</p>
<small class="text-muted">Paul le 29 Juin à 15h09</small>
<hr>
<a href="#" class="btn btn-success">Laisser un commentaire</a>
</div>
</div>
<!-- /.card -->
</div>
<!-- /.col-lg-9 -->
</div>
@stop

				
			
  • Vue test2.blade.php

De manière similaire, voici une autre vue héritant de main.blade.php :

				
					
 @extends('layouts.main')
@section('content')
<div class="row">
<div class="col-lg-3">
<div class="my-4">Catégories</div>
<div class="list-group">
<a href="#" class="list-group-item active">Laravel</a>
<a href="#" class="list-group-item">PHP</a>
<a href="#" class="list-group-item">Javascript</a>
</div>
</div>
<!-- /.col-lg-3 -->
<div class="col-lg-9">
<div class="card mt-4">
<div class="card-body">
<h2 id="php-cest-top" class="rb-heading-index-6 card-title"><a href="" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">PHP c'est top !</a></h2>
<p class="card-text">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!</p>
<span class="auhtor">Par <a href="" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">Hamid</a></span> <br>
<span class="time">Il y'a 1 heure</span>
</div>
</div>
<!-- /.card -->
<div class="card card-outline-secondary my-4">
<div class="card-header">
Commentaires
</div>
<div class="card-body">
<p>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.</p>
<small class="text-muted">Jean le 25 Janvier à 19h02</small>
<hr>
<p>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.</p>
<small class="text-muted">Paul le 29 Juin à 15h09</small>
<hr>
<a href="#" class="btn btn-success">Laisser un commentaire</a>
</div>
</div>
<!-- /.card -->
</div>
<!-- /.col-lg-9 -->
</div>
@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.

Infos : withTitle(‘Laravel’) transmet la variable title à la vue.

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 :

Interface utilisateur de blog Laravel
  • 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

Capture d'écran d'un site utilisant Laravel Blade

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.

Démarrer gratuitement
illustration processus de paiement en ligne avec étapes claires et convivialité

FAQ

Comment créer un layout principal dans Laravel ?
Pour créer un layout principal dans Laravel, commencez par naviguer vers le répertoire resources/views/layouts. Créez un fichier nommé main.blade.php. Ce fichier servira de base pour les autres vues. Utilisez les directives Blade comme @yield pour définir des sections dynamiques, où les vues enfants inséreront leur contenu. Cela centralise la structure du site et réduit la duplication de code. Assurez-vous d’inclure les styles nécessaires, par exemple avec Bootstrap, pour une mise en forme cohérente.
Comment les vues héritent-elles d'un layout dans Laravel ?
Les vues héritent d’un layout dans Laravel en utilisant la directive @extends. Par exemple, une vue enfant comme test.blade.php inclut @extends(‘layouts.main’) pour indiquer qu’elle utilise le layout main.blade.php. Elle définit ensuite son contenu spécifique dans des sections grâce à @section et insère ce contenu dans les zones dynamiques du layout à l’aide de @yield. Cette approche permet de maintenir un code propre et réutilisable, facilitant ainsi la gestion des vues.
Quelles sont les directives Blade les plus courantes ?
Les directives Blade courantes incluent @extends pour l’héritage de layout, @section pour définir des sections de contenu, et @yield pour afficher ces sections dans le layout principal. D’autres directives utiles sont @include pour insérer des vues, @if et @foreach pour les conditions et boucles, @csrf pour la sécurité des formulaires, et @auth/@guest pour la gestion des utilisateurs authentifiés ou invités. Ces directives facilitent la création de vues dynamiques et sécurisées dans Laravel.
Comment définir des routes pour afficher des vues dans Laravel ?
Pour définir des routes dans Laravel, utilisez le fichier web.php. Par exemple, pour afficher une vue test, vous pouvez ajouter Route::get(‘/test’, function () { return view(‘test’)->withTitle(‘Laravel’); });. Cela crée une route accessible via l’URL /test, qui renvoie la vue test.blade.php avec une variable title. Assurez-vous que votre serveur Laravel est en cours d’exécution pour visualiser les vues dans le navigateur.
Comment démarrer un serveur Laravel pour voir les changements ?
Pour démarrer un serveur Laravel, utilisez la commande php artisan serve dans votre terminal. Cela lancera un serveur de développement à l’adresse http://127.0.0.1:8000. Vous pouvez ensuite accéder à vos vues en utilisant les routes définies, par exemple http://127.0.0.1:8000/test pour la vue test. Ce serveur vous permet de voir instantanément les changements apportés à vos fichiers Blade et routes.

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 ?

ÉTIQUETÉ : Laravel
Facebook
Twitter
LinkedIn
Email
WhatsApp
Par L'Équipe Alphorm
Démocratiser la Connaissance Informatique pour Tous !
Suivre :
L'Équipe Alphorm, c'est la démocratisation de la connaissance informatique. Passionnés et dévoués, nous sommes là pour vous guider vers le succès en rendant la technologie accessible à tous. Rejoignez notre aventure d'apprentissage et de partage. Avec nous, le savoir IT devient une ressource inspirante et ouverte à tous dans un monde numérique en constante évolution.

Derniers Articles

  • Techniques pour gérer les fichiers texte en C#
  • Créer et lire un fichier CSV avec C#
  • JSON : Comprendre et Utiliser Efficacement
  • Créer une Base SQLite dans C#
  • Lecture des données SQLite simplifiée
Laisser un commentaire Laisser un commentaire

Laisser un commentaire Annuler la réponse

Vous devez vous connecter pour publier un commentaire.

Blog Alphorm
  • Développement
  • 3D et Animation
  • Cybersécurité
  • Infrastructure
  • Virtualisation
  • Réseaux
  • Bureautique
  • BDD
En cours de lecture : Créer des Layouts Efficaces avec Laravel Blade

© Alphorm - Tous droits réservés