Tad 教材網 - 線上書籍

:::

\[1071\]XOOPS模組開發
=================

### 一、 關於本課程

1. 本課程是系列中的第四個學程，屬進階、商業部份，因此，有任何聽不懂的：隨時發問！
2. 上課歡迎起來走動，互相觀摩交流，不需要保持安靜。飲食部份請至走廊食用。
3. 時間為週六9:00～12:00及13:30～16:30，共計九次，其中國定假日、補課會順延兩次。
4. 上課歡迎拍照、錄音、錄影，能和同學分享更好。
5. 座位基本上沒有強制性，但也不建議每次都換來換去。自備筆電更佳！（建議）
6. 社大電腦C磁碟會還原，可在D磁碟安裝常用的可攜式軟體
7. 記得認識一下助教！李佳玲老師、溫孝文主任、張瑛蘭老師
8. 本學期要改寫[ http://street-news.tncomu.tn.edu.tw/](http://street-news.tncomu.tn.edu.tw)
9. 之前專案原始碼：[https://github.com/tad0616/street\_news](https://github.com/tad0616/street_news)
10. 班級FB網址：<https://www.facebook.com/groups/tad1071/>
 
### 二、 這學期會學到...

1. XOOPS：要寫XOOPS模組，當然要熟悉XOOPS的操作方式以及其開發、運作邏輯
2. PHP7：XOOPS是用PHP開發的，所以要寫好模組，PHP能力不可或缺。
3. MySQL：XOOPS資料一律存至資料庫中，也就是SQL資料庫語言。
4. HTML5：用來撰寫模組外觀架構、表單...等，製作樣板不可或缺。
5. CSS3：用來美化模組外觀
6. BootStrap3：快速導入自適應框架，讓您的系統在手機跑看起來也一樣美觀。
7. Smarty2：XOOPS內建樣板引擎，用來製作模組樣板。
8. jQuery：製作友善操作界面不可或缺的javascript框架
 
### 三、 開發工具：可攜式Visual Studio Code編輯器

1. 基本上只要是自己熟悉的純文字或IDE編輯工具都可以。 ```
  <pre class="brush:jscript;gutter:false;">
  "workbench.colorTheme": "Monokai",
  // 控制字型大小 (以像素為單位)。
  "editor.fontSize": 18,
  //  - 'bounded' (當檢視區縮至最小並設定 'editor.wordWrapColumn' 時換行).
  "editor.wordWrap": "on",
  // 使用滑鼠滾輪並按住 Ctrl 時，縮放編輯器的字型
  "editor.mouseWheelZoom": true,
  // 在儲存時設定檔案格式。格式器必須處於可用狀態、檔案不得自動儲存，且編輯器不得關機。
  "files.associations": {
      "*.tpl": "html"
  },
  // 指向 PHP 可執行檔。
  "php.validate.executablePath": "D:/xxx/my_xoops/core/php71/php.exe",
  // 控制是否應在輸入時自動顯示建議
  "editor.quickSuggestions": {
      "other": true,
      "comments": false,
      "strings": true
  },
  ```
2. 本學期採用可攜式Visual Studio Code編輯器（<https://gareth.flowers/vscode-portable/>）請將之裝在D磁碟機。並做好設定，然後安裝以下套件： 
  - (1) phpfmt：格式化PHP程式碼用 ```
      <pre class="brush:jscript;gutter:false;">
      "phpfmt.php_bin": "D:/xxx/my_xoops/core/php71/php.exe",
      "phpfmt.indent_with_space": 4,
      "phpfmt.enable_auto_align": true,
      "phpfmt.visibility_order": true,
      "phpfmt.passes": [],
      "phpfmt.smart_linebreak_after_curly": true,
      // Enable per-language
      "[php]": {
          "editor.formatOnSave": true
      },
      
      ```
  - (2) vscode-goto-documentation：快速文件搜尋
  - (3) AutoFileName : 讓編輯器自動完成圖片或檔案路徑。
  - (4) Auto Rename Tag : 讓成對的標籤自動一起修改。
  - (5) Auto Close Tag : 讓標籤自動閉合的。
  - (6) stylefmt：美化CSS
  - (7) Material Icon Theme：精美的檔案圖示
  - (8) PHP IntelliSense：自動提示已定義的class ```
      <pre class="brush:jscript;gutter:false;">
      // The path to a PHP 7+ executable.
          "php.executablePath": "D:/tad/my_xoops/core/php71/php.exe",
      ```
  - (9) indent-rainbow：以顏色標出縮排
  - (10) HTML CSS Support：CSS提示 ```
      <pre class="brush:jscript;gutter:false;">
      "css.remoteStyleSheets": [
          "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      ],
      "css.fileExtensions": [
          "css",
          "scss",
          "tpl"
      ]
      ```
 
### 四、 開發環境：XOOPS輕鬆架的安裝與設定

1. XOOPS：本學期以XOOPS 2.5.9為主要開發環境。要安裝XOOPS網站，必須有網頁伺服器（如：Apache）、資料庫（如：MySQL或MariaDB）、PHP這些基本環境。
2. XOOPS主機環境的最低需求PHP > 5.3.7（建議為PHP > 5.5），需MySQL資料庫，最低需求MySQL > 5（建議為MySQL > 5.5），資料庫請關閉嚴格模式。
3. 一般開發環境可在windows底下開發，開發完後，再上傳到Linux主機即可。
4. [http://120.115.2.90/modules/tad\_uploader/index.php?of\_cat\_sn=11](http://120.115.2.90/modules/tad_uploader/index.php?of_cat_sn=11)
5. 在Windows下請下載「XOOPS 輕鬆架 20170915 WIN伺服器包（XOOPS2.5.9） 」及「Visual Studio 2015 Visual C++ 可轉散發套件」（Apache無法啟動時安裝）
6. 建議存到D磁碟機，並建立自己的工作目錄，如：D:/tad，目錄名稱千萬不要有中文。
7. 雙擊.exe執行檔，解開後會在指定磁碟機產生一個my\_xoops目錄，執行裡面的start.bat即可安裝或啟動XOOPS。my\_xoops目錄名稱可以自行修改無妨。
8. Mac或Linux用戶，請安裝「XOOPS 輕鬆架 20170913 架站安裝導引檔（XOOPS 2.5.9） 」，或直接安裝官方版的2.5.9。
9. 啟動後，填入想要的資料庫名稱，並設定好管理員資訊即可登入使用。資料庫帳號（一律為root）密碼暫勿變動，等安裝完記得修改資料庫密碼即可。
10. Windows下日後若要手動啟動，可點擊：D:\\xxx\\my\_xoops\\start.bat
11. 網站連結位置：http://電腦IP或<http://localhost>或<http://127.0.0.1>
12. UniForm Server常用目錄及檔案： <table border="1" bordercolor="#000000" cellpadding="4" cellspacing="0" class="table table-bordered table-hover table-condensed" width="100%"> <colgroup> <col width="67*"></col> <col width="189*"></col> </colgroup> <tbody> <tr> <td>網頁目錄
  
   </td> <td>D:\\xxx\\my\_xoops\\www
  
   </td> </tr> <tr> <td>啟動伺服器
  
   </td> <td>D:\\xxx\\my\_xoops\\start.bat
  
   </td> </tr> <tr> <td>伺服器控制台
  
   </td> <td>D:\\xxx\\my\_xoops\\UniController.exe
  
   </td> </tr> <tr> <td>php.ini位置
  
   </td> <td>D:\\xxx\\my\_xoops\\core\\php7x\\php\_production.ini
  
   </td> </tr> <tr> <td>資料庫實體檔案位置
  
   </td> <td>D:\\xxx\\my\_xoops\\core\\mysql\\data
  
   </td> </tr> <tr> <td>使用者設定檔位置
  
   </td> <td>D:\\xxx\\my\_xoops\\home\\us\_config
  
   </td> </tr> <tr> <td>phpMyAdmin位置
  
   </td> <td>http://localhost/us\_opt1/index.php
  
   </td> </tr> <tr> <td>Adminer位置
  
   </td> <td>http://localhost/us\_opt2/index.php
  
   </td> </tr> </tbody> </table>
 
### 五、 下載XOOPS250ModuleConversionFiles

1. [XOOPS250ModuleConversionFiles](https://www.tad0616.net/uploads/tad_book3/file/44/XOOPS250ModuleConversionFiles_20180310.zip)是官方提供的基本模組架構，但下載的版本已經有先經過優化，並加入bootstrap各版本支援，所以，會建議用此版來開發比較容易上手。
2. 一個模組就是一個目錄，此目錄會放在modules底下，請修改目錄名稱，如：snews。完整路徑如：D:\\my\_xoops\\www\\modules\\snews
3. 底下是新的（2.5之後的）XOOPS的模組目錄建議結構（PHP > 5.3）： <table border="1" bordercolor="#000000" cellpadding="2" cellspacing="0" class="table table-bordered table-hover table-condensed" width="100%"> <colgroup> <col width="59*"></col> <col width="197*"></col> </colgroup> <tbody> <tr> <td>admin  
   <u>**blocks**</u>  
   class  
   css  
   docs  
   images  
   |--- admin  
   |--- icons  
   include  
   <u>**language**</u>  
   |--- <u>**english**</u>  
   |--- help  
   sql  
   <u>**templates**</u>  
   |--- <u>**blocks**</u>
  
   </td> <td>模組後台目錄  
   區塊檔案目錄  
   額外的物件庫或函式庫目錄  
   模組樣式目錄  
   說明文件目錄  
   圖檔目錄  
   |--- 後台界面用到的圖檔  
   |--- 其他圖檔  
   引入檔目錄：如搜尋、模組自動檔  
   語系目錄  
   |--- 英語語系（Big5中文為tchinese、UTF-8為tchinese\_utf8）  
   |--- 說明文件語系  
   資料庫結構目錄：裡面會有.sql檔  
   模組樣板目錄：用來放置模組頁面的樣板檔，均為.tpl檔  
   |--- 區塊樣板檔：一樣為.tpl檔
  
   </td> </tr> </tbody> </table>
4. 粗體底線的目錄（如果有用到該功能的話）則是一定要有的，而且不能亂改目錄名稱！
 
### 六、 認識xoops\_version.php

1. XOOPS的模組目錄下一定有xoops\_version.php設定檔，否則就不是標準模組。
2. 請依照設定檔順序，產生相對檔案出來。
3. `$modversion['version']` 版本號寫法：1.0、2.3...均可，但1.0.1需寫成 1.01。
4. `$modversion['module_status']`模組狀態可以是Alpha、Beta、RC、Release
5. `$modversion['adminmenu']`後台選單的圖示為32x32，可從這裡下載：<https://www.flaticon.com/>
6. 利用 <http://apps.pixlr.com/editor/> 可線上編輯按鈕。文件→打開圖片→上傳按鈕底圖。圖層→打開圖像為圖層→上傳小圖示。利用文字工具輸入名稱，新細明體12級
 
### 七、 xoops\_version.php 中的語系

1. `xoops_version.php `若有用到中文的部份，建議做成語系檔。
2. 若只是自用，那直接寫中文亦可（字串一定要加上引號），但「偏好設定」，一定要用語系。
3. `xoops_version.php` 的語系檔一律位於` language/tchinese_utf8/modinfo.php` 中（不可自訂檔案或改檔名）
4. 語系設定方法：` define("_MI_語系名稱" , "對應的實際中文");`
5. 「\_MI\_語系名稱」是PHP常數，`_MI` 則是XOOPS建議的常數開頭，一般而言建議用底線開頭，並全部大寫，以容易識別（但其實無強制性）。
6. 一般 `_MI` 後面會加上模組名稱，以避免常數衝突，例如：` _MI_MYMOD_XXX`
 
### 八、 建構模組所需資料表（mysql.sql檔）

1. 請利用站長工具箱中的資料庫工具（http://網址/modules/tad\_adm/pma.php）
2. 選好資料庫，點選下方「建立資料表」按鈕，建構模組所需的資料表結構。 ```
  <pre class="brush:sql;gutter:false;">
  CREATE TABLE `snews` (
    `sn` smallint(5) unsigned NOT NULL AUTO_INCREMENT COMMENT '流水號',
    `focus` tinyint(2) unsigned NOT NULL COMMENT '精選',
    `topic_sn` tinyint(2) unsigned NOT NULL COMMENT '類別編號',
    `sort` tinyint(5) unsigned NOT NULL COMMENT '排序',
    `title` varchar(300) NOT NULL,
    `content` text NOT NULL,
    `username` varchar(65) NOT NULL,
    `create_time` datetime NOT NULL,
    `update_time` datetime NOT NULL,
    `uid` mediumint(9) unsigned NOT NULL COMMENT '發布者',
    PRIMARY KEY (`sn`)
  ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
  
  CREATE TABLE `snews_topic` (
    `topic_sn` mediumint(9) NOT NULL AUTO_INCREMENT COMMENT '類別編號',
    `topic_title` varchar(255) NOT NULL COMMENT '類別或主題名稱',
    `topic_type` varchar(10) NOT NULL COMMENT '種類',
    `topic_description` text NOT NULL COMMENT '說明',
    `topic_status` enum('投稿中','當期','有效','已關閉') NOT NULL COMMENT '主題狀態',
    `username` varchar(65) NOT NULL COMMENT '建立者',
    `uid` mediumint(9) unsigned NOT NULL COMMENT '建立者',
    PRIMARY KEY (`topic_sn`)
  ) ENGINE=MyISAM DEFAULT CHARSET=utf8;
  ```
3. 接著，利用左邊匯出工具來匯出成sql檔，輸出選「儲存」，格式選「SQL」即可。
4. 檔案請存至 sql 資料夾底下，並修改`xoops_version.php`的`$modversion['sqlfile']['mysql']`設定值。 ```
  <pre class="brush:php;gutter:false;">
  $modversion['sqlfile']['mysql'] = 'sql/mysql.sql';
  $modversion['tables'][]         = 'snews';
  $modversion['tables'][]         = 'snews_topic';
  ```
5. 至此已經可以將模組安裝起來囉！
 
### 九、 XOOPS的模組管理後台

1. XOOPS並沒有規定一定要有管理後台，若是沒有管理後台，只要在`xoops_version.php`中把`$modversion['hasAdmin']`設為0即可。 ```
  <pre class="brush:php;gutter:false;">
  $modversion['adminindex'] = 'admin/index.php'; //定義當模組管理後台預設頁面。
  $modversion['adminmenu'] = 'admin/menu.php'; //定義模組管理界面的功能選單。
  ```
 
### 十、 模組管理後台選單檔

1. 每多一個功能選項，請多一組以下設定，其中路徑部份是以該模組目錄為基準（頭尾那兩組設定無須動它，改中間那組即可）。 ```
  <pre class="brush:php;gutter:false;">
  $i++;  //多個選項
  $adminmenu[$i]['title'] = _MI_SNEWS_ADMENU1;  //選項標題
  $adminmenu[$i]['link']  = "admin/main.php";  //選項連結
  $adminmenu[$i]['desc']  = _MI_SNEWS_ADMENU1_DESC;  //選項說明
  $adminmenu[$i]['icon']  = 'images/admin/button.png';  //選項圖示
  ```
2. 有中文的地方盡量用語系常數，直打中文也行，只是這樣只有相同編碼的網站才能使用。
3. `admin/menu.php`的語系一樣是放在`language/tchinese_utf8/modinfo.php`中。 ```
  <pre class="brush:php;gutter:false;">
  define('_MI_SNEWS_ADMENU1' , '文章管理');
  define('_MI_SNEWS_ADMENU1_DESC' , '發布文章或文章管理功能');
  ```
 
### 十一、 模組管理後台架構

1. 後台檔案最基本架構如`admin/main.php`，樣板檔位置在`templates`下，一般建議命名規則為「模組名\_目錄\_檔名.tpl」。樣板要在引入`header.php`之前設定好。 ```
  <pre class="brush:php;gutter:false;">
  $xoopsOption['template_main'] = "snews_adm_main.tpl"; //設定樣板檔（必）
  include_once "header.php";  //引入預設檔頭（必）
  include_once "../function.php";  //引入共同函數檔
  ```
2. 將`templates/demo_adm_main.tpl`改為實際樣板名稱，如`snews_adm_main.tpl`。
3. 頁尾需引入頁尾檔。至於中間部份隨人習慣任意發揮。 ```
  <pre class="brush:php;gutter:false;">
  include_once 'footer.php';
  ```
4. 【重要】記得修改 `xoops_version.php`中的樣板設定，改完<u>**請更新模組**</u>，以套用新值
 
### 十二、 申請學生練習主機空間（<http://stu.tncomu.tn.edu.tw>）

1. 學生練習主機為Linux主機，僅社大學員可以申請（FTP及MySQL帳號）。
2. 使用期限為本學期，學期結束後，可能隨時會清除舊資料，故請自行備份。
3. 申請後，您的網站網址為：「http://stu.tncomu.tn.edu.tw/~帳號」
4. 資料庫和FTP帳號、密碼是一樣的！

:::