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

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

設計連結的方法

admin_news.php 檔案中,設計新訊標題的連結。

<a href="./admin_news_detail.php?news_id=<?php echo $row_RS_news['news_id']; ?>" 
   class="w3-button w3-padding-small w3-block w3-left-align detail-btn" 
   data-title="新訊詳細內容">
  [<?php echo $row_RS_news['news_id']; ?>]
  <?php echo $row_RS_news['news_title']; ?>
</a>

設計 admin_news_detail.php:連線資料庫,顯示單筆新訊詳細資料

建立資料集:要顯示的新訊資料

<?php
require_once('../shared/conn_pdo.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());
}
?>

準備顯示資料的div框架

<div class="w3-row w3-text-grey form-news-result">
  <div class="w3-third w3-center">
	<!-- 影像圖片 -->
  </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">
        <!-- 新訊分類 -->
      </div>
    </div>
 
    <div class="w3-row">
      <div class="w3-col"><i class="w3-xxlarge fa fa-flag"></i></div>
      <div class="w3-rest">
        <!-- 新訊標題 -->
      </div>
    </div>
 
    <div class="w3-row">
      <div class="w3-col"><i class="w3-xxlarge fa fa-commenting"></i></div>
      <div class="w3-rest">
        <!-- 新訊內容 -->
      </div>
    </div>
 
    <div class="w3-row">
      <div class="w3-col"><i class="w3-xxlarge fa fa-map-marker"></i></div>
      <div class="w3-rest">
        <!-- 是否為焦點新訊, 是否顯示 -->
        <div class="w3-right">
        </div>
      </div>
    </div>
 
  </div>
</div>

將資料填入框架中

<div class="w3-row w3-text-grey form-news-result">
 
  <div class="w3-third w3-center">
    <!-- 影像圖片 -->
    <?php
    if( $row_RS_news['news_img_s']!='' ){
      echo '<img src="../img_news/'.$row_RS_news['news_img_s'].'" class="news_img" alt="">';
    }else{
      echo '<img src="../img_layout/pre_img_news.png" class="news_img" alt="">';
    }
    ?>
  </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">
        <!-- 新訊分類 -->
        [<?php echo $row_RS_news['news_class_id']; ?>]
        <?php echo $row_RS_news['news_class_name']; ?>
      </div>
    </div>
 
    <div class="w3-row">
      <div class="w3-col"><i class="w3-xxlarge fa fa-flag"></i></div>
      <div class="w3-rest">
        <!-- 新訊標題 -->
        <?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">
        <!-- 新訊內容 -->
        <?php echo nl2br($row_RS_news['news_content']); ?>
      </div>
    </div>
 
    <div class="w3-row">
      <div class="w3-col"><i class="w3-xxlarge fa fa-map-marker"></i></div>
      <div class="w3-rest">
        <!-- 是否為焦點新訊, 是否顯示 -->
        <?php $row_RS_news['news_focus']==1?$focus='是':$focus='不是'; ?>
        <?php echo $focus; ?>焦點新聞
 
        <div class="w3-right">
          <?php $row_RS_news['news_show']==1?$show='是':$show='不'; ?>
          <?php echo $show; ?>顯示
        </div>
      </div>
    </div>
 
  </div>
</div>

準備彈出的區塊

<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 檔案

admin_news.php 檔案的最後面, 設計 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);  //將資料取代<h2>
    
    var atarget = $(this).attr('href');
    $.get(atarget, function(data){
      //以AJAX技術中的get方法, 將指定的檔案載入, data變數接收載入的內容
      $('#w3-modal .content').html(data);  //接收的內容顯示在modal的中央區域
      $('#w3-modal').show();
    });
    return false;
  });
 
  $('.w3-modal-close').on('click',function(){
    $(this).parents('.w3-modal').hide();
  });
 
});
</script>

 

 

go TOP