Thứ Bảy, 6 tháng 8, 2011

Sử dụng layout trong CakePHP

Khi sử dụng Framework để lập trình , có rất nhiều vấn đề mà người lập trình viên cần phải quan tâm . Trong đó có phần xử lý dao diện là một phần không thể thiếu . Trong bài viết này , mình sẽ hướng dẫn các bạn làm sao sử dụng layout trong CakePHP Khi ta viết một ứng dụng cho CakePHP . mặc định CakePHP đã hổ trợ cho chúng ta dao diện sẵn . Nhưng đôi khi tùy theo sở thích, nhu cầu , xu hướng … nên bắt buộc người thiết kế cũng như người lập trình cần có những giao diện (layout) cho riêng mình. Bài viết sẽ hướng dẫn cách chúng ta tạo 1 layout cho riêng mình và cách áp dụng 1 Helper CakePHP vào ứng dụng của mình. Khi phân tích 1 trang web , nhìn chung ta thấy gồm các phần chính như sau : null


Để vận dụng được sự hổ trợ mạnh mẽ chắc năng load layout của FrameWork CakePHP , ta phân tích các thành phần cố định và thành phần động : null


Như vậy ta để tránh việc xử lý các thành phần cố định ở controller ta chỉ cần viết 1 class Hepler để hiển thị nó . Còn thành phần động sẽ được xử lý thông qua Controllers. Cái file cần chuẩn bị trong Tutorial Layout CakePHP như sau :


 app/controllers/templates/ : -templates_controller.php (Controller chính để load layout)


 app/views/templates/ :


- index.ctp


- view.ctp


app/views/helpers/ :


- common.php (Tạo các thành phần cố định : menu , header,footer)


 app/views/layouts/ :


- template.ctp (File chứa nội dung layout)


 app/webroot/css/ :


- style.css (file CSS của layout)



Tạo file common.php (app/views/helpers/)


[php]


<?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;
}

[/php]

//Hàm tạo các thành phần cho header và footer
function general(){
$data = array(
"header" => "QHOnline.info",
"footer" => "Copyright 2011 © | QHTeam",
);
return $data;
}
?>


Tạo file templates_controller.php (app/controllers/templates/) :


<?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 By QHOTeam');
$this->set("content","QHO Team");
}

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) : File này chứa nội dung layout bao gồm các thành phần cố định và thành phần động như ban đầu mô tả. Nội dung file này gồm mã HTML và PHP…


<!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_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 (app/webroot/css/style.css)



Hình mô ta khi file template.ctp sử dụng file helper Common.phpbody {
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;
}

Hình mô ta khi file template.ctp sử dụng file helper Common.php
null

Như thường lệ , khi tạo 1 fuction cho 1 Controller , thì ta phải tạo file view tương ứng để hiển thị nội dung trong file view đó.Trong ví dụ này ta có Controller Templates với 2 function là index() và view(), cần phải có 2 file view là : index.ctp và view.ctp để hiển thị nội dung tương ứng.

Tuy nhiên chúng ta đang sử dụng layout template.ctp (app/views/layouts/template.ctp) ,nên chỉ cần tạo 2 file index.ctp và view.ctp ,nội dung của 2 file này các bạn bỏ trống. Ví dụ function index() được gọi , nó sẽ load file index.ctp và tự động nạp file layout vào (app/views/layouts/templates.ctp).

Hình mô tả khi file view load file template.ctp

null

Chạy thử ứng dụng :
http://localhost/cakephp/templates
null
null
Khi click vào link của Menu : http://localhost/cakephp/templates/view/1
null

5 nhận xét:

  1. Sao bạn ko dùng Elements mà lại dùng Helpers?

    Trả lờiXóa
  2. Nói chung CakePHP rất tuyệt khi tạo các ứng dụng cỡ vừa. Tốc độ phát triển khỏi phải nói.

    Trả lờiXóa
  3. bạn ơi, mình làm theo hướng dẫn của bạn mà nó toàn báo lỗi, mình đã tạo class CommonHelper này rồi, nằm trong file Common.php rồi mà.


    The helper class CommonHelper can not be found or does not exist.

    Trả lờiXóa
  4. giup e voi. em lam theo nhung gap loi nay

    Error: The requested address '/templates' was not found on this server.

    Trả lờiXóa