CakePHP Framework: Kỹ thuật sử dụng layout

CakePHP Framework: Kỹ thuật sử dụng layout.Khi ta viết một ứng dụng cho CakePHP Framework. mặc định CakePHP Framework đã 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 Framework 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...
Nội dung trích xuất từ tài liệu:
CakePHP Framework: Kỹ thuật sử dụng layoutCakePHP Framework: Kỹ thuật sử dụng layoutKhi ta viết một ứng dụng cho CakePHP Framework. mặc định CakePHPFramework đã 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ậptrình cần có những giao diện (layout) cho riêng mình. Bài viết sẽ hướng dẫncách chúng ta tạo 1 layout cho riêng mình và cách áp dụng 1 HelperCakePHP Framework 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 :Để vận dụng được sự hổ trợ mạnh mẽ chắc năng load layout của CakePHPFrameWork , ta phân tích các thành phần cố định và thành phần động :Như vậy ta để tránh việc xử lý các thành phần cố định ở controller ta chỉ cầnviết 1 class Hepler để hiển thị nó . Còn thành phần động sẽ được xử lý thôngqua Controllers.Cái file cần chuẩn bị trong Tutorial Layout CakePHP Framework như sau:+ app/ :-app_controller.php+ 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)+- template.ctp (File chứa nội dung layout)+ app/webroot/css/ :- style.css (file CSS của layout)Tạo file app_controller.php (app/)1 Tạo file common.php (app/views/helpers/)01 02 class CommonHelper extends HtmlHelper {03 // Hàm tạo menu04 function create_menu(){05 $menu = ;06 $menu .= .$this->link(CodeIgniter, array(07 controller=>templates,08 action=>view,09 1)).; $menu .= .$this->link(CakePHP,10 array(11 controller=>templates,12 action=>view,13 2)).; $menu .= .$this->link(Zend,14 array(15 controller=>templates,16 action=>view,17 3)).;18 $menu .= ;19 return $menu;20 }2122 //Hàm tạo các thành phần cho header và footer23 function general(){24 $data = array(25 header => QHOnline.info,26 footer => Copyright 2011 © | QHTeam,27 ); return28 $data;29 }30 ?>Tạo file templates_controller.php (app/controllers/templates/) :01 02 class TemplatesController extends AppController { var $layout = template; // load file chứa nội dung layout :03 views/layouts/template.ctp var $helpers = array(Html,Common); // Thành phần Helper04 Common được gọi để tạo menu,header,footer trong view0506 function index(){07 $this->set(title_for_layout, Templates By QHOTeam);08 $this->set(content,QHO Team);09 }1011 function view($id){12 switch($id){13 case 1 :{14 $this->set(title_for_layout, CodeIgniter FrameWork);15 $this->set(content,CodeIgniter FrameWork);16 }17 break;18 case 2 :{19 $this->set(title_for_layout, CakePHP FrameWork);20 $this->set(content,CakePHP FrameWork);21 }22 break;23 case 3 :{24 $this->set(title_for_layout, Zend Framework);25 $this->set(content,Zend Framework);26 }27 break;28 default :29 $this->set(content,Framwork);30 break;31 }32 }333435 }36 ?>Tạo file layout template.ctp (app/views/layouts/template.ctp) : File này chứanộ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… 02 03 04 05 07 phần tĩnh : header,footer ?>08 09 10 11 12 13 14 16 17 1819 20 21 22 23 24 25 Tạo file style.css (app/webroot/css/style.css)01 body {02 margin: auto;03 width: 1000px;04 font-family: Verdana, Geneva, sans-serif;05 }06 #top {07 float: left;08 width: 1000px;09 height: 100px;10 background-color: #F36;11 color: #FFF;12 }13 #main {14 float: left;15 width: 1000px;16 }17 #menu {18 float: left;19 width: 200px;20 background-color: #F96;21 }22 #menu ul {23 margin: 0px;24 }25 #menu a {26 color: #FFF;27 font-size: 12px;28 } #content29 {30 float: left;31 width: 800px;32 }33 #content h1 {34 font-size: 18px;35 color: #0CF;36 padding-left: 50px;37 }38 #footer {39 float: left;40 width: 1000px;41 height: 50px;42 background-color: #96C;43 font-size: 12px;44 font-weight: bold;45 color: #FFF;46 }Hình mô ta khi file ...