XOOPS輕鬆架 - 線上書籍

:::

XOOPS快速模組開發
===========

1. 顯示所有資料的動作是 `index`，會產生以下規則： 
    1. 顯示所有投稿主題，存入的資料表是 `submission`，流程的 `$op` 值是 `submission_index`，呼叫的物件方法就是 `Submission::index()`，對應樣板則是 `op_submission_index.tpl`
    2. 顯示所有學生的投稿，存入的資料表是 `submission_data`，流程的 `$op` 值是` submission_data_index`，呼叫的物件方法就是 `Submission_data::index()`，對應樣板則是 `op_submission_data_index.tpl`
2. 因此，要修改顯示所有投稿主題的畫面，就是去修改 `op_submission_index.tpl `樣板檔， `Submission::index() `會負責撈出所有資料以及 JS 或 CSS 給該樣板使用。
3. VSCode中，<kbd>Ctrl</kbd>+<kbd>P</kbd>，貼上檔名「`op_submission_index`」，可以快速開啟，不用找半天。
4. 顯示所有投稿主題畫面原本的基本架構： 
    ```markup
    <{if $all_submission|default:false}>
        若是 $all_submission 有內容，則秀出表格內容
    
        若是對模組有管理權，看是不是要在這裡做些什麼
        <{if $smarty.session.submission_adm|default:false}>
        <{/if}>
    
        <div id="submission_save_msg"></div>
    
        顯示表格內容
        <table data-toggle="table" data-pagination="true" data-search="true" data-mobile-responsive="true" class="table table-sm table-striped table-hover">
        </table>
    
        <{if $smarty.session.submission_adm|default:false}>
            若是對模組有管理權，則顯示「新增資料」的按鈕
        <{/if}>
    
        分頁工具(非必要)
        <div class="bar"><{$bar|default:''}></div>
    
    <{else}>
        若是 $all_submission 沒有內容
        <div class="alert alert-warning text-center">
            <{if $smarty.session.submission_adm|default:false}>
                若是對模組有管理權，則顯示「新增資料」的按鈕
                <a href="<{$xoops_url}>/modules/submission/setup.php?op=submission_create" class="btn btn-info">
                    <i class="fa fa-plus"></i> <{$smarty.const._TAD_ADD}>
                </a>
            <{else}>
                否則就顯示無資料
                <h3><{$smarty.const._TAD_EMPTY}></h3>
            <{/if}>
        </div>
    <{/if}>
    
    ```
5. 一般來說，這個樣板需要改的地方並不多，這部份可以先刪掉。 
    ```markup
    <{if $smarty.session.submission_adm|default:false}>
    
    <{/if}>
    
    <div id="submission_save_msg"></div>
    ```
    
    
    1. 上方是對模組有管理權的話，可以顯示某些特殊訊息。
    2. `submission_save_msg`則是用來顯示排序結果。我們不拉動排序，所以可以不用。
6. 接著就是用BootstrapTable來將所有資料列出，關於[BootstrapTable使用可以參考這裡](https://www.bootstraptable.com/)： 
    ```markup
    <table data-toggle="table" data-pagination="true" data-search="true" data-mobile-responsive="true" class="table table-sm table-striped table-hover">
        <thead>
            <tr>
                
                <th data-field="title" data-sortable="true" class="nowrap c"><{$smarty.const._MD_SUBMISSION_TITLE}></th>
                
                <th data-field="start" data-sortable="true" class="nowrap c"><{$smarty.const._MD_SUBMISSION_START}></th>
                
                <th data-field="end" data-sortable="true" class="nowrap c"><{$smarty.const._MD_SUBMISSION_END}></th>
                
                <th data-field="uid" data-sortable="true" class="nowrap c"><{$smarty.const._MD_SUBMISSION_UID}></th>
                
                <th data-field="create_time" data-sortable="true" class="nowrap c"><{$smarty.const._MD_SUBMISSION_CREATE_TIME}></th>
                <{if $smarty.session.submission_adm|default:false}>
                    <th><{$smarty.const._TAD_FUNCTION}></th>
                <{/if}>
            </tr>
        </thead>
        <{foreach from=$all_submission key=k item=data name=all_submission}>
            <tr>
            ...略...
            </tr>
        <{/foreach}>
    </table>
    ```
    
    
    1. `<table>` 的幾個屬性： 
        1. `data-toggle="table"` 套用BootstrapTable功能
        2. `data-pagination="true"` 要顯示分頁
        3. `data-search="true"` 要顯示搜尋框
        4. `data-mobile-responsive="true"` 要讓表格有響應式功能
    2. `<thead></thead>` 一定要有，很重要
    3. `<th>` 的幾個屬性： 
        1. `data-field="xxx"` 設定該欄位的名稱，瓶常用不到，進階功能才會用
        2. `data-sortable="true"` 設定該欄位可以排序
7. 接著修改新增按鈕的文字，暫時不用語系 
    ```markup
    <{if $smarty.session.submission_adm|default:false}>
        <div class="text-right text-end my-3">
            <a href="<{$xoops_url}>/modules/submission/setup.php?op=submission_create" class="btn btn-info">
                <i class="fa fa-plus"></i> 建立投稿主題
            </a>
        </div>
    <{/if}>
    ```
8. 因為BootstrapTable本身就有分頁功能，因此，以下這個分頁工具標籤可以刪除 
    ```markup
    <div class="bar"><{$bar|default:''}></div>
    ```
9. 列出所有資料畫面如下：  
     ![img](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/20250702160126_F4Pv.png)

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D2081

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器