học laravel 5

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 🙂

Gợi ý xem : Khóa học Laravel 5 giá cực rẻ + tặng thêm mã giảm giá 40% + Hỗ trợ việc làm sau khi học xong

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:

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 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 :

template trong laravel
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 :

<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

@extends('templates.master')

@section('content')
Đây là trang about
@stop

trang contact.blade.php

@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.

Gợi ý : Bạn là người mới và muốn tìm hiểu về Bitcoin nhưng không biết bắt đầu từ đâu? Click xem ngay Hướng Dẫn Đầu Tư Bitcoin Cho Người Mới nhé!

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

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 :

Trang view about

 

Hình 2:

Trang view contact

 

Ở 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 !

 

Có ích

học laravel 5

Bài 8 : Form trong Laravel 5

Ở bài trước, mình đã hướng dẫn cho các bạn về mô hình MVC trong …

9 bình luận

  1. bạn cho mình hỏi là trong laravel mình dùng hàm nào để chỉ ra đường dẫn trong các link thế? http://localhost/laravel/public/contact

  2. e đang dùng lazavel 5,nhưng khi dùng {{ }} để hiển thị nhưng không dk là sao,
    và không dùng được lệnh để hiển thị trong trang master.blade.php
    @extends(‘templates.master’)

    @section(‘content’)
    Đây là trang about
    @stop

  3. Trường hợp project mình có nhiều module cụ thể có 2 module là admin và frontend. Mình muốn hễ cứ vào module là sử dụng templates admin, và vào frontend thì sử dụng templates frontend. Thay vì phải vào từng view để extend, nếu như vậy thì bạn có cách gì giải quyết không nhĩ

  4. Tại sao trong Route::get(‘/about’, ‘PagesController@about’); mà mình bỏ dấu gạch ở trước abount mà code vẫn chạy.
    Tại sao ở phần load view (return view(‘pages.aboutme’);) mà mình bỏ chữ pages thành (return view
    (‘aboutme’)) mà code vẫn chạy.

    • theo như bạn nói có thể là bị dính cache, vì return view(‘pages.aboutme’); phải là gọi file aboutme trong folder pages.
      Nó khác với return view (‘aboutme’), vì nó nằm trực tiếp trong folder views.
      Bạn thử chạy “php artisan cache:clear” để clear cache, sau đó “php artisan serve” để chạy lại laravel xem sao

  5. Xong rồi up tiếp bái mới nữa đi a?

  6. Cái @section đó, để kết thúc mình dùng @endsection vẫn được phải không bác? Thấy bác dùng @stop

Trả lời hoadiepdo99ngoc Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *