Laravel Project - Master Page - Amzuni - Học lập trình trực tuyến

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ục resources/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.