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

CakePHP Framework: Kỹ thuật sử dụng layout... 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

Trang 1

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

Trang 2

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 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 CakePHP

FrameWork , ta phân tích các thành phần cố định và thành phần động :

Trang 3

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 Framework như sau

:

+ app/ :

-app_controller.php

+ app/controllers/templates/ :

-templates_controller.php (Controller chính để load layout)

Trang 4

+ 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 <?php

2 class AppController extends Controller {

3 }

4 ?>

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

01 <?php

Trang 5

02 class CommonHelper extends HtmlHelper {

03 // Hàm tạo menu

04 function create_menu(){

05 $menu = "<ul>";

06 $menu = "<li>".$this->link("CodeIgniter", array(

07 "controller"=>"templates",

08 "action"=>"view",

09 1))."</li>";

10

$menu = "<li>".$this->link("CakePHP",

array(

13 2))."</li>";

14

$menu = "<li>".$this->link("Zend",

array(

Trang 6

17 3))."</li>";

18 $menu = "</ul>";

19 return $menu;

20 }

21

22 //Hàm tạo các thành phần cho header và footer

23 function general(){

24 $data = array(

25 "header" => "QHOnline.info",

27 );

28

return

$data;

29 }

30 ?>

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

01 <?php

Trang 7

02 class TemplatesController extends AppController {

03

var $layout = "template"; // load file chứa nội dung layout : views/layouts/template.ctp

04

var $helpers = array("Html","Common"); // Thành phần Helper Common được gọi để tạo menu,header,footer trong view

05

06 function index(){

07 $this->set('title_for_layout', 'Templates By QHOTeam');

08 $this->set("content","QHO Team");

09 }

10

11 function view($id){

12 switch($id){

13 case 1 :{

14 $this->set('title_for_layout', 'CodeIgniter FrameWork');

15 $this->set("content","CodeIgniter FrameWork");

16 }

Trang 8

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 }

Trang 9

33

34

35 }

36 ?>

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…

01

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

02 <html xmlns="http://www.w3.org/1999/xhtml">

03 <head>

04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

05 <title><?php echo $title_for_layout;?></title>

06

<?php echo $this->Html->css("style"); // link oi file style.css

(app/webroot/css/style.css)?>

07 <?php $general = $this->Common->general(); // Lấy các giá trị của thành

Trang 10

phần tĩnh : header,footer ?>

08 </head>

09 <body>

10 <div id="top">

11 <center><h2><?php echo $general['header']; ?></h2></center>

12 </div>

13 <div id="main">

14 <div id="menu">

15

<?php echo $this->Common->create_menu(); // goi ham tao menu tu common helper?>

16 </div>

17 <div id="content">

18 <h1><?php echo $content; // Thành phần động ?></h1>

19 </div>

20 </div>

21 <div id="footer">

22 <center><?php echo $general['footer'];?></center>

Trang 11

23 </div>

24 </body>

25 </html>

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 {

Trang 12

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 }

29

#content

{

Trang 13

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;

Trang 14

46 }

Hình mô ta khi file template.ctp sử dụng file helper Common.php (click vào hình để xem hình lớn)

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 ,

Trang 15

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 (Click vào hình để xem hình lớn)

Chạy thử ứng dụng :

http://localhost/cakephp/templates

Khi click vào link của Menu : http://localhost/cakephp/templates/view/1

Định dạng
Số trang	16
Dung lượng	336,32 KB