Blade template

Chuẩn bị cần cho Blade template

  • Ý tưởng là tạo 1 template, dùng chung cho các trang news và các trang product.

  • Ta cần tạo:

    • Các file include dùng chung cho các trang: header, footer.
    • File template dành cho trang news và trang product.
    • 2 trang hiển thị (Views) cho trang news và product.
  • Tất cả sẽ được chứa trong /resources/views/, ta tổ chức các file như sau:

myproject

  • resources

    • views

      • includes

        • welcome.blade.php header.blade.php
        • welcome.blade.php footer.blade.php

      • templates

        • welcome.blade.php tpl_default.blade.php
      • welcome.blade.php news.blade.php
      • welcome.blade.php product.blade.php

Click vào dấu [+] để xem cấu trúc.

Thực hiện

Lần lượt tạo các file trên với nội dung như sau:

Chú ý là chỉ làm mẫu cho trang News thôi, còn trang Product thì các bạn dựa vào trang News để làm thêm nhé.

header.blade.php

<header>
Đây là nội dung header
</header>

footer.blade.php

<footer>
Đây là nội dung footer
</footer>

tpl_default.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tiêu đề trang</title>
    <link rel="stylesheet" href="đường_dẫn_tới_file_css" media="all">
</head>

<body>
<h2>Tiêu đề từ template</h2>

<script src="đường_dẫn_tới_file_js"></script>
</body>
</html>

news.blade.php

<div class="news">
    <h3>Tin trong ngày</h3>
    <p>Nội dung siêu ngắn cho tin tức mới đây!!!</p>
</div>

Kết nối trang Views và Templates

  • Tạo liên kết kết nối trong Template tpl_default.blade.php bằng @yield như sau:

    • tpl_default.blade.php

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tiêu đề trang</title>
    <link rel="stylesheet" href="đường_dẫn_tới_file_css" media="all">
</head>

<body>
<h2>Tiêu đề từ template</h2>
@yield('content')

<script src="đường_dẫn_tới_file_js"></script>
</body>
</html>
    • @yield có thể coi như lệnh đặt chỗ trước, sẽ lấy những phần ở nơi khác gắn vào đây.

    news.blade.php

    @extends('templates.tpl_default')

@section('content')
<div class="news">
    <h3>Tin trong ngày</h3>
    <p>Nội dung siêu ngắn cho tin tức mới đây!!!</p>
</div>
@endsection

    • @extends cho biết sẽ kết nối tới file nào (ở đây là kết nối tới file tpl_default.blade.php trong thư mục templates)

      • templates: là thư mục /resource/views/templates
      • tpl_default: là tên file tpl_default.blade.php
    • Nội dung bên trong @section sẽ được gắn vào @yield của template tpl_default.blade.php với từ khóa nhận dạng là content.

    Hiển thị trình duyệt

    Tiêu đề từ template

    Tin trong ngày

    Nội dung siêu ngắn cho tin tức mới đây!!!

    • Ta thấy nội dung news.blade.php đã được sử dụng template tpl_default.blade.php
    • Nếu xem source (CTRL + U) lúc này thì bạn sẽ thấy nội dung như sau:
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tiêu đề trang</title>
    <link rel="stylesheet" href="đường_dẫn_tới_file_css" media="all">
</head>

<body>
<h2>Tiêu đề từ template</h2>
<div class="news">
    <h3>Tin trong ngày</h3>
    <p>Nội dung siêu ngắn cho tin tức mới đây!!!</p>
</div>

<script src="đường_dẫn_tới_file_js"></script>
</body>
</html>

Kết nối nhiều nội dung từ Views vào Templates

  • Dựa vào @yield và @section ta có thể tạo nhiều kết nối như sau:

    • tpl_default.blade.php

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tiêu đề trang</title>
    <link rel="stylesheet" href="đường_dẫn_tới_file_css" media="all">
    @yield('css')
</head>

<body>
<h2>Tiêu đề từ template</h2>
@yield('content')

<script src="đường_dẫn_tới_js"></script>
@yield('js')
</body>
</html>
    • @yield('css') dùng để chứa các liên kết css.
    • @yield('js') dùng để chứa các liên kết js.

    news.blade.php

    @extends('templates.tpl_default')
@section('css')
<link rel="stylesheet" href="đường_dẫn_tới_file_news.css" media="all">
@endsection

@section('content')
<div class="news">
    <h3>Tin trong ngày</h3>
    <p>Nội dung siêu ngắn cho tin tức mới đây!!!</p>
</div>
@endsection

@section('js')
<script src="đường_dẫn_tới_file_news.js"></script>
@endsection
    • Nội dung bên trong @section('css') sẽ được gọi bằng lệnh @yield('css') bên file template tpl_default.blade.php, tương tự vậy, nội dung bên trong @section('js') sẽ được gọi bằng lệnh @yield('js').
    • Với cách sử dụng như trên có hiệu quả ở chỗ, khi load trang News, thì nội dung CSS và JS của riêng trang news sẽ được gọi mà không làm ảnh hưởng các trang khác.
    • Khi này xem source (CTRL + U) thì bạn sẽ thấy nội dung như sau:
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tiêu đề trang</title>
    <link rel="stylesheet" href="đường_dẫn_tới_file_css" media="all">
    <link rel="stylesheet" href="đường_dẫn_tới_file_news.css" media="all">
</head>

<body>
<h2>Tiêu đề từ template</h2>
<div class="news">
    <h3>Tin trong ngày</h3>
    <p>Nội dung siêu ngắn cho tin tức mới đây!!!</p>
</div>

<script src="đường_dẫn_tới_file_js"></script>
<script src="đường_dẫn_tới_file_news.js"></script>
</body>
</html>

Truyền giá trị từ trang Views vào Template

  • Giá trị truyền từ news.blade.php sang tpl_default.blade.php dưới dạng mảng, và được viết bên trong @extends, lần lượt viết như sau:

    • news.blade.php

    Truyền giá trị pageId.

    @extends('templates.tpl_default', ['pageId' => 'news'])

@section('css')
<link rel="stylesheet" href="đường_dẫn_tới_file_news.css" media="all">
@endsection

@section('content')
<div class="news">
    <h3>Tin trong ngày</h3>
    <p>Nội dung siêu ngắn cho tin tức mới đây!!!</p>
</div>
@endsection

@section('js')
<script src="đường_dẫn_tới_file_news.js"></script>
@endsection

    tpl_default.blade.php

    Nhận giá trị pageId.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tiêu đề trang</title>
    <link rel="stylesheet" href="đường_dẫn_tới_file_css" media="all">
    @yield('css')
</head>

<body id="{{$pageId}}">
<h2>Tiêu đề từ template</h2>
@yield('content')
<script src="đường_dẫn_tới_file_js"></script>

@yield('js')
</body>
</html>

    Cách gọi pageId như trên sẽ tiện lợi khi ta khai báo pageId từ mỗi trang riêng biệt, các trang khác nhau sẽ không ảnh hưởng nhau.

    Hiển thị trình duyệt

    Tiêu đề từ template

    Tin trong ngày

    Nội dung siêu ngắn cho tin tức mới đây!!!

    • Nếu xem source (CTRL + U) lúc này thì bạn sẽ thấy nội dung như sau:
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tiêu đề trang</title>
    <link rel="stylesheet" href="đường_dẫn_tới_file_css" media="all">
    <link rel="stylesheet" href="đường_dẫn_tới_file_news.css" media="all">
</head>

<body id="news">
<h2>Tiêu đề từ template</h2>
<div class="news">
    <h3>Tin trong ngày</h3>
    <p>Nội dung siêu ngắn cho tin tức mới đây!!!</p>
</div>

<script src="đường_dẫn_tới_file_js"></script>
<script src="đường_dẫn_tới_file_news.js"></script>
</body>
</html>

Download

Các bạn download những file code đã tạo để tham khảo nhé Blade Template, nội dung bao gồm các file routing, controller, ...

Views - Blade

Views - Tạo Blade include