聊天室系統（五）：會員資料修改功能

功能定位

提供登入會員修改暱稱、密碼、性別的介面。採用彈出視窗模式，修改成功後自動關閉視窗，父視窗可透過 JS 同步更新顯示。

資料表結構參考

CREATE TABLE `chat_user` (
  `userid` VARCHAR(30) PRIMARY KEY,   -- 登入帳號（不可改）
  `id` VARCHAR(30) NOT NULL,          -- 顯示暱稱
  `passwd` VARCHAR(30) NOT NULL,
  `sex` ENUM('帥哥','妹妹') NOT NULL
);

CREATE TABLE `chat_user_list` (
  `userid` VARCHAR(30) PRIMARY KEY,
  `id` VARCHAR(30) NOT NULL,
  `passwd` VARCHAR(30) NOT NULL,
  `sex` ENUM('帥哥','妹妹') NOT NULL
  -- 線上用戶列表，同步更新
);

完整程式碼

<?php
// changenick.php
require_once "../signup/mysql.php"; // 包含資料庫連線 $conn

$userid = $_GET['userid'] ?? $_POST['userid'] ?? '';
$action = $_POST['action'] ?? '';

if ($action === 'ok') {
    $new_nick = trim($_POST['nick'] ?? '');
    $new_pass = trim($_POST['passwd'] ?? '');
    $new_sex  = $_POST['sex'] ?? '帥哥';

    // 驗證暱稱唯一性（排除自己）
    $stmt = $conn->prepare("SELECT userid FROM chat_user_list WHERE id = ? AND userid != ?");
    $stmt->bind_param("ss", $new_nick, $userid);
    $stmt->execute();
    $stmt->store_result();
    if ($stmt->num_rows > 0) {
        die("該暱稱已被使用，請換一個。<br><a href='javascript:history.back()'>返回</a>");
    }
    $stmt->close();

    // 更新兩張表（建議用 Transaction）
    $conn->begin_transaction();
    try {
        $stmt = $conn->prepare("UPDATE chat_user_list SET id=?, passwd=?, sex=? WHERE userid=?");
        $stmt->bind_param("ssss", $new_nick, $new_pass, $new_sex, $userid);
        $stmt->execute();

        $stmt = $conn->prepare("UPDATE chat_user SET id=?, passwd=?, sex=? WHERE userid=?");
        $stmt->bind_param("ssss", $new_nick, $new_pass, $new_sex, $userid);
        $stmt->execute();

        $conn->commit();
        echo "<script>window.close();</script>"; // 關閉彈出視窗
        exit;
    } catch (Exception $e) {
        $conn->rollback();
        die("更新失敗：" . $e->getMessage());
    }
}
?>
<!DOCTYPE html>
<html><head>
<meta charset="gb2312"><title>修改個人資料</title>
<style>
body { background:#fff; font:12px/1.5 sans-serif; }
.layer { position:absolute; }
#formLayer { left:144px; top:54px; width:126px; }
#bgLayer { left:40px; top:28px; width:293px; height:202px; background:#6699FF; }
label { display:block; margin:5px 0; }
input, select { width:100%; box-sizing:border-box; }
</style>
</head><body>

<div id="bgLayer" class="layer"></div>
<div id="formLayer" class="layer">
  <form method="POST" action="?action=ok">
    <input type="hidden" name="userid" value="<?php echo htmlspecialchars($userid); ?>">
    <label>暱稱：<input name="nick" maxlength="20" required></label>
    <label>密碼：<input name="passwd" type="password" maxlength="20" required></label>
    <label>性別：
      <select name="sex">
        <option value="帥哥">帥哥</option>
        <option value="妹妹">美眉</option>
      </select>
    </label>
    <button type="submit">更改</button>
  </form>
</div>
<div class="layer" style="left:72px; top:58px;">用戶暱稱</div>
<div class="layer" style="left:72px; top:99px;">用戶密碼</div>
<div class="layer" style="left:82px; top:139px;">性別</div>

</body></html>

關鍵技術點

安全性強化建議

• 密碼雜湊：勿明文儲存，改用 password_hash() / password_verify()。
• CSRF 保護：表單加入 token 隱藏欄位，伺服端驗證。
• 輸入長度限制：前後端雙重驗證 maxlength。
• 權限檢查：確認 userid 屬於當前 Session 使用者，防止越權修改。
• HTTPS：傳輸加密保護密碼不被竊聽。

現代化重構方向

• 改為 AJAX 提交，回傳 JSON，無需彈出視窗與重整。
• 前端使用 Vue/React/Alpine.js 管理狀態，體驗更流暢。
• 後端統一 RESTful API：PATCH /api/user/profile。
• 引入輸入驗證庫（如 Respect/Validation）與統一錯誤回應格式。