線上書籍

Home

[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/
  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帳號、密碼是一樣的！