:::

7-4 加入編輯功能

一、加入編輯到後台流程中

  1. 先確定修改的按鈕連結無誤
    <a href="{$url}/admin/index.php?op=edit&id={$news.id}" class="btn btn-outline-warning">
      <i class="fas fa-pencil-alt"></i>修改
    </a>

     

  2. 編輯 admin/index.php,先加入 $id 過濾
    // 過濾外來變數
    $op = isset($_REQUEST['op']) ? filter_var($_REQUEST['op'], FILTER_SANITIZE_STRING) : 'create';
    $id = isset($_REQUEST['id']) ? (int) $_REQUEST['id'] : 0;

    流程加入edit,因為是修改,所以會有畫面,故要傳回使用者當初填的資料以便傳給樣板

    switch ($op) {
        // 修改文章
        case 'edit':
            $news = edit($id);
            $smarty->assign('news', $news);
            break;
    

     

二、加入編輯函式

  1. 新增 edit() 函式

    // 編輯功能
    function edit($id)
    {
        return show($id);
    }
    

    edit()函式主要是要取得該文章的值,和前台的 show() 一模一樣,所以,直接呼叫 show() 即可。

  2. show() 在前台的 index.php 中,無法直接這樣呼叫。所以,我們建立一個前後台都可以共用的 function.php 檔,並將 show() 及相關函式都移到function.php
    <?php
    // 觀看某篇文章
    function show($id)
    {
        ...略...
    }
    
    // 取得縮圖
    function get_thumbs($id)
    {
        ...略...
    }
    

     

  3. 接著我們在前後台都會引入的 header.php 引入function.php,並將原本放在header.php 中的 article_count() 函式也一併移到 function.php 裡面,讓 header.php 更乾淨一點。
    <?php
    session_start();
    require_once 'vendor/autoload.php';
    require_once 'config.php';
    require_once 'function.php';

    這裡都建議用相對路徑,彈性比較大

三、加入編輯畫面的樣板

  1. 接著新增 templates/op_edit.tpl ,其內容應該和 op_create.tpl 一樣,差別只在於有填入預設值,並且多一個圖片管理,所以,我們直接引入op_create.tpl即可
    {include file='op_create.tpl'}

     

  2. 修改 op_create.tpl,我們要將每個欄位也都塞入預設值
    ...略...
    <div class="row mb-3">
      <label for="title" class="col-md-2 col-form-label">
        文章標題
      </label>
      <div class="col-md-10">
        <input type="text" name="title" id="title" class="form-control" placeholder="請輸入文章標題" value="{$news.title}" />
      </div>
    </div>
    
    <div class="row mb-3">
      <label for="info" class="col-md-2 col-form-label">
        相關資訊
      </label>
      <div class="col-md-10">
        <input type="text" name="info" id="info" class="form-control" placeholder="可輸入撰稿人、拍照者...等資訊" value="{$news.info}" />
      </div>
    </div>
    
    <div class="row mb-3">
      <label for="date" class="col-md-2 col-form-label">
        活動日期
      </label>
      <div class="col-md-10">
        <input type="date" name="date" id="date" class="form-control" placeholder="請設定活動日期" value="{$news.date}" />
      </div>
    </div>
    
    <div class="row mb-3">
      <label for="files" class="col-md-2 col-form-label">
        相片或影片
      </label>
      <div class="col-md-10">
        <input type="file" name="files[]" id="files" class="form-control" placeholder="請上傳相片或影片"
          accept=".jpg,.jpeg,.png,.gif,.mp4" multiple />
      </div>
    </div>
    
    <div class="row mb-3">
      <label for="content" class="col-sm-2 col-form-label">
        文章內容
      </label>
      <div class="col-sm-10">
        <textarea class="form-control" name="content" id="content" placeholder="請輸入文章內容" rows="10">{$news.content}</textarea>
      </div>
    </div>
    
    ...略...

     

  3. 順便將分類選項的部份也改成活的

    ...略...
    <div class="row mb-3">
      <label class="col-sm-2 col-form-label"> 文章分類 </label>
      <div class="col-sm-10">
        {foreach $categories as $k=>$category}
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="cate_id" id="cate_id_{$k}" value="{$k}" {if $news.cate_id==$k}checked{/if} />
            <label class="form-check-label" for="cate_id_{$k}">{$category}</label>
          </div>
        {/foreach}
      </div>
    </div>
    ...略...

     

  4. 特別注意下方的送出按鈕前的隱藏欄位,若是有 $id 值的話,表示目前是要修改,所以必須傳送不同的 $op $id,才知道要改哪篇文章。

    <div class="text-center">
      {if $news.id}
        <input type="hidden" name="op" value="update" />
        <input type="hidden" name="id" value="{$news.id}" />
      {else}
        <input type="hidden" name="op" value="store" />
      {/if}
      <button type="submit" class="btn btn-primary">送出</button>
    </div>

四、加入建立文章到流程並建立函式以便給予預設值

  1. 到此為止似乎很完美,但若是回到新增,就會發現因為沒有預設值,所以都會出現一些訊息,如:
  2. 因此,我們再次修改一下 admin/index.php,讓建立文章時,也有預設值。
    
    switch ($op) {
        ...略...
    
        // 建立文章
        default:
            $op = 'create';
            $news = create();
            $smarty->assign('news', $news);
            break;
    }
    
    $smarty->assign('op', $op);
    $smarty->assign('data', $data);
    $smarty->display('index.tpl');
    
    // 建立文章
    function create()
    {
        $news = [
            'id' => '',
            'title' => '',
            'info' => '',
            'date' => date('Y-m-d'),
            'content' => '',
            'cate_id' => 3,
        ];
        return $news;
    }

     


:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D52%26tbdsn%3D1832

計數器

今天: 4297429742974297
昨天: 5069506950695069
總計: 5134745513474551347455134745513474551347455134745