Tutoriel sur la création de mises en page avec Laravel Blade

Laravel il y a 5 mois

Création d'une mise en page en Laravel

Comprendre les mises en page dans Laravel

En Laravel, les mises en page (souvent appelées pages maîtres) fournissent une structure réutilisable pour les vues de votre application. Elles définissent les éléments communs comme l'en-tête, la navigation, le pied de page et les barres latérales, tandis que les vues individuelles (comme accueil, à propos, contact) se concentrent sur leur contenu spécifique. Cette séparation favorise la maintenabilité du code et la cohérence de votre application.

Création du fichier de mise en page

Naviguer vers les vues: À l'aide de votre terminal, naviguez vers le répertoire resources/views/layouts dans votre projet Laravel. Ce répertoire est spécialement dédié aux fichiers de mise en page.
Créer un nouveau fichier: Créez un nouveau fichier de modèle Blade, généralement nommé default.blade.php ou quelque chose de similaire qui reflète le style de votre application. Ce fichier hébergera la structure de la mise en page.

Construction de la structure de la mise en page

Structure HTML: Commencez par ajouter la structure HTML de base, y compris les balises <!DOCTYPE html>, <html>, <head>, et <body>.
Section head: Dans la section <head>, définissez les éléments essentiels comme <title>, les balises meta pour l'encodage des caractères et la description, et tout lien CSS nécessaire pour styliser votre mise en page.
En-tête: Créez une section d'en-tête à l'aide d'éléments HTML appropriés (par exemple, <header>, <nav>, <ul>) pour contenir le logo de votre application, les liens de navigation ou d'autres éléments de marque.
Section de contenu: Introduisez une section où les vues individuelles inséreront leur contenu. Cela se fait généralement à l'aide de la directive Blade @yield('content'). La directive @yield agit comme un espace réservé où le contenu des vues enfants sera injecté.
Barre latérale (facultatif): Si votre mise en page intègre une barre latérale, créez une section dédiée en utilisant des éléments HTML comme <aside> pour contenir le contenu de la barre latérale.
Pied de page: Définissez une section de pied de page à l'aide de <footer> ou d'autres éléments appropriés pour afficher les informations de copyright, les liens vers les réseaux sociaux ou tout autre contenu que vous souhaitez voir apparaître de manière cohérente sur toutes les pages.

Exemple de mise en page (default.blade.php):

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ config('app.name') }}</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
    <header>
        </header>

    <main>
        @yield('content')
    </main>

    <aside>
        </aside>

    <footer>
        </footer>

    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

Création de vues individuelles

Naviguer vers les vues: Accédez au répertoire approprié dans votre répertoire resources/views (par exemple, home, about, contact) pour créer des vues individuelles pour différentes sections de votre application.
Créer des fichiers de vue: Créez des fichiers de modèle Blade (par exemple, home.blade.php, about.blade.php, contact.blade.php) pour chaque vue.
Étendre la mise en page: Dans chaque fichier de vue, utilisez la directive @extends('layouts.default') pour indiquer que la vue hérite de la structure du fichier default.blade.php.
Définir le contenu: Dans les vues individuelles, définissez le contenu spécifique qui sera affiché dans la section @yield('content') de la mise en page.

Exemple de vue (home.blade.php):

HTML

@extends('layouts.default')

@section('content')
    <h1>Bienvenue sur la page d'accueil !</h1>
@endsection

Routage (facultatif)

La création d'une mise en page ne nécessite pas forcément de définitions d'itinéraire, mais si vous en avez déjà configurées, vous pouvez les ajuster pour rendre la mise en page créée. Par exemple, dans votre fichier routes/web.php :

PHP

Route::get('/', function () {
    return view('home'); // En supposant que vous ayez un itinéraire d'accueil
});

Conseils supplémentaires

Mises en page basées sur des composants (Laravel 9+) : Envisagez d'utiliser le système de composants de Laravel pour des mises en page plus complexes ou des éléments d'interface utilisateur réutilisables.
Syntaxe Blade : Explorez le moteur de templating Blade de Laravel pour les instructions conditionnelles, les boucles et d'autres fonctionnalités qui améliorent la structure et la logique de vos vues.