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

3-2. 新聞系統的新增工作

先設計新聞分享頁面中的區塊的分配與按鈕的設計

news_index.php 檔案中設計區塊分配與按鈕。

<h1>新聞分享</h1>
<p style="margin-left:20px;">-------- 新聞有  篇 --------</p>
<div class="w3-row">
  <div class="w3-container w3-threequarter">
    <!-- 這裡是新聞簡介的位置 -->
  </div>
 
  <div class="w3-container w3-quarter news-aside">
    <!-- 這裡是右側按鈕與最新新聞的位置 -->
    <div class="w3-bar-block">
 
     <a href="?page=news_index"class="right-btn">焦點新聞</a>
 
     <a href="?page=news_index&w=a"class="right-btn">全部新聞</a>
 
     <a href="?page=news_add"class="right-btn">新增新聞</a>
 
    </div>
  </div>
</div>
<style>
.right-btn { display: block; padding: 8px 16px; margin-bottom: 5px; 
  background-color: #bbb; color: #fff; border-radius: 5px; text-align: center; }
.right-btn:hover { background-color: #333; color: #fff; }
</style>

新增新聞的表單

news_add.php 檔案中設計新增新聞內容的表單。

<h1>新增文章</h1>
 
<form name="newsAddForm" method="post" action="" 
      class="w3-container w3-text-grey w3-margin w3-row">
 
  <div class="w3-third w3-center">上傳圖片</div>
 
  <div class="w3-twothird">
 
    <div class="w3-row w3-section">
      <div class="w3-col" style="width:50px;text-align:center;">
        <!-- 這裡是表單欄位左側的圖案 -->
        <i class="w3-xxlarge fa fa-folder-open"></i>
      </div>
      <div class="w3-rest select_news_class">
        <!-- 這裡是下拉式選單選擇新聞分類 -->
      </div>
    </div>
 
    <div class="w3-row w3-section">
      <div class="w3-col" style="width:50px;text-align:center;">
        <!-- 這裡是表單欄位左側的圖案 -->
        <i class="w3-xxlarge fa fa-flag"></i>
      </div>
      <div class="w3-rest">
        <!-- 這裡是新聞標題欄位 -->
      </div>
    </div>
 
    <div class="w3-row w3-section">
      <div class="w3-col" style="width:50px;text-align:center;">
        <!-- 這裡是表單欄位左側的圖案 -->
        <i class="w3-xxlarge fa fa-commenting"></i>
      </div>
      <div class="w3-rest">
        <!-- 這裡是新聞內容欄位 -->
      </div>
    </div>
 
    <div class="w3-row w3-section">
      <div class="w3-col" style="width:50px;text-align:center;">
        <!-- 這裡是表單欄位左側的圖案 -->
        <i class="w3-xxlarge fa fa-map-marker"></i>
      </div>
      <div class="w3-rest">
        <!-- 這裡是設計是否為焦點新聞的欄位 -->
      </div>
    </div>
 
  </div>
 
</form>

設計下拉式選單選擇新聞分類

由於下拉式選單要選擇的是新聞的分類,所以得先建立新聞分類的資料集,再設計下拉式選單。

<?php
require_once('shared/conn_pdo.php');
 
//到資料庫查詢取得資料=>建立為資料集
try {
  $sql_str = "SELECT * FROM news_class ORDER BY news_class_id ASC";
  //query()執行SQL語句,返回PDOStatement物件,也就是一個資料集
  //query()方法簡潔方便,但不適合有條件的查詢,因為不恰當的條件輸入可能造成注入侵害及錯誤查詢
  $RS_news_class = $conn -> query($sql_str);
  //返回$RS_news_class資料集的列數,也就是記錄筆數
  $total_RS_news_class = $RS_news_class -> rowCount();
} 
catch ( PDOException $e ){
  die("Errpr!: ". $e->getMessage());
}
?>
<!-- 這裡是下拉式選單選擇新聞分類 -->
<select class="w3-select w3-border" name="news_class_id" required>
  <option value="" disabled selected>選擇新聞的分類...</option>
  <?php foreach( $RS_news_class as $row_RS_news_class ){ ?>
  <option value="<?php echo $row_RS_news_class['news_class_id']; ?>">
                 <?php echo $row_RS_news_class['news_class_name']; ?>
  </option>
  <?php } ?>
</select>

設計新聞標題欄位

<!-- 這裡是新聞標題欄位 -->
  <input type="text" name="news_title" class="w3-input w3-border" 
         placeholder="輸入新聞的標題" required>

設計新聞內容欄位

<!-- 這裡是新聞內容欄位 -->
<textarea name="news_content" class="w3-input w3-border" rows="8" 
          placeholder="輸入新聞的內容" required></textarea>

設計是否為焦點新聞

<!-- 這裡是設計是否為焦點新聞的欄位 -->
  <label><input class="w3-radio" type="radio" name="news_focus" value="1"> 
         是焦點新聞</label>
  <label><input class="w3-radio" type="radio" name="news_focus" value="0" checked> 
         非焦點新聞</label>

設計二個按鈕

<input type="hidden" name="formname" value="newsForm">
<input type="submit" class="form-btn" value="確定新增新聞">
<a href="javascript:window.history.back();" class="form-btn">不新增新回上一頁</a>
<style>
.form-btn { display: block; width: 100%; padding: 8px 16px; margin-bottom: 10px;
  background-color: #bbb; color: #fff; border-radius: 5px; border: none; 
  text-align: center; font-size: 18px; }
.form-btn:hover { background-color: #333; color: #fff; }
</style>

設計將資料新增到資料庫

可以利用 mb_index.php 中雷同的程式拷貝過來再修改。

if( isset($_POST['formname']) && $_POST['formname']=='newsForm' ){
  try{
    //使用命名(:名稱)參數來準備SQL語句
    $sql_str = "INSERT INTO news
    ( news_class_id, news_focus, news_title, news_content, news_time_c, news_time_m )
      VALUES 
    (:news_class_id,:news_focus,:news_title,:news_content,:news_time_c,:news_time_m)";
    //執行$conn物件中的prepare()預處理器
    $stmt = $conn->prepare($sql_str);
 
    //接收表單輸入的資料
    $news_class_id = $_POST['news_class_id'];
    $news_focus    = $_POST['news_focus'];
    $news_title    = $_POST['news_title'];
    $news_content  = $_POST['news_content'];
    $news_time     = date('Y-m-d H:i:s');
 
    //設定準備好的$stmt物件中對應的參數值
    $stmt->bindParam(':news_class_id' ,$news_class_id );
    $stmt->bindParam(':news_focus'    ,$news_focus    );
    $stmt->bindParam(':news_title'    ,$news_title    );
    $stmt->bindParam(':news_content'  ,$news_content  );
    $stmt->bindParam(':news_time_c'   ,$news_time   );
    $stmt->bindParam(':news_time_m'   ,$news_time   );
 
    //執行準備好的$stmt物件工作
    $stmt->execute();
 
    header('Location:./?page=news_index');
 
  }
  catch (PDOException $e ){
    die("Error!: ". $e->getMessage());
  }
}

 

 

go TOP