【XOOPS 模組開發+佈景設計】 內容目錄 - Index of /

內容目錄 內容目錄

第 0 節 上課之前... 2

課程 0.1：上課的三原則... 2

課程 0.2：一分鐘認識XOOPS... 2

第 1 節 安裝AMP運作環境及相關軟體... 2

課程 1.1：安裝AppServ與phpMyAdmin... 2

課程 1.2：安裝PSPad... 3

課程 1.3：安裝TopStyle Lite ... 3

第 2 節 安裝XOOPS內容管理系統... 3

課程 2.1：安裝XOOPS2 Big5版... 3

第 3 節 在自訂區塊寫程式... 3

課程 3.1：利用自訂區塊來自動分享檔案... 3

課程 3.2：加入簡易計數器... 4

第 4 節 初步建構模組... 4

課程 4.1：XOOPS模組特性... 4

課程 4.2：最簡易的XOOPS模組... 5

課程 4.3：建立資料表（如果需要的話）... 6

第 5 節 後台模組管理介面... 6

課程 5.1：讓站長可以新增資料（表單+新增資料）...6

課程 5.2：讓資料新增到資料庫中... 7

第 6 節 在前端秀出所有資料... 8

課程 6.1：從資料庫讀出資料... 8

課程 6.2：判斷是否有模組管理權限... 9

第 7 節 加入評論功能... 10

課程 7.1：加入評論的前置作業... 10

課程 7.2：加入樣版機制的準備動作... 10

課程 7.3：製作show.php並加入樣版機制... 10

課程 7.4：加入評論機制... 11

第 8 節 加入搜尋功能... 12

課程 8.1：修改搜尋檔... 12

課程 8.2：在xoops_version.php中加入搜尋設定...14

第 9 節 使用語系功能... 14

課程 9.1：後台管理介面的語系... 14

課程 9.2：前端使用者介面的語系... 14

課程 9.3：製作UTF-8中文語系... 14

第 10 節 建立模組區塊... 14

課程 10.1：先加入xoops_version.php的區塊設定... 14

課程 10.2：建立區塊檔案... 15

課程 10.3：建立區塊樣版檔... 15

第 11 節 完成模組區塊... 16

課程 11.1：區塊主函數... 16

課程 11.2：區塊編輯函數... 16

課程 11.3：建立區塊語系檔... 17

課程 11.4：安裝測試區塊... 17

第 12 節 模組偏好設定... 17

課程 12.1：xoops_version.php的模組偏好設定... 17

課程 12.2：加入換頁機制... 18

第 13 節 XOOPS佈景基本架構... 19

課程 13.1：關於佈景... 19

課程 13.2：製作基礎佈景... 20

第 14 節 套用CSS... 20

課程 14.1：讓樣板檔套用CSS... 20

第 15 節 完成前端佈景樣板檔... 20

課程 15.1：將元件文字改成佈景語法... 20

課程 15.2：完成前端佈景樣板檔theme.html... 21

第 16 節 完成後台佈景樣板檔... 21

筆 記 欄 筆 記 欄

課程 16.1：後台佈景樣板檔themeadmin.html... 21

課程 16.2：安裝您的佈景... 21

第 17 節 修改CSS檔... 21

課程 17.1：編輯css/style.css... 21

第 18 節 修改區塊樣板檔... 22

課程 18.1：區塊樣板檔... 22

第 0 第 0 節 節 上課之前 上課之前... ...

課程 0.1課程

0.1

：： 上課的 上課的 三 原則三 原則

1.

學問：要學就要問，所以歡迎發問，不懂就問，逮住機會就 問，有問題或遇到任何無法理解的地方隨時舉手反應。

2.

上課時，若是基本班會假設學員都不懂，若是進階班，則會 假設學員已有一定基礎。

3.

每個整點會下課休息十分鐘，並準時放學。

課程 0.2課程

0.2

：： 一分鐘認識 一分鐘認識

XOOPS XOOPS

4. XOOPS

能做什麼？快速架設互動式網站。

5.

裝

XOOPS

需要什麼條件？有

PHP

和

MySQL

資料庫。

6.

架好的網站有什麼功能？端視裝了哪些「模組」來決定。

7.

可控制某用戶只能用某功能嗎？可！設好「群組」權限即可。

8.

網站外觀要自己設計嗎？有現成佈景可套用，自己設計亦可。

9.

可控制畫面上要呈現出來的內容？可！利用「區塊」管理。

10.模組是放在哪裡呢？「網頁目錄/modules」底下

11.區塊又是放在哪裡？「網頁目錄/modules/blocks」底下 12.佈景是放在哪裡呢？「網頁目錄/themes」底下

13.用戶上傳的檔案在哪？「網頁目錄/uploads」底下 14.哪一個是網站主要設定檔？「網頁目錄/mainfile.php」

15.模組的設定檔為「/modules/模組/xoops_version.php」

16.佈景的主要檔案為「/themes/佈景 theme.html」

第 1 第 1 節 節 安裝 安裝 AMP AMP 運作環境及相關軟體 運作環境及相關軟體

課程 1.1課程

1.1

：： 安裝 安裝

AppServ AppServ

與 與

phpMyAdmin phpMyAdmin

1. AppServ 2.5.5

版(http://www.appservnetwork.com)

2.

安裝安裝

Appserv Appserv

前，記得先關閉前，記得先關閉

skype（如果有裝的話）。 skype

（如果有裝的話）。

3.

安裝過程中安裝過程中

MySQL MySQL

千萬勿選語系，保持為千萬勿選語系，保持為

latin1 latin1

即可。即可。

4.

預設網頁目錄網頁目錄：C:\AppServ\www，裝好後用瀏覽器執行

「http://localhost」或「127.0.0.1」有畫面即完成。

5.

將

phpMyAdmin

複製到

C:\AppServ\www

中，覆蓋舊版。

筆 記 欄 筆 記 欄

1) 第一次登入 phpMyAdmin，帳號為 root，密碼不用填。

2) 請到首頁修改密碼，再以新密碼登入即可。

課程 1.2課程

1.2

：： 安裝 安裝

PSPad PSPad

1.

若有自己熟悉的程式編輯軟體，可自行下載安裝。若無，則 建議安裝

PSPad。

2.

裝好請設定「檢視→行號」及「格式→字型→Fixedsys」。

課程 1.3課程

1.3

：： 安裝 安裝

TopStyle TopStyle

Lite Lite

1. TopStyle Lite 是一套免費的 CSS

編輯器，可和

PSPad

做 完美的結合。

第 2 第 2 節 節 安裝 安裝 XOOPS XOOPS 內容管理系統 內容管理系統

課程 2.1課程

2.1

：： 安裝 安裝

XOOPS2 Big5 XOOPS2 Big5

版 版

1. XOOPS

正體中文延伸計畫： http://xoops.tnc.edu.tw

2. XOOPS

官方網站： http://www.xoops.org

3.

下載

XOOPS 2.2.4 Big5

版，將

xoops-2.2.4-tw- big5.tgz

解壓縮（用

7-zip

解

tgz

檔需解兩次）。

4.

將

html

目錄下下的所有目錄檔案複製到「網頁目錄」中。

5.

若是裝在

Unix-like（如：Linux、FreeBSD）平台，請記得

將

cache、templates_c、uploads、mainfile.php

屬性設 成

777。

6.

連到「http://localhost」或「http://站址」就可以開始安 裝了。

1) 資料庫使用者帳號 ：root 2) 資料庫密碼 ：剛剛設定的密碼

3) 「

「資資料料庫名稱庫名稱」」、以及、以及「「資料表前置字串資料表前置字串 」 」的第一個字的第一個字，， 記得勿用「數字」

記得勿用「數字」，且勿用「保留字」來命名，且勿用「保留字」來命名。。

7.

裝完後將

mainfile.php

改為「唯讀」，並刪除

install

目錄。

8.

請自行安裝所需模組，此部份上課時將不再贅述。

第 3 第 3 節 節 在自訂區塊寫程式 在自訂區塊寫程式

課程 3.1課程

3.1

：： 利用自訂區塊來自動分享檔案 利用自訂區塊來自動分享檔案

1.

先在網頁目錄中建立一個目錄，如：files，並將要下載的檔 案放到該目錄中。

2.

在「管理員選單→區塊→列出所有區塊」新增一個「自訂」

區塊，並貼上教材「自訂區塊：列出資料夾檔案.txt」中的內

筆 記 欄 筆 記 欄

容，其中目錄位置及名稱請自行依實際情況修改。

3.

前後無需 <?PHP 前後無需

<?PHP 或

或 ?>

?>

4.

「內容型態」請選擇「PHP「內容型態」請選擇「

PHP

執行稿」。執行稿」。

5.

延伸思考：如何加入日期？並讓檔案依日期由近至遠排序？

課程 3.2課程

3.2

：： 加入簡易計數器 加入簡易計數器

1.

請先利用

phpMyAdmin

建立一個資料庫，語法詳見教材中 的「page_count的

SQL

語法.txt」。

2.

在「管理員選單→區塊→列出所有區塊」新增一個「自訂」

區塊，並貼上教材「簡易計數器.txt」中的內容，其中資料庫 欄位及名稱請自行依實際情況修改。

1) 在區塊中使用 XOOPS

的資料庫物件：$xoopsDB =&

&

Database::getInstance() Database::getInstance();

2) 執行 sql

語法：$result = $xoopsDB->query

query($sql) ; 3) $xoopsDB-> queryF($sql) 是較寬鬆的執行方法。 queryF 4) 取出資料的方法：$xoopsDB->fetchRow fetchRow($result);

3.

「內容型態」請選擇「PHP「內容型態」請選擇「

PHP

執行稿」。執行稿」。

4.

延伸思考：如何顯示每日平均人次及總人次？

第 第 4 節 4 節 初步建構模組 初步建構模組

課程 4.1課程

4.1

：：

XOOPS XOOPS

模組特性

模組特性

1.

模組一律放在

modules

中，一個目錄就是一個模組。

2.

模組目錄中，一定有的目錄或檔案：

1) language

目錄，用來放置各國語系

2) language/tchinese

目錄，用來放置中文語系

3) language/tchinese/modinfo.php

設定檔中文語系

4) xoops_version.php

設定檔。

3.

模組目錄通常會有的目錄或檔案：

1) images

目錄，用來放圖

2) images/logo.gif

模組圖示，可自訂名稱及檔案格式

4.

如果模組有管理介面，還會有以下目錄或檔案：

1) admin

目錄，管理介面均放在此

2) admin/index.php

管理介面首頁

3) admin/menu.php

管理介面的選單

5.

如果模組有用到樣版，還會有以下目錄或檔案：

1) templates

目錄，用來放模組樣版

2) templates/樣版檔.html

6.

如果模組有用到資料庫，還會有以下目錄或檔案：

筆 記 欄 筆 記 欄

1) sql

目錄，沒強制一定要名為

sql，但通常是如此命名 2) sql/資料表.sql，資料庫的 SQL

檔，檔名可自訂。

7.

如果模組有區塊，還會有以下目錄或檔案：

1) blocks

目錄，用來放置區塊檔案

2) templates/blocks

目錄，用來放置區塊樣版

8.

當然，還有一堆其他的檔案，視模組需求而定。

課程 4.2課程

4.2

：： 最簡易的 最簡易的

XOOPS XOOPS

模組 模組

1.

在

modules

下建立一個名為

my_addrbook

的目錄

2.

建立最基本的

my_addrbook/xoops_version.php xoops_version.php

1 <?php

2 //---基本設定---//

3 $modversion['name'] = _MI_ADDR_MOD_NAME;

4 $modversion['version'] = "1.0";

5 $modversion['description'] = _MI_ADDR_MOD_DESCRIPTION;

6 $modversion['credits'] = _MI_ADDR_MOD_CREDITS;

7 $modversion['license'] = "GPL see LICENSE";

8 $modversion['official'] = 0;

9 $modversion['image'] = "images/logo.png";

10 $modversion['dirname'] = "my_addrbook";

11 $modversion['author'] = _MI_ADDR_AUTHOR_NAME;

12

13 //---使用者主選單設定---//

14 $modversion['hasMain'] = 1;

15

16 //---管理介面設定---//

17 $modversion['hasAdmin'] = 1;

18 $modversion['adminindex'] = "admin/index.php";

19 $modversion['adminmenu'] = "admin/menu.php";

20

21 //---資料表架構---//

22 $modversion['sqlfile']['mysql'] =

"sql/addr_book.sql";

23 $modversion['tables'][0] = "addr_book";

24 ?>

3.

建立模組圖檔

my_addrbook/images/logo.png

4.

建立設定檔的語系檔

my_addrbook/language/tchinese/

modinfo.php

1) 將 xoops_version.php

中的中文抽離到

modinfo.php

2) 語系的定義方法，就是設定 PHP

常數而已，如：

define("_MI_ADDR_MOD_NAME","

define("_MI_ADDR_MOD_NAME","我的通訊錄我的通訊錄");");

5.

第一次完成模組的雛型時，最好就決定是否要有使用者介面 以及管理介面，甚至盡可能的將會用到的資料表生出來。

筆 記 欄 筆 記 欄

1) 建立使用者頁面 index.php index.php

1 <?php

2 include "../../mainfile.php";

3 include XOOPS_ROOT_PATH."/header.php";

4 主內容區

5 include_once XOOPS_ROOT_PATH.'/footer.php';

6 ?>

2) 建立管理頁面 admin/index.php admin/index.php

1 <?php

2 include "../../../include/cp_header.php";

3 xoops_cp_header();

4 主內容區

5 xoops_cp_footer();

6 ?>

3) 建立後台選單 admin/menu.php，兩兩為一組，陣列 admin/menu.php

是固定的，title嗜欲顯示的名稱，link則是連結的檔案。

1 <?php

2 $adminmenu[0]['title'] = _MI_ADDR_ADMENU1;

3 $adminmenu[0]['link'] = "admin/index.php";

4 ?>

4) 將 menu.php

中的中文抽離到

modinfo.php

課程 4.3課程

4.3

：： 建立資料表（如果需要的話） 建立資料表（如果需要的話）

1.

為何要先建立資料表？為了開發方便，模組不用一再重裝。

2.

先利用

phpMyAdmin

建立好所需的資料表。

3.

建好後利用

phpMyAdmin

的「輸出」功能，產生

sql（不壓

縮）到

my_addrbook/sql/xxx.sql

4.

可以裝看看您的模組囉！

第 5 第 5 節 節 後台模組管理介面 後台模組管理介面

課程 5.1課程

5.1

：： 讓站長可以新增資料（表單 讓站長可以新增資料（表單

+ +

新增資料） 新增資料）

1.

為了讓

admin/index.php

可以同時擔負「輸入」、「新增 到資料庫」的動作，通常會利用

switch

來判斷目前該執行的 動作為何。XOOPS常用

op

這個變數來作為動作判斷的變數：

1 <?php

2 /*---引入檔案區---*/

3 include "../../../include/cp_header.php";

4 /*---function區---*/

5

6 /*---執行動作判斷區---*/

7 $op=(empty($_REQUEST['op']))?"":$_REQUEST['op' ];

8 switch($op){

筆 記 欄 筆 記 欄

9 default:

10 $main=addform();

11 break;

12 } 13

14 /*---秀出結果區---*/

15 xoops_cp_header();

16 echo $main;

17 xoops_cp_footer();

18 ?>

2.

當$op還不存在時，我們自訂的預設（default）動作為

addform()，也就是利用 addform()來秀出輸入表單。

1 //輸入表單

2 function addform(){

3 $form="

4 <form action='{$_SERVER['PHP_SELF']}' method='post'>

5 <table>

6 <tr><td>姓名</td><td><input type='text' name='name' size='10'></td></tr>

7 <tr><td>電子郵件</td><td><input type='text' name='email' size='20'></td></tr>

8 <tr><td>電話</td><td><input type='text' name='tel' size='10'></td></tr>

9 <tr><td>地址</td><td><input type='text' name='addr' size='50'></td></tr>

10 <tr><td>備註</td><td><textarea name='note'></textarea></td></tr>

11 <tr><td colspan='2'>

12 <input type='hidden' name='op' value='insert'>

13 <input type='submit' value='儲存'></td></tr>

14 </table>

15 </form>";

16 return $form;

17 }

3.

至此，使用者應可看到登錄用的表單了。

課程 5.2課程

5.2

：： 讓資料新增到資料庫中 讓資料新增到資料庫中

1. addform()裡面有一個 op

值，用來告訴

admin/index.php

進行新增（insert）動作，所以

switch

要多一組對應：

1 //新增資料

2 case "insert":

3 insert_addr_book();

4 header("location: ../index.php");

筆 記 欄 筆 記 欄

5 break;

2. header("location:位置");是用來做程式轉向用的。

3.

對應中呼叫了

insert_addr_book()，所以，我們自己做一

個

insert_addr_book()用來將資料存入資料庫：

1 function insert_addr_book(){

2 global $xoopsDB;

3 $sql = "insert into ".$xoopsDB-

>prefix("addr_book")."

(name,email,tel,addr,ctime,note)

values('{$_POST['name']}','{$_POST['email']}', '{$_POST['tel']}','{$_POST['addr']}',now(),'{$

_POST['note']}')";

4 $xoopsDB->query($sql) or

redirect_header($_SERVER['PHP_SELF'],3, "無法新 增資料到addr_book中<br>{$sql}");

5 //取得最後新增資料的流水編號 6 $sn=$xoopsDB->getInsertId();

7 return $sn;

8 }

4.

前置字串的資料表：$xoopsDB->prefix

prefix("addr_book") 5.

取得最後新增的編號：$xoopsDB->getInsertId

getInsertId();

第 6 第 6 節 節 在前端秀出所有資料 在前端秀出所有資料

課程 6.1課程

6.1

：： 從資料庫讀出資料 從資料庫讀出資料

1.

我們可以讓

index.php

一起動就去讀出所有資料，也就是直 接去呼叫列出所有資料的函數，如：list_addr_book()，由 於只有一個動作，因此無須用到

switch()。

1 <?php

2 /*---引入檔案區---*/

3 include "../../mainfile.php";

4 /*---function區---*/

5

6 $main=list_addr_book();

7

8 /*---秀出結果區---*/

9 include XOOPS_ROOT_PATH."/header.php";

10 echo $main;

11 include_once XOOPS_ROOT_PATH.'/footer.php';

12 ?>

2.

接著製作

list_addr_book()函數以擷取出資料：

1 //列出所有addr_book資料 2 function list_addr_book(){

3 global $xoopsDB;

4 $sql = "select sn,name,email,tel,addr from

".$xoopsDB->prefix("addr_book")." order by

筆 記 欄 筆 記 欄

name";

5 $result = $xoopsDB->query($sql) or

redirect_header($_SERVER['PHP_SELF'],3, "無法取 得addr_book資料<br>{$sql}");

6 $all="";

7 $i=2;

8 while(list($sn,$name,$email,$tel,$addr) =

$xoopsDB->fetchRow($result)){

9 $style=($i%2)?"odd":"even";

10 $all.="<tr class='{$style}'>

11 <td>{$name}</td>

12 <td>{$email}</td>

13 <td>{$tel}</td>

14 <td>{$addr}</td></tr>";

15 $i++;

16 }

17

18 $data="

19 <table>

20 <tr><th>姓名</th><th>電子郵件</th>

21 <th>電話</th><th>地址</th></tr>

22 $all

23 </table>";

24 return $data;

25 }

3. odd

與

even

是

XOOPS

預設的兩種顏色樣式。

課程 6.2課程

6.2

：： 判斷是否有模組管理權限 判斷是否有模組管理權限

1.

由於輸入介面在後台，因此輸入相當不便，可以做一個連結 直接連到後台的輸入介面，但只針對有管理權者開放：

1 //管理工具

2 function admin_tool(){

3 global $xoopsModule,$xoopsUser;

4 if ($xoopsUser) {

5 $module_id = $xoopsModule->getVar('mid');

6 $isAdmin=$xoopsUser->isAdmin($module_id);

7 if($isAdmin)$toolbar="<a href='admin/index.php'>新增資料</a>";

8 return $toolbar;

9 }

10 }

2.

將該工具也一併輸出到使用者介面：

echo admin_tool().$main;

筆 記 欄 筆 記 欄

第 7 第 7 節 節 加入評論功 加入評論功能 能

課程 7.1課程

7.1

：： 加入評論的前置作業 加入評論的前置作業

1.

要加入評論功能，必須讓該頁面網址要有「唯一編號」，而 且要有使用樣版。

2.

修改

index.php，讓列表中點選姓名可連到新的一頁：

1 while(list($sn,$name,$email,$tel,$addr) =

$xoopsDB->fetchRow($result)){

2 $style=($i%2)?"odd":"even";

3 $all.="<tr class='{$style}'>

4 <td><a href='show.php?sn={$sn}'>{$name}</a>

</td>

5 <td>{$email}</td>

6 <td>{$tel}</td>

7 <td>{$addr}</td></tr>";

8 $i++;

9 }

課程 7.2課程

7.2

：： 加入樣版機制的準備動作 加入樣版機制的準備動作

1.

在

xoops_version.php

中加入，索引從索引從

1 1

開始：開始

1 $modversion['templates'][1]['file'] = 'show_tpl.html';

2 $modversion['templates'][1]['description'] = _MI_ADDR_TEMPLATE_DESC1;

2.

建立

templates/show_tpl.html show_tpl.html，該檔內容一行即可：

<{$content}>

3.

在

language/tchionese/modinfo.php

加入新增的語系。

課程 7.3課程

7.3

：： 製作 製作

show.php show.php

並加入樣版機制 並加入樣版機制

1. show.php

的基本頁面（套用樣版）為：

1 <?php

2 /*---引入檔案區---*/

3 include "../../mainfile.php";

4 $xoopsOption['template_main'] =

"show_tpl.html";

5 /*---function區---*/

6

7 /*---秀出結果區---*/

8 include XOOPS_ROOT_PATH."/header.php";

9 $xoopsTpl->assign( "content" , $main) ; 10 include_once XOOPS_ROOT_PATH.'/footer.php';

11 ?>

2.

製作

show.php

功能，亦即利用編號找出該姓名的詳細資料：

1 //列出所有addr_book資料 2 function show_one(){

筆 記 欄 筆 記 欄

3 global $xoopsDB;

4 $sql = "select

sn,name,email,tel,addr,ctime,note from

".$xoopsDB->prefix("addr_book")." where sn='{$_GET['sn']}'";

5 $result = $xoopsDB->query($sql) or

redirect_header($_SERVER['PHP_SELF'],3, "無法取 得addr_book資料<br>{$sql}");

6

7 list($sn,$name,$email,$tel,$addr,$ctime,

$note) = $xoopsDB->fetchRow($result);

8

9 $data="

10 <a href='index.php'>回列表</a>

11 <table>

12 <tr class='even'><th>編號</th>

13 <td>{$sn}</td></tr>

14 <tr class='odd'><th>姓名</th>

15 <td>{$name}</td></tr>

16 <tr class='even'><th>電子郵件</th>

17 <td>{$email}</td>

18 <tr class='odd'><th>電話</th>

19 <td>{$tel}</td></tr>

20 <tr class='even'><th>地址</th>

21 <td>{$addr}</td></tr>

22 <tr class='odd'><th>備註</th>

23 <td>{$note}</td></tr>

24 </table>";

25 return $data;

26 } 27

28 $main=show_one();

課程 7.4課程

7.4

：： 加入評論機制 加入評論機制

1.

要用評論功能，必須在

xoops_version.php

加入一組設定：

1 //---評論設定---//

2 $modversion['hasComments'] = 1;

3 $modversion['comments']['pageName'] = 'show.php';

4 $modversion['comments']['itemName'] = 'sn';

2.

接著把「[07] 加入評論功能\評論檔」中的五個檔案複製到

my_addrbook

中。

3.

在

show.php

的下方

include....foot.php

前加入一行：

1 /*---秀出結果區---*/

2 include XOOPS_ROOT_PATH."/header.php";

3 $xoopsTpl->assign( "content" , $main) ; 4 include_once

XOOPS_ROOT_PATH.'/include/comment_view.php';

筆 記 欄 筆 記 欄

5 include_once XOOPS_ROOT_PATH.'/footer.php';

4.

接著開啟教材中的「要加入樣版檔的語法要加入樣版檔的語法.txt

.txt」，複製裡面

的語法到

show.php

的樣版檔

show_tpl.html

中：

1 <{$content}>

2

3 <div style="text-align: center; padding: 3px;

margin: 3px;">

4 <{$commentsnav}>

5 <{$lang_notice}>

6 </div>

7

8 <div style="margin: 3px; padding: 3px;">

9 <!-- start comments loop -->

10 <{if $comment_mode == "flat"}>

11 <{include

file="db:system_comments_flat.html"}>

12 <{elseif $comment_mode == "thread"}>

13 <{include

file="db:system_comments_thread.html"}>

14 <{elseif $comment_mode == "nest"}>

15 <{include

file="db:system_comments_nest.html"}>

16 <{/if}>

17 <!-- end comments loop -->

18 </div>

19 <{include

file='db:system_notification_select.html'}>

5.

「管理員選單→模組→管理區」，更新您的模組（為了重讀更新您的模組（為了重讀 樣版及樣版及設定檔設定檔）），就大功告成囉！

第 8 第 8 節 節 加入搜尋功能 加入搜尋功能

課程 8.1課程

8.1

：： 修改搜尋檔 修改搜尋檔

1.

建立

include

目錄，並將「[08] 加入搜尋功能」中的

search.php

複製到

include

中，隨後修改之。

2.

「搜尋函數名稱」請自訂一個，如：addrbook_search

1) 「欲搜尋的資料表名稱」：addr_book

2) 「主鍵」（主索引，流水號的那一欄）：sn 3) 「標題欄位」：name

及

email

4) 「發佈者 uid

編號欄位」：無

5) 「發佈時間欄位」：ctime 6) 「搜尋欄位一」：name（姓名）

7) 「搜尋欄位二」：addr（地址）

8) 「搜尋欄位三」：note（備註）

筆 記 欄 筆 記 欄

9) 「搜尋條件」：1（沒有就寫 1，恆成立之意）

10) 「排序欄位」：name（姓名）

1 <?php

2 function addrbook_search($queryarray, $andor,

$limit, $offset, $userid){

3 global $xoopsDB;

4 $sql = "SELECT sn,name,email,ctime FROM

".$xoopsDB->prefix("addr_book")." WHERE 1";

5 if ( $userid != 0 ) {

6 $sql .= " AND uid=".$userid." ";

7 }

8 if ( is_array($queryarray) && $count = count($queryarray) ) {

9 $sql .= " AND ((name LIKE '%$queryarray[0]%' OR addr LIKE '%$queryarray[0]%' OR note LIKE '%$queryarray[0]%')";

10 for($i=1;$i<$count;$i++){

11 $sql .= " $andor ";

12 $sql .= "( name LIKE '%$queryarray[$i]%' OR addr LIKE '%$queryarray[$i]%' OR note LIKE '%$queryarray[$i]%')";

13 }

14 $sql .= ") ";

15 }

16 $sql .= "ORDER BY name DESC";

17 $result = $xoopsDB-

>query($sql,$limit,$offset);

18 $ret = array();

19 $i = 0;

20 while($myrow = $xoopsDB-

>fetchArray($result)){

21 $ret[$i]['image'] = "images/addr.gif";

22 $ret[$i]['link'] =

"show.php?sn=".$myrow['sn']."";

23 $ret[$i]['title'] =

$myrow['name']."({$myrow['email']})";

24 $ret[$i]['time'] = $myrow['ctime'];

25 //$ret[$i]['uid'] = $myrow['發佈者編號'];

26 $i++;

27 }

28 return $ret;

29 } 30 ?>

3.

選一個小圖放到

images

並命名為

addr.gif。 addr.gif

筆 記 欄 筆 記 欄

課程 8.2課程

8.2

：： 在 在

xoops_version.php xoops_version.php

中加入搜尋設定 中加入搜尋設定

1.

在

xoops_version.php

中加入搜尋檔的位置以及函數名稱：

1 //---搜尋設定---//

2 $modversion['hasSearch'] = 1;

3 $modversion['search']['file'] =

"include/search.php";

4 $modversion['search']['func'] =

"addrbook_search";

2.

「管理員選單→模組→管理區」，更新您的模組（為了重讀更新您的模組（為了重讀 設定檔

設定檔）），就大功告成囉！

第 9 第 9 節 節 使用語系功能 使用語系功能

課程 9.1課程

9.1

：： 後台管理介面的語系 後台管理介面的語系

1.

將

admin admin

目錄裡的所有檔案目錄裡的所有檔案（menu.php除外），有中文 的部份都抽出來放到

language/tchinese/admin.php admin.php

中。

2. admin.php

中常數命名通常為：「_AM_

_AM_模組縮寫_辭意」，

如「姓名」：_AM_ADDR_NAME

_AM_ADDR_NAME。

。

課程 9.2課程

9.2

：： 前端使用者介面的語系 前端使用者介面的語系

1.

將前端所有檔案前端所有檔案（index.php、show.php），有中文的部份 都抽出來放到

language/tchinese/main.php main.php

中。

2. main.php

中常數的命名通常為：「_MD_

_MD_模組縮寫_辭意」，

如「姓名」：_MD_ADDR_NAME

_MD_ADDR_NAME。

課程 9.3課程

9.3

：： 製作 製作

UTF-8 UTF-8

中文語系 中文語系

1.

可用

ConvertZ

來轉換（http://alf-li.pcdiscuss.com）。

2.

先在

language

建立

tchinese_utf8

目錄。

3.

開啟

ConvertZ，點選上方工具列左邊第一個按鈕（純文字檔

案轉換）。

4.

選擇來源（C:/Appserv/www/modules/my_addrbook/

language/tchinese）→全部加入→「Big5 UTF-8( Big5 UTF-8(

→→ 字形字形 不變)不變

)」→目的地

目的地（tchinese_utf8）→開始轉換！

第 10 第 10 節 建立 節 建立模組 模組區塊 區塊

課程 10.1課程

10.1：

： 先加入 先加入

xoops_version.php xoops_version.php

的區塊設定 的區塊設定

1.

在

xoops_version.php

加入的區塊設定（索引從索引從

1 1

開始）：開始

1 //---區塊設定---//

筆 記 欄 筆 記 欄

2 $modversion['blocks'][1]['file'] =

"addrbook_block1.php";

3 $modversion['blocks'][1]['name'] = _MI_ADDR_BNAME1;

4 $modversion['blocks'][1]['description'] = _MI_ADDR_BDESC1;

5 $modversion['blocks'][1]['show_func'] =

"show_new_addr";

6 $modversion['blocks'][1]['template'] =

"show_new_addr.html";

7 $modversion['blocks'][1]['edit_func'] =

"edit_new_addr";

8 $modversion['blocks'][1]['options'] = "6|

name";

1) 「file」：就是 blocks

底下區塊檔案名稱。

2) 「name」：區塊的標題。

3) 「description」： 區塊的描述。

4) 「show_func」：區塊的主函數

主函數名稱。

5) 「template」：區塊樣版名稱。

6) 「edit_func」：非必需

非必需，區塊的的編輯函數編輯函數名稱。

7) 「options」：非必需

非必需，和

edit_func 搭配使用，及區塊

的設定項目值，選項數目不限，只要用「只要用「

| |」隔開即可

」隔開即可。

2.

記得將區塊設定記得將區塊設定裡面的常數加到裡面的常數加到

modinfo.php modinfo.php

系檔中。系檔中。

課程 10.2課程

10.2

：： 建立區塊檔案 建立區塊檔案

1.

建立

blocks

目錄，並依照

xoops_version.php

中

$modversion['blocks'][1]['file']的設定值來建立檔案，如：

addrbook_block1.php，內容包括主函數

主函數和編輯函數編輯函數：

1 <?php

2 //區塊主函式

3 function show_new_addr($options){

4 $block="";

5 return $block;

6 } 7

8 //區塊編輯函式

9 function edit_new_addr($options){

10 $form="";

11 return $form;

12 } 13 ?>

課程 10.3課程

10.3

：： 建立區塊樣版檔 建立區塊樣版檔

1.

在

templates

底下建立

blocks

目錄，並依照

筆 記 欄 筆 記 欄

xoops_version.php

中$modversion['blocks'][1]

['template']的值來建立檔案，如：show_new_addr.html 2. show_new_addr.html

區塊樣版檔的內容暫時一行即可：

<{$block}>

第 第 11 11 節 完成模組區塊 節 完成模組區塊

課程 11.1課程

11.1：

： 區塊主函數 區塊主函數

1.

主函數的用途就是輸出區塊內容（$block）到區塊樣版。

1 //區塊主函式

2 function show_new_addr($options){

3 global $xoopsDB;

4 $sql = "select sn,name,tel from ".$xoopsDB-

>prefix("addr_book")." order by {$options[1]}

limit 0,{$options[0]}";

5 $result = $xoopsDB->query($sql);

6 $i=2;

7 $block="<table>";

8 while(list($sn,$name,$tel)=$xoopsDB-

>fetchRow($result)){

9 $style=($i%2)?"odd":"even";

10 $block.="<tr class='{$style}'>

11 <td><a

href='".XOOPS_URL."/modules/my_addrbook/show.p hp?sn={$sn}'>$name</a></td>

12 <td>$tel</td></tr>";

13 $i++;

14 }

15 $block.="</table>";

16 return $block;

17 }

2. $options $options

是區塊的設定值是區塊的設定值，預設值為

xoops_version.php

中的$modversion['blocks'][1]['options']的設定值。若欲 修改其值，則需借助編輯函數編輯函數才行。

課程 11.2課程

11.2：

： 區塊編輯函數 區塊編輯函數

1.

編輯函數的用途就是設計編輯區塊的設定介面，用來修改

$options

的值。

1 //區塊編輯函式

2 function edit_new_addr($options){

3 if($options[1]=="name"){

4 $name_selected="selected";

5 }elseif($options[1]=="email"){

6 $email_selected="selected";

7 }elseif($options[1]=="tel"){

筆 記 欄 筆 記 欄

8 $tel_selected="selected";

9 }elseif($options[1]=="addr"){

10 $addr_selected="selected";

11 }

12 $form="

13 欲顯示的數量

14 <input type='text' name='options[0]' value='{$options[0]}' size=2><br>

15 以哪個欄位來做為排序？

16 <select name='options[1]'>

17 <option value='name' $name_selected>姓名

</option>

18 <option value='email' $email_selected>電子郵 件</option>

19 <option value='tel' $tel_selected>電話

</option>

20 <option value='addr' $addr_selected>地址

</option>

21 </select>

22 ";

23 return $form;

24 }

課程 11.3課程

11.3：

： 建立區塊 建立區塊 語系 語系 檔 檔

1.

在

language/tchinese

底下建立

blocks.php，並將區塊檔

案中所用到的中文抽出。語系前置字串通常為_MB

_MB。

課程 11.4課程

11.4：

： 安裝測試區塊 安裝測試區塊

1.

「管理員選單→模組→管理區」，更新您的模組（為了重讀更新您的模組（為了重讀 區塊設定區塊設定））！

2.

「管理員選單→區塊→列出所有區塊」找到我們自己設計的 區塊，新增之！

第 12 第 12 節 模組偏好設定 節 模組偏好設定

課程 12.1課程

12.1：

：

xoops_version.php xoops_version.php

的模組偏好設定

的模組偏好設定

1.

在

xoops_version.php

加入的模組設定（索引從索引從

1 1

開始）：開始

1 $modversion['config'][1]['name'] = 'show_num';

2 $modversion['config'][1]['title'] = '_MI_ADDR_CONFIG_TITLE';

3 $modversion['config'][1]['description'] = '_MI_ADDR_CONFIG_DESC';

4 $modversion['config'][1]['formtype'] = 'textbox';

筆 記 欄 筆 記 欄

5 $modversion['config'][1]['valuetype'] = 'int';

6 $modversion['config'][1]['default'] = 10;

1) 「name」：設定項名稱，程式引用設定值時會用到。

2) 「title」：設定項標題，注意！常數前後要有引號！

注意！常數前後要有引號！

3) 「description」：設定項描述，常數前後一樣要有引號

常數前後一樣要有引號！！

4) 「formtype」：表單型態，有七種可以用：文字框

（textbox

textbox）、大量文字框（textarea textarea）、下拉選單

（select

select）、複選下拉選單（select_m select_mu ulti lti）、是或否

（yesno

yesno）、單選群組（group group）、複選群組

（group_multi

group_multi）。

5) 「valuetype」：值的類型，可以是：整數（int int）、字

串（text

text）、浮點數（float float）、陣列（array array）。要注

意的是，假如表單型態表單型態是設定成：group_multi

group_multi 、 select_multi

select_multi ，值的類型必須是陣列（array array）才行！

6) 「default」：預設值。

7) 「options」：只有當表單型態

表單型態是設定成

select select

以及

select_multi

select_multi

時才需要這一項，相當於替下拉選單設定 好下拉選項的意思，其寫法如下：

$modversion['config'][1]['options'] = array(

'name'=>'姓名', 'tel'=>'電話');

2.

記得加入新增的兩個語系到記得加入新增的兩個語系到

modinfo.php modinfo.php

語系檔中。語系檔中。

3.

「管理員選單→模組→管理區」，更新您的模組（為了重讀「管理員選單→模組→管理區」，更新您的模組（為了重讀 偏好設定）

偏好設定）！！

4.

「管理員選單→偏好設定→我的通訊錄→模組偏好設定」即「管理員選單→偏好設定→我的通訊錄→模組偏好設定」即 可進行設定。

可進行設定。

課程 12.2課程

12.2：

： 加入 加入 換頁 換頁 機制 機制

1.

將「[12] 模組偏好設定」中的

class

目錄複製到通訊錄模組 中，並於於

main.php

語系加入以下四組語系：

1 define("_MD_PAGE_UP","上一頁");

2 define("_MD_PAGE_DOWN","下一頁");

3 define("_MD_FIRST_PAGE","第一頁");

4 define("_MD_LAST_PAGE","最後頁");

2.

修改前端介面

index.php

的

list_addr_book()函數：

1 //列出所有addr_book資料 2 function list_addr_book(){

3 global $xoopsDB,$xoopsModuleConfig;

4 $sql = "select sn,name,email,tel,addr from

".$xoopsDB->prefix("addr_book")." order by name";

5

筆 記 欄 筆 記 欄

6 //PageBar(資料數, 每頁顯示幾筆資料, 最多顯示幾頁);

7 $result = $xoopsDB->query($sql) or redirect_header($_SERVER['PHP_SELF'],3, _MD_ADDR_CANT_GET."<br>{$sql}");

8 $total=$xoopsDB->getRowsNum($result);

9

10 $navbar = new PageBar($total, 20, 10);

11 $mybar = $navbar->makeBar();

12 $bar=

sprintf(_MD_PAGE_BAR,$mybar['total'],$mybar['c urrent'],$mybar['left'].$mybar['center'].$myba r['right']);

13 $sql.=$mybar['sql'];

14

15 $result = $xoopsDB->query($sql) or redirect_header($_SERVER['PHP_SELF'],3, _MD_ADDR_CANT_GET."<br>{$sql}");

16 $all="";

17 $i=2;

18 while(list($sn,$name,$email,$tel,$addr) =

$xoopsDB->fetchRow($result)){

19 ...略...

20 }

21

22 $data="

23 <table>

24 ...略...

25 </table>

26 $bar";

27 return $data;

28 }

3.

我們希望利用偏好設定來控制每頁顯示的資料數量，所以將

「$navbar = new PageBar($total, 20, 10);」改成：

$navbar = new PageBar($total, $xoopsModuleConfig ['show_num'], 10);

4.

至此大功告成！

第 13 第 13 節 XOOPS 節 XOOPS 佈景基本架構 佈景基本架構

課程 13.1課程

13.1：

： 關於佈景 關於佈景

1.

佈景目錄一律放在

themes

中，每一個目錄就是一個佈景。

2.

佈景目錄中一定會有：theme.html（前端的畫面樣板）。

3. XOOPS2.2

多出來的功能：

1) themeadmin.html（後台管理介面樣板）

2) 佈景語系功能

筆 記 欄 筆 記 欄

課程 13.2課程

13.2：

： 製作基礎佈景 製作基礎佈景

1.

請在

themes

底下建立一個

my_theme

目錄。

2.

利用您熟悉的網頁編輯工具，編輯一個

theme.html

檔，並 存於

my_theme

中。theme.html中可包含以下元件：

1) 「左邊區塊」：放在版面左邊的區塊其顯示之位置。

2) 「中間區塊」：放在版面中間的區塊其顯示之位置。

3) 「中間左邊區塊」：放在版面中間左邊的區塊其顯示位置。

4) 「中間右邊區塊」：放在版面中間右邊的區塊其顯示位置。

5) 「右邊區塊」：放在版面右邊的區塊其顯示之位置。

6) 「主要內容區」：秀出某模組的主畫面。

7) 「頁尾區」：此區會出現 XOOPS2

的版權宣告。

8) 「導覽列」：非必須。

9) 「廣告區」：非必須。

3.

以上所有元件並沒有規定一定非得放在哪裡不可並沒有規定一定非得放在哪裡不可。

4.

區塊若是放在儲存格中的話，建議儲存格別設高度，此外，

記得設定「垂直對齊垂直對齊」要對齊頂端頂端。

5.

圖片建議放在「themes/佈景目錄/images」中。

第 14 第 14 節 套用 節 套用 CSS CSS

課程 14.1課程

14.1：

： 讓樣板檔套用 讓樣板檔套用

CSS CSS

1.

在

theme.html

中各個元件的儲存格<td>設定其

id

值，以 便未來套用

CSS

設定：

1) 「左邊區塊」儲存格： id="leftcolumn"

2) 「中間區塊」儲存格： id="centerCcolumn"

3) 「中間左邊區塊」儲存格： id="centerLcolumn"

4) 「中間右邊區塊」儲存格： id="centerRcolumn"

5) 「右邊區塊」儲存格： id="rightcolumn"

6) 「主要內容區」儲存格： id="content"

7) 「頁尾區」儲存格： id="footerbar"

8) 「導覽列」儲存格： id="headerbar"

9) 「廣告區」儲存格： id="headerbanner"

第 15 第 15 節 完成前端佈景樣板檔 節 完成前端佈景樣板檔

課程 15.1課程

15.1：

： 將元件文字改成佈景語法 將元件文字改成佈景語法

1.

先把「[15] 完成基本佈景檔/佈景基本目錄」中的五個目錄

（blocks、css 、js、language、navigation）複製到您的 佈景目錄中。

筆 記 欄 筆 記 欄

2.

利用文字編輯器，打開

theme.html，我們開始來將真正的

區塊或相關元件引入。

1) 參考「佈景置換語法.txt」，分別將元件文字，改成佈景

語法，如「主要內容區」改成<{$xoops_contents}>

2) 修改圖檔路徑：把「images/圖檔」都改成

「<{$xoops_imageurl}>

<{$xoops_imageurl}>images/圖檔」。

3) 把「佈景目錄」這四個字改為實際目錄名稱

4) 做完後另存一份為 themeadmin.html，亦即後台管理介

面的佈景樣板檔。

課程 15.2課程

15.2：

： 完成前端佈景樣板檔 完成前端佈景樣板檔

theme.html theme.html

1.

打開「前端佈景檔頭.txt」，將其內容貼到

theme.html

的<

/head>以前，並覆蓋原內容。

2.

打開「前端佈景檔尾.txt」，將其內容貼到

theme.html

的<

/html>以後。

第 16 第 16 節 完成後台佈景樣板檔 節 完成後台佈景樣板檔

課程 16.1課程

16.1：

： 後台 後台 佈景 佈景 樣板檔 樣板檔

themeadmin.html themeadmin.html

1.

打開「後台佈景檔頭.txt」，將其內容貼到

themeadmin.html

的</head>以前，並覆蓋原內容。

2.

打開「後台佈景檔尾.txt」，將其內容貼到

themeadmin.html

的</html>以後。

3.

記得把導覽列換成後端用的導覽列，打開「後台導覽列.txt」

將該語法貼到原放置前端導覽列的地方。

課程 16.2課程

16.2

：： 安裝您的佈景 安裝您的佈景

1.

「管理員選單→偏好設定→系統→一般設定」進行佈景安裝

1) 「預設版面風格」：選擇您做的佈景

2) 「要由版面風格→您的版面風格→樣版目錄中來更新模組

樣版.html檔嗎?」選「是」。

3) 「可選用的版面風格」：使用者可套用的佈景，一定要包

含「預設版面風格」所用的佈景。

第 17 第 17 節 修改 節 修改 CSS CSS 檔 檔

課程 17.1課程

17.1：

： 編輯 編輯

css/style.css css/style.css

1.

依據您的需求去修改

style.css

檔。

2.

建議使用

FireFox，並安裝 Web Developer，可快速查出某

筆 記 欄 筆 記 欄

元件所使用的

CSS

為何。

1) 到 http://moztw.org

下載

FireFox

2) 到「第二屆 Top 15 擴充套件票選」來安裝 Web Developer。

第 第 18 18 節 修改區塊樣板檔 節 修改區塊樣板檔

課程 18.1課程

18.1：

： 區塊樣板檔 區塊樣板檔

1.

區塊樣板檔均放置在

blocks

中

1) 左邊區塊樣版檔：theme_blockleft.html

2) 中央左邊區塊樣版檔：theme_blockcenter_l.html 3) 中央區塊樣版檔：theme_blockcenter_c.html 4) 中央右邊區塊樣版檔：theme_blockcenter_r.html 5) 右邊區塊樣版檔：theme_blockright.html

2.

以左邊區塊

theme_blockleft.html

為例：

1 <div class="blockTitle">

2 <img src="<{$xoops_imageurl}>images/ice.gif"

align="absmiddle" hspace=3>

3 <{$block.title}>

4 </div>

5 <div

class="blockContent"><{$block.content}></div>

筆 記 欄 筆 記 欄