Blade Templates cơ bản
Bài đăng này đã không được cập nhật trong 8 năm
Blade là templating engine đơn giản nhưng rất tuyệt vợi cung cấp bởi Laravel. Không như những templating engine của PHP, Blade không cấm bạn sử dụng code PHP thuần ở trong view.
Tất cả các Blade view sử dụng đuôi .blade.php và được lưu trong thư mục resources/views.
Định nghĩa một layout
Đầu tiên, chúng ta cùng xem một trang layout "master". Vì hầu hết các ứng dụng web đều có một mẫu layout chung giữa các trang với nhau, nó sẽ rất tiện nếu tạo ra layout này thành một Blade view riêng:
<!-- Stored in resources/views/layouts/app.blade.php -->
<html>
<head>
<title>@yield('title')</title>
</head>
<body>
@ section('sidebar')
This is the master sidebar.
@ endsection
<div class="container">
@ yield('content')
</div>
</body>
</html>
Như bạn có thể thấy, file này có chứa mã HTML mark-up. Tuy nhiên, chú ý ở @section và @yield. Đúng như tên của nó, @section định nghĩa một nội dung. Trong khi @yield sử dụng để hiển thị dữ liệu ở một vị trí đặt trước.
Bây giờ chúng ta đã tạo xong một layout cho ứng dúng, hãy cùng tạo ra các trang con kế thừa từ layout này.
Kế thừa một layout
Khi bạn tạo một trang con, sử dụng @extends để chỉ ra layout của trang con này kế thừa từ đâu. Views kế thừa một blade layout có thể đưa nội dung vào trong sections sử dụng @section của layout. Nhớ rằng, như ví dụ trên, nội dung của những section này được hiển thị khi sử dụng @yield
<!-- Stored in resources/views/child.blade.php -->
@ extends('layouts.app')
@ section('title', 'Page Title')
@ section('sidebar')
@ parent
<p>This is appended to the master sidebar.</p>
@ endsection
@ section('content')
<p>This is my body content.</p>
@ endsection
Trong ví dụ trên, phần section sidebar thực hiện để thêm nội dung vào sidebar (thay vì ghi đè toàn bộ). sẽ được thay thế bởi nội dung của layout khi view được render.
Blade views có thể được trả về từ routes bằng cách sử dụng hàm return view:
Route::get('blade', function () {
return view('child');
});
Hiển thị dữ liệu
Bạn có thể truyền dữ liệu vào Blade views bằng cách đặt biến trong cặp ngoặc vuông. Ví dụ:
Route::get('greeting', function () {
return view('welcome', ['name' => 'Samantha']);
});
Bạn có thể hiển thị nội dung của biến name như sau:
Hello, {{ $name }}.
Tất nhiên, bạn không hề bị giới hạn trong việc hiển thị nội dung của biến vào trong view. Bạn cũng có thể sử dụng hàm echo của PHP để hiển thị biến. Thực tế, bạn có thể đặt code PHP bạn muốn vào Blade:
The current UNIX timestamp is {{ time() }}.
Cặp {{ }} của Blade được tự động gửi tới hàm htmlentities của PHP để ngăn chặn các hành vi tấn công XSS.
Hiển thị dữ liệu nếu tồn tại
Thỉnh thoảng bạn muốn hiện giá trị một biến, nhưng bạn không chắc nếu biết đó có giá trị.Chúng ta có thể thể hiện theo kiểu code PHP như sau:
{{ isset($name) ? $name : 'Default' }}
Tuy nhiên, thay vì viết kiểu vậy, Blade cung cấp cho bạn một cách ngắn gọn hơn:
{{ $name or 'Default' }}
Trong ví dụ trên, nếu biến $name tồn tại, giá trị sẽ được hiện thị. Tuy nhiên, nếu nó không tồn tại thì Default sẽ được hiển thị.
Hiện dữ liệu chưa Unescaped
Mặc định, cặp {{ }} được tự động gửi qua hàm htmlentities của PHP để ngăn chặn tấn công XSS. Nếu bạn không muốn dự liệu bị thoát khỏi, bạn có thể sử dụng cú pháp:
Hello, {!! $name !!}.
Phải cẩn thận khi hiện nội dung được người dùng cung cấp. Luôn luôn sử dung cặp ngoặc nhọn để ngăn chặn tấn công XSS attacks khi hiển thị dữ liệu được cung cấp.
Blade & JavaScript Frameworks
Vì nhiều JavaScript frameworks cũng sử dụng cặp "ngoặc nhọn" để cho biết một biểu thức cần được hiển thị lên trình duyệt, bạn có thể sử dụng biểu tượng @ để nói cho Blade biết được biểu thức này cần được giữ lại. Ví dụ:
<h1>Laravel</h1>
Hello, @{{ name }}.
Trong ví dụ này, biểu tượng @ sẽ bị xóa bởi Blade, tuy nhiên, {{ name }} được dữ lại cho phép nó được render tiếp bởi Javascript framkwork của bạn.
Khối @verbatim
Nếu bạn muốn hiển thị biến JavaScript trong phần lớn template của bạn, bạn có thể bọc chúng trong khối khi đó bạn sẽ không cần tiền tố @ trước biểu thức điều kiện:
@verbatim
<div class="container">
Hello, {{ name }}.
</div>
Các cấu trúc điều khiển
Ngoài thừa kế template và hiển thị dữ liệu, Blade còn cung cấp một số cấu trúc điều khiển, như biểu thức điều kiện và vòng lặp.
Bạn có xây dựng cấu trúc if sbằng cách sử dụng @if, @elseif, @else, và @endif. Ví dụ:
@if (count($records) === 1)
I have one record!
@ elseif (count($records) > 1)
I have multiple records!
@ else
I don't have any records!
@ endif
Để thuận tiện, Blade cung cấp một @unless:
@unless (Auth::check())
You are not signed in.
@ endunless
Vòng lặp
Ngoài cấu trúc điều kiện, Blade cung cấp cũng cung cấp phương thức hỗ trợ cho việc xử lý vòng lặp. Ví dụ:
@for ($i = 0; $i < 10; $i++)
The current value is {{ $i }}
@ endfor
@ foreach ($users as $user)
<p>This is user {{ $user->id }}</p>
@ endforeach
@ forelse ($users as $user)
<li>{{ $user->name }}</li>
@ empty
<p>No users</p>
@ endforelse
@ while (true)
<p>I'm looping forever.</p>
@ endwhile
Chèn view khác
@include của Blade cho phép bạn chèn một Blade view từ một view khác. Tất cả các biến tồn tại trong view cha đều có thể sử dụng ở view chèn thêm:
<div>
@ include('shared.errors')
<form>
<!-- Form Contents -->
</form>
</div>
Mặc dù các view được chèn thêm kế thừa tất cả dữ liệu từ view cha, bạn cũng có thể truyền một mảng dữ liệu bổ sung:
@include('view.name', ['some' => 'data'])
Nguồn tham khảo: Blade Templates in laravel
All rights reserved
