:::

4. 首頁精選文章輪播

一、 模組基礎架構

  1. 下載XOOPS250ModuleConversionFiles,解壓縮,改目錄名稱,即為一個模組目錄。
  2. 編輯xoops_version.php,順著設定項目一項一項設定、產生對應檔案或內容。若有中文,大部分可直寫,但偏好設定若有中文一定要放在語系檔language/語系/modinfo.php中。
  3. 可利用adminer建構模組所需資料表,然後匯出成mysql.sql放在sql目錄下
  4. 模組的admin目錄為後台,後台僅模組管理員可以進入操作。
  5. 後台選單可從admin/menu.php來設定,其語系檔也是language/語系/modinfo.php
  6. 發布、修改等功能,若懶得限制權限,可直接放到後台。後台基本檔案架構為:
    <?php
    $xoopsOption['template_main'] = "後台樣板檔.tpl"; //設定樣板檔(必)
    include_once "header.php";  //引入預設檔頭(必)
    include_once "../function.php";  //引入共同函數檔
    //內容
    include_once 'footer.php';
  7. 前台則是所有人都可以瀏覽(當然,也可以從群組做限制),其基本檔案架構為:
    <?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下,附檔名為tplhtml,樣板變數為<{$樣板變數}>,在PHP中必須用 $xoopsTpl->assign('樣板變數' , '值') 來指定樣板變數的值。
  2. 可在樣板中使用超級全域變數:<{$smarty.session.xxx}><{$smarty.get.xxx}>
  3. 亦可在樣板中使用模組語系,如:<{$smarty.const.常數名稱}>
  4. 樣板有兩種,要放在$xoopsOption['template_main']裡面的一定要去xoops_version.php註冊,如此,便成了可自訂樣板。另一種是無須註冊的樣板,可直接引入共用,寫法差異如下:
    <{includeq db="$xoops_rootpath/modules/模組名稱/templates/有註冊的樣板檔.tpl"}>
    <{includeq file="$xoops_rootpath/modules/模組名稱/templates/不用註冊的樣板檔.tpl"}>

三、 資料庫

  1. XOOPS現階段僅支援MySQL(或MariaDB)
  2. 要進行資料庫操作,可直接使用$xoopsDB物件,可直接用,無須實體化,常用方法如下:
    $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物件,沒登入不會有,所以,務必用以下方式來使用之:
    $uid = ($xoopsUser)?$xoopsUser->uid():0;
  2. 常用方法如下:
    $使用者編號 = $xoopsUser->uid();
    $真實姓名 = $xoopsUser->name();
    $登入帳號= $xoopsUser->uname();
    $Email= $xoopsUser->email();

五、 開發程序

  1. 新增功能→新增$op→switch新增一組設定→新增執行函數
  2. 若函數有輸出(如顯示)→新增子樣板→函數終將遇顯示資料assign到樣板
  3. 若函數沒有輸出(如寫入、更新、刪除)→用header()轉向

六、 安全性(不分前後台)

  1. 外來變數在進入流程前都必須過濾:
    include_once $GLOBALS['xoops']->path('/modules/system/include/functions.php');
    $op = system_CleanVars($_REQUEST, 'op', '', 'string');
    $sn = system_CleanVars($_REQUEST, 'sn', '', 'int');
  2. 有用到表單務必啟用token(避免偽造表單)
    $form = new XoopsThemeForm('標題', 'name', 'main.php', 'post', '使用token');
  3. 若是自製表單(不用物件),亦可直接使用token物件來產生相關隱藏欄位即可:
    $token =new XoopsFormHiddenToken('XOOPS_TOKEN',360);
    $xoopsTpl->assign('token' , $token->render());
  4. 儲存或更新時,要先檢查鳥單token是否正確再繼續處理儲存或更新:
    //安全判斷
    if(!$GLOBALS['xoopsSecurity']->check()){
      $error=implode("<br>" , $GLOBALS['xoopsSecurity']->getErrors());
      throw new Exception($error);
    }
  5. 寫入時,要過濾變數(防止隱碼攻擊,並使之可以順利寫入)
    $myts = MyTextSanitizer::getInstance();
    $過濾後的文字=$myts->addSlashes($過濾前文字);
  6. 讀出時也要過濾(避免跨域攻擊)
    $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)之間插入(注意第一個變數名稱需一致):
    //getPageBar($原sql語法, 每頁顯示幾筆資料, 最多顯示幾個頁數選項);
    $PageBar = getPageBar($sql, 3, 10);
    $bar     = $PageBar['bar'];
    $sql     = $PageBar['sql'];
    $total   = $PageBar['total'];
  2. 接著就可把分頁工具及總數送到樣板使用:
    $xoopsTpl->assign('bar', $bar);
    $xoopsTpl->assign('total', $total);

八、 隨視窗大小自動調整大小的滑動圖

  1. http://v3.bootcss.com/javascript/#carousel
  2. 基本語法(拿掉了快速切換工具,並替圖片加了一個class="slide-img"):
    <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>
        <!-- Controls -->
        左右控制語法...略
    </div>
  3. 讓圖片可以自動滿版,並當作底圖來用,故加上CSS設定:
    .slide-img {width: 100%; object-fit: cover;}
  4. 讓圖片可以隨視窗調整自動調整高度(視窗高度扣掉工具列高度,即為圖片高度)
    <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. 最後,替標題加入半透明黑底以突顯文字,並讓滑動圖與工具列之間不要有空白
    .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. 修改樣板,把滑動圖部份改用迴圈。
    <{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

第四週模組下載


:::

搜尋

QR Code 區塊

https%3A%2F%2Fwww.tad0616.net%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D44%26tbdsn%3D1448

書籍目錄

展開 | 闔起

線上使用者

39人線上 (7人在瀏覽線上書籍)

會員: 0

訪客: 39

更多…