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

3-4. 新聞內容完整細節的顯示

連結前往顯示單筆新聞的詳細完整內容

news_index.php 檔案中,設計「縮圖」及「閱讀詳細內容」連結前往到 news_index.php 顯示單筆詳細的內容。

<!-- 這裡是左側預留顯示縮圖的位置 -->
<a href="?page=news_detail&news_id=<?php echo $row_RS_news['news_id']; ?>">
    <img src="img_layout/preImgBlog.png" alt="">
</a>

設計 news_detail.php:連線資料庫,建立單筆資料集

新增 news_detail.php 檔案。

<?php
require_once('shared/conn_pdo.php');
 
try{
  $sql_str = "SELECT news.*, news_class. news_class_name
              FROM news 
              INNER JOIN news_class
              ON news.news_class_id = news_class.news_class_id
              WHERE news.news_id = :news_id";
 
  $RS_news = $conn->prepare($sql_str);
  $news_id = $_GET['news_id'];
  $RS_news -> bindParam(':news_id' ,$news_id );
  $RS_news->execute();
  $row_RS_news = $RS_news->fetch(PDO::FETCH_ASSOC);
}
catch (PDOException $e ){
  die("Error!: ". $e->getMessage());
}
?>

設計單筆新聞內容的顯示

在左側區塊中設計單筆新聞的顯示區塊。

<div class="w3-row">
  <div class="w3-container w3-threequarter">
    <!-- 左側區域 -->
    <div class="news_item">
 
      <h3 class="w3-margin-bottom"></h3>
 
      <h4 class="w3-row">
        <span class="w3-col m12 l3">新聞分類:</span>
        <span class="w3-col m12 l3"></span>
      </h4>
 
      <div class="news_content">
      </div>
 
      <div class="isfocus"><i class="w3-xlarge fa fa-map-marker"></i></div>
 
    </div>
  </div>
 
  <div class="w3-container w3-quarter news-aside">
    <!-- 右側區域 -->
  </div>
</div>

在左側區塊中單筆新聞的資料顯示。

<div class="w3-row">
  <div class="w3-container w3-threequarter">
    <!-- 左側區域 -->
    <div class="news_item">
 
      <h3 class="w3-margin-bottom"><?php echo $row_RS_news['news_title']; ?></h3>
 
      <h4 class="w3-row">
        <span class="w3-col m12 l3">新聞分類:<?php echo $row_RS_news['news_class_name']; ?></span>
        <span class="w3-col m12 l3"><?php echo $row_RS_news['news_time_m']; ?></span>
      </h4>
 
      <div class="news_content">
        <?php echo nl2br($row_RS_news['news_content']); ?>
      </div>
 
      <?php if( $row_RS_news['news_focus'] ){ ?>
      <div class="isfocus"><i class="w3-xlarge fa fa-map-marker"></i></div>
      <?php } ?>
 
    </div>
  </div>
 
  <div class="w3-container w3-quarter news-aside">
    <!-- 右側區域 -->
  </div>
</div>

CSS樣式設計部份

<style>
.right-btn { display: block; padding: 8px 16px; margin-bottom: 5px; font-size: 16px;
  background-color: #bbb; color: #fff; border-radius: 5px; text-align: center; }
.right-btn:hover { background-color: #333; color: #fff; }

.news_item { background-color: #eee; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3); 
  padding: 30px; margin-bottom: 30px; width: 100%; position: relative; }
.news_item .w3-quarter a { width: 85%; height: auto; display: block; }
.news_item .w3-quarter img { width: 100%; height: auto; }
.news_item h3 { font-size: 20px; }
.news_item h4 { font-size: 12px; color: gray; margin-bottom: 20px; }
.news_item h4 span { margin-right: 30px; }
.news_item .news_content { text-align: justify; }
.news_item .isfocus { position: absolute; top: 10px; right: 10px; color: #c774a2; }

.news-aside .w3-bar-item { margin-bottom: 10px; font-size: 17px; }
/* 準備CSS設定協助右下角最新新聞的排版 */
.news-aside h1 { font-size:20px; text-align:center; margin:40px 0 10px; }
.news-aside .w3-ul li { border-bottom: 1px solid #999; overflow: hidden; }
.news-aside .w3-ul li:first-of-type { border-top: 1px solid #999; }
.news-aside .w3-ul li a { color: #333; display: block; }
.news-aside .w3-ul li a:hover { color: #000; }
.news-aside .w3-ul li a span { display: block; }
.news-aside .w3-ul li a span:nth-of-type(1) { font-size: 15px; text-align: justify; }
.news-aside .w3-ul li a span:nth-of-type(2) { font-size: 13px; color: #999; }
.news-aside .w3-ul li a span:nth-of-type(3) { font-size: 13px; color: #999; }
.w3-hoverable tbody tr:hover, .w3-ul.w3-hoverable li:hover {
  background-color: #e2e2e2; }
</style>

設計右側按鈕

<!-- 右側區域 -->
 
<div class="w3-bar-block">
  <!-- 右側按鈕區域 -->
  <a href="javascript:window.history.back();" class="right-btn">回上一頁</a>
 
  <a href="?page=news_index" class="right-btn">焦點新聞</a>
 
  <a href="?page=news_index&w=a" class="right-btn">全部新聞</a>
 
  <a href="javascript:
     if( confirm('新聞刪除後是無法還原的!\n\n確定要刪除嗎?') ){
         window.location.href='TS_webpage/news_delete.php?news_id=<?php echo $row_RS_news['news_id']; ?>';
     }" 
     class="right-btn">刪除新聞</a>
 
  <a href="?page=news_modify&news_id=<?php echo $row_RS_news['news_id']; ?>" 
     class="right-btn">編輯新聞</a>
 
  <a href="?page=news_add" class="right-btn">新增新聞</a>
</div>

 

 

go TOP