Thứ Năm, 24 tháng 12, 2015

Phalcon 4

12/24/2015 08:48:00 SA    No comments
Untitled Document

Bài 05: Mô hình layouts của views trong Phalcon
 0 
 Google +0 

  0
Đăng bởi: TheHalfHeart - Vào ngày: 11-03-2015 - Chuyên mục: Phalcon - View: 942
Nếu bạn đã từng nghiên cứu qua Codeigniter Framework thì bạn sẽ thấy điểm yếu của nó là việc phân cấp views phải do người dùng tự định nghĩa, nghĩa là nếu bạn muốn chia ra các phần nhỏ như header, footer, sidebar, .. Hay thậm chí là bạn muốn có một main Layout và sau đó với Modun News thì layout sẽ khác và Modun Shopping thì layout nó sẽ khác, điều này đôi lúc hơi phiền toái.
Nhưng đừng lo lắng, trong Phalcon nó có một cơ chế phân cấp layouts khá hay với tên gọi bằng tiếng Anh là Hierarchical Rendering. Giải thích nôm na bằng tiếng Việt là mô hình chia nhỏ layout view trong Phalcon.
Trước khi vào bài mình có một lưu ý như sau: Ở bài tìm hiểu Phalcon View chúng ta đã học cách tạo mới view, cách gán biến từ controller sang view rồi nhỉ, và mình cũng đã có một lưu ý là với Phalcon thì View sẽ tự động load chứ không giống như View trong Codeigniter là bạn phải sử dụng từ khóa load view.


1. Mô hình chia nhỏ views của Phalcon

Mình thấy điểm này khá là hay của Phalcon vì bạn sẽ dễ dàng quản lý layout và làm dạng Multi Layout một cách đơn giản. Bây giờ bạn tạo một Controller tên là News, sau đó tạo 2 Actions là detail và newslist như sau:


1
2
3
4
5
6
7
8
9

class NewsController extends Phalcon\Mvc\Controller {
    public function detailAction(){
         
    }
     
    public function newslistAction(){
         
    }
}

Tiếp theo bạn cần tạo thêm một vài folder và file trong app/views như sau (các bạn nhớ để ý màu vẽ mà mình đã bôi cho các file nhé):


project_name/
/app/
/cache/
/config/
/controllers/
/NewsController.php
/models/
/views/
/layouts/
/news.phtml
/news/
/detail.phtml
/newslist.phtml
/index.phtml   
/public/
/css/
/js/
/index.php

Trong đó file:

  • index.phtml gọi là Main Layout
  • news.phtml gọi là Controller Layout
  • detail.phtml và newslist.phtml gọi là Action View

2. Main Layout Phalcon

Về định nghĩa thì Main Layout chính là layout chính trang web của chúng ta, còn về code trong Phalcon thì nó chính là fileindex.phtml trong sơ cây thư mục ở trên, nghĩa là nó sẽ nằm cấp ngoài cùng app/views/index.phtml.
Bây giờ bạn mở file index.phtml và dán nội dung này vào:


1
2
3
4
5
6
7
8

<html>
    <head>
        <title>Kỹ thuật chia layout trong Phalcon</title>
    </head>
    <body>
        <h1>TRANG LAYOUT CHÍNH</h1>
    </body>
</html>

Ok xong, bây giờ chạy hai đường dẫn sau và xem kết quả nhé:

  • http://localhost/project_name/news/detail
  • http://localhost/project_name/news/newslist

Kết quả y chang nhau đều xuất hiện chữ 'TRANG LAYOUT CHÍNH'. Như vậy ta có kết luận như sau:
Main Layout chính là file index.phtml nằm trong cấp đầu tiên của folder views: app/views/index.phtml
Tất cả các Controllers và Actions đều thực hiện load file Main Layout này
Tên của nó bắt buộc phải là index.phtml


3. Controller Layout Phalcon

Mở file news.phtml lên và dán vào nội dung như sau:


1

<h2>TRANG LAYOUT CỦA CONTROLLER</h2>

Bạn chạy hai đường dẫn như trên kia thì thấy kết quả không thay đổi gì phải không nào? Bây giờ bạn mở file Main Controller index,phtml lên và thêm vào một dòng <?php echo $this->getContent() ?>:


1
2
3
4
5
6
7
8
9

<html>
    <head>
        <title>Kỹ thuật chia layout trong Phalcon</title>
    </head>
    <body>
        <h1>TRANG LAYOUT CHÍNH</h1>
        <?php echo $this->getContent() ?>
    </body>
</html>

Oh Yeah! chạy lên kết quả nó khác trước rồi phải không nào, nhưng chạy cả hai link thì kết quả đều giống nhau. Vậy ta có kết luận như sau:
Các Controller Layout được đặt trong thư mục app/views/layouts của view
Tên của Controller Layout phải trùng với tên Controller. Như ví dụ trên thì tên của nó là news.phtml.
Tất cả các Action trong Controller đó đều sử dụng được Layout này
Cấp độ của Controller Layout sẽ thấp hơn Main Layout nên để load Controller Layout vào vị trí nào đó trongMain Layout thì ta phải dùng hàm $this->getContent() để đổ  vào.


4. Action View Phalcon

Tới Action thì tên nó thay đổi một chút là View chứ không phải là Layout nữa. View thì chúng ta đã tìm hiểu ở bài trước rồi, nghĩa là:

  • Views của mỗi controller sẽ chứa trong một thư mục app/views/controller_name.
  • Tên của file Views phải trùng với tên Action

Bây giờ bạn mở file detail.phtml lên và gõ nội dung sau vào:


1

<h3>Trang Detail</h3>

Tiếp theo mở file File newslist.phtml lên và gõ nội dung sau vào:


1

<h3>Trang Newslist</h3>

Các bạn chạy hai URL trên thì thấy kết quả không có gì khác so với phần Controller Layout. Suy ngẫm lại ví dụ trên kia thì ta sẽ sử dụng hàm $this->getContent() thử xem có gì khác không? Thứ nhé, ta sẽ sửa lại file news.phtml như sau:


1
2

<h2>TRANG LAYOUT CỦA CONTROLLER</h2>
 <?php echo $this->getContent() ?>

Ok chạy cả hai link lên thì bạn thấy kết quả nó đã khác nhau.
Từ 3 phần trên ta có kết luận như sau: Về cấp độ của layout sẽ là Main Layout -> Controller Layout -> View Layout, nghĩa là nếu cấp cha không tồn tại thì sẽ load cấp con


# Lời kết

Bài này mình thấy khá là hay đấy, giải thích hơi rườm rà nhưng làm theo bạn sẽ tự cảm nhận được những gì mình ghi là quá đơn giản. Hy vọng qua bài này sẽ giúp ban yêu thích Phalcon Framework hơn và đừng quên ủng hộ website học lập trình online này nhé, chúc bạn học tốt.

0 nhận xét:

Đăng nhận xét