Bài 10: Sử dụng Blade template engine trong Laravel

Template engine có tác dụng giúp sạch đi những đoạn code PHP nằm trong View nên tách biệt hoàn toàn giữa người cắt CSS và người code PHP. Hiện nay có khá nhiều template engine như Smarty, tuy nhiên việc sử dụng nó đang là một câu hỏi lớn vì tốc độ xử lý của ứng dụng sẽ trở nên chậm hơn. Lý do mỗi khi render qua view thì PHP sẽ phải duyệt toàn bộ nội dung của view và timf những biểu thức của engine và gán dữ liệu vào.

Trong bài viết này chúng ta sẽ tìm hiểu template engine Blade, đây là một engine khá đơn giản nhưng đầy mạnh mẽ. Template engine này được tích hợp sẵn bên trong laravel và tất cả blade template engine đều có phần mở rộng là .blade.php

1. Tạo Blade template engine (BTE)

Tất cả các BTE đều có phần mở rộng là .blade.php và nằm trong thư mục app/views. Vậy nên việc tạo mới BTE rất đơn giản. Ví dụ để tạo BTE tê là demo thì bạn sẽ tạo một file demo.blade.php ở trong thư mục app/views và nhập vào nội dung như sau:

<!DOCTYPE html>
<html lang="vi">
<head>
	<meta charset="UTF-8">
	<title>Freetuts.net</title>
</head>
<body>
	<h2>Sử dụng Blade template engine trong Laravel</h2>
</body>
</html>

Như vậy là bạn đã tạo được view bằng BTE trong laravel rồi đó.

2. Các cú pháp sử dụng trong Blade template engine

Blade sử dụng cặp ngoặc {{}} để echo giá trị 

Ví dụ:

Hôm nay là ngày: {{date("d-m-Y")}}

kết quả: Hôm nay là ngày: 09-02-2015

Sử dụng or để xuất giá trị mặc định.

Ví dụ:

Hello, {{ $name or 'Buzz' }}.

Nếu biến $name không tồn tại thì sẽ echo ra Buzz

Sử dụng 3 cặp ngoặc {{{}}} để xuất giá trị dưới dạng HTML entities

Ví dụ:

{{ '<title>Freetuts.net</title>' }}
Kết quả:

&lt;title&gt;Freetuts.net&lt;/title&gt;

Sử dụng @ phía trước {} để BTE bỏ qua không xử lý

Ví dụ:

@{{ 'freetuts.net' }} 

Kết quả: {{ 'freetuts.net' }} 

Sử dụng các vòng lặp, câu lệnh điều kiện

Để sử dụng vòng lặp hoặc câu điều kiện if thì ta chỉ việc thêm @ ngay trước câu lệnh (theo cú pháp PHP) và kết thúc bằng @end +tên hàm.

Ví dụ:

@if (count($records) === 1)
    Có 1 sản phẩm
@elseif (count($records) > 1)
    Có nhiều sản phẩm
@else
    Không có sản phẩm
@endif


@for ($i = 0; $i < 10; $i++)
    Giá trị của i:  {{ $i }}<br>
@endfor

3. Mở rộng, ghi đè và sub-view với blade 

Chèn sub-view

Để chèn sub-view ta dùng cú pháp:

@include($string_view_name, $array_data)

Lưu ý: Giả sử file a.blade.php include file b.blade.php thì những biến sử dụng được ở file a.blade.php thì đều có thể sử dụng trong file b.blade.php

Mở rộng và ghi đè

Để có thể hiểu rõ hơn thì ta sẽ làm một ví dụ như sau:

Ví dụ 1

Tạo file app/views/layouts/master.blade.php như sau:

<!DOCTYPE html>
<html lang="vi">
<head>
	<meta charset="UTF-8">
	<title>
		@section('title')
			Freetuts.net
		@show
	</title>
</head>
<body>
	<div class="container">
        @yield('content')
    </div>
</body>
</html>

Với file master.blade.php ở trên thì ta có thể mở rộng và ghi đè nó ở hai phần @section('title') và @yield('content').

Bạn tạo file File app/views/home.blade.php với nội dung như sau:

@extends('layouts.master')

@section('content')
    <p>Đây là nội dung trang chủ.</p>
@stop

Khi chạy bạn sẽ có kết quả:

<!DOCTYPE html>
<html lang="vi">

<head>
    <meta charset="UTF-8">
    <title>Freetuts.net</title>
</head>

<body>
    <div class="container">
        <p>Đây là nội dung trang chủ.</p>
    </div>
</body>

</html>

Như vậy ở file home.blade.php dùng @extends('layouts.master') để chọn file master.blade.php trong folder layouts, sau đó nó dùng @section('content') để thiết lập nội dung cho vị trí @yield('content') trong file master.blade.php. Riêng đối với @section('title') không được khai báo trong file home.blade.php nên nó lấy giá trị mặc định trong file master.blade.php.

Ví dụ 2

Bây giờ bạn tạo thêm file app/views/post.blade.php với nội dung như sau:

@extends('demo')

@section('title')
    Đây là tiêu đề - @parent
@stop
@section('content')
    <p>Đây là nội dung bài viết.</p>
@stop

Khi chạy bạn sẽ có kết quả:

<!DOCTYPE html>
<html lang="vi">

<head>
    <meta charset="UTF-8">
    <title> Đây là tiêu đề - Freetuts.net</title>
</head>

<body>
    <div class="container">
        <p>Đây là nội dung bài viết.</p>
    </div>
</body>

</html>

So với ví dụ 1 thì ví dụ này ta đã ghi đè cả hai vị trí title và content

Tóm lại:

  • Ở file master.blade.php là nơi chứa 1 cấu trúc view chung, cố định mà sẽ được dùng để mở rộng ở các view khác
  • Ở file home.blade.php sử dụng master để mở rộng, và chỉ thay đổi nội dung ở phần content
  • File post.blade.php sử dụng master để mở rộng, thay đổi nội dung ở phần content và sử dụng phần title của master để nối với title của post bằng @parent

4. Kết luận

Như vậy, mình đã giới thiệu sơ qua về blade và tính tiện dụng của nó. Mặc dù việc sử dụng template engine sẽ khiến code ở view của chúng ta phải được phân tích một lần nữa trước khi có thể chạy và trả về kết quả nhưng những lợi ích của nó mang lại không hề nhỏ. Hãy cân nhắc việc bạn sử dụng blade hay php view thuần ở trong view, sử dụng cả 2 trong view cũng không sao. Chúc các bạn học tốt.

Hãy để lại link bài viết gốc khi chia sẻ bài viết này, mình sẽ report DMCA với những website lấy nội dung mà không để nguồn hoặc copy bài với số lượng lớn.

Nguồn: freetuts.net

Profile photo of adminTheHalfHeart

TheHalfHeart

Có sở thích viết tuts nên đã từng tham gia viết ở một số diễn đàn, đến năm 2014 mới có điều kiện sáng lập ra freetuts.net. Sinh năm 90 và có 1 vợ 2 con, thích ca hát và lập trình.

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.