8-4 製作編輯功能

一、完成編輯的準備動作

1. 編輯的原理就是根據提供的編號，讀出該文章資訊，並將原始資料塞回編輯表單，讓使用者修改後，送出，並更新資料庫即可。
2. 我們編輯的連結是「admin.php?id={$news.id}」，因此，要修改 admin.php 的 create 流程，也就是希望叫出原有編輯表單並塞入資料供編輯。
3. 修改 admin.php 先多加一組過濾變數

   $id = filter_input_var('id', 'int');

    

4. 接著修改 admin.php 的預設流程，若是有編號，則送出編號以及該文章內容到樣板。

   switch ($op) {
       case 'store':
           $id = store($pdo);
           header("location:index.php?id={$id}");
           exit;
   
       default:
           $op = "create";
           if ($id) {
               $smarty->assign('id', $id);
               $smarty->assign('news', show($id));
           }
           $smarty->assign('aside_news', all(0, 15));
           break;
   }

    

5. 將 index.php 的 show() 函數移至 function.php 這樣 admin.php 才能讀取到

二、修改樣板檔將資料塞回表單中

1. 修改 templates/create.tpl 我們先改簡單的部份：

   <h2 class="my-4">文章編輯表單</h2>
   <form action="admin.php" method="POST" enctype="multipart/form-data">
       <div class="form-floating mb-3">
           <input type="text" class="form-control" id="news_title" name="news_title" placeholder="新聞標題" required value="{$news.news_title}">
           <label for="news_title">新聞標題</label>
       </div>
       <div class="form-floating mb-3">
           <textarea class="form-control" id="news_content" name="news_content" placeholder="新聞內容" style="height: 100px" required>{$news.news_content}</textarea>
           <label for="news_content">新聞內容</label>
       </div>
       <div class="form-floating mb-3">
           <input type="url" class="form-control" id="related_link" name="related_link" placeholder="相關連結" value="{$news.related_link}">
           <label for="related_link">相關連結</label>
       </div>
       <div class="row mb-3">
           <div class="col-md-4">
               <div class="form-floating">
                   <input type="text" class="form-control" id="publisher" name="publisher" placeholder="發布者" required value="{$news.publisher}">
                   <label for="publisher">發布者</label>
               </div>
           </div>
           <div class="col-md-4">
               <div class="form-floating">
                   <input type="text" class="form-control" id="school_name" name="school_name" placeholder="學校名稱" required value="{$news.school_name}">
                   <label for="school_name">學校名稱</label>
               </div>
           </div>
           <div class="col-md-4">
               <div class="form-floating">
                   <input type="date" class="form-control" id="report_date" name="report_date" placeholder="報導日期" required value="{$news.report_date}">
                   <label for="report_date">報導日期</label>
               </div>
           </div>
       </div>
       <div class="form-floating mb-3">
           <select class="form-select" id="upload_type" name="upload_type">
               <option value="image" {if $news.upload_type=='image'}selected{/if}>上傳圖片</option>
               <option value="youtube" {if $news.upload_type=='youtube'}selected{/if}>Youtube影片連結</option>
           </select>
           <label for="upload_type">上傳種類</label>
       </div>
       <div class="mb-3" id="image_upload">
           <label for="image_file" class="form-label">上傳圖片 (僅限jpg及png)</label>
           <input type="file" class="form-control" id="image_files" name="image_files[]" accept=".jpg,.png" multiple>
       </div>
       <div class="form-floating mb-3" id="youtube_link" style="display: none;">
           <input type="url" class="form-control" id="youtube_url" name="youtube_url" placeholder="Youtube影片網址" value="{$news.youtube_url}">
           <label for="youtube_url">Youtube影片網址</label>
       </div>
       {if $id}
           <input type="hidden" name="op" value="update">
           <input type="hidden" name="id" value="{$id}">
       {else}
           <input type="hidden" name="op" value="store">
       {/if}
       <button type="submit" class="btn btn-primary">提交</button>
   </form>

    

   1. 凡是類型是 <input type="text"> 的，其預設值用 value="{$預設值}" 即可完成
   2. 若是 <select> 的 <option> 選項，則用 {if $預設值=='選項值'}selected{/if} 即可完成
   3. 若是單選 <input type="radio"> 或複選 <input type="checkbox"> ，則用 {if $預設值=='選項值'}checked{/if} 即可完成
   4. 若是 <textarea></textarea> 大量文字框，則用<textarea>{$預設值}</textarea> 即可完成
2. 最重要的是原本 <input type="text" name="op"> 的部份，若是有編號，代表是要修改，因此，op 值改為 update 並加上修改編號的隱藏欄位，兩者缺一不可。

   {if $id}
       <input type="hidden" name="op" value="update">
       <input type="hidden" name="id" value="{$id}">
   {else}
       <input type="hidden" name="op" value="store">
   {/if}

    

3.  至此，修改界面算是初步完成，圖片部份稍微複雜，我們等一下處理。