CODEIGNITER 3X
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

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

banquyen png
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ỹ.

Cùng chuyên mục:

Chia sẻ theme web blog mobile đơn giản (Theme FMB1)

Chia sẻ theme web blog mobile đơn giản (Theme FMB1)

Freetuts Mobile Blog được code trên nền tảng PHP và MySQL, sử dụng Codeigniter Framework.

Bài 19: Rewrite URL trong Codeigniter

Bài 19: Rewrite URL trong Codeigniter

Sau một khoảng thời gian không đụng tới Codeigniter thì hôm nay lại có dịp…

Tìm hiểu quy trình load model trong codeigniter

Tìm hiểu quy trình load model trong codeigniter

Việc load model rất quen thuộc với những bạn sử dụng framwork codeigniter nhưng đôi…

Tự tạo thư viện load widget trong codeigniter

Tự tạo thư viện load widget trong codeigniter

Như các bạn biết mặc định hệ thống của Codeigniter hoạt động theo mô hình…

Hướng dẫn custom bộ core codeigniter

Hướng dẫn custom bộ core codeigniter

Có khi nào bạn đặt câu hỏi có nên sửa các file nằm trong bộ…

Bài 18: Tìm Hiểu Library Shopping Cart trong Codeigniter

Bài 18: Tìm Hiểu Library Shopping Cart trong Codeigniter

Chào mừng các bạn đã quay trở lại freetuts.net. Như vậy ở bài trước chúng…

Bài 17: Xây dựng crud add - update - edit user

Bài 17: Xây dựng crud add - update - edit user

Crud là một thuật ngữ không hề xa lạ với dân lập trình, nó là…

Bài 15: Tìm Hiểu Helper Language Trong Codeigniter

Bài 15: Tìm Hiểu Helper Language Trong Codeigniter

Trong bài viết này , chúng ta chỉ tìm hiểu ở khái niệm cơ bản…

Bài 14: Tìm Hiểu Helper Text Trong Codeigniter

Bài 14: Tìm Hiểu Helper Text Trong Codeigniter

Nhìn tiêu đề, hẳn các bạn đã đoán ra hôm nay chúng ta sẽ tìm…

Bài 13: Tìm Hiểu Helper Date Trong Codeigniter

Bài 13: Tìm Hiểu Helper Date Trong Codeigniter

Hôm nay chúng ta sẽ tiếp tục tìm hiểu sâu hơn về các helper mà…

Bài 12: Đóng dấu watermark image trong codeigniter

Bài 12: Đóng dấu watermark image trong codeigniter

Đầu tiên xin gửi lời cảm ơn các bạn đã quan tâm và theo dõi…

Bài 11: Tìm Hiểu Library Image Trong Codeigniter

Bài 11: Tìm Hiểu Library Image Trong Codeigniter

Kết thúc bài trước, chúng ta đã hoàn thành khá xuất sắc phần upload hình…

Bài 10: Tìm hiểu library upload trong codeigniter

Bài 10: Tìm hiểu library upload trong codeigniter

Chào mừng các bạn đã quay trở lại freetuts.net, đã lâu rồi tôi không viết…

Bài 9: Tìm Hiểu Library Form Validation

Bài 9: Tìm Hiểu Library Form Validation

Cho tới bài viết này, chắc hẵn các bạn đều đã biết rõ cách load…

Bài 8: Tìm hiểu Helper Url Và Form Trong Codeigniter

Bài 8: Tìm hiểu Helper Url Và Form Trong Codeigniter

Trong Codeigniter Framework nó chia ra 2 khái niệm đó là helper & library, vậy…

Bài 7: Load Library Pagination Trong Codeigniter

Bài 7: Load Library Pagination Trong Codeigniter

Đây là một library cũng khá là phổ biến, hay được sử dụng trong quá…

Bài 6: Load Library Database Trong Codeigniter

Bài 6: Load Library Database Trong Codeigniter

Tôi sẽ không giới thiệu về library này mà sẽ xoáy sâu vào các thao…

Bài 5: Load Library Session Trong Codeigniter

Bài 5: Load Library Session Trong Codeigniter

Đây là một thư viện khá là quan trọng , trong framework CI (Codeigniter) .…

Bài 4: Load Model Trong Codeigniter

Bài 4: Load Model Trong Codeigniter

Trong Codeigniter để kết nối với Database chúng ta phải cấu hình thông tin cho…

Bài 3: Load View Trong Codeigniter

Bài 3: Load View Trong Codeigniter

Trong Codeigniter tất cả các Views đều được đặt trong thư mục application/views. Các bạn…

Top