Laravel : Layouts et Sections

Laravel est un framework PHP qui facilite le développement d'applications web robustes et maintenables. L'un de ses atouts majeurs est le moteur de templates Blade, qui permet de gérer efficacement les layouts et les sections dans vos vues. Cette fonctionnalité vous permet de réutiliser du code et de structurer vos templates de manière modulaire.

1. Introduction aux Layouts et Sections

Les layouts et sections permettent de créer des structures de pages réutilisables. Un layout est un modèle de base pour vos vues, et les sections permettent de définir des blocs de contenu spécifiques à chaque vue qui utilise ce layout.

2. Création d'un Layout de Base

Pour créer un layout, vous devez définir un fichier Blade avec des sections marquées par la directive @yield.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon Application - @yield('title')</title>
    <link rel="stylesheet" href="/css/app.css">
</head>
<body>
    <header>
        <h1>Mon Application</h1>
    </header>

    <div class="container">
        @yield('content')
    </div>

    <footer>
        <p>&copy; 2024 Mon Application</p>
    </footer>
</body>
</html>

2.1 Utilisation du Layout dans une Vue

Pour utiliser ce layout, vous devez étendre le layout dans vos vues avec la directive @extends et définir les sections avec la directive @section.

<!-- resources/views/pages/home.blade.php -->
@extends('layouts.app')

@section('title', 'Accueil')

@section('content')
    <p>Bienvenue sur la page d'accueil de mon application!</p>
@endsection

Exemple :

Créons une route qui retourne cette vue :

php
// routes/web.php
Route::get('/', function () {
    return view('pages.home');
});

En visitant la racine de votre application, vous verrez le contenu de la vue inséré dans le layout.

3. Sections Multiples

Vous pouvez définir plusieurs sections dans un layout et les remplir dans vos vues.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon Application - @yield('title')</title>
    <link rel="stylesheet" href="/css/app.css">
</head>
<body>
    <header>
        <h1>Mon Application</h1>
        @yield('header')
    </header>

    <div class="container">
        @yield('content')
    </div>

    <footer>
        @yield('footer')
        <p>&copy; 2024 Mon Application</p>
    </footer>
</body>
</html>

3.1 Remplir les Sections dans une Vue

<!-- resources/views/pages/about.blade.php -->
@extends('layouts.app')

@section('title', 'À propos')

@section('header')
    <h2>À propos de nous</h2>
@endsection

@section('content')
    <p>Nous sommes une entreprise dédiée à fournir les meilleurs services.</p>
@endsection

@section('footer')
    <p>Contactez-nous: contact@monapplication.com</p>
@endsection

Exemple :

Ajoutons une route pour cette vue :

php
// routes/web.php
Route::get('/about', function () {
    return view('pages.about');
});

En visitant /about, vous verrez les sections spécifiques à cette vue insérées dans le layout.

4. Inclusion de Partiels

Il est souvent utile de créer des vues partielles pour des éléments réutilisables comme les barres de navigation.

<!-- resources/views/includes/navbar.blade.php -->
<nav>
    <ul>
        <li><a href="/">Accueil</a></li>
        <li><a href="/about">À propos</a></li>
    </ul>
</nav>

<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon Application - @yield('title')</title>
    <link rel="stylesheet" href="/css/app.css">
</head>
<body>
    @include('includes.navbar')
    <header>
        <h1>Mon Application</h1>
        @yield('header')
    </header>

    <div class="container">
        @yield('content')
    </div>

    <footer>
        @yield('footer')
        <p>&copy; 2024 Mon Application</p>
    </footer>
</body>
</html>

5. Section Imbriquées

Vous pouvez également imbriquer des sections pour des mises en page plus complexes.

<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon Application - @yield('title')</title>
    <link rel="stylesheet" href="/css/app.css">
</head>
<body>
    @include('includes.navbar')
    <header>
        <h1>Mon Application</h1>
        @yield('header')
    </header>```html
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                @yield('content')
            </div>
            <div class="col-md-4">
                @yield('sidebar')
            </div>
        </div>
    </div>

    <footer>
        @yield('footer')
        <p>&copy; 2024 Mon Application</p>
    </footer>
</body>
</html>

Dans vos vues, vous pouvez remplir les sections comme d'habitude :

<!-- resources/views/pages/home.blade.php -->
@extends('layouts.app')

@section('title', 'Accueil')

@section('header')
    <h2>Bienvenue sur notre site</h2>
@endsection

@section('content')
    <p>Contenu principal de la page d'accueil.</p>
@endsection

@section('sidebar')
    <div class="sidebar">
        <h3>Sidebar</h3>
        <p>Contenu de la sidebar.</p>
    </div>
@endsection

6. Conclusion

Les layouts et sections sont des outils essentiels pour structurer vos vues de manière modulaire dans Laravel. En utilisant ces fonctionnalités, vous pouvez réutiliser du code, organiser votre application de manière logique et maintenable, et améliorer la productivité du développement. Avec la puissance de Blade, la gestion des layouts et sections devient simple et élégante.