Mise en page template
Création de dossier resources/views/components pour personnaliser » header, le footer, et la navigation ».
- Terminal – mkdir resources/views/components. ( ou manuellement)
- Ajouter les fichiers header.blade.php, nav.blade.php, et footer.blade.php
a) Créer header.blade.php
Contenu :
<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>
b) Créer nav.blade.php
Contenu :
<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>
c) Créer footer.blade.php
Contenu :
<footer class= »bg-gray-700 text-white py-4 mt-8″>
<div class= »container mx-auto text-center »>
<p>© {{ date(‘Y’) }} Laravel Project. All rights reserved.</p>
<a href= »{{ url(‘/privacy-policy’) }} » class= »text-blue-400 hover:underline »>Privacy Policy</a>
</div>
</footer>
Inclure les composants dans le layout principal
Modifiez ou créez un fichier de layout principal pour utiliser ces composants.
Emplacement : resources/views/layouts/app.blade.php
Contenu :
<!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>
Configurer la route pour la page d’accueil
Ajoutez une route pour afficher la page dans routes/web.php :
use Illuminate\Support\Facades\Route;
Route::get(‘/’, function () {
return view(‘home’);});