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

3-3. 新聞系統的查詢顯示

建立要顯示的資料集

news_index.php 檔案中先建立全部新聞的資料集。

<?php
require_once('shared/conn_pdo.php');
 
$where = 'WHERE news.news_focus=1';
if( isset($_GET['w']) && $_GET['w']=='a' ){
  $where = '';
}
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
              ORDER BY news.news_time_m DESC";
 
  $RS_news = $conn -> query($sql_str);
  $total_RS_news = $RS_news->rowCount();
}
catch (PDOException $e ){
  die("Error!: ". $e->getMessage());
}
?>

設計顯示的標題與資訊與按鈕調整

<h1>
<?php
if( isset($_GET['w']) && $_GET['w']=='a' ){ echo '全部'; }else{ echo '焦點'; }
?>
新聞分享</h1>
<p style="margin-left:20px;">-------- 
<?php
if( isset($_GET['w']) && $_GET['w']=='a' ){ echo '全部'; }else{ echo '焦點'; }
?>
新聞有 <?php echo $total_RS_news; ?> 篇 --------</p>
<?php if( isset($_GET['w']) && $_GET['w']=='a' ){ ?>
<a href="?page=news_index" class="right-btn">焦點新聞</a>
<?php }else{ ?>
<a href="?page=news_index&w=a" class="right-btn">全部新聞</a>
<?php } ?>

設計顯示內容的重複區域

<!-- 這裡是新聞簡介的位置 -->
 
<?php foreach( $RS_news as $row_RS_news ){ ?>
 
<div class="news_item w3-row">  </div>
 
<?php } ?>

設計內容的顯示

<div class="news_item w3-row">
 
  <div class="w3-quarter">
    <!-- 這裡是左側預留顯示縮圖的位置 -->
    <a href=""><img src="img_layout/preImgBlog.png" alt=""></a>
  </div>
 
  <div class="w3-threequarter">
    <!-- 顯示新聞標題 -->
    <h3><?php echo $row_RS_news['news_title']; ?></h3>
    <!-- 以小字顯示新聞分類、發表時間 -->
    <h4 class="w3-row">
      <span class="news_title w3-col m12 l3">新聞分類:
        <?php echo $row_RS_news['news_class_name']; ?></span>
      <span class="news_time w3-col m12 l3">
        <?php echo $row_RS_news['news_time_m']; ?></span>
    </h4>
 
    <div class="news_content">
      <?php echo $row_RS_news['news_content']; ?>
    </div>
  </div>
 
</div>
<!-- 準備CSS設定協助排版 -->
<style>
 .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>

設計新聞內容只顯示開始的 60 個字

使用PHP中字串類函數,參看 w3schools RUNOOB
其中,截取局部字串,英文字串使用 substr(),中文字串使用 mb_substr()

<div class="news_content">
  <?php echo mb_substr( $row_RS_news['news_content'], 0, 60, 'utf-8' ).
            '......<a class="w3-button w3-text-blue" href="?page=news_detail&
             news_id='.$row_RS_news['news_id'].'">閱讀詳細內容</a>'; ?>
</div>

設計右下角顯示 5 筆最新新聞的簡介

準備顯示5筆最新新聞的資料集。

try {
  $sql_str = "SELECT * FROM news ORDER BY news_time_m DESC LIMIT 0,5";
  $RS_news_new = $conn -> query($sql_str);
} 
catch ( PDOException $e ){
  die("Errpr!: ". $e->getMessage());
}

設計右下角的顯示。

<h1>最新新聞</h1>
 
<ul class="w3-ul w3-hoverable">
 
  <?php foreach( $RS_news_new as $row_RS_news_new ){ ?>
 
  <li>
    <a href="?page=news_detail&news_id=<?php echo $row_RS_news_new['news_id']; ?>">
      <span><?php echo $row_RS_news_new['news_title']; ?></span>
      <span><?php echo $row_RS_news_new['news_time_m']; ?></span>
    </a>
  </li>
 
  <?php } ?>
 
</ul>

 

 

go TOP