Bài 16: Kỹ thuật master layout trong codeigniter

Đây là một vấn đề mở rộng mà CI không đề cập trong user guide, đó là khái niệm về master layout, vậy tại sao chúng ta lại phải tìm hiểu và sử dụng nó. Trong CI chúng ta phải truy cập từng controller, và trong từng controller sẽ có nhiều action, và nhiệm vụ của từng action sẽ làm công việc hiển thị thông tin cần thiết, ví dụ như trong controller category, có add, edit..vvv và trong từng action như vậy, chúng ta phải đổ nội dung của layout ra. Bất kỳ khi các bạn xây dựng một trang web nào đó, thì ở từng action sẽ có phần layout cố định như làheader, footer, đó là 2 phần trong action nào chúng ta cũng bắt buộc phải có, chẳng lẽ cứ mỗi action là phải copy lại đoạn html để sử dụng lại, điều này không hợp lý tí nào cả. Vì vậy đó là lý do chúng ta phải có một giải pháp nào đó cho việc xử lý vấn đề layout trong codeigniter framework.

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Cấu hình master layout

Bài viết này có liên quan đến view, vì thế để có thể tiếp thu bài này tốt hơn thì các bạn cần phải có kiến thức tương đương về view, Đầu tiên chúng ta phải tạo ra một cái khung layout cố định, mặc định của nó phải có header & footer, tất cả các view trong từng action sẽ nằm ở một vị trí nào đó trong layout cố định này, Nếu các bạn thay đổi banner ở phần header thì tất cả các action đều sẽ thay đổi theo, đó là lý do mà chúng ta buộc phải dùng master layout, để có thể dùng chung cho toàn bộ action, nói chung chung mà không demo thì các bạn sẽ không thể nào hình dung được vấn đề, tôi sẽ ví dụ thông qua 2 controller là admin & home, hiển thị 2 layout hoàn toàn khác nhau.

Thực hành master layout -xây dựng layout admin:

Như tôi đã trình bày ở phía trên, chúng ta cần phải có một khung layout cố định , tức là một file chứa phần header & footer, tôi vào folder application/viewstạo ra 2 folder là admin & hometrong mỗi folder sẽ có một file tên là main.php, đó là file master đấy các bạn, kèm theo đó tôi sè tạo thêm 2 file index_view.php cho từng folder, đây sẽ là 2 file hiển thị view trong action admin & home.

Mở file main.php lên, chúng ta tiến hành khai báo html cho nó và tôi tiến hành tạo ra layout basic cơ bản gồm header, footer, content, 2 phần kia sẽ hiển thị cố định.Như vậy ở ngay vị trí của content chính là nơi mà chúng ta sẽ phải xử lý load view của toàn bộ action trong từng controller, vấn đề đặt ra ở đây là làm sao chúng ta có thể load view chồng view được?

Bài viết này được đăng tại [free tuts .net]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>></title>

</head>

<body>
    <div id="top">Banner</div>
        <div id="content">
           
        </div>
        <div id="footer">2014 © by freetuts.net</div>
</body>
</html>

Chuyện đó nói sau, giớ chúng ta phải tạo ra controller admin và action index và tôi load cái view ra luôn, vậy tôi có cú pháp sau, nội dung trong view là đoạn text được bao bọc trong thẻ h1.

Admin Controller - Action Index

<?php

class Admin extends CI_Controller{
    public function __construct() {
        parent::__construct();
    }
    
    public function index(){
        $this->load->view('admin/index_view');
    }
}
?>

Tiếp theo, nếu chúng ta muốn sử dụng master layout, có nghĩa là phần view của controller admin, nó sẽ phải xuất hiện ở ngay vị trí content trong file main.php, để có thể làm được điều đó thì chúng ta phải làm sao truyền một cái view sang file main. Để có thể load view lồng view, thì chúng ta phải tạo ra một trường nào đó để chúng ta truyền tham số sang file main. Và ngay tại đó các bạn phải load tiếp một cái view nửa. Chúng ta sẽ tạo ra một $data['subview'] = 'View của action' sau đó truyền tham số vào file main bằng cú pháp sau.

<?php

class Admin extends CI_Controller{
    public function __construct() {
        parent::__construct();
    }
    
    public function index(){
       $data['subview'] = 'admin/index_view';
        $this->load->view('admin/main', $data);
    }
}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $title; ?></title>
<style>
*{ margin: 0px; padding: 0px;}
body{ width: 780px; margin: 0px auto;}
#top{ background: blue; margin-top:10px; color:white; height: 100px; line-height: 100px; font-weight: bold; text-align: center;}
#footer{ background: black; color:white; height: 30px; line-height: 30px; font-weight: bold; text-align: center;}
#content{ padding: 5px;}
</style>
</head>

<body>
    <div id="top">Banner</div>
        <div id="content">
           <?php echo $subview; ?>
        </div>
        <div id="footer">2014 © by freetuts.net</div>
</body>
</html>

Sau đó mở file main.php ra, ngay tại vị trí content tôi echo $subview;, tham số truyền sang view là một cái khóa, sau khi từ action truyền sang nó sẽ bỏ đi cái mảng, tức là chỉ còn lại $subview mà thôi. tôi style css cho layout dễ nhìn hơn. Để test chúng ta ra trình duyệt và gõ. localhost/citest/index.php/admin nếu kết quả trả về như hình, xem như bước đầu thành công rồi nhé.

Ấy, nhưng mà chúng ta không muốn show chữ admin/index_view ra như thế này, mà chúng ta muốn show nội dung của index_view cơ mà, để làm được điều này thì không có gì là khó. Ngay tại vị trí mà chúng ta echo, chúng ta tiến hành load ra một cái view với tham số là index_view, vậy chúng ta có cú pháp như sau.

<?php echo $this->load->view($subview); ?>

Nếu kết quả trả về như hình, xem như chúng ta thành công trong việc xây dựng master layout cơ bản nhất, xem như chúng ta đa giải quyết được bài toán view lồng view một cách đơn giản.

Với master layout, chúng ta có thể dề dàng thay đổi title page cho từng action, bằng cách truyền tham số title sang file main.php như sau, F5 lại trình duyệt xem title page có đúng như sự kỳ vọng của chúng ta hay không.

<?php

class Admin extends CI_Controller{
    public function __construct() {
        parent::__construct();
    }
    
    public function index(){
        $data['subview'] = 'admin/index_view';
        $data['title'] = 'Admin System';
        $this->load->view('admin/main', $data);
    }
}
?>

Với kỹ thuật master layout chúng ta hoàn toàn có thể sử dụng cho toàn bộ action, để giải thích cho vấn đề này, tôi sẽ ví dụ thông qua controller category và action là add, và tôi cũng muốn thông qua ví dụ này để có thể thể hiện việc show dữ liệu thông qua master layout. Tôi có $info chứa thông tin tôi cần hiển thị ở addcate_view, đầu tiên tôi tiến hành test bằng cách in dữ liệu trong cặp thẻ pre, sau đó tôi dùng vòng lặp foreach xuất dữ liệu thông tin cái mảng vừa khai báo. $k là khóa, $v là giá trị của khóa, cái này quá basic rồi hen.

<?php

class Category extends CI_Controller{
    public function __construct() {
        parent::__construct();
    }
    
    public function add(){
        $data['subview'] = 'admin/addcate_view';
        $data['info'] =  array(
            'name' => 'Hasegawa kaito',
            'website' => 'freetuts.net',
            'email' => 'hoaiminhit1990@gmail.com',
            'phone' => '1234567894556',
        ); 
        $data['title'] = 'Add A Category';
        $this->load->view('admin/main', $data);
    }
}
?>

<h1>Category Controller - Action Add</h1>
<?php
echo "<pre>";
print_r($info);
echo "</pre>";

foreach($info as $k => $v){
    echo "$k : $v<br />";
}
?>

Kết Quả:

Vậy xem như chúng ta vừa hoàn thanh xuất sắc trong việc xử lý vấn đề layout trong CI, để các bạn hiểu rỏ hơn thì tôi có thêm một ví dụ nhỏ, xây dựng layout cho trang home, không có gì ghê gớm đâu, chỉ là thay màu header & nội dung trong view là xong.

Thực hành master layout - xây dựng layout home:

Tôi tạo controller home & action index, copy các thông số từ controller admin, thay đổi tên view là xong ngay thôi.

<?php

class Home extends CI_Controller{
    public function __construct() {
        parent::__construct();
    }
    
    public function index(){
        $data['subview'] = 'home/index_view';
        $data['title'] = 'Homepage';
        $this->load->view('home/main', $data);
    }
}
?>

<h1>Home Controller - Action Index</h1>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $title; ?></title>
<style>
*{ margin: 0px; padding: 0px;}
body{ width: 780px; margin: 0px auto;}
#top{ background: orange; color:white; height: 100px; line-height: 100px; font-weight: bold; text-align: center;}
#footer{ background: black; color:white; height: 30px; line-height: 30px; font-weight: bold; text-align: center;}
#content{ padding: 5px;}
</style>
</head>

<body>
    <div id="top">Banner</div>
        <div id="content">
           <?php echo $this->load->view($subview); ?>
        </div>
        <div id="footer">2014 © by freetuts.net</div>
</body>
</html>

Ra trình duyệt và gõ, localhost/citest/index.php/home, nếu kết quả trả về như hình xem như các bạn đã thành công, trong việc xây dựng layout home.

Kết thúc bài học:

Thật ra có rất nhiều library ra đời hỗ trợ chúng ta trong việc xử lý layout đối với Codeigniter framework, nhưng để control được hoàn toàn các libs đó, các bạn sẽ phải tốn khá nhiều thời gian, đọc document của nó, chưa kể đâu phải bạn nào cũng giỏi tiếng anh đâu, thật ra thì nó cũng nôm na là view lồng view thôi, kỹ thuật master layout này do tôi tìm hiểu từ một tutorial của nước ngoài, cảm thấy hay nên tôi chia sẽ với các bạn, hy vọng các bạn sẽ có riêng cho mình những giải pháp trong việc xử lý layout. Bài viết này khá là quan trọng, vì trong các bài viết sau, đều có liên quan đến nó. Mong các bạn dành time ra xem bài cho kỹ.

Bài trước Bài tiếp