Laravel 03: Blade template engine

Blade đóng vai trò tương tự như EJS và Handlebars trong NodeJS. Nói nôm na ngắn gọn, chúng giúp chúng ta có thể code luôn logic trong giao diện. Tất nhiên, chúng ta hoàn toàn có khả năng sử dụng Javascript để làm điều tương tự, nhưng việc code thẳng một phần logic vào vị trí tương ứng trên giao diện dễ dàng hơn rất nhiều, và đương nhiên, tiết kiệm cho bạn một lượng chất xám và… thuốc giảm đau não.

Bây giờ, chúng ta sẽ quay lại welcome.blade.php, và bạn chỉ chú ý mỗi đoạn code bên dưới:

Đầu tiên, bạn sẽ nhận thấy, mỗi directive bắt đầu với một dấu @, chẳng hạn như @if và @auth như bên trên, và chúng sẽ kết thúc với một directive @end tương ứng, chẳng hạn @endif@endauth. Bạn có thể coi chúng như cặp dấu nhọn { } hoặc begin và end; như trong Pascal. Có nhiều directives với “cái tên nói lên tất cả” như @if, @elseif, @else@endif; @switch, @case@default; @for@endfor; @foreach@endforeach; @while@endwhile cùng với đó là @continue. Đối với những directives này và trình độ code của các bạn, tôi tin rằng có nhắm mắt, bạn cũng dễ dàng hiểu được chúng có chức năng gì và được sử dụng như thế nào. Vì vậy, tôi xin phép chỉ “để đây và không nói gì thêm” ngoài việc đưa ra một số ví dụ.

Bạn có thể nhận thấy, để output các giá trị của các biến vào phần HTML trong view, bạn đơn giản đặt tên biến vào cặp dấu nhọn đôi, vd {{ $name }} với name là tên biến, tương tự như trong Angular hoặc cặp dấu nhọn đơn { } trong React. Tuy nhiên, trong trường hợp bạn đang dùng kết hợp giữa Blade và Angular, thì việc sử dụng chung kiểu output với cặp dấu nhọn đôi sẽ gây lộn xộn và dĩ nhiên, phần thắng sẽ thuộc về Blade. Do đó, để “nói với Blade” là “Blade ơi, cái này dành cho Angular nhé”, bạn chỉ việc thêm một dấu @ ở phía trước là xong, tức là @{{ name }} và Blade sẽ biết và nhường phần output cho Angular kiểm soát.

Điều này dẫn tới một câu hỏi: Giá trị biến lấy từ đâu? Bây giờ, chúng ta sẽ tiến hành sửa chữa template bên trên như sau:

Và câu hỏi được đặt ra là chúng ta là name và age ở đâu mà có. Hãy chuyển sang routes/web.php, và chú ý vào dòng định nghĩa route ‘/’:

Hàm view của chúng ta nhận 2 tham số. Tham số đầu tiên và bắt buộc phải có là tên của view, ở đây là welcome và không cần phải truyền phần mở rộng .blade.php. Tham số thứ hai là một Map chứa các giá trị mà chúng ta sẽ chuyển vào view tương ứng. Và đó là nơi chúng ta sẽ định nghĩa các giá trị name và age. Chẳng hạn:

Và mời bạn chạy thử để kiểm tra. Kết quả hoàn toàn`đúng như chúng ta mong đợi. Trong thời gian chờ đợi bài viết sau sẽ nói về một số directives bạn cần quan tâm, hãy tranh thủ “voọc vạch” về những gì bạn đã biết về Blade. Ngoài ra, bạn có thể tìm cách output các query params vào view để nâng độ khó. Chúc các bạn vui vẻ.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.