:::

5-7 完成顯示單一文章的功能

  1. 讀出單一文章的功能算簡單,只要取出一筆,故不需要跑迴圈,順便取出縮圖即可,同樣的,記得過濾,避免XSS。
    // 觀看某篇文章
    function show($id)
    {
        global $pdo;
        try {
            $stmt = $pdo->prepare('SELECT * FROM `news` WHERE `id` = ?');
            $stmt->execute([$id]);
            $news = $stmt->fetch();
            $media = $news['media'];
            $news = array_map('htmlspecialchars', $news);
            $news['files'] = json_decode($media, true);
        } catch (PDOException $e) {
            die("擷取 $id 資料失敗:" . $e->getMessage());
        }
        return $news;
    }

     

  2. 先修改 index.tpl,判斷若是 $op 的值等於 show 的時候,就載入 op_show.tpl 樣板,否則,就顯示所有頁面載入 op_index.tpl
  3. 由於單一新聞和所有新聞的版面結構完全不同,所以,我們先將所有新聞的版面結構另存為新檔 op_index.tpl
    <h3>所有文章</h3>
    <div class="row">
        <div class="col-md-9">
            <!-- 主內容 -->
            {include file="index_content.tpl"}
        </div>
        <div class="col-md-3">
            <!-- 側邊欄 -->
            {include file="index_side.tpl"}
        </div>
    </div>

     

  4. 再新增單一新聞 op_show.tpl 的樣板(基本上,就是 index_content.tpl 的完整版,故可複製它來修改),由於圖片可能不只一張,所以,用 foreach 將所有圖片的檔名取出,並顯示圖檔。
    <h3>{$news.title}</h3>
    <div class="row">
        <div class="col-md-9">
            <div>{$news.author}</div>
            <div>{$news.date} 點閱數:{$news.views}</div>
            <div>{$news.content|nl2br}</div>
        </div>
        <div class="col-md-3">
            <!-- 側邊欄 -->
            {if is_file(reset($news.files))}
                {foreach $news.files as $filename=> $file_path}
                    <img src="{$file_path}" alt="{$filename}" class="img-thumbnail"
                    style="object-fit: cover; width: 100%; height: 200px;">
                {/foreach}
            {/if}
        </div>
    </div>

     

  5. 圖檔的地方,我們利用 Smarty 的 {foreach as $索引 =>$值} 來將圖檔檔名讀出,索引值 $filename 是檔名,值 $file_path 則是檔案路徑,若沒意外的話,直接用 $file_path 即可,萬一日後修改檔案路徑,那麼再改用 $filename 去重新組成路徑亦可 。
  6. 最後修改原有的 index.tpl,依據不同的 $op 載入不同樣板
    <!doctype html>
    <html lang="en">
    
    {include file="index_head.tpl" web_title="校園日誌"}
    
    <body>
      <header>
        <!-- 導覽列 -->
        {include file="index_nav.tpl"}
      </header>
      <main>
        <div class="container">
          {if $op=='show'}
            {include file="op_show.tpl"}
          {else}
            {include file="op_index.tpl"}
          {/if}
        </div>
      </main>
      <footer>
        <!-- place footer here -->
      </footer>
      <!-- Bootstrap JavaScript Libraries -->
      <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    </body>
    
    </html>

     

  7. 若是未來有更多的功能,那得需要加入更多載入樣板的判斷式,這樣也太累。所以,我們稍微改一下,就自動根據 $op 值載入相對應檔名的樣板即可,如:
    <main>
        <div class="container">
            {include file="op_{$op}.tpl"}
        </div>
    </main>

    這樣未來新增功能時,只要設定好 $op,並產生對應樣板即可。

  8. 問題是,樣板怎麼知道 $op 的值呢?我們必須傳給樣板才行,所以修改 index.phpadmin.php其實未來也要),在套用樣板前,將 $op 送至樣板
    $smarty->assign('op', $op);
    $smarty->display('index.tpl');

     

  9. 如此單一頁面就大功告成囉!

:::

書籍目錄

展開 | 闔起

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D52%26tbdsn%3D1823

計數器

今天: 1528152815281528
昨天: 1416141614161416
總計: 7340175734017573401757340175734017573401757340175