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 :
Tạo file app_controller có nội dung:
- 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.
<?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.
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.