調整建立投稿主題的表單界面

XOOPS快速模組開發

4-1 調整建立投稿主題的表單界面

要修改建立投稿主題的表單介面，就是修改 op_submission_index.tpl 子樣板檔，先大致了解一下架構

<{if $all_submission|default:false}>
    若是 $all_submission 有內容，則秀出表格內容
<{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}>

目前沒有內容，且使管理員，所以會出現「新增資料」按鈕，若是想修改，請建立新的語系常數或者直接改成中文亦可，其中<{$smarty.const._TAD_ADD}>是樣板常數的寫法：
```
<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>
```

可以修改成這樣：

<a href="<{$xoops_url}>/modules/submission/setup.php?op=submission_create" class="btn btn-info">
    <i class="fa fa-plus"></i> 建立投稿主題
</a>

表單界面的動作是 create，會產生以下規則：
1. 老師建立投稿主題，存入的資料表是 submission，流程的 $op 值是 submission_create，呼叫的物件方法就是 Submission::create()，對應樣板則是 op_submission_create.tpl
2. 學生去投稿，存入的資料表是 submission_data，流程的 $op 值是 submission_data_create，呼叫的物件方法就是 Submission_data::create()，對應樣板則是 op_submission_data_create.tpl
因此，要修改建立投稿主題的表單界面，就是去修改 op_submission_create.tpl 樣板檔， Submission::create() 會負責傳地方相關的變數以及 JS 或 CSS 給該樣板使用。
VSCode中，Ctrl+P，貼上檔名，可以快速開啟，不用找半天。

這是一個表單，表單的基本架構：

<form action="<{$smarty.server.PHP_SELF}>" method="post" id="myForm" enctype="multipart/form-data" class="form-horizontal">

    各種表單元件

    <div class="bar text-center">
        其他各種隱藏表單元件
        <{$token_form|default:''}>
        <input type="hidden" name="op" value="<{$next_op|default:''}>">

        <button type="submit" class="btn btn-primary">送出按鈕</button>
    </div>
</form>

表單要有id，才能搭配 class="validate[required]" 來檢查必填欄位
若有使用上傳功能，表單必須有 enctype="multipart/form-data"
<{$token_form|default:''}>用來防止偽造表單用

每一組表單元件的基本架構

<!--表單元件註解-->
<div class="form-group row mb-3">
    <label class="col-md-2 control-label col-form-label text-md-right text-md-end">
        表單元件標題
    </label>
    <div class="col-md-10">
        表單元件
    </div>
</div>

form-group 是BootStrap的用法，用來設定一組有標籤，有元件的表單
目前這種寫法是相容BootStrap3~BootStrap5的寫法
class="col-md-x" 用來決定顯示寬度，左右合計必須為12

先改掉「詳細資訊」，用之複製為「投稿密碼 info[pass_code]」、「允許投稿的年級 info[grade][]」、「獎項設定 info[award]」等延伸的表單元件

<div class="form-group row mb-3">
    <label class="col-md-2 control-label col-form-label text-md-right text-md-end">
        投稿密碼(非必須)
    </label>
    <div class="col-md-10">
        <input type="text" name="info[pass_code]" id="info-pass_code" class="form-control" value="<{$info.pass_code}>" placeholder="投稿密碼">
    </div>
</div>

<div class="form-group row mb-3">
    <label class="col-md-2 control-label col-form-label text-md-right text-md-end">
        獎項設定
    </label>
    <div class="col-md-10">
        <input type="text" name="info[award]" id="info-award" class="form-control validate[required]" value="<{$info.award}>" placeholder="獎項設定">
    </div>
</div>

有時候，懶的自己做表單元件，也可以叫AI來做，例如：

請製作XOOPS的樣板片段（Smarty標籤格式為<{}>），搭配BootStrap5來建立一到九年級的行內複選框，name為info[grade]

然後我們就得到了類似這樣的回答：
整合自己的樣板檔中，並稍做調整：
```
<div class="form-group row mb-3">
    <label class="col-md-2 control-label col-form-label text-md-right text-md-end">
        允許投稿的年級
    </label>
    <div class="col-md-6">
        <{foreach from=[1,2,3,4,5,6] item=grade}>
            <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" id="grade_<{$grade}>" name="info[grade][]" value="<{$grade}>" <{if $info.grade|is_array && $grade|in_array:$info.grade}>checked<{/if}>>
            <label class="form-check-label" for="grade_<{$grade}>"><{$grade}> 年級</label>
            </div>
        <{/foreach}>
    </div>
</div>
```
1. AI提供的語法並沒有考慮到修改的部份，也就是修改時如何呈現使用者之前勾選的項目
2. 每個 checkbox 若要勾選，可以加入 checked 參數
3. 所以我們加入 <{if $grade|in_array:$info.grade}>checked<{/if}> 用來判斷，目前迴圈跑到的值，是否有在存在資料庫的陣列中，若有那麼就顯示 checked
4. $grade|in_array:$info.grade 的用法是在Smarty中使用PHP函數的用法，in_array() 是判斷指定值是否有在陣列中，原本在PHP應該是這樣：
```
in_array($grade, $info['grade'])
```
  到了Smarty，需要將第一個參數，放到最左邊，接著用 | 來接著函數名稱，若還有第二個、第三個參數，依序用 : 隔開即可
```
<{$grade|in_array:$info.grade}>
```

隱藏欄位部份：務必加上 create_time 的隱藏欄位，更新時，才能保留建立時間

<div class="bar text-center">

    <!--建立時間-->
    <input type='hidden' name="create_time" value="<{$create_time}>">
    <{$token_form|default:''}>
    <input type="hidden" name="op" value="<{$next_op|default:''}>">
    <input type="hidden" name="id" value="<{$id}>">

    <button type="submit" class="btn btn-primary"><i class="fa fa-floppy-disk" aria-hidden="true"></i> <{$smarty.const._TAD_SAVE}></button>
</div>

4. create 表單界面