1. 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/
9. 之前專案原始碼：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編輯工具都可以。

   "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程式碼用

     "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

     // 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提示

     "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
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常用目錄及檔案：

    網頁目錄	D:\xxx\my_xoops\www
    啟動伺服器	D:\xxx\my_xoops\start.bat
    伺服器控制台	D:\xxx\my_xoops\UniController.exe
    php.ini位置	D:\xxx\my_xoops\core\php7x\php_production.ini
    資料庫實體檔案位置	D:\xxx\my_xoops\core\mysql\data
    使用者設定檔位置	D:\xxx\my_xoops\home\us_config
    phpMyAdmin位置	http://localhost/us_opt1/index.php
    Adminer位置	http://localhost/us_opt2/index.php

五、 下載XOOPS250ModuleConversionFiles

1. XOOPS250ModuleConversionFiles是官方提供的基本模組架構，但下載的版本已經有先經過優化，並加入bootstrap各版本支援，所以，會建議用此版來開發比較容易上手。
2. 一個模組就是一個目錄，此目錄會放在modules底下，請修改目錄名稱，如：snews。完整路徑如：D:\my_xoops\www\modules\snews
3. 底下是新的（2.5之後的）XOOPS的模組目錄建議結構（PHP > 5.3）：

   admin blocks class css docs images     |--- admin     |--- icons include language     |--- english         |--- help sql templates     |--- blocks

   模組後台目錄 區塊檔案目錄 額外的物件庫或函式庫目錄 模組樣式目錄 說明文件目錄 圖檔目錄     |--- 後台界面用到的圖檔     |--- 其他圖檔 引入檔目錄：如搜尋、模組自動檔 語系目錄     |--- 英語語系（Big5中文為tchinese、UTF-8為tchinese_utf8）         |--- 說明文件語系 資料庫結構目錄：裡面會有.sql檔 模組樣板目錄：用來放置模組頁面的樣板檔，均為.tpl檔     |--- 區塊樣板檔：一樣為.tpl檔

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. 選好資料庫，點選下方「建立資料表」按鈕，建構模組所需的資料表結構。

   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']設定值。

   $modversion['sqlfile']['mysql'] = 'sql/mysql.sql';
   $modversion['tables'][]         = 'snews';
   $modversion['tables'][]         = 'snews_topic';

5. 至此已經可以將模組安裝起來囉！

九、 XOOPS的模組管理後台

1. XOOPS並沒有規定一定要有管理後台，若是沒有管理後台，只要在xoops_version.php中把$modversion['hasAdmin']設為0即可。

   $modversion['adminindex'] = 'admin/index.php'; //定義當模組管理後台預設頁面。
   $modversion['adminmenu'] = 'admin/menu.php'; //定義模組管理界面的功能選單。

十、 模組管理後台選單檔

1. 每多一個功能選項，請多一組以下設定，其中路徑部份是以該模組目錄為基準（頭尾那兩組設定無須動它，改中間那組即可）。

   $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中。

   define('_MI_SNEWS_ADMENU1' , '文章管理');
   define('_MI_SNEWS_ADMENU1_DESC' , '發布文章或文章管理功能');

十一、 模組管理後台架構

1. 後台檔案最基本架構如admin/main.php，樣板檔位置在templates下，一般建議命名規則為「模組名_目錄_檔名.tpl」。樣板要在引入header.php之前設定好。

   $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. 頁尾需引入頁尾檔。至於中間部份隨人習慣任意發揮。

   include_once 'footer.php';

4. 【重要】記得修改 xoops_version.php中的樣板設定，改完請更新模組，以套用新值

十二、 申請學生練習主機空間（http://stu.tncomu.tn.edu.tw）

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