iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 10
1
自我挑戰組

網頁設計:前端設計+後端基礎建構系列 第 10

[DAY10]學習Smarty套件應用

開始

先說抱歉,前幾天太混了,因為有很多事情在RUN(聽起來是藉口),目前的話因為我覺得該要做出一點前端的框架才好去塞我後端的資料,不然我也是沒有頭緒,所以我就用了我在課堂聽到的Smarty套件,今天我要了解這套件怎麼使用。

Smarty安裝

首先去Smarty官網下載套件,他是一個資料夾,裡面有個libs資料夾,這是Smarty的套件引擎,將他複製到你的專案資料夾。
如下圖:

接下來找一下demo資料夾。

能夠執行Smarty的環境就這demo資料夾的樣子

將demo的東西全部複製到你的專案資料夾,大致情況是這樣

接下來要看index.php的設置,大致是要把Smarty引擎引進來。

<?php
     ini_set("display_errors", "On");
     require_once "./libs/Smarty.class.php";
     $smarty = new Smarty();
     $smarty->assign("title", "測試用的網頁標題");
    $smarty->assign("content", "測試用的網頁內容");
// 上面兩行也可以用這行代替
// $tpl->assign(array("title" => "測試用的網頁標題", "content" => "測試用的網頁內容"));
$smarty->display('index.html');
 ?>

smarty就是把一個頁面的PHP跟HTML分開寫,然後再透過smarty引擎將兩個融合成可以運作的網頁。

再來看template/的index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{$title}</title>
</head>
<body>
{$content}
</body>
</html>

{$title}跟{$content}就是PHP要顯示在index.html的資料,index.php的兩個設定:

    $smarty->assign("title", "測試用的網頁標題");
    $smarty->assign("content", "測試用的網頁內容");
    $smarty->display('index.html');

這就是Smarty套件的運作模式,PHP語法用{$content}的方式顯示在前端網頁上,目前我現在要做的就是將Smarty應用到我的購物網站上,我要測試的是建立出一個購物網站的前端,然後將我已經做好的後端內容用Smarty結合起來。

結尾

目前已經會基本的Smarty應用了,也許我現在要做的是建立一個前端網頁的框架。但因為這是課程的期末報告,所以我想先去讀我課程的範例,將課程的程式碼用XMIND解析出來。


上一篇
[DAY9]購物網站之產品列表
下一篇
[DAY11]解析購物網站範例
系列文
網頁設計:前端設計+後端基礎建構24
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言