Bài 3: Tạo và sử dụng master view trong laravel

Hướng dẫn tạo master view trong laravel

Trong Laravel, Blade là một hệ thống template engine mạnh mẽ và dễ sử dụng. Blade giúp việc tạo giao diện (views) trở nên linh hoạt và dễ dàng quản lý. Blade cung cấp các cú pháp ngắn gọn, hỗ trợ việc tái sử dụng mã nguồn và chia sẻ các phần tử chung giữa các view. Dưới đây là các khái niệm chính liên quan đến Blade views trong Laravel:

1. Blade View trong Laravel:

Blade là hệ thống template engine đi kèm với Laravel, cho phép bạn tạo ra các view (giao diện) một cách dễ dàng. Các file Blade có đuôi mở rộng là .blade.php. Blade giúp bạn tách biệt logic PHP và giao diện HTML trong quá trình phát triển.

2. Master View (Layout View):

Trong Laravel, Master View là một template cơ bản mà các view con có thể kế thừa và mở rộng. Master view thường chứa các phần tử giao diện chung như header, footer, sidebar, hay các tài nguyên chung như CSS và JavaScript.

Thay vì viết lại mã nguồn cho các phần chung ở mỗi view, bạn có thể đặt chúng vào một master view và chỉ cần thay thế các phần cụ thể trong các view con bằng cách sử dụng yield.

Ví dụ về Master View:

Lưu ý quan trọng

Bước 1: tạo file resources/views/master/main.blade.php

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title Page</title>

    <!-- Bootstrap CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>

    <nav class="navbar navbar-inverse">

        <div class="container">
            <a class="navbar-brand" href="#">Title</a>
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">Link</a>
                </li>
            </ul>
        </div>

    </nav>
     <!-- Nội dung chính sẽ được chèn vào đây -->
    @yield('body')

    <footer class="bg-primary">
        
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h2>Footer title</h2>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid ad magni, ipsam sint quasi enim eius necessitatibus sapiente, quos laborum ipsum, non praesentium corrupti. Culpa aliquid dignissimos sequi temporibus architecto.
                    </p>
                </div>
                <div class="col-md-6">
                    <h2>Footer title</h2>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid ad magni, ipsam sint quasi enim eius necessitatibus sapiente, quos laborum ipsum, non praesentium corrupti. Culpa aliquid dignissimos sequi temporibus architecto.
                    </p>
                </div>
            </div>
        </div>
        
    </footer>
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>

Trong master view, bạn sử dụng cú pháp @yield để chỉ định nơi mà các view con sẽ thay thế nội dung. Ví dụ: @yield('body') là một placeholder, nơi nội dung từ các view con sẽ được chèn vào.

3. Phân biệt giữa Master View và các View khác:

4. Cấu trúc @yield và @section:

Bước 2: mở file routes/web.php khai báo các router như sau

<?php
use App\Http\Controllers\HomeController;
use Illuminate\Support\Facades\Route;

Route::get('', [HomeController::class, 'home']);
Route::get('gioi-thieu', [HomeController::class, 'about']);

Bước 3: Tạo class (lớp) app/Http/Controller/HomeController.php

<?php 
namespace App\Http\Controllers; // khai báo không gian chứa file

class HomeController extends Controller {

    // phương thức trong một class
    public function home() {
        $name = 'PHP LẢAVEL';
        return view('home', compact('name'));
    }
    // phương thức trong một class
    public function about() {
        return view('about');
    }

}

Bước 4: tạo lần lượt các views trong thưc mục resources/views/

View resources/views/home.blade.php

@extends('master.main') <!-- Kế thừa master layout -->
@section('body')  <!-- Định nghĩa nội dung sẽ thay thế phần @yield('body') trong master layout -->
<h1 class="text-center">Hello {{$name}}</h1>
@stop()

View resources/views/about.blade.php

@extends('master.main') <!-- Kế thừa master layout -->
@section('body')  <!-- Định nghĩa nội dung sẽ thay thế phần @yield('body') trong master layout -->
<h1 class="text-center">Hello about</h1>
@stop()

bước 5: Khởi chạy dự án

Mowrr cmd tại thư mục dự án và chạy

php artisan serve
INFO  Server running on [http://127.0.0.1:8000].
Press Ctrl+C to stop the server

Truy cập các link sau để xem kết quả

Kiểm tra màn hình đã hiển thị đúng giao diện chưa