9-1 商品管理 - 表單

一、種類

1. 新增商品
2. 編輯商品
3. 不管新增、編輯，都要處理預設值，編輯的預設值必須從資料庫撈出

二、表單型態

1. 上傳表單
   當有要上傳檔案時，記得一定要加「enctype="multipart/form-data"」

   <form action="admin_prod.php" method="POST" role="form" id="opForm" enctype="multipart/form-data">
           
           .......
         </form>

   
             <div class="col-sm-3">
               <div class="form-group">
                 <label>圖片<span>(800x449)</span></label>                               
                 <input type="file" name="pic" accept="image/*" class="form-control">
               </div>
             </div> 

    

2. 單行

   
           	<div class="col-sm-6">
   		        <div class="form-group">
   		          <label for="title">標題</label>
   		          <input type="text" class="form-control" id="title" name="title" value="<{$row.title}>">
   		        </div>        		
           	</div>

    

3. 多行(一般)

   
           <div class="form-group">
             <label for="summary">商品摘要</label>
             <textarea class="form-control" rows="4" id="summary" name="summary"><{$row.summary}></textarea>
           </div>	  

    

4. 多行(網頁編輯器)
   php

   
   	$DirName = "prod";
   	mk_dir(WEB_PATH . "/uploads/{$DirName}");
   	mk_dir(WEB_PATH . "/uploads/{$DirName}/image");
   	mk_dir(WEB_PATH . "/uploads/{$DirName}/flash");
   	include_once WEB_PATH . "/class/ck.php";
   	$fck = new CKEditor($DirName, "content", $row['content']);
   	$fck->setHeight(350);
   	$row['content'] = $fck->render();

   
   template

   
           <div class="form-group">
             <label for="content">商品內容</label>
             <{$row.content}>
           </div>

    

5. 下拉選單
   程式 - 預設值

   
     $row['kind'] = isset($row['kind']) ? $row['kind']: "";  
     $row['kind_options'] = get_kind_options($row['kind']);

   程式 - 函數
   預設值 selected ：代表被選取

   
   function get_kind_options($default=""){
     
     $kind_options = array(
       "1"=>"類別1",
       "2"=>"類別2",
       "3"=>"類別3",
       "4"=>"類別4",
       "5"=>"類別5"
     );  
   
     $options = "";
     foreach($kind_options as $key=> $option){
       $selected = ($default == $key) ? " selected":"";
       $options .="<option value='{$key}'{$selected}>{$option}</option>";
     }
     return $options;
   }

   樣板

   
           	<div class="col-sm-3">
   	        	<div class="form-group">
   	            <label for="kind">類別</label>
   	            <select name="kind" class="form-control" size="1">
   								<{$row.kind_options}>
   	            </select>
   	          </div>
           	</div>

6. 單選
   記得表單的 name 要一樣

   
           	<div class="col-sm-3">
               <div class="form-group">
                 <label style="display:block;">啟用</label>
                 <input type="radio" name="enable" id="enable_1" value="1" <{if $row.enable == '1'}>checked<{/if}>>
                 <label for="enable_1">啟用</label>&nbsp;&nbsp;
                 <input type="radio" name="enable" id="enable_0" value="0"  <{if $row.enable == '0'}>checked<{/if}>>
                 <label for="enable_0">停用</label>
               </div>
             </div>

    

7. 日期
   程式 - 預設值

   
     #目前日期时间戳記 1970 00:00:00 GMT 的秒數
     $now = strtotime("now");//得到目前網頁伺服器的「时间戳記」
     $row['date'] = isset($row['date']) ? $row['date']: $now;
     $row['date'] = date("Y-m-d",$row['date']);//格式化

   樣板 - 一般日期

   
             <div class="col-sm-3">
               <div class="form-group">
                 <label for="date">建立日期</label>
                 <input type="text" class="form-control" id="date" name="date" value="<{$row.date}>">
               </div>            
             </div>

   
    

三、使用插件

1. 日期選單
2. ckeditor網頁編輯器
3. 刪除確認視窗 sweetalert2
4. 表單驗證 bootstrapValidator