Tạo và sử dụng layout
Khi phát triển ứng dụng web, việc sử dụng layout giúp tái sử dụng các phần giao diện chung (như header, footer, sidebar) một cách dễ dàng và hiệu quả. Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo và sử dụng layout trong Laravel, bao gồm việc tạo các phần chung như header, footer và sidebar.
1. Tạo Layout cơ bản (default.php)
Trong Laravel, layout được lưu trong thư mục resources/views/layouts. Chúng ta sẽ tạo một file layout cơ bản có tên default.blade.php. File này sẽ chứa cấu trúc HTML chung cho tất cả các trang.
Ví dụ: Tạo file default.blade.php
Tạo một file resources/views/layouts/default.blade.php và thêm mã HTML cơ bản:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title', 'Trang chủ')</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<!-- Header -->
@include('partials.header')
<div class="flex">
<!-- Sidebar -->
@include('partials.sidebar')
<!-- Content -->
<div class="w-full p-4">
@yield('content')
</div>
</div>
<!-- Footer -->
@include('partials.footer')
</body>
</html>
Trong đó:
-
@yield('title'): Đây là nơi để đặt tiêu đề cho từng trang. Nếu không có, tiêu đề mặc định là "Trang chủ". -
@yield('content'): Đây là nơi sẽ hiển thị nội dung của từng trang.
2. Tạo các phần chung (header, footer, sidebar)
Để tái sử dụng các phần chung như header, footer và sidebar, chúng ta sẽ tạo các file con trong thư mục resources/views/partials.
a. Tạo Header
Tạo file resources/views/partials/header.blade.php:
<header class="bg-gray-800 text-white p-4">
<div class="container mx-auto flex justify-between items-center">
<h1 class="text-lg font-semibold">Website của tôi</h1>
<nav>
<ul class="flex space-x-4">
<li><a href="/" class="text-white">Trang chủ</a></li>
<li><a href="/about" class="text-white">Giới thiệu</a></li>
<li><a href="/contact" class="text-white">Liên hệ</a></li>
</ul>
</nav>
</div>
</header>
b. Tạo Sidebar
Tạo file resources/views/partials/sidebar.blade.php:
<aside class="w-1/4 bg-gray-200 p-4">
<h2 class="text-xl font-semibold">Danh mục</h2>
<ul class="mt-4 space-y-2">
<li><a href="/category1" class="text-blue-600">Danh mục 1</a></li>
<li><a href="/category2" class="text-blue-600">Danh mục 2</a></li>
<li><a href="/category3" class="text-blue-600">Danh mục 3</a></li>
</ul>
</aside>
c. Tạo Footer
Tạo file resources/views/partials/footer.blade.php:
<footer class="bg-gray-800 text-white p-4 mt-8">
<div class="container mx-auto text-center">
<p>© 2025 Website của tôi. Tất cả quyền được bảo lưu.</p>
</div>
</footer>
3. Sử dụng Layout trong Các Trang Con
Khi bạn đã tạo layout và các phần chung, bạn có thể sử dụng chúng trong các trang con. Ví dụ, tạo một trang home.blade.php trong thư mục resources/views:
Ví dụ: Tạo file home.blade.php
@extends('layouts.default')
@section('title', 'Trang chủ')
@section('content')
<h2 class="text-2xl font-semibold">Chào mừng đến với Website của tôi</h2>
<p>Đây là nội dung của trang chủ.</p>
@endsection
Trong đó:
-
@extends('layouts.default'): Kế thừa layoutdefault.blade.phpđã tạo ở bước trước. -
@section('title'): Đặt tiêu đề cho trang này. -
@section('content'): Đặt nội dung của trang này.
4. Kết luận
Việc sử dụng layout giúp bạn tái sử dụng các phần giao diện chung như header, footer và sidebar trong toàn bộ ứng dụng. Laravel hỗ trợ rất tốt việc quản lý layout và các phần chung này thông qua các directives như @extends, @yield, và @include. Với cách tiếp cận này, bạn có thể dễ dàng thay đổi cấu trúc giao diện mà không cần phải chỉnh sửa từng trang riêng biệt.
Với hơn 10 năm kinh nghiệm lập trình web và từng làm việc với nhiều framework, ngôn ngữ như PHP, JavaScript, React, jQuery, CSS, HTML, CakePHP, Laravel..., tôi hy vọng những kiến thức được chia sẻ tại đây sẽ hữu ích và thiết thực cho các bạn.
Xem thêm
Chào, tôi là Vũ. Đây là blog hướng dẫn lập trình của tôi.
Liên hệ công việc qua email dưới đây.
lhvuctu@gmail.com