WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

3-5n. 新訊系統的修改工作

設計連結的方法

admin_news.php 檔案中,設計修改的連結。

<a href="./admin_news_modify.php?news_id=<?php echo $row_RS_news['news_id']; ?>" 
           class="w3-button w3-padding-small modify-btn" data-title="修改新訊">修改</a

設計 admin_news_modify.php:在表單中顯示單筆新訊再進行修改

建立資料集:(1)要修改的新訊資料 (2)下拉式選單需要的新訊類別資料

<?php
require_once('../shared/conn_pdo.php');
include_once('../shared/assist.php');
 
$news_id = $_GET['news_id'];
//資料集:新訊內容 ======================================================
try{
  $sql_str = "SELECT news.*, news_class.news_class_name
              FROM news 
              LEFT JOIN news_class
              ON news.news_class_id = news_class.news_class_id
              WHERE news_id = :news_id";
 
  $RS_news = $conn->prepare($sql_str);
  $RS_news->bindParam(':news_id', $news_id);
  $RS_news->execute();
  $row_RS_news = $RS_news->fetch(PDO::FETCH_ASSOC);
}
catch (PDOException $e ){
  die("Errpr!: ". $e->getMessage());
}
 
//資料集:新訊分類 ======================================================
try {
  $sql_str = "SELECT * FROM news_class ORDER BY news_class_id ASC";
  $RS_news_class = $conn -> query($sql_str);
} 
catch ( PDOException $e ){
  die("Errpr!: ". $e->getMessage());
}
?>
 

雷同新增新訊的表單

<form enctype="multipart/form-data" method="post" action="admin_news_process.php" 
      class="w3-text-grey w3-row form-news">
 
  <div class="w3-third w3-center">
    <label class="w3-button w3-grey w3-round w3-padding cursor-p">
      <input type="file" name="news_img" id="news_img_m" style="display:none;">
      <i class="fa fa-photo"></i> 上傳圖片 </label>
    <div id="imgArea_m" title="" style="padding:20px;">
      <img class="imgArea" style="max-width:100%;height:auto;" 
           src="">
    </div>
  </div>
 
  <div class="w3-twothird">
 
    <div class="w3-row">
      <div class="w3-col"><i class="w3-xxlarge fa fa-folder-open"></i></div>
      <div class="w3-rest select_news_class">
        <!-- 這裡是下拉式選單選擇新訊分類 -->
        <select name="news_class_id" class="w3-select w3-border" required>
          <option value="">選擇新訊的分類...</option>
          <option value=""> </option>
        </select>
      </div>
    </div>
 
    <div class="w3-row">
      <div class="w3-col"><i class="w3-xxlarge fa fa-flag"></i></div>
      <div class="w3-rest">
        <!-- 這裡是新聞標題欄位 -->
        <input type="text" name="news_title" maxlength="30" class="w3-input w3-border" 
               placeholder="輸入新訊的標題" required value="">
      </div>
    </div>
 
    <div class="w3-row">
      <div class="w3-col"><i class="w3-xxlarge fa fa-commenting"></i></div>
      <div class="w3-rest">
        <!-- 這裡是新聞內容欄位 -->
        <textarea name="news_content" class="w3-input w3-border" rows="12" 
          placeholder="輸入新聞的內容" required></textarea>
      </div>
    </div>
 
    <div class="w3-row">
      <div class="w3-col"><i class="w3-xxlarge fa fa-map-marker"></i></div>
      <div class="w3-rest">
        <!-- 這裡是設計是否為焦點新聞的欄位 -->
        <label class="cursor-p">
          <input type="radio" name="news_focus" class="w3-radio" 
				  value="1"> 是焦點新聞</label>
        <label class="cursor-p">
          <input type="radio" name="news_focus" class="w3-radio" 
				  value="0"> 非焦點新聞</label>
        <div class="w3-right">
          <label class="cursor-p">
            <input type="checkbox" name="news_show" class="w3-check" 
				      value="1"> 顯示</label>
        </div>
      </div>
    </div>
 
  </div>
 
  <div class="form-btn-area">
    <a href="javascript:;" class="form-btn" 
       onclick="document.getElementById('w3-modal').style.display='none'">不修改新訊了</a>
    <input type="submit" class="form-btn" value="確定新增新聞">
  </div>
 
  <input type="hidden" name="news_id" value="">
  <input type="hidden" name="form-name" value="form-news-modify">
</form>

將新訊資料顯示到表單欄位中

<form enctype="multipart/form-data" method="post" action="admin_news_process.php" 
      class="w3-text-grey w3-row form-news">
 
  <div class="w3-third w3-center">
    <label class="w3-button w3-grey w3-round w3-padding cursor-p">
      <input type="file" name="news_img" id="news_img_m" style="display:none;">
      <i class="fa fa-photo"></i> 上傳圖片 </label>
    <div id="imgArea_m" title="" style="padding:20px;">
      <img class="imgArea" style="max-width:100%;height:auto;" 
           src="<?php 
                if( $row_RS_news['news_img_s']!='' ){
                  echo '../img_news/'.$row_RS_news['news_img_s'];
                }else{
                  echo '../img_layout/pre_img_news.png';
                }
                ?>">
    </div>
  </div>
 
  <div class="w3-twothird">
 
    <div class="w3-row">
      <div class="w3-col"><i class="w3-xxlarge fa fa-folder-open"></i></div>
      <div class="w3-rest select_news_class">
        <!-- 這裡是下拉式選單選擇新聞分類 -->
        <select name="news_class_id" class="w3-select w3-border" required>
          <option value="">選擇新訊的分類...</option>
          <?php foreach( $RS_news_class as $row_RS_news_class ){ ?>
          <option value="<?php echo $row_RS_news_class['news_class_id']; ?>"
          <?php if($row_RS_news['news_class_id']==$row_RS_news_class['news_class_id']){ echo 'selected'; } ?>>
            <?php echo $row_RS_news_class['news_class_name']; ?>
          </option>
          <?php } ?>
        </select>
      </div>
    </div>
 
    <div class="w3-row">
      <div class="w3-col"><i class="w3-xxlarge fa fa-flag"></i></div>
      <div class="w3-rest">
        <!-- 這裡是新聞標題欄位 -->
        <input type="text" name="news_title" maxlength="30" class="w3-input w3-border" 
               placeholder="輸入新訊的標題" required value="<?php echo $row_RS_news['news_title']; ?>">
      </div>
    </div>
 
    <div class="w3-row">
      <div class="w3-col"><i class="w3-xxlarge fa fa-commenting"></i></div>
      <div class="w3-rest">
        <!-- 這裡是新聞內容欄位 -->
        <textarea name="news_content" class="w3-input w3-border" rows="12" 
          placeholder="輸入新聞的內容" 
          required><?php echo $row_RS_news['news_content']; ?></textarea>
      </div>
    </div>
 
    <div class="w3-row">
      <div class="w3-col"><i class="w3-xxlarge fa fa-map-marker"></i></div>
      <div class="w3-rest">
        <!-- 這裡是設計是否為焦點新聞的欄位 -->
        <label class="cursor-p">
          <input type="radio" name="news_focus" class="w3-radio" value="1" 
          <?php if($row_RS_news['news_focus']==1){ echo 'checked'; } ?>> 是焦點新聞</label>
        <label class="cursor-p">
          <input type="radio" name="news_focus" class="w3-radio" value="0" 
          <?php if($row_RS_news['news_focus']==0){ echo 'checked'; } ?>> 非焦點新聞</label>
        <div class="w3-right">
          <label class="cursor-p">
            <input type="checkbox" name="news_show" class="w3-check" value="1" 
            <?php if($row_RS_news['news_show']==1){ echo 'checked'; } ?>> 顯示</label>
        </div>
      </div>
    </div>
 
  </div>
 
  <div class="form-btn-area">
    <a href="javascript:;" class="form-btn" 
       onclick="document.getElementById('w3-modal').style.display='none'">不修改新訊了</a>
    <input type="submit" class="form-btn" value="確定新增新聞">
  </div>
 
  <input type="hidden" name="news_id" value="<?php echo $row_RS_news['news_id']; ?>">
  <input type="hidden" name="form-name" value="form-news-modify">
</form>

準備彈出的區塊

這個部份在前一節已經設計好了。

<div id="w3-modal" class="w3-modal" style="z-index:9999">
  <div class="w3-modal-content w3-animate-top w3-card-4">
    <header class="w3-container w3-dark-grey">
      <a href="javascript:;" class="w3-right w3-xlarge w3-modal-close">&times;</a>
      <h2 class="w3-xlarge w3-text-light-grey" style="padding:0">ABC</h2>
    </header>
 
    <div class="w3-container w3-padding-24 content"></div>
 
    <footer class="w3-container w3-dark-grey">&nbsp;</footer>
  </div>
</div>

設計 JS 中的 AJAX 技術, 以異步更新的技術載入 admin_news_detail.php 檔案

這個部份在前一節已經設計好了。

<script>
$(function(){
  $('.modify-btn, .delete-btn, .detail-btn').on('click', function(){
    var datatitle = $(this).attr('data-title');
    $('.w3-modal header h2').html(datatitle);
    
    var atarget = $(this).attr('href');
    $.get(atarget, function(data){
      $('#w3-modal .content').html(data);
      $('#w3-modal').show();
    });
    return false;
  });
 
  $('.w3-modal-close').on('click',function(){
    $(this).parents('.w3-modal').hide();
  });
 
});
</script>

最後設計 admin_news_process.php 檔案, 更新資料回資料庫

<?php
require_once('../shared/conn_pdo.php');
include_once('../shared/assist.php');
 
$news_id = $_POST['news_id'];
 
if( isset($_POST['form-name']) && $_POST['form-name']=='form-news-modify' ){
  try {
    $sql_str = "UPDATE news SET news_class_id = :news_class_id, 
                                news_title    = :news_title   , 
                                news_content  = :news_content , 
                                news_focus    = :news_focus   , 
                                news_show     = :news_show    , 
                                news_time_m   = :news_time_m  
                          WHERE news_id       = :news_id";
    $stmt = $conn -> prepare($sql_str);
 
    $news_class_id = $_POST['news_class_id'];
    $news_title    = $_POST['news_title'];
    $news_content  = $_POST['news_content'];
    $news_focus    = $_POST['news_focus'];
    isset($_POST['news_show'])? $news_show = 1 : $news_show = 0; 
    $news_time_m   = date('Y-m-d H:i:s');
 
    $stmt -> bindParam(':news_class_id', $news_class_id);
    $stmt -> bindParam(':news_title'   , $news_title);
    $stmt -> bindParam(':news_content' , $news_content);
    $stmt -> bindParam(':news_focus'   , $news_focus);
    $stmt -> bindParam(':news_show'    , $news_show);
    $stmt -> bindParam(':news_time_m'  , $news_time_m);
    $stmt -> bindParam(':news_id'      , $news_id);
 
    $stmt -> execute();
 
    header('Location:./?page=admin_news');
  } 
  catch ( PDOException $e ){
    die("Errpr!: ". $e->getMessage());
  }
}
?>

 

 

go TOP