close

Construire des mises en page avec Laravel- Créer des interfaces flexibles et maintenables

Dans Laravel, la mise en page joue un rôle important dans la création de l'interface utilisateur d'une application Web. Une mise en page représente la structure globale d'une page Web, y compris les sections communes telles que header, footer  et sidebar. Dans cet article, nous allons explorer comment créer des mises en page Laravel pour créer des interfaces flexibles et maintenables.

Tout d'abord, créons une mise en page de base pour notre site Web. Commencez par créer un fichier nommé app.blade.php dans le répertoire. Ce fichier servira de mise en page principale pour l'ensemble du site Web. resources/views/layouts

Voici un exemple de contenu pour le app.blade.php fichier :

<!DOCTYPE html>  
<html>  
<head>  
    <title>@yield('title')</title>  
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">  
</head>  
<body>  
    <header>  
        <h1>Header</h1>  
    </header>  
  
    <nav>  
        <ul>  
            <li><a href="/">Home</a></li>  
            <li><a href="/about">About</a></li>  
            <li><a href="/contact">Contact</a></li>  
        </ul>  
    </nav>  
  
    <main>  
        @yield('content')  
    </main>  
  
    <footer>  
        <p>Footer</p>  
    </footer>  
  
    <script src="{{ asset('js/app.js') }}"></script>  
</body>  
</html>

Dans cette mise en page, nous utilisons les @yield directives pour définir des sections dynamiques dans la mise en page. Par exemple, @yield('title') permet à l'enfant de remplacer et de définir le titre de la page. De même, permet à l'enfant d'insérer le contenu principal de la page. views @yield('content') views

Une fois la mise en page créée, nous pouvons créer des enfants qui utilisent cette mise en page. Par exemple, pour créer une page avec une mise en page similaire, créez un fichier nommé dans le répertoire. Ce fichier étendra la  mise en page et définira un contenu spécifique pour la page : views about about.blade.php resources/views app.blade.php about 

@extends('layouts.app')  
  
@section('title', 'About')  
  
@section('content')  
    <h2>About Page</h2>  
    <p>This is the about us page.</p>  
@endsection

Dans l'exemple ci-dessus, nous utilisons la @extends directive pour hériter de la app.blade.php  mise en page. Ensuite, nous utilisons la @section directive pour définir le contenu spécifique des sections title  et content  de la page.

Enfin, nous devons définir les routes pour lier les URL aux fichiers. views

Par exemple, dans le routes/web.php  fichier, vous pouvez ajouter les routes suivantes :

Route::get('/', function() {  
    return view('welcome');  
});  
  
Route::get('/about', function() {  
    return view('about');  
});

Dans cet exemple, l'URL "/" est liée au welcome.blade.php view, tandis que l' /about URL est liée au about.blade.php view.

En conclusion, la création de mises en page dans Laravel vous permet de créer une interface partagée pour votre application Web et de gérer des sections communes telles que header, footer et sidebar. En utilisant des layouts et child, vous pouvez créer des interfaces flexibles et maintenables dans. views Laravel