Tạo Master Page trong Laravel: Nền tảng cho ứng dụng của bạn
Master Page trong Laravel, còn được gọi là layout hay template, đóng vai trò như một khuôn mẫu chung cho tất cả các trang trong ứng dụng của bạn. Nó giúp bạn định nghĩa các phần tử giao diện xuất hiện trên mọi trang, như header, footer, menu điều hướng, và tạo ra một giao diện thống nhất và chuyên nghiệp.
Tại sao nên sử dụng Master Page?
- Tái sử dụng mã: Tránh lặp lại các đoạn mã HTML giống nhau trên nhiều trang.
- Quản lý giao diện dễ dàng: Thay đổi giao diện toàn cục chỉ cần chỉnh sửa một file.
- Cải thiện hiệu suất: Giảm thiểu kích thước file HTML và thời gian tải trang.
- Tăng tính nhất quán: Đảm bảo giao diện của ứng dụng luôn thống nhất.
Cách tạo Master Page trong Laravel
Laravel sử dụng Blade làm engine template mặc định. Để tạo một master page, bạn thực hiện các bước sau:
- Tạo thư mục layouts: Tạo một thư mục mới tên là
layouts
trong thư mụcresources/views
. - Tạo file master: Tạo một file Blade mới trong thư mục
layouts
, ví dụapp.blade.php
. - Xây dựng cấu trúc: Định nghĩa các phần tử chung như header, footer, và một phần để chứa nội dung động.
HTML
<!DOCTYPE html> <html> <head> <title>@yield('title')</title> </head> <body> <header> </header> <main> @yield('content') </main> <footer> </footer> </body> </html>
- Sử dụng trong các view khác: Để sử dụng master page trong các view khác, bạn sử dụng các directive
@extends
và@section
.
HTML
@extends('layouts.app') @section('title', 'Trang chủ') @section('content') @endsection
- @extends(‘layouts.app’): Chỉ định sử dụng master page
app.blade.php
. - @section(‘title’, ‘Trang chủ’): Đặt giá trị cho phần
title
trong header. - @section(‘content’): Đặt nội dung cho phần
content
của trang.
Tùy chỉnh Master Page
- Sử dụng @yield: Directive
@yield
cho phép bạn định nghĩa các phần có thể thay đổi trong master page. - Sử dụng @section: Directive
@section
được sử dụng trong các view con để cung cấp nội dung cho các phần đã định nghĩa trong master page. - Sử dụng @parent: Nếu bạn muốn kế thừa nội dung từ một section đã được định nghĩa trong master page và thêm vào đó, bạn sử dụng
@parent
. - Sử dụng @stack: Directive
@stack
được sử dụng để đẩy nội dung vào một stack, sau đó bạn có thể hiển thị stack đó trong master page.
Ví dụ nâng cao: Sử dụng View Composer
View composer cho phép bạn truyền dữ liệu vào view trước khi nó được render. Điều này rất hữu ích khi bạn muốn hiển thị thông tin động trong master page, chẳng hạn như menu điều hướng dựa trên quyền của người dùng.
PHP
// app/Providers/AppServiceProvider.php use Illuminate\Support\Facades\View; class AppServiceProvider extends ServiceProvider { public function boot() { View::composer('layouts.app', function ($view) { $view->with('menus', Menu::all()); }); } }
Trong ví dụ trên, chúng ta truyền một mảng menus
vào view layouts.app
. Bạn có thể sử dụng mảng này để hiển thị menu điều hướng trong header.