Tad 教材網 - 線上書籍

:::

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

### 一、 模組基礎架構

1. 下載[XOOPS250ModuleConversionFiles](https://www.tad0616.net/uploads/tad_book3/file/44/XOOPS250ModuleConversionFiles_20180310.zip)，解壓縮，改目錄名稱，即為一個模組目錄。
2. 編輯`xoops_version.php`，順著設定項目一項一項設定、產生對應檔案或內容。若有中文，大部分可直寫，但偏好設定若有中文一定要放在語系檔`language/語系/modinfo.php`中。
3. 可利用adminer建構模組所需資料表，然後匯出成`mysql.sql`放在`sql`目錄下
4. 模組的`admin`目錄為後台，後台僅模組管理員可以進入操作。
5. 後台選單可從`admin/menu.php`來設定，其語系檔也是`language/語系/modinfo.php`。
6. 發布、修改等功能，若懶得限制權限，可直接放到後台。後台基本檔案架構為： ```
  <pre class="brush:php;gutter:false;">
  <?php
  $xoopsOption['template_main'] = "後台樣板檔.tpl"; //設定樣板檔（必）
  include_once "header.php";  //引入預設檔頭（必）
  include_once "../function.php";  //引入共同函數檔
  //內容
  include_once 'footer.php';
  ```
7. 前台則是所有人都可以瀏覽（當然，也可以從群組做限制），其基本檔案架構為： ```
  <pre class="brush:php;gutter:false;">
  <?php
  include_once "header.php";（必）
  $xoopsOption['template_main'] = "前台樣板檔.tpl";（必）
  include_once XOOPS_ROOT_PATH . "/header.php";（必）
  //內容
  include_once XOOPS_ROOT_PATH . '/footer.php';（必）
  ```
 
### 二、 樣板

1. 樣板一律放在`templates`下，附檔名為`tpl`或`html`，樣板變數為`<{$樣板變數}>`，在PHP中必須用 `$xoopsTpl->assign('樣板變數' , '值')` 來指定樣板變數的值。
2. 可在樣板中使用超級全域變數：`<{$smarty.session.xxx}>`或`<{$smarty.get.xxx}>`
3. 亦可在樣板中使用模組語系，如：`<{$smarty.const.常數名稱}>`
4. 樣板有兩種，要放在`$xoopsOption['template_main']`裡面的一定要去`xoops_version.php`註冊，如此，便成了可自訂樣板。另一種是無須註冊的樣板，可直接引入共用，寫法差異如下： ```
  <pre class="brush:xml;gutter:false;">
  <{includeq db="$xoops_rootpath/modules/模組名稱/templates/有註冊的樣板檔.tpl"}>
  <{includeq file="$xoops_rootpath/modules/模組名稱/templates/不用註冊的樣板檔.tpl"}>
  ```
 
### 三、 資料庫

1. XOOPS現階段僅支援MySQL（或MariaDB）
2. 要進行資料庫操作，可直接使用`$xoopsDB`物件，可直接用，無須實體化，常用方法如下： ```
  <pre class="brush:php;gutter:false;">
  $tbl = $xoopsDB->prefix('資料表名稱');  //自動加上資料表前置字串
  $xoopsDB->query($sql);  //執行SQL語法（較安全）
  $xoopsDB->queryF($sql);  //強制執行SQL語法
  $sn=$xoopsDB->getInsertId();  //取得最後新增的編號
  $data=$xoopsDB->fetchRow($result);
  //抓回以數字為索引的資料陣列，得到的結果會像：$data[0]、$data[1]...這樣的，可搭配list($sn,$title)=$data 來將內容指派到變數中。
  $data=$xoopsDB->fetchArray($result);
  //抓回以欄名為索引的資料陣列，得到的結果會像：$data['sn']、$data['title']...這樣的
  ```
 
### 四、 使用者物件

1. 登入就會有`$xoopsUser`物件，沒登入不會有，所以，務必用以下方式來使用之： ```
  <pre class="brush:php;gutter:false;">
  $uid = ($xoopsUser)?$xoopsUser->uid():0;
  ```
2. 常用方法如下： ```
  <pre class="brush:php;gutter:false;">
  $使用者編號 = $xoopsUser->uid();
  $真實姓名 = $xoopsUser->name();
  $登入帳號= $xoopsUser->uname();
  $Email= $xoopsUser->email();
  ```
 
### 五、 開發程序

1. 新增功能→新增`$op`→switch新增一組設定→新增執行函數
2. 若函數有輸出（如顯示）→新增子樣板→函數終將遇顯示資料assign到樣板
3. 若函數沒有輸出（如寫入、更新、刪除）→用`header()`轉向
 
### 六、 安全性（不分前後台）

1. 外來變數在進入流程前都必須過濾： ```
  <pre class="brush:php;gutter:false;">
  include_once $GLOBALS['xoops']->path('/modules/system/include/functions.php');
  $op = system_CleanVars($_REQUEST, 'op', '', 'string');
  $sn = system_CleanVars($_REQUEST, 'sn', '', 'int');
  ```
2. 有用到表單務必啟用token（避免偽造表單） ```
  <pre class="brush:php;gutter:false;">
  $form = new XoopsThemeForm('標題', 'name', 'main.php', 'post', '使用token');
  ```
3. 若是自製表單（不用物件），亦可直接使用token物件來產生相關隱藏欄位即可： ```
  <pre class="brush:php;gutter:false;">
  $token =new XoopsFormHiddenToken('XOOPS_TOKEN',360);
  $xoopsTpl->assign('token' , $token->render());
  ```
4. 儲存或更新時，要先檢查鳥單token是否正確再繼續處理儲存或更新： ```
  <pre class="brush:php;gutter:false;">
  //安全判斷
  if(!$GLOBALS['xoopsSecurity']->check()){
    $error=implode("<br>" , $GLOBALS['xoopsSecurity']->getErrors());
    throw new Exception($error);
  }
  ```
5. 寫入時，要過濾變數（防止隱碼攻擊，並使之可以順利寫入） ```
  <pre class="brush:php;gutter:false;">
  $myts = MyTextSanitizer::getInstance();
  $過濾後的文字=$myts->addSlashes($過濾前文字);
  ```
6. 讀出時也要過濾（避免跨域攻擊） ```
  <pre class="brush:php;gutter:false;">
  $myts = MyTextSanitizer::getInstance();
  $snews['content'] = $myts->displayTarea($snews['content'], 1, 0, 0, 0, 0);
  $snews['title']   = $myts->htmlSpecialChars($snews['title']);
  ```
 
### 七、 加入分頁

1. 在`$sql`及`$xoopsDB->query($sql)`之間插入（注意第一個變數名稱需一致）： ```
  <pre class="brush:php;gutter:false;">
  //getPageBar($原sql語法, 每頁顯示幾筆資料, 最多顯示幾個頁數選項);
  $PageBar = getPageBar($sql, 3, 10);
  $bar     = $PageBar['bar'];
  $sql     = $PageBar['sql'];
  $total   = $PageBar['total'];
  ```
2. 接著就可把分頁工具及總數送到樣板使用： ```
  <pre class="brush:php;gutter:false;">
  $xoopsTpl->assign('bar', $bar);
  $xoopsTpl->assign('total', $total);
  ```
 
### 八、 隨視窗大小自動調整大小的滑動圖

1. <http://v3.bootcss.com/javascript/#carousel>
2. 基本語法（拿掉了快速切換工具，並替圖片加了一個`class="slide-img"`）： ```
  <pre class="brush:xml;gutter:false;">
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner" role="listbox">
          <div class="item active">
              <img src="圖片路徑.jpg" alt="標題" class="slide-img">
              <div class="carousel-caption">
                  <h3>這是第一張圖的標題</h3>
                  <p>這是第一張圖的摘要</p>
              </div>
          </div>
      </div>
      
      左右控制語法...略
  </div>
  ```
3. 讓圖片可以自動滿版，並當作底圖來用，故加上CSS設定： ```
  <pre class="brush:css;gutter:false;">
  .slide-img {width: 100%; object-fit: cover;}
  ```
4. 讓圖片可以隨視窗調整自動調整高度（視窗高度扣掉工具列高度，即為圖片高度） ```
  <pre class="brush:xml;gutter:false;">
  <script type="text/javascript">
      $(document).ready(function () {
          $(".slide-img").css('height', $(window).height()-$('.navbar').height());
      });
      $(window).resize(function () {
          $(".slide-img").css('height', $(window).height()-$('.navbar').height());
      });
  </script>
  ```
5. 最後，替標題加入半透明黑底以突顯文字，並讓滑動圖與工具列之間不要有空白 ```
  <pre class="brush:css;gutter:false;">
  .carousel-caption{    background-color: rgba(0,0,0,0.5); }
  #carousel-example-generic{    position:relative;    top: -22px;}
  ```
 
### 九、 讀取精選文章並套用套樣板

1. 首頁的滑動圖源自於精選文章，所以，執行`snews_list()`時，同時也要撈取精選文章。
2. 另做一個`snews_focus()`用來取得精選文章，和`snews_list()`大同小異故複製之來做即可。
3. 利用`strip_tags()`用來去除網頁標籤
4. 並利用XOOPS內建的`xoops_substr($字串, $起點, $字數, $顯示符)`來裁切字串，其中中文字數要x4才行，例如想顯示10個中文字，必須填40。
5. 或改用`mb_substr($字串, $起點, $字數, $編碼)`亦可。
6. 修改樣板，把滑動圖部份改用迴圈。 ```
  <pre class="brush:xml;gutter:false;">
  <{foreach from=$focus key=i item=f}>
      <div class="item <{if $i==0}>active<{/if}>">
          <img src="<{$f.cover}>" alt="<{$f.title}>" class="slide-img">
          <div class="carousel-caption">
              <h3><{$f.title}></h3>
              <p><{$f.content}></p>
          </div>
      </div>
  <{/foreach}>
  ```
 
### 十、 調校佈景

1. 版面類型可改為「單欄式」，並取消背景圖、滑動圖、logo圖
2. 導覽工具列顏色可設為`#343A40`，文字設為白色，並上傳導列 logo圖
3. 「額外佈景設定」中「是否使用有限寬度」及陰影設定都選「否」，頁尾底色`#343A40`
 
### [<span class="fa fa-cloud-download" style="color:rgb(0, 0, 0);"></span>第四週模組下載](https://www.tad0616.net/uploads/tad_book3/file/44/snews_4.zip)

:::