I. Toàn tập Blade template Laravel (ok)

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

      • templates

      • 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>
PreviousBlade Templates (ok)Next1. Xác định bố cục (Defining layout) (ok)

Last updated

Was this helpful?