Bài 5 : Template trong laravel 5 (blade)

November 03, 2016

Bài 5 : Template trong laravel 5 (blade)

Trong bài viết trước hướng dẫn cách đưa dữ liệu ra view, mình có nói là sẽ giải thích kĩ hơn cho các bạn về tại sao mình lại đặt file view là aboutme.blade.php mà không phải là aboutme.php , bài hôm nay mình sẽ trả lời đó là vì mình cố tình làm vậy để các bạn làm quen với cách sử dụng template trong Laravel 5. Nếu bạn đặt tên file là view là aboutme.php thì bạn sẽ không thể sử dụng được template trong Laravel 5.

Vậy thì Template trong Laravel 5 là gì ?

Như bạn thấy, một trang web thông thường, các thành phần như header, footer, sidebar-left, sidebar-right,… thường bao gồm những nội dung cố định, không thay đổi. Chỉ có phần nội dung chính giữa là sẽ thay đổi theo từng trang. Vậy nên khi nhảy từ trang này qua trang khác, thay vì phải mất công tạo lại những thành phần cố định trên trong khi chỉ có nội dung chính giua là thay đổi, vậy thì tại sao chúng ta không nhóm toàn bộ các thành phần cố định đó lại. Và từ đó ý tưởng Template ra đời

Template đó chính là 1 mẫu bố cục chung cho tất cả các trang có sử dụng lại những thành phần giống nhau mà không phải viết lại toàn bộ, từ đó trên mỗi trang, chỉ cần thay đổi ở một số nơi được chỉ định trên trang từ template.

Nói thì dài dòng vậy, thôi thì lấy ví dụ cho các bạn dễ hiểu.

Hướng dẫn sử dụng template trong Laravel 5 (hay còn gọi là blade)

Trong file routes.php, mình sẽ thêm 2 route mới gọi 2 trang contact và about như sau:

PHP

1

2

Route::get('/contact', 'PagesController@contact');

Route::get('/about', 'PagesController@about');

Tiếp đến, trong file PagesController.php, các bạn thêm 2 function mới là about() và contact() như dưới đây để gọi 2 view là about.blade.php và contact.blade.php

PHP

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<?php namespace App\Http\Controllers;

use App\Http\Requests;

use App\Http\Controllers\Controller;

use Illuminate\Http\Request;

class PagesController extends Controller {

 public function about(){

  return view('pages.about');

 }

 public function contact(){

  return view('pages.contact');

 }

}

Tiếp theo, các bạn tạo 2 file view là about.blade.php và contact.blade.php đặt trong folder pages. Đồng thời tạo thư mục mới là templates, trong thư mục templates, tạo file master.blade.php dùng để làm template như hình dưới đây :

tạo template trong laravel

Trong file master.blade.php, mình sẽ thiết kế một template có nội dung đơn giản như sau :

PHP

1

2

3

4

5

6

7

8

<html>

<head>

 <title>Đây là trang sử dụng Template</title>

</head>

<body>

 @yield('content')

</body>

</html>

@yield(‘bat_ky_ten_nao’), đây là 1 phương thức của Laravel, nhằm nói cho các trang khác khi sử dụng template master.blade.php biết được rằng đây là phần sẽ đặt nội dung cần thay đổi.

Trong file about.blade.php và contact.blade.php sẽ có nội dung lần lượt như sau :

trang about.blade.php

PHP

1

2

3

4

5

@extends('templates.master')

@section('content')

Đây là trang about

@stop

trang contact.blade.php

PHP

1

2

3

4

5

@extends('templates.master')

@section('content')

Đây là trang contact

@stop

Ở 2 trang trên, phương thức @extends(‘ten-template’), sẽ chỉ định template mà bạn cần sử dụng cho trang hiện hành của mình mà ở đây đó là templates.master .

Với phương thức @section(‘content’) , bạn sẽ đặt nội dung chỉ có trên trang hiện hành, ví dụ trên trang about sẽ là “Đây là trang about“, contact sẽ là “Đây là trang contact“. Cuối cùng kết thúc @section các bạn phải dùng phương thức @stop để đóng nội dung cần thay đổi lại.

Save lại 2 trang trên, sau đó các bạn chạy lần lượt trên trình duyệt

PHP

1

2

http://localhost/laravel-5/public/contact

http://localhost/laravel-5/public/about

các bạn sẽ được các kết quả lần lượt như sau :

Hình 1 :

Hình 2:

Ở hình 1 và hình 2, mình cố tình bật Kiểm tra phần tử trong trình duyệt chrome, để các bạn thấy rằng 2 trang view contact.blade.php và about.blade.php đều sử dụng chung <title>Đây là trang sử dụng Template</title> của template master.blade.php

Các bạn thấy đó, 2 trang view contact và about đã sử dụng lại thành phần chung của template, chỉ thay đổi những nội dung đặc biệt biệt chỉ có ở trên trang contact hoặc about mà không cần phải viết lại toàn bộ nội dung trên mỗi trang. Điều đó cho thấy lợi ích khi các bạn sử dụng template trong laravel 5. Ngoài ra các bạn có thể xem thêm chi tiết hơn về template trong Laravel 5 tại đây : http://laravel.com/docs/5.0/templates . Chúc các bạn học tốt. Thân !

Nguồn: http://kungfuphp.com/

Search This Blog

Thư viện IT và cuộc sống