從零開始建立 Q&A 管理功能

本文件總結了先前檔案中所學的步驟，說明如何從現有的 Member News 管理功能延伸出新的 Q&A 區塊。內容包括資料庫設計、PHP 檔案結構、 後台與前台的互動流程，以及程式設計邏輯。您可以依照此指南自力完成 Q&A 模組的製作。

一、前置準備

1. 安裝 XAMPP：下載並安裝 XAMPP（含 Apache 與 MySQL）後啟動這兩項服務。
2. 建立資料庫：進入 http://localhost/phpmyadmin，建立名稱為 feva 的資料庫， 編碼選擇 utf8_general_ci。
3. 匯入初始資料：將提供的 db.sql 匯入 feva，此檔案內含預設的 admin 管理者帳戶以及 member_news、faq 等資料表結構。
4. 部署檔案：把整個 cms 資料夾放入 XAMPP/htdocs 目錄下。 後台路徑為 http://localhost/cms/cms/，前台首頁路徑為 http://localhost/cms/index.php。

二、理解 Member News 管理邏輯

Member News 模組提供新增、編輯及刪除新聞的功能。以下說明其核心邏輯，這些技巧可直接套用到 Q&A 模組上。

1. 列表頁（member_news.php）

• 在頁面開頭使用 include("inc_function.php") 載入共用的函式，並呼叫 check_login() 確保已登入。
• 再呼叫 connect_db() 建立 MySQL 連線。
• 透過 SQL 取出 member_news 資料表所有資料，以迴圈輸出在 HTML 表格中。 每筆資料後提供「Edit」及「Delete」連結，並傳入該筆資料的 id。
• 「Add」按鈕連到 member_news_add.php。
• 利用 cookie 傳遞執行結果訊息（如新增成功、刪除成功），在頁面載入時讀取並顯示，之後立即清除。

2. 新增頁（member_news_add.php / member_news_add_submit.php）

• member_news_add.php 顯示表單，欄位包含標題 (topic)、內文 (content)、圖片 (pic) 以及日期 (date)。
• 表單需加上 enctype="multipart/form-data" 以支援檔案上傳。
• member_news_add_submit.php 先呼叫 connect_db()，再取得表單資料。 文字欄位透過 urlencode() 進行編碼，避免特殊字元造成錯誤。
• 檢查上傳圖片的副檔名，只允許 jpg 與 png，否則透過 cookie 回傳錯誤訊息並中止。
• 使用 move_uploaded_file() 將圖片移到指定資料夾並組成檔名，最後執行 INSERT 語法寫入資料表。
• 根據執行結果設定成功或失敗訊息至 cookie，再導回列表頁。

3. 編輯頁（member_news_edit.php / member_news_edit_submit.php）

• member_news_edit.php 根據 id 讀取單一資料，於表單中顯示現有內容。
• 使用隱藏欄位傳遞 id 和目前圖片路徑。
• member_news_edit_submit.php 判斷是否上傳新圖片：若有，檢查副檔名並覆蓋 $pic 變數；若無，沿用原圖。
• 最後使用 UPDATE 語法更新資料表。

4. 刪除頁（member_news_delete.php）

• 取得 id 後執行 DELETE 語法刪除資料。
• 設定 cookie 顯示刪除成功與否，再導回列表頁。

三、打造全新的 Q&A 模組

以下步驟說明如何從零開始設置 Q&A 管理功能，並在前台顯示問答。

步驟 1：建立資料表

在 feva 資料庫中建立 faq 表格，欄位如下：

CREATE TABLE `faq` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `question` TEXT NOT NULL,
  `answer` TEXT NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

可先插入幾筆預設資料，並記得使用 urlencode() 轉換中文。

步驟 2：複製並改寫後台檔案

1. 以 member_news 檔案為範本，在 cms/cms 目錄建立以下檔案：
• faq.php：列表頁，從 faq 資料表讀取所有問答並顯示在表格中，提供「Edit」與「Delete」連結。
• faq_add.php：新增表單頁，欄位只有 question 與 answer。
• faq_add_submit.php：處理新增表單，對文字欄位使用 urlencode() 再寫入資料庫。
• faq_edit.php：編輯表單頁，依據 id 填入現有的 question 與 answer。
• faq_edit_submit.php：處理編輯表單，更新指定 id 的資料。
• faq_delete.php：刪除指定 id 的資料。
2. 所有檔案都需 include("inc_function.php") 並呼叫 check_login() 與 connect_db()，確保連線與權限。
3. 將原本涉及圖片上傳、日期欄位的程式碼刪除或註解，只保留與文字相關的部分。
4. 使用和 Member News 相同的 cookie 機制顯示新增、修改或刪除的成功／失敗訊息。

步驟 3：修改導航列

編輯 inc_header.php，在導航列加入通往 Q&A 列表的新連結：

<nav>
  <a href="index.php">Home</a>
  <a href="member_news.php">Member News</a>
  <a href="faq.php">Q&A</a>
  <a href="logout.php">Logout</a>
</nav>

步驟 4：前台載入 Q&A

1. 開啟根目錄的 index.php，找到原本硬編碼的常見問題區塊。
2. 引入 cms/inc_function.php 並呼叫 connect_db()。
3. 用 PHP 執行 SELECT * FROM faq，以迴圈生成每一筆問答：

<?php
include_once "cms/inc_function.php";
connect_db();
$sql = "SELECT * FROM faq";
$rs = mysqli_query($connect, $sql);
while ($row = mysqli_fetch_array($rs)) {
?>
  <li>
    <div class="q"><?= urldecode($row["question"]) ?></div>
    <div class="a"><?= urldecode($row["answer"]) ?></div>
  </li>
<?php
}
?>

4. 配合現有的 jQuery 腳本（點擊問題顯示答案），即可完成動態常見問題區。

步驟 5：測試功能

1. 透過 http://localhost/cms/cms/login.php 進入後台，以預設帳號密碼 admin/admin 登入。
2. 進入「Q&A」頁面，新增幾筆問題與答案，確認資料能順利寫入資料庫。
3. 測試編輯與刪除功能，觀察列表是否正確更新。
4. 返回前台首頁，確認 Q&A 區塊出現新增的問答，點擊後能展開或收合答案。

四、注意事項

• Q&A 模組中的 question 與 answer 屬於純文字，不需處理圖片檔案。
• 所有文字資料在寫入資料庫前最好先用 urlencode() 編碼，取出時再用 urldecode() 解碼，確保特殊字元不會影響 SQL 執行。
• 為避免 SQL 注入風險，可在後續改用預備語句（prepared statements）。
• 若要支援多語言或更複雜的版面，可在此基礎上自行擴充 CSS 與 JavaScript。

依循以上步驟，您即可成功建立一個可在後台管理的 Q&A 功能，並在前台動態顯示問答內容。