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

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}>
   

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

3. 可以修改成這樣：

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

4. 表單界面的動作是 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
5. 因此，要修改建立投稿主題的表單界面，就是去修改 op_submission_create.tpl 樣板檔， Submission::create() 會負責傳地方相關的變數以及 JS 或 CSS 給該樣板使用。
6. VSCode中，Ctrl+P，貼上檔名，可以快速開啟，不用找半天。
7. 這是一個表單，表單的基本架構：

   <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>
   

   1. 表單要有id，才能搭配 class="validate[required]" 來檢查必填欄位
   2. 若有使用上傳功能，表單必須有 enctype="multipart/form-data"
   3. <{$token_form|default:''}>用來防止偽造表單用
8. 每一組表單元件的基本架構

   <!--表單元件註解-->
   <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>

   1. form-group 是BootStrap的用法，用來設定一組有標籤，有元件的表單
   2. 目前這種寫法是相容BootStrap3~BootStrap5的寫法
   3. class="col-md-x" 用來決定顯示寬度，左右合計必須為12
9. 先改掉「詳細資訊」，用之複製為「投稿密碼 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>

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

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

11. 然後我們就得到了類似這樣的回答：
    
12. 整合自己的樣板檔中，並稍做調整：

    <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}>

         

13. 隱藏欄位部份：務必加上 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>