Bài 08: MVC PHP - Viết thư viện load view

28/7/17

Bài 08: MVC PHP - Viết thư viện load view

Đăng bởi: Bình luận
Vậy là chúng ta đã viết được các lớp load library, load helper, load config rồi nhỉ, vậy thì trong bài này chúng ta sẽ viết thư viện load view. Đây là một thư viện khá là quan trọng và trong đối tượng này có sử dụng một số hàm có thể hơi mới lạ nên nếu hàm nào không hiểu thì bạn comment hoặc google để tra nhé. 
Như thường lệ mình sẽ đăng cấu trúc file và folder tính đến cuối bài này như sau.

Trước tiên ta cần tìm hiểu định nghĩa về View và một số thông tin quan trọng liên quan đến view trong project MVC PHP của chúng ta.
Nội dung chính
  • 1. View là gì?
  • 2. Viết thư viện view loader
  • 3. Thêm view loader vào FT_Controller
  • 4. Tạo mới một view
  • 5. Load view trong Controller
  • 6 Truyền Data từ controller sang view
  • 7. Lời kết

1. View là gì?

View là một thành phần trong mô hình MVC và nhiệm vụ của nó là lấy dữ liệu từ controller và in ra các đoạn mã HTML, mỗi actionthông thường sẽ có một view tương ứng. Ví dụ bạn có action news_detail thì bạn sẽ có một view news_detail. 
Trong serie này mình chỉ hướng dẫn cách viết thư viện load view đơn giản nên nếu sau này bạn thấy không hay thì có thể bổ sung thêm, chủ yếu là bạn đang học và bạn cần một ví dụ cụ thể để xem chứ không nên  lấy ví dụ đó để làm project cho riêng mình.
Trong project MVC PHP này các file view sẽ được đặt trong thư mục admin/view, trong đó admin là tên module hiện tại.

2. Viết thư viện view loader

Bạn tạo một file FT_View_Loader.php nằm trong thư mục system/core/loader và copy nội dung sau:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?php
/**
 * @package     FT_Framework
 * @author      Freetuts Dev Team
 * @email       freetuts.net@gmail.com
 * @copyright   Copyright (c) 2015
 * @since       Version 1.0
 * @filesource  system/core/loader/FT_View_Loader.php
 */
class FT_View_Loader
{
    /**
     * @desc biến lưu trữ các view đã load
     */
    private $__content = array();
     
    /**
     * Load view
     *
     * @param   string
     * @param   array
     * @desc    hàm load view, tham số truyền vào là tên của view và dữ liệu truyền qua view
     */
    public function load($view, $data = array())
    {
        // Chuyển mảng dữ liệu thành từng biến
        extract($data);
         
        // Chuyển nội dung view thành biến thay vì in ra bằng cách dùng ab_start()
        ob_start();
        require_once PATH_APPLICATION . '/view/' . $view . '.php';
        $content = ob_get_contents();
        ob_end_clean();
         
        // Gán nội dung vào danh sách view đã load
        $this->__content[] = $content;
    }
     
    /**
     * Show view
     *
     * @desc    Hàm hiển thị toàn bộ view đã load, được dùng ở controller
     */
    public function show()
    {
        foreach ($this->__content as $html){
            echo $html;
        }
    }
}
Ở đây mình có hai phương thức chính là:
  • load() dùng để load view bạn cần load. Nó có hai tham số là tên view và data mà controller muốn truyền qua view.
  • show() dùng để hiển thị view, hàm này sẽ được gọi ở cuối controller

3. Thêm view loader vào FT_Controller

Như thường lệ để sử dụng được thư viện view loader thì ban phải khởi tạo nó trong FT_Controller.
Bạn mở file FT_Controller.php lên và tìm đến hàm khởi tạo bổ sung đoạn code sau vào cuối hàm:
1
2
3
// Load View
require_once PATH_SYSTEM . '/core/loader/FT_View_Loader.php';
$this->view = new FT_View_Loader();
Và đây là toàn bộ code cho hàm khởi tạo cho tới thời điểm này.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
public function __construct()
{
    // Loader cho config
    require_once PATH_SYSTEM . '/core/loader/FT_Config_Loader.php';
    $this->config   = new FT_Config_Loader();
    $this->config->load('config');
    // Loader Library
    require_once PATH_SYSTEM . '/core/loader/FT_Library_Loader.php';
    $this->library = new FT_Library_Loader();
    // Load Helper
    require_once PATH_SYSTEM . '/core/loader/FT_Helper_Loader.php';
    $this->helper = new FT_Helper_Loader();
    // Load View
    require_once PATH_SYSTEM . '/core/loader/FT_View_Loader.php';
    $this->view = new FT_View_Loader();
}
Ok như vậy là xong rồi đấy.

4. Tạo mới một view

Bạn tạo một file tên là view.php nằm trong thư mục admin/view, sau đó copy nội dung sau vào:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            #header{
                height: 150px;
                background: red;
            }
            #footer{
                height: 150px;
                background: blue;
            }
            #content{
                height: 150px;
                background: yellow;
            }
        </style>
    </head>
    <body>
        <div id="header">
            HEADER
        </div>
         
        <div id="content">
            CONTENT
        </div>
         
        <div id="footer">
            FOOTER
        </div>
    </body>
</html>
Vậy là bạn đã tạo xong một view rồi đấy, bây giờ ta sẽ load view này trong controller nhé

5. Load view trong Controller

Bạn tạo mới một controller tên là View_Controller và copy nội dung sau vào:
1
2
3
4
5
6
7
8
9
10
11
12
13
<?php if ( ! defined('PATH_SYSTEM')) die ('Bad requested!');
class View_Controller extends FT_Controller
{
    public function indexAction()
    {
        // Load view
        $this->view->load('view');
         
        // Show view
        $this->view->show();
    }
}
Ok bây giờ bạn ra trình duyệt gõ URL http://localhost/mvc/admin.php?c=view bạn sẽ thấy xuất hiện một giao diện nhu sau tức là mọi chuyện đã ok.

6 Truyền Data từ controller sang view

Nếu bạn muốn truyền data từ controller qua view thì bạn sử dụng tham số thứ hai trong phương thức load().
1
$this->view->load('view', $data);
Trong đó $data có dạng mảng key => value và sau khi chuyển sang view nó sẽ có một biến $key = value, lúc này bạn chỉ việc echo $key là được.
Để rõ hơn thì ta làm ví dụ sau.
Bước 1: Bạn sửa lại View_Ccontroller như sau
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php if ( ! defined('PATH_SYSTEM')) die ('Bad requested!');
class View_Controller extends FT_Controller
{
    public function indexAction()
    {
        $data = array(
            'title' => 'Chào mừng các bạn đến với freetuts.net'
        );
         
        // Load view
        $this->view->load('view', $data);
         
        // Show view
        $this->view->show();
    }
}
Bước 2: Vào admin/view/view.php sửa lại nội dung như sau:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            #header{
                height: 150px;
                background: red;
            }
            #footer{
                height: 150px;
                background: blue;
            }
            #content{
                height: 150px;
                background: yellow;
            }
        </style>
    </head>
    <body>
        <div id="header">
            <h2><?php echo $title; ?><h2>
        </div>
         
        <div id="content">
            CONTENT
        </div>
         
        <div id="footer">
            FOOTER
        </div>
    </body>
</html>
Chạy lên giao diện sẽ như sau:

Ok mọi chuyện đã giải quyết xong và bạn có thể đi ngủ được rồi đấy :D.

7. Lời kết


Trong bài này quan trọng nhất là bạn phải hiểu phương thức load() trong đối tượng view loader, bạn chú ý mình có dùng hàm extract để chuyển mảng dữ liệu dạng key => value thành tường biến tương ứng $key = value. Còn ob_start() là hàm sẽ báo cho PHP biết chúng ta đang load dữ liệu và không cần in ra cho nên bạn chỉ cần sử dụng hàm ob_get_contents() để lấy nội dung trong. Bài tiếp theo chúng ta sẽ tìm hiểu Base_Controller nhé.
Bạn đang đọc bài viết Bài 08: MVC PHP - Viết thư viện load view tại Website: Học Lập Trình

0 nhận xét: