:::
7-3 製作文章摘要
7-4 加入文章分頁功能
- 製作分頁一直是個麻煩事，大致需要以下幾個步驟：
- 取得總文章數
- 根據一頁出現幾則，計算總頁數
- 取得當前頁碼
- 根據一頁出現幾則加上當前頁碼，就可使用
all()函數取得範圍內的所有文章 - 最後放上分頁工具
- 有AI相助就省事多了，一樣給AI提示詞：
如何利用all()函數搭配BootStrap5的分頁工具，來做出分頁功能？ - AI給了兩部份，第一部份是取得總文章數的函數，請放到
index.php的最後function getTotalCount(): int { global $pdo; $stmt = $pdo->query("SELECT COUNT(*) FROM school_news"); return (int) $stmt->fetchColumn(); } - 最後是要在頁面上放上分頁工具，不過這個寫法是直接在HTML中，套用PHP程式的寫法，比較難維護，我們目前適用樣板引擎的作法也不適用以下寫法。
<?php // 假設 all() 函數和 getTotalCount() 函數已經在其他文件中定義，並且已經包含 // require_once 'functions.php'; // 設置每頁顯示的記錄數 $perPage = 10; // 獲取當前頁碼（如果沒有設置，默認為1） $currentPage = isset($_GET['page']) ? (int)$_GET['page'] : 1; // 獲取總記錄數 $totalCount = getTotalCount(); // 計算總頁數 $totalPages = ceil($totalCount / $perPage); // 確保當前頁碼在有效範圍內 $currentPage = max(1, min($currentPage, $totalPages)); // 計算 OFFSET $offset = ($currentPage - 1) * $perPage; // 獲取當前頁的新聞數據 $news = all($offset, $perPage); // HTML 開始 ?> <!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>學校新聞列表</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container mt-4"> <h1>學校新聞列表</h1> <div class="row"> <?php foreach ($news as $item): ?> <div class="col-md-6 mb-4"> <div class="card"> <div class="card-body"> <h5 class="card-title"><?= $item['news_title'] ?></h5> <p class="card-text"><?= mb_substr($item['news_content'], 0, 100) ?>...</p> <p class="card-text"><small class="text-muted">發布日期：<?= $item['report_date'] ?></small></p> </div> </div> </div> <?php endforeach; ?> </div> <!-- 分頁導航 --> <nav aria-label="Page navigation"> <ul class="pagination justify-content-center"> <li class="page-item <?= ($currentPage == 1) ? 'disabled' : '' ?>"> <a class="page-link" href="?page=<?= $currentPage - 1 ?>" tabindex="-1" aria-disabled="true">上一頁</a> </li> <?php for ($i = 1; $i <= $totalPages; $i++): ?> <li class="page-item <?= ($i == $currentPage) ? 'active' : '' ?>"> <a class="page-link" href="?page=<?= $i ?>"><?= $i ?></a> </li> <?php endfor; ?> <li class="page-item <?= ($currentPage == $totalPages) ? 'disabled' : '' ?>"> <a class="page-link" href="?page=<?= $currentPage + 1 ?>">下一頁</a> </li> </ul> </nav> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html> - 因此，我們可以根據我們現況，請AI修改：
分頁導航部份是用smarty5做的，請改為smarty5語法，PHP會assign所有新聞$all_news給smarty5樣板檔 - AI就能根據需求給出回應
<?php require_once 'Smarty.class.php'; // 假設 all() 函數和 getTotalCount() 函數已經在其他文件中定義，並且已經包含 // require_once 'functions.php'; // 初始化 Smarty $smarty = new Smarty(); // 設置每頁顯示的記錄數 $perPage = 10; // 獲取當前頁碼（如果沒有設置，默認為1） $currentPage = isset($_GET['page']) ? (int)$_GET['page'] : 1; // 獲取總記錄數 $totalCount = getTotalCount(); // 計算總頁數 $totalPages = ceil($totalCount / $perPage); // 確保當前頁碼在有效範圍內 $currentPage = max(1, min($currentPage, $totalPages)); // 計算 OFFSET $offset = ($currentPage - 1) * $perPage; // 獲取當前頁的新聞數據 $all_news = all($offset, $perPage); // 將數據分配給 Smarty $smarty->assign('all_news', $all_news); $smarty->assign('currentPage', $currentPage); $smarty->assign('totalPages', $totalPages); // 顯示模板 $smarty->display('news_list.tpl'); -
依據回應，我們修改
index.php的switch()，基本上就是在執行製作分頁1~3的步驟，取得總文章數→根據一頁出現幾則（可以先改小一點$perPage = 3;），計算總頁數→取得當前頁碼，如此，就可以算出應該要從第幾筆資料開始抓，也就可以傳給all()，請他抓出指定範圍的文章。switch ($op) { case 'embed': # code... break; default: if (!empty($id)) { $smarty->assign('news', show($id)); $op = "show"; } else { // 設置每頁顯示的記錄數 $perPage = 3; // 獲取當前頁碼（如果沒有設置，默認為1） $currentPage = isset($_GET['page']) ? (int) $_GET['page'] : 1; // 獲取總記錄數 $totalCount = getTotalCount(); // 計算總頁數 $totalPages = ceil($totalCount / $perPage); // 確保當前頁碼在有效範圍內 $currentPage = max(1, min($currentPage, $totalPages)); // 計算 OFFSET $offset = ($currentPage - 1) * $perPage; $smarty->assign('currentPage', $currentPage); $smarty->assign('totalPages', $totalPages); $smarty->assign('all_news', all($offset, $perPage)); $op = "main"; } break; } - 最後只要將<!-- 分頁導航 -->部份，取代原有
templates/main.tpl的分頁工具就完成了！<!-- 分頁導航 --> <nav aria-label="Page navigation"> <ul class="pagination justify-content-center"> <li class="page-item {if $currentPage == 1}disabled{/if}"> <a class="page-link" href="?page={$currentPage - 1}" tabindex="-1" aria-disabled="true">上一頁</a> </li> {for $i=1 to $totalPages} <li class="page-item {if $i == $currentPage}active{/if}"> <a class="page-link" href="?page={$i}">{$i}</a> </li> {/for} <li class="page-item {if $currentPage == $totalPages}disabled{/if}"> <a class="page-link" href="?page={$currentPage + 1}">下一頁</a> </li> </ul> </nav> - 最就是多寫幾篇文章，就可以看出分頁工具的效果囉！
