線上書籍

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://localhosthttp://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帳號、密碼是一樣的!