Blade : Personnalisation Header Navigation et Footer

04:55:15

Laravel Blade permet de structurer vos vues en composants réutilisables, simplifiant la maintenance et la personnalisation de votre application. Voici un guide détaillé pour créer un répertoire 

resources/views/components

contenant les fichiers 

header.blade.php

, 

nav.blade.php

, et 

footer.blade.php

.

Étape 1 : Création du Dossier des Composants

  1. Créer le répertoire via le terminal :bash 
    mkdir resources/views/components

    ou manuellement en naviguant dans le répertoire 

    resources/views

    .

  2. Ajouter les fichiers nécessaires : 
    • header.blade.php
    • nav.blade.php
    • footer.blade.php

Étape 2 : Création des Composants

a) 

header.blade.php

Contenu du fichier :

blade

<header class="bg-blue-600 text-white py-4"> <div class="container mx-auto flex justify-between items-center"> <h1 class="text-lg font-bold">Laravel 11 Project</h1> <p>Welcome to the best app!</p> </div> </header>

Explications :

  • bg-blue-600

    : Couleur d’arrière-plan bleue.

  • text-white

    : Texte en blanc.

  • py-4

    : Marges internes verticales (padding) de 1 rem.

  • flex

    et 

    justify-between

    : Disposition en flexbox pour espacer les éléments.

b) 

nav.blade.php

Contenu du fichier :

blade

<nav class="bg-gray-800 text-white py-2"> <div class="container mx-auto flex justify-between items-center"> <ul class="flex space-x-4"> <li><a href="{{ url('/') }}" class="hover:text-yellow-400">Home</a></li> <li><a href="{{ url('/about') }}" class="hover:text-yellow-400">About</a></li> <li><a href="{{ url('/contact') }}" class="hover:text-yellow-400">Contact</a></li> </ul> <div> @auth <a href="{{ url('/dashboard') }}" class="hover:text-yellow-400">Dashboard</a> @else <a href="{{ route('login') }}" class="hover:text-yellow-400">Login</a> @endauth </div> </div> </nav>

Explications :

  • space-x-4

    : Ajoute un espacement horizontal de 1 rem entre les liens.

  • @auth

    : Vérifie si l’utilisateur est connecté pour afficher un lien vers le tableau de bord.

  • hover:text-yellow-400

    : Change la couleur du texte en jaune au survol.

c) 

footer.blade.php

Contenu du fichier :

blade

<footer class="bg-gray-700 text-white py-4 mt-8"> <div class="container mx-auto text-center"> <p>&copy; {{ date('Y') }} Laravel Project. All rights reserved.</p> <a href="{{ url('/privacy-policy') }}" class="text-blue-400 hover:underline">Privacy Policy</a> </div> </footer>

Explications :

  • mt-8

    : Ajoute une marge supérieure (margin-top) de 2 rem.

  • text-center

    : Centre le texte horizontalement.

  • text-blue-400 hover:underline

    : Lien bleu avec soulignement au survol.

Étape 3 : Intégration des Composants dans le Layout Principal

  1. Créer ou modifier le fichier 
    resources/views/layouts/app.blade.php

    :blade

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>@yield('title', 'Laravel 11 Project')</title> <link rel="stylesheet" href="{{ asset('css/app.css') }}"> </head> <body> <!-- Include Header --> @include('components.header') <!-- Include Navigation --> @include('components.nav') <!-- Main Content --> <main class="container mx-auto py-6"> @yield('content') </main> <!-- Include Footer --> @include('components.footer') <script src="{{ asset('js/app.js') }}"></script> </body> </html>

Explications :

  • @include('components.header')

    : Inclut le fichier 

    header.blade.php

    .

  • @yield('content')

    : Emplacement pour injecter le contenu spécifique à chaque page.

Étape 4 : Configuration de la Route pour la Page d’Accueil

Ajoutez une route dans 

routes/web.php

pour rendre accessible la page d’accueil :

php

use Illuminate\Support\Facades\Route; Route::get('/', function () { return view('home'); });
  1. Créer le fichier 
    resources/views/home.blade.php

    :blade

    @extends('layouts.app') @section('title', 'Home') @section('content') <h1 class="text-2xl font-bold text-center">Bienvenue sur Laravel 11 Project</h1> <p class="text-center mt-4">Commencez à explorer les fonctionnalités.</p> @endsection

Étape 5 : Compilation des Fichiers CSS et JS

  1. Assurez-vous que Laravel Mix compile vos fichiers CSS et JS :bash 
    npm install npm run dev
  2. Votre fichier 
    webpack.mix.js

    doit contenir :javascript

    const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .postCss('resources/css/app.css', 'public/css', [ require('tailwindcss'), ]);

Exemple Complet de Résultat

Page d’accueil accessible via 

/

:

  • Header bleu avec le titre et le slogan.
  • Barre de navigation dynamique (liens vers 
    Home

    , 

    About

    , 

    Contact

    ).

  • Footer contenant la politique de confidentialité et l’année actuelle.

Avantages :

  • Réutilisabilité : Les composants peuvent être utilisés dans plusieurs mises en page.
  • Clarté : Le code est organisé et maintenable.
  • Flexibilité : Vous pouvez personnaliser chaque composant indépendamment.

 

par