# 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](https://hocwebchuan.com/common/images/ico_file.gif) news.blade.php
    * ![welcome.blade.php](https://hocwebchuan.com/common/images/ico_file.gif) 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>
  ```
