04. 樣版引擎- Smarty

Transcript 04. 樣版引擎- Smarty

樣版引擎教學 – Smarty
IDIC
程式開發與介面設計的衝突
• 一般程式開發的方式
o 將 Server端的程式 (例如：PHP) 與 Client 端的 HTML
介面混在一起寫
<!DOCTYPE html>
<html>
<body>
<form>
<input type="checkbox" name=“<?php echo $bike ?>" value="Bike">
I have a bike<br>
<input type="checkbox" name="vehicle" value="=“<?php echo $Car?>">
I have a car
</form>
</body>
</html>
o 可能會導致整個程式看起來很複雜
o 程式與介面無法同時開發
樣版引擎
• 目的
• 將PHP(程式邏輯)和HTML(使用者介面)分離，讓兩
者不會互相干擾。
• 適合業界程式設計人員和美工設計人員分工。
<!DOCTYPE html>
<html>
<body>
<form>
<input type="checkbox"
name=“bike “
value="<?php echo $bike ?>">
I have a bike<br>
<input type="checkbox"
name="vehicle"
value="<?php echo $Car?>">
I have a car
</form>
</body>
</html>
html
<?php
echo $bike
echo $car
?>
<!DOCTYPE html>
<html>
<body>
<form>
<input type=“checkbox”
name=“bike “
value=“樣版引擎變數">
I have a bike<br>
<input type="checkbox"
name="vehicle"
value=“樣版引擎變數">
I have a car
</form>
</body>
</html>
樣版引擎 - 運作流程
HTML 樣版
<!DOCTYPE html>
<html>
<body>
<form>
<input type=“checkbox”
name=“bike “
value=“樣版引擎變數">
I have a bike<br>
<input type="checkbox"
name="vehicle"
value=“樣版引擎變數">
I have a car
</form>
</body>
</html>
PHP 程式
<?php
echo $bike;
echo $car;
?>
輸出結果
樣版引擎
(自動結合
PHP +
HTML 樣版 )
<!DOCTYPE html>
<html>
<body>
<form>
<input type="checkbox"
name=“bike “
value="<?php echo $bike ?>">
I have a bike<br>
<input type="checkbox"
name="vehicle"
value="<?php echo $Car?>">
I have a car
</form>
</body>
</html>
Smarty
• 以 PHP 所設計的『樣版引擎』(Template Engine)
環境設定
• 安裝
• 下載 http://www.smarty.net/download
• 解壓縮 Smarty 至專案目錄
• 在Linux底下, 將templates_c 權限變更為 777
• 在專案目錄建立 3 個工作目錄
• templates
•
放置樣版檔的目錄
• templates_c
• 放置樣版引擎產生的輸出暫存檔
• cache
• 放置輸出檔的快取檔
資料夾結構範例
/web/exampleProject/
guestbook/
templates/
index.tpl
templates_c/
cache/
htdocs/
index.php
建立 Smarty 樣版
•
樣版副檔名.tpl
•
Smarty 基本的運作方式就是『代換』
• 在樣版(tpl檔)預留位置放置樣版變數
• PHP 程式將輸出內容指定到樣版變數
•
樣版變數語法：{$template_var}
• template_var是樣版變數名稱
• {}是樣版標籤 (Smarty template tag)
• 可自行定義成別的標籤
•
樣版檔需儲存於先前所建立的 templates 資料夾
Smarty - 樣版範例
<html>
<head>
<title><{$title}></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div><{$text}></div>
</body>
</html>
PHP 使用 Smarty 物件範例
<?php
// 引用 Smarty lib
require_once ‘libs/Smarty.class.php’;
//建立 Smarty 物件
$smarty = new Smarty();
//指定 Smarty 的工作資料夾路徑
$smarty->template_dir = "templates/";
$smarty->compile_dir = "templates_c/";
//定義樣版變數的左右標籤
$smarty >left_delimiter = ‘<{’;
$smarty->right_delimiter = ‘}>’;
//是否開啟 debug 模式
$smarty->debugging = true;
//指定 Smarty 要傳送的資料
$smarty->assign('title', 'Smarty測試網');
$smarty->assign('text', '樣版變數代換的內容');
//顯示網頁 Smarty 物件的 display 函數會直接將輸出結果 echo 到畫面，可用 $output = $smarty>fetch(‘xxx.tpl’); 只取得輸出結果不 echo 到畫面。
$smarty->display('show.tpl');
?>
使用Smarty – 樣版撰寫
• 樣版撰寫
• 在 tempates/ 下新增一個assign.tpl樣版檔案
• 撰寫HTML畫面
• 使用樣版變數
• <{title}>
• <{content}>
Smarty - 使用單一值變數
• PHP檔案
//透過 assign() 進行樣版變數替換
$title = “Hello Smarty Title”;
$smarty->assign(“title”, $title);
//最後用display() 載入tpl檔案並輸出畫面
$smarty ->display(“assign.tpl”);
• 樣版檔案
<title><{$title}></title>
Smarty - 使用陣列變數
• PHP檔案
$product_list = array(
'index_key_1' => "ASUS WIN8 NB",
'index_key_2' => "ACER UT NB" );
$smarty->assign(“product_list “, $product_list);
$smarty->display(“array.tpl “);
• 樣版檔案(array.tpl)
<{$product_list.index_key_1}>
<{$product_list.index_key_2}>
Smarty - 條件式樣版
• PHP檔案
• $smarty->assign(“connd1”, 2);
• $smarty->display(“array.tpl “);
• 樣版檔案(array.tpl)
• <{ if $connd1 == 1}>
• 執行內容
• <{ elseif $connd1 == 2 }>
• 執行內容
• <{else}>
• 執行內容
• <{/if}>
Smarty - 重覆樣版區塊
• PHP檔案
$smarty->assign('contacts',
array(
array('phone' => '1', 'fax' => '2', 'cell' => '3'),
array('phone' => '555-4444',
'fax' => '555-3333',
'cell' => '760-1234') ));
• 樣版檔案
<{ foreach key=key item=item from=$contacts }>
<{$key}> : <{$item}> </br>
<{foreachelse}>
contacts is empty
<{/foreach}>
PHP 使用 Smarty 技巧─應用類別繼承簡化相關設
定
• 建置KSmarty取代Smarty
<?php
// 引用 Smarty lib
require_once 'Smarty.class.php';
//建立 Smarty 子類別簡化設定。
class KSmarty extends Smarty{
public function __construct($template_path) {
//建構子
parent::__construct(); //呼叫父類別建構子
//指定 Smarty 工作目錄路徑
$this->template_dir = “$template_path";
$this->compile_dir = “./tempates_c/";
$this->config_dir = “./configs/";
•
//定義樣版變數的左右標籤
$this->left_delimiter = ‘<{’;
<?php
$this->right_delimiter = ‘}>’;
require_once 'KSmarty.class.php';
//是否開啟 debug 模式
$template_path = “./templates/”;
$this->debugging = true;
$smarty = new KSmarty($template_path );
}
$smarty->assign('title', 'Smarty測試網');
}
$smarty->assign('text', '樣版變數代換的內容');
?>
$smarty->display('show.tpl');
?>
引用KSmarty範例
PHP 使用 Smarty 技巧
Class Action
ShowInsertPageAction
Controller
index.php
Class View
ShowInsertPage
<?php
require_once “./Ksmarty.php”;
Class booksView{
<?php
class ShowInsertPageAction {
public function actionPerformed($event){
$view = new booksView();
return $view->showInsertPage();
}
}
?>
//顯示新增介面
public function showInsertPage(){
$template_path = “./books/templates/”;
$ksmarty =new Ksmarty($template_path);
$ksmarty->assign(“title”, “Smarty”);
$smarty->display(“insert.tpl”);
}
//顯示修改介面
public function showUpdatePage($id){
……
}
作業- 將底下的功能介面透過 Smarty 產生畫面
會員管理
members
tempates/
Insert.tpl
update.tpl
serach.tpl
銷售單管理
sale_orders
tempates/
Insert.tpl
update.tpl
serach.tpl
書籍管理
books
tempates/
Insert.tpl
update.tpl
serach.tpl
查詢
主畫面
新增
刪除
修改
Click
事件
Click
Click
Click
ShowUpdateListAction
ShowDeleteListAction
ShowInsertPageAction
DoSelectAction
Click
ShowUpdatePageListAction
Click
Click
DoInsertAction
DoDeleteAction
Click
DoUpdateAction

04. 樣版引擎- Smarty

Transcript 04. 樣版引擎- Smarty

Directory