支援 OICQ 頭像的 PHP 留言簿實作（一）：核心架構與首頁顯示

專案特色

• 整合 OICQ 風格頭像選擇（64 款預設圖示）
• 自動分頁顯示，每頁 10 筆
• 記錄留言者 IP，強化管理追蹤
• Email 格式合法性驗證（正則表達式）
• 後台管理介面簡潔安全，支援刪除操作
• 程式碼結構清晰，無複雜函式封裝，適合初學者研讀

檔案結構

資料庫結構 (mysql.txt)

CREATE TABLE notebook (
    name   CHAR(6),          -- 留言者姓名
    email  VARCHAR(35),      -- Email
    time   CHAR(30),         -- 留言時間字串
    face   CHAR(2),          -- 頭像編號 1-64
    ip     VARCHAR(16),      -- 留言者 IP
    title  VARCHAR(255),     -- 標題
    nnote  TEXT              -- 留言內容
);

設定檔 (config.php)

<?php
$db = mysql_connect("localhost", "root");
mysql_select_db("test", $db);

$username = "demo";   // 管理員帳號
$password = "demo";   // 管理員密碼
?>

首頁顯示邏輯 (index.php 核心片段)

<?php
include("config.php");

// 1. 取得總筆數
$result = mysql_query("SELECT * FROM notebook", $db);
$max = mysql_num_rows($result);   // 總留言數

// 2. 分頁參數計算
$page = isset($page) ? $page : 1;
$per_page = 10;
$p = ceil($max / $per_page);          // 總頁數
$low = $per_page * ($page - 1);       // 起始位移
$x = ($page == $p && $max % $per_page) ? $max % $per_page : $per_page;
if ($max == 0) $x = 0;

// 3. 依時間倒序撈取當頁資料
$result = mysql_query(
    "SELECT * FROM notebook ORDER BY time DESC LIMIT $low, $x", $db);
?>

<!-- HTML 版面輸出 -->
<table width="95%" border="1" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td>
      <?php for ($i = 0; $i < $x; $i++) { ?>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr bgcolor="#eeeeee">
            <td width="10%"><img src="image/face/icon<?=mysql_result($result,$i,'face')?>.gif" width="32" height="32"></td>
            <td width="16%">留言人：<?=mysql_result($result,$i,'name')?></td>
            <td width="41%">發表於：<?=mysql_result($result,$i,'time')?></td>
            <td width="12%"><a href="mailto:<?=mysql_result($result,$i,'email')?>"><img src="image/email.gif"></a></td>
            <td width="21%"><img src="image/ip.gif"> <?=mysql_result($result,$i,'ip')?></td>
          </tr>
          <tr><td colspan="5" class="purple10">標題：<?=mysql_result($result,$i,'title')?></td></tr>
          <tr bgcolor="#ffffff"><td colspan="5" class="black9">留言內容：<?=mysql_result($result,$i,'nnote')?></td></tr>
        </table>
      <?php } ?>
    </td>
  </tr>
</table>

<!-- 分頁導航 -->
<?php
for ($n = 1; $n <= $p; $n++) {
    echo "<a href='index.php?page=$n'>$n</a> ";
}
mysql_close($db);
?>

前端樣式重點

• 使用 CSS 類別統一字體、顏色、連結樣式（.blue9, .black9, .purple10, .white12）
• 表格式版面，固定寬度 95%，邊框顏色 #3366FF / #003399
• 頁首含 Logo、標題圖片、導航列（首頁、留言簿、新增留言、管理）

完整程式碼請參考原始內容。下一篇將詳細說明 addnote.php 與 delnote.php 的實作細節。