Thứ Tư, 17 tháng 6, 2015

Sử dụng Layout trong CakePHP Framework

Trong CakePHP Framework khi  viết một ứng dụng thì mặc định CakePHP Framework đã xây dựng cho chúng ta giao diện sẵn . Tuy nhiên tùy theo nhu cầu , xu hướng…  chúng ta muốn tùy biến hoặc tạo riêng cho mình một giao diện. Thì đó là lúc bạn cần phải Sử dụng Layout trong CakePHP Framework và cách áp dụng 1 Helper CakePHP Framework vào ứng dụng của mình.

Chắc hẳn những ai đã từng làm việc với layout đều biết trong một website không phải toàn bộ giao diện lúc nào cũng thay đổi, nó bao gồm những thành phần cố định và thành phần động. Trong CakePHP chúng ta sẽ xử lý các thành phần cố định thông qua một class Helper. Và thành phần động sẽ được xử lý qua controller.
hình ảnh minh họa


Để hiểu rõ hơn phần này và thành thạo lap trinh web , chúng ta sẽ cùng đi xây dựng một layout trong CakePHP. Chuẩn bị một số file như sau :
  • templates_controller.php nằm trong app/controller/templates.
  • index.ctp và view.ctp nằm trong app/views/templates.
  • common.php nằm trong app/views/helpers.
  • templates.ctp
  • style.css nằm trong  app/webroot/css.
Tạo file app_controller có nội dung:
<?php
  class AppController extends Controller {
  }
?>

Tạo file common.php có nội dung:
<?php
 class CommonHelper extends HtmlHelper {
  // Hàm tạo menu
  function create_menu(){
    $menu  = "<ul>";
    $menu .= "<li>".$this->link("CodeIgniter", array(
                                      "controller"=>"templates",
                                      "action"=>"view",
                                      1))."</li>";
    $menu .= "<li>".$this->link("CakePHP", array(
                                      "controller"=>"templates",
                                      "action"=>"view",
                                       2))."</li>";
    $menu .= "<li>".$this->link("Zend", array(
                                      "controller"=>"templates",
                                      "action"=>"view",
                                      3))."</li>";
    $menu .= "</ul>";
    return $menu;
  }
 
  //Hàm tạo các thành phần cho header và footer
  function general(){
    $data = array(
                    "header" => "thegioiweb.net.vn",
                    "footer" => "Copyright 2015 © | Thế Giới WEB",
                );
    return $data;
    }
?>

Tạo file templates_controller.php có nội dung:

<?php
class TemplatesController extends AppController {
    var $layout = "template"; // load file chứa nội dung layout : views/layouts/template.ctp
    var $helpers = array("Html","Common"); // Thành phần Helper Common được gọi để tạo menu,header,footer trong view
   
    function  index(){
        $this->set('title_for_layout', 'Templates');
        $this->set("content","Thế Giới WEB");
    }
   
    function view($id){
        switch($id){
            case 1 :{
                $this->set('title_for_layout', 'CodeIgniter FrameWork');
                $this->set("content","CodeIgniter FrameWork");
            }
            break;
            case 2 :{
                $this->set('title_for_layout', 'CakePHP FrameWork');
                $this->set("content","CakePHP FrameWork");
            }
            break;
            case 3 :{
                $this->set('title_for_layout', 'Zend Framework');
                $this->set("content","Zend Framework");
            }
            break;
            default :
                $this->set("content","Framwork");
            break;
        }
    }        
}
?>

Tạo file layout template.ctp (app/views/layouts/template.ctp) là layout chứa các phần nội dung cố định và động:
<!DOCTYPE html>
<html>
 <head>
   <meta charset=utf-8" />
   <title><?php echo $title_for_layout;?></title>
   <?php echo $this->Html->css("style"); // link oi file style.css (app/webroot/css/style.css)?>
   <?php $general = $this->Common->general(); // Lấy các giá trị của thành phần tĩnh : header,footer ?>
 </head>
 <body>
   <div id="top">
    <center><h2><?php echo $general['header']; ?></h2></center>
   </div>
   <div id="main">
    <div id="menu">
        <?php echo $this->Common->create_menu(); // goi ham tao menu tu common helper?>
    </div>
    <div id="content">
        <h1><?php echo $content; // Thành phần động ?></h1>
    </div>
   </div>
   <div id="footer">
    <center><?php echo $general['footer'];?></center>
   </div>
 </body>
</html>

Tạo file style.css có nội dung
body {
 margin: auto;
 width: 1000px;
 font-family: Verdana, Geneva, sans-serif;
}
#top {
 float: left;
 width: 1000px;
 height: 100px;
 background-color: #F36;
 color: #FFF;
}
#main {
 float: left;
 width: 1000px;
}
#menu {
 float: left;
 width: 200px;
 background-color: #F96;
}
#menu ul {
 margin: 0px;
}
#menu a {
 color: #FFF;
 font-size: 12px;
}
#content {
 float: left;
 width: 800px;
}
#content h1 {
 font-size: 18px;
 color: #0CF;
 padding-left: 50px;
}
#footer {
 float: left;
 width: 1000px;
 height: 50px;
 background-color: #96C;
 font-size: 12px;
 font-weight: bold;
 color: #FFF;
}

Do sử dụng layout nên khi action index() được gọi , nó sẽ load file index.ctp và tự động nạp file layout vào.

SHARE THIS

0 nhận xét:

Lưu ý: Chỉ thành viên của blog này mới được đăng nhận xét.