Trong Laravel 5.2, định dạng xxx.blade.php là định dạng của template blade. Với template này người thiết kế có thể sử dụng để xây dựng các chế độ hiển thị khác nhau với nhiều thành phần của website như trong bài viết Xây dựng templale trong Laravel. Trong bài viết này chúng tôi hướng dẫn chi tiết cách làm việc với các biến, vòng lặp trong template blade để các bạn có thể tùy biến sử dụng trong website của mình.

Kỹ thuật kế thừa

Kỹ thuật kế thừa sử dụng template cho phép chúng ta định nghĩa các bố trí thiết kế chung nhất cho tất cả các thành phần trong website. Các trang thành phần sẽ sử dụng tính chất kế thừa để sử dụng lại các phần từ đã thiết kế trong template master. Kỹ thuật này cho chúng ta tiết kiệm được thời gian xây dựng giao diện trong thành phần view của các trang web được xây dựng theo mô hình MVC

Xây dựng trang Master layout

 

Tất cả các template trong Laravel đều được lưu với phần mở rộng là .blade. Trong phần này chúng ta sẽ tạo ra trang Master Template. Sau đây là trình tự thực hiện

1.    Tạo thư mục layout trong /resources/views/

2.    Tạo tập tin master.blade.php trong /resources/views/layouts/master.blade.php

Xây dựng mã nguồn cho master.blade.php

001.png - 117.63 kb

1.    @yield('title') dùng để hiển thị tiêu đề

2.    @section('sidebar') dùng để định nghĩa tên Sidebar

3.    @show dùng để hiển thị nội dung trong session

4.    @yield('content') dùng để hiển thị nội dung

Mở rộng thiết kế Master layout

 

Chúng ta sẽ xây dựng trang Page kế thừa Master

1.    Tạo trang page.blade.php trong /resources/views/page.blade.php

Xây dựng mã nguồn

002.png - 103.92 kb

1.    @extends('layouts.master') cú pháp chỉ định template được kế thừa

2.    @section('title', 'Page Title') giá trị tiêu đề của session

3.    @section('sidebar')  định nghĩa sidebar trong một trang con của master.

4.    @parent hiển thị nội dung của sidebar được thiết kế ở trang chủ

5.    @endsection kết thúc session

6.    @section('content') định nghĩa session

7.    @section('content') thêm đoạn content vào nội dung session.

8.    @endsection kết thúc session

Xây dựng routes để kiểm tra

 

1.    Mở tập tin /app/Http/routes.php

2.    Thêm vào route

Route::get('blade', function () {return view('page');});

Lưu lại và mở URL

003.png - 20.06 kb

Bạn sẽ thấy được kết quả trên

Hiển thị giá trị của biến trong blade template

 

Trong phần này chúng ta sẽ thực hiện cách hiển thị giá trị của các biến trên các template blade.

1.    Mở /app/Http/routes.php

2.    Chỉnh sửa blade route

Route::get('blade', function () {

            return view('page', array('name' => 'My name'));

});

Lưu lại các thay đổi

Cập nhật pages.blade.php để hiển thị giá trị của biến

1.    Mở /resources/views/page.blade.php

2.    Cập nhật mã nguồn

004.png - 12.46 kb

Trong đó: {{$name}} dùng để hiển thị biến $name.

Lưu lại thay đổi

Xem lại trang web tại địa chỉ

005.png - 19.77 kb

Xây dựng các cấu trúc điều khiển trong Blade

 

Template Blade hỗ trợ conditional statements. Conditional statements sẽ quyết định những gì được hiển thị trên website. Trong phần này, chúng ta sẽ minh họa cho các cấu trúc điều khiển

1.    Mở /app/Http/routes.php

2.    Cập nhật lại Routes

Route::get('blade', function () {

            return view('page', array('name' => 'My name', 'birthday' => '20/12/2012'));

});

Lưu lại các thay đổi

1.    Mở tập tin /resources/views/page.blade.php

2.    Cập nhật lại mã nguồn

007.png - 23.36 kb

Load lại website trong trình duyệt của bạn

008.png - 27.53 kb

Vòng lặp (Blade Loops)

Blade template chấp nhận sử dụng các vòng lặp để hiển thị dữ liệu. Đây là một thao tác rất thường gặp khi sử dụng kết nối với MySQL và đổ dữ liệu về hiển thị lên trang web.

1.            Mở tập tin /app/Http/routes.php

2.            Cập nhật lại routes

Route::get('blade', function () {

            $drinks = array('Vodka', 'Gin', 'Brandy');

            return view('page', array('name' => 'The Raven', 'day' => 'Friday', 'drinks' => $drinks));

});

Trong đó, $drinks = array('Vodka','Gin','Brandy'); lưu trữ một mảng gồm 3 phần tử

010.png - 31.91 kb

Thực thi hàm PHP trong template

Trong phần này chúng ta minh họa việc tại ra một hàm trong sử dụng nhóm hàm ngày tháng năm trong template

1.    Mở /resources/views/page.blade.php

2.    Cập nhật lại mã nguồn

009.png - 26.47 kb

Trong đó, {{date(' D M, Y')}} dùng để hiển thị hàm ngày tháng năm.

Tải lại trang web trên trình duyệt để xem kết quả

010.png - 31.91 kb

Tóm lại trong bài viết trên chúng ta đã làm quen với một số kỹ thuật sử dụng trong template blade. Chúng ta có thể sử dụng để xây dựng các trang view trong laravel. Chúc bạn thành công

 

CLB Tin Học

  • Chưa có lời bình cho bài viết này.