Hướng dẫn php in blade - php trong lưỡi

  • Trang chủ
  • Hướng dẫn học
  • Laravel
  • Blade

Blade là gì?

  • Blade là dạng cú pháp đơn giản được cung cấp bởi Laravel.
  • Sử dụng Blade:

    • Để tạo template header, footer, sidebar hay bất kỳ thành phần nào, include vào Views.
    • Sử dụng những câu lệnh cần thiết điều khiển các thành phần trong Views như: If else, for, foreach, ...
    • Còn nhiều tính năng khác, bạn có thể tham khảo thêm tại trang chính của Laravel: Blade

Cơ bản về Blade

  • Blade được thể hiện dưới dạng file có tên: name.blade.phpname.blade.php
  • Blade được chứa bên trong thư mục /resources/views//resources/views/

myproject

  • resources

    • views

      • Hướng dẫn php in blade - php trong lưỡi
        welcome.blade.php

So sánh một vài cấu trúc tương đồng giữa PHP và Blade

PHPBlade
Blade là gì?Blade là dạng cú pháp đơn giản được cung cấp bởi Laravel.
Sử dụng Blade:Để tạo template header, footer, sidebar hay bất kỳ thành phần nào, include vào Views.
Sử dụng những câu lệnh cần thiết điều khiển các thành phần trong Views như: If else, for, foreach, ...Còn nhiều tính năng khác, bạn có thể tham khảo thêm tại trang chính của Laravel: Blade
Cơ bản về BladeBlade được thể hiện dưới dạng file có tên: name.blade.php
Blade được chứa bên trong thư mục /resources/views/myproject
resourcesviews
welcome.blade.phpSo sánh một vài cấu trúc tương đồng giữa PHP và Blade
PHP
 

{{ }}

  •  
    là thư mục làm việc chính của Blade dành cho việc layout (không bao gồm chứa các files: css, js, image, ...).
  • {{ $name }}
    /resources/views/ sao cho phù hợp với yêu cầu project cần, VD có thể tạo cấu trúc thư mục như sau:

myproject

  • resources

    • views

      • welcome.blade.php

        • So sánh một vài cấu trúc tương đồng giữa PHP và Blade
      • PHP

      •  

      • Hướng dẫn php in blade - php trong lưỡi
        {{ }}
      • Hướng dẫn php in blade - php trong lưỡi
         
      • Hướng dẫn php in blade - php trong lưỡi
        {{ $name }}
      • Hướng dẫn php in blade - php trong lưỡi
         

{{ @include('includes.footer') }}

if(điều_kiện):
    câu_lệnh
elseif(điều_kiện):
    câu_lệnh;
else:
    câu_lệnh;
endif;
@if(điều_kiện)
    câu_lệnh;
@elseif(điều_kiện)
    câu_lệnh;
@else
    câu_lệnh;
@endif;
for ($i = 0; $i < 10; $i++) {
    câu_lệnh;
}
@for ($i = 0; $i < 10; $i++)
    câu_lệnh;
@endfor
{{ }}
0
{{ }}
1
{{ }}
2
{{ }}
3

  • Trang chủ
  • Hướng dẫn học
  • Laravel
  • 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:/resources/views/, ta tổ chức các file như sau:

myproject

  • resources

    • views

      • includes

      • templates

        • Hướng dẫn php in blade - php trong lưỡi
          tpl_default.blade.php
      • Hướng dẫn php in blade - php trong lưỡi
        news.blade.php
      • Hướng dẫn php in blade - php trong lưỡi
        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

{{ }}
6

footer.blade.php

{{ }}
7

tpl_default.blade.php

{{ }}
8

news.blade.php

{{ }}
9

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
    9 như sau:tpl_default.blade.php bằng 
    9 như sau:
  • tpl_default.blade.php

    0

    • 9 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

    1

    • {{ $name }}
      1 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)tpl_default.blade.php trong thư mục templates)

      • {{ $name }}
        2: là thư mục /resource/views/templates/resource/views/templates
      • {{ $name }}
        3: là tên file tpl_default.blade.phptpl_default.blade.php
    • Nội dung bên trong
      {{ $name }}
      4 sẽ được gắn vào
      9 của template tpl_default.blade.php với từ khóa nhận dạng là 
      {{ $name }}
      6.tpl_default.blade.php với từ khóa nhận dạng là
      {{ $name }}
      6.

    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.phpnews.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:

    2

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

  • Dựa vào
    9 và 
    {{ $name }}
    4 ta có thể tạo nhiều kết nối như sau:
  • tpl_default.blade.php

    3

    • {{ $name }}
      9 dùng để chứa các liên kết css.
    • 0 dùng để chứa các liên kết js.

    news.blade.php

    4

    • Nội dung bên trong
      1 sẽ được gọi bằng lệnh 
      {{ $name }}
      9 bên file template tpl_default.blade.php, tương tự vậy, nội dung bên trong
      3 sẽ được gọi bằng lệnh 
      0.tpl_default.blade.php, tương tự vậy, nội dung bên trong 
      3 sẽ được gọi bằng lệnh 
      0.
    • 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:

    5

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
    {{ $name }}
    1, lần lượt viết như sau:news.blade.php sang tpl_default.blade.php dưới dạng mảng, và được viết bên trong
    {{ $name }}
    1, lần lượt viết như sau:
  • news.blade.php

    Truyền giá trị

    6.

    6

    tpl_default.blade.php

    Nhận giá trị

    6.

    7

    Cách gọi

    6 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:

    8

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, ...