Toidicode.com

Toidicode.com

BASIC TO ADVANCE

Bài viết bạn đang xem là tài liệu của Laravel 5x (Giờ đã ngừng support). Bạn có thể xem tài liệu của Laravel mới nhất và đầy đủ tại đây.

Bài 8: Blade template engine trong Laravel(phần 2)

phần trước mọi người đã được tìm hiểu về biến, câu lệnh rẽ nhánh và vòng lặp trong blade template rồi . Tiếp đến, ở phần này mình sẽ tiếp tục giới thiệu đến mọi người một chức năng rất là hay ở trong blade template nữa, đó là template inheritance (kế thừa giao diện).

1, Template inheritance (kế thừa giao diện).

-Mình sẽ làm ví dụ trước để các bạn dễ hiểu nhé.

Ví Dụ 1: .-Đầu tiên mình sẽ tạo ra 1 blade template có tên master.blade.php ở đường dẫn resoures\views\master.blade.php.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title> @yield('title')</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <div class="container">
        @section('content')
        @show
    </div>
</body>
</html>

-Và sau đó mình tạo tiếp một file home.blade.php ở đường dẫn resoures\views\home.blade.php  

@extends('master')

@section('title','đây là trang chủ')

@section('content')

<p> Đây là phần content</p>

@endsection

-Giờ tiếp đến chúng ta tạo ra một Route để gọi view.

Route::get('call-view', function () {
   return view('home');
});

-Tiếp đó các bạn khởi động server lên và chạy đường dẫn :  yourdomain/call-view lên và thử nhận xét.

=>Chú thích:

-Như ở trên mình có sử dụng các từ khóa lạ như @yield(),@section(),@extends().

-@yield(), @section-@show: có tác dụng như một biến nó được tạo ra nhằm báo cho blade template  biết vị trí ý sẽ dùng để chèn nội dung cho biến đó.

-@extends(): Có tác dụng khai báo cho blade template biết là file hiện tại đang kế thừa từ file nào

. =>Thực tiễn: Như ở trong ví dụ trên: Đầu tiên thì mình khởi tạo 2 biến @yeild('title'),@section('content') trong file master.blade.php, tiếp sau đó mình tạo tiếp file home.blade.php  và dùng @extends('master') để kế thừa tất cả thuộc tính từ file master.blade.php tiếp đó mình lại khai báo nội dung cho 2 biến ở file master.blade.php bằng section('tenbien','noidungngan'),@section('tenbien') noidungdai @endsection

Ví dụ 2: - Mình sẽ thay đổi code trong file master ở vd1 một chút.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title> @yield('title')</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <div class="container">
        @section('content')
            <p>Dòng này là của master.blade.php</p>
        @show
    </div>
</body>
</html>

Và file home.php

@extends('master')

@section('title', 'đây là trang chủ')

@section('content')

<p> Đây là phần content</p>

@endsection

Khi chạy lên như ở ví dụ 1 thì các bạn sẽ thấy source code của nó sẽ có dạng.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title> @yield('title')</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <div class="container">
      <p>Dòng này là của master.blade.php</p>
      <p>Đây là phần content</p>
  </div>
</body>
</html>

2, Lời kết.

-Qua ví dụ trên các bạn đã phát hiện ra chưa ạ?

+Ở phần trên mình có sử dụng thêm mới mục đích là muốn khai báo cho blade template biết là ở vẫn dữ nguyên lại phần @section('content') trong file master và thêm vào sau nó nội dung @section('content') ở trong file home.

->Chú ý: @Parent có thể đặt trước nội dung muốn thêm vào (nếu muốn phần được thêm sẽ ở sau phần khởi tạo) và ngược lại.

Đăng ký nhận tin.

Chúng tôi chỉ gửi tối đa 2 lần trên 1 tháng. Tuyên bố không spam mail!

Vũ Thanh Tài

About author
The best way to learn is to share
Xem tất cả bài đăng

4 Comments

Hello bạn
Cảm ơn thông tin bạn đã chia sẻ

Visit my home https://arcviet.vn/

Nguyen Hai Anh

4 năm trước

em cũng làm y chang vậy mà khúc sao của em nó không có phần content của master.blade.php

Nguyễn Hoàng Hải

3 năm trước

bạn thêm

Bùi Trung Quyền

3 năm trước

Cảm ơn bạn đã chia sẻ thông tin
- Mình đã làm hoàn thành, thông tin chi tiết tại đây: https://luathungson.vn/

Nguyễn Minh Hải

3 năm trước

Bình luận

Captcha