2-3-2 建立活動表單樣板檔

您沒有觀看影片的權限

請先登入，登入後，確認您的權限後，即可觀看影片。

1. 我們用BootStrap4的水平表單來製作表單外觀：https://bootstrap.hexschool.com/docs/4.2/components/forms/#horizontal-form
2. 根據 $op 值，我們建立 templates/op_tad_signup_actions_create.tpl 檔案

   <h2 class="my">活動設定</h2>
   <form action="index.php" method="post" id="myForm" enctype="multipart/form-data" class="form-horizontal">
   
       中間欄位部份
   
       <div class="bar">
           <{$token_form}>
           <input type="hidden" name="uid" value="<{$uid}>">
           <input type="hidden" name="op" value="<{$next_op}>">
           <button type="submit" class="btn btn-primary">
               <i class="fa fa-save" aria-hidden="true"></i> <{$smarty.const._TAD_SAVE}>
           </button>
       </div>
   </form>
   

    

3. BootStrap3+BootStrap4水平表單欄位的整合性寫法

   <div class="form-group row">
       <label class="col-sm-2 control-label col-form-label text-md-right">
           標題
       </label>
       <div class="col-sm-10">
           表單欄位
       </div>
   </div>

    

4. 活動標題（文字輸入框）

   <div class="form-group row">
       <label class="col-sm-2 control-label col-form-label text-md-right">
           活動標題
       </label>
       <div class="col-sm-10">
           <input type="text" name="title" id="title" class="form-control validate[required]" value="<{$title}>" placeholder="請輸入活動標題">
       </div>
   </div>

    

5. 活動說明（大量文字框）

   <div class="form-group row">
       <label class="col-sm-2 control-label col-form-label text-md-right">
           活動說明
       </label>
       <div class="col-sm-10">
           <textarea name="detail" id="detail" class="form-control validate[required]" placeholder="請輸入活動說明"><{$detail}></textarea>
       </div>
   </div>

    

6. 活動日期、截止日期（日期類型的文字輸入框）

   <div class="form-group row">
       <label class="col-sm-2 control-label col-form-label text-md-right">
           報名截止日期
       </label>
       <div class="col-sm-10">
           <input type="text" name="end_date" id="end_date" class="form-control validate[required]" value="<{$end_date}>" placeholder="請輸入報名截止日期" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:00'})">
       </div>
   </div>
   
   <div class="form-group row">
       <label class="col-sm-2 control-label col-form-label text-md-right">
           活動日期
       </label>
       <div class="col-sm-10">
           <input type="text" name="action_date" id="action_date" class="form-control validate[required]" value="<{$action_date}>" placeholder="請輸入活動日期" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:00'})">
       </div>
   </div>

    

7. 報名人數（數字類型的文字輸入框）

   <div class="form-group row">
       <label class="col-sm-2 control-label col-form-label text-md-right">
           報名人數
       </label>
       <div class="col-sm-10">
           <input type="number" name="number" id="number" class="form-control validate[required]" value="<{$number}>" placeholder="請輸入報名人數">
       </div>
   </div>

    

8. 表單欄位設定

   <div class="form-group row">
       <label class="col-sm-2 control-label col-form-label text-md-right">
           欄位設定
       </label>
       <div class="col-sm-10">
           <textarea name="setup" id="setup" class="form-control validate[required]" placeholder="請輸入欄位設定"><{$setup}></textarea>
       </div>
   </div>

    

9. 是否啟用（單選）

   <div class="form-group row">
       <label class="col-sm-2 control-label col-form-label text-md-right">
           是否啟用
       </label>
       <div class="col-sm-10" style="padding-top: 8px;">
           <div class="form-check-inline radio-inline">
               <label class="form-check-label">
                   <input class="form-check-input" type="radio" name="enable" value="1" <{if $enable=='1'}>checked<{/if}>>
                   是
               </label>
           </div>
           <div class="form-check-inline radio-inline">
               <label class="form-check-label">
                   <input class="form-check-input" type="radio" name="enable" value="0" <{if $enable=='0'}>checked<{/if}>>
                   否
               </label>
           </div>
       </div>
   </div>

    

10. 幾個日期欄位希望可以有日曆可以選，所以加載 tadtools 中的 My97DatePicker 小月曆工具，上方先 use 之

    use XoopsModules\Tadtools\My97DatePicker;

    函式中只要產出其語法即可（會自動將相關 js 及 css 放到<head>中）

    My97DatePicker::render();

     

11. 小月曆可參考：https://www.tad0616.net/modules/tad_book3/page.php?tbsn=15&tbdsn=368
12. 由於發布活動會紀錄使用者編號 uid，所以需由PHP取得後送至樣板

    $uid = $xoopsUser->uid();
    $xoopsTpl->assign('uid', $uid);

    當然也可以儲存時再自動取uid，作法各有優缺點。

link to https://github.com/tadlearn/tad_signup/commit/bbf066bea2f1020bf7737a2f4e075860564ecff3 \