🧩 前後台帳號與待辦事項管理系統

📹 教學影片

點擊上方圖片觀看完整教學影片

或直接訪問：https://youtu.be/LusZSmIhkjg

這是一個給程式新手練習的 PHP 專案，展示了前後台分離的帳號管理與待辦事項功能。

---

📁 專案結構

auth_project/
├── README.md                 # 專案說明文件
├── .gitignore               # Git 忽略設定
│
├── sql/                     # 📊 資料庫相關
│   └── initialize.sql       # 建立資料庫表結構與初始資料
│
├── src/                     # 🔧 核心函式庫
│   ├── db.php              # 資料庫連線設定
│   └── auth.php            # 認證與登入邏輯（密碼驗證、帳號檢查等）
│
└── public/                  # 🌐 前台使用者介面（Web 可訪問）
    ├── index.php            # 🔑 登入頁面
    ├── register.php         # 📝 註冊頁面
    ├── logout.php           # 🚪 登出功能
    ├── dashboard.php        # 📊 使用者首頁
    ├── admin_review.php     # ✅ 帳號審核管理頁面
    │
    ├── assets/              # 🎨 靜態資源
    │   ├── style.css        # 全局樣式表
    │   └── app.js           # 全局 JavaScript 邏輯
    │
    ├── admin/               # 👨‍💼 後台管理模組
    │   ├── users.php        # 👤 帳號管理（修改密碼、刪除帳號）
    │   └── groups.php       # 🏢 組別管理
    │
    └── front/               # 👥 前台功能模組
        └── todos.php        # 📋 待辦事項管理（新增、查看）

---

📖 主要檔案說明

🔧 核心函式庫 (src/)

db.php - 資料庫連線

• 用途：建立與 MySQL 資料庫的連線
• 內容：PDO 連線設定、資料庫選擇
• 使用方式：其他檔案透過 require_once 引入此檔案

auth.php - 認證模組

• 用途：處理使用者認證與授權
• 主要函式：
  • require_login() - 檢查使用者是否登入，未登入則導向登入頁面
  • verify_login() - 驗證帳號密碼，檢查帳號鎖定狀態
  • get_user_by_id() - 根據 ID 取得使用者資訊
  • user_count() - 計算資料庫中使用者總數
  • 密碼加密、密碼驗證、帳號鎖定邏輯

---

🌐 前台頁面 (public/)

index.php - 登入頁面

• 功能：
  • 使用者輸入帳號密碼進行登入
  • 顯示登入錯誤訊息（帳號不存在、密碼錯誤、帳號鎖定等）
  • 連結至註冊頁面
  • 第一次系統啟動自動導向註冊頁面（建立第一個管理員帳號）
• 登入成功後：導向 /front/todos.php
• 限制：連續錯誤 3 次鎖定 30 秒

register.php - 註冊頁面

• 功能：
  • 新使用者註冊（帳號、密碼、確認密碼）
  • 密碼驗證（長度、複雜度）
  • 第一個帳號自動設為系統管理員
  • 後續帳號需要管理員審核
• 註冊成功後：導向登入頁面

logout.php - 登出功能

• 功能：
  • 清除 SESSION 使用者資訊
  • 導向登入頁面

dashboard.php - 使用者首頁

• 功能：登入後的首頁，提供導航連結
• 顯示內容：
  • 使用者歡迎訊息
  • 連結至待辦事項頁面
  • 連結至後台管理（若有權限）
  • 登出按鈕

admin_review.php - 帳號審核管理

• 權限：僅系統管理員（is_admin = 1）可訪問
• 功能：
  • 審核未通過的註冊申請
  • 批准或拒絕帳號
  • 查看待審核帳號列表
  • 管理使用者權限與組別分配

---

👨‍💼 後台管理模組 (public/admin/)

users.php - 帳號管理

• 權限：後台管理員
• 功能：
  • 查看所有使用者列表
  • 修改使用者密碼
  • 刪除使用者帳號
  • 分配使用者所屬組別
  • 修改使用者角色（管理員/一般成員）
• 限制：不能修改或刪除自己的帳號

groups.php - 組別管理

• 權限：後台管理員
• 功能：
  • 新增組別（例如：A 組、B 組）
  • 修改組別名稱
  • 刪除組別
  • 查看各組的成員列表

---

👥 前台功能模組 (public/front/)

todos.php - 待辦事項管理

• 權限：所有登入使用者（無限制）
• 功能：
  • 新增待辦事項（純文字）
  • 查看待辦事項列表
  • 顯示待辦事項的建立者、所屬組別、建立時間
• 權限控制：
  • 一般成員：只能看到自己組別的待辦事項
  • 系統管理員（is_admin = 1）：可看到全部待辦事項
• 頁面頂部：
  • 僅管理員可見「後台管理」按鈕，點擊導向 admin_review.php
  • 一般成員看到灰色禁用按鈕（無法點擊）
• 頁面底部：「回首頁」按鈕返回 dashboard.php

---

🎨 靜態資源 (public/assets/)

style.css - 全局樣式表

• 內容：
  • 全局字體、背景顏色設定
  • 表單、按鈕、表格的統一樣式
  • 響應式設計基礎

app.js - 全局 JavaScript

• 內容：前端互動邏輯（表單驗證、動畫效果等）

---

📊 資料庫 (sql/)

initialize.sql - 資料庫初始化

• 用途：建立資料庫表結構
• 包含的表：
  • users - 使用者表（id, username, password, role, status, is_admin 等）
  • groups - 組別表（id, name）
  • todos - 待辦事項表（id, user_id, group_id, content, created_at）
• 使用方式：

  mysql -u root -p < sql/initialize.sql

---

👤 初始帳號設定

系統第一次啟動時：

1. 資料庫無任何帳號
2. 使用者存取任何頁面 → 自動導向 register.php
3. 建立第一個帳號 → 自動設為系統管理員（is_admin = 1）
4. 註冊完成 → 導向登入頁面
5. 登入成功 → 導向 todos.php

---

🔐 帳號與認證規則

登入流程

輸入帳號密碼 → 驗證帳號存在 → 檢查帳號狀態 → 驗證密碼 → 檢查帳號鎖定 → 登入成功/失敗

密碼安全

• 密碼使用 password_hash() 加密儲存（PHP 內建函式）
• 登入時使用 password_verify() 驗證（抗彩虹表攻擊）

帳號狀態

• pending - 待審核（無法登入）
• active - 已通過審核（可以登入）
• inactive - 已被停用（無法登入）

帳號鎖定

• 連續登入失敗 3 次 → 帳號鎖定 30 秒
• 顯示剩餘鎖定時間與剩餘嘗試次數
• 30 秒後自動解鎖

---

🧾 功能矩陣

功能	一般成員	管理員	系統管理員
登入	✅	✅	✅
新增待辦事項	✅	✅	✅
查看自己組別的待辦	✅	✅	✅
查看全部待辦	❌	❌	✅
進入後台管理	❌	❌	✅
帳號審核	❌	❌	✅
帳號管理	❌	❌	✅
組別管理	❌	❌	✅

---

⚙️ 技術堆棧

• 後端：PHP 7.4+
• 資料庫：MySQL 5.7+
• 資料庫驅動：PDO (PHP Data Objects)
• 前端：HTML5, CSS3, JavaScript (Vanilla)
• 密碼加密：PHP password_hash() / password_verify()
• SESSION 管理：PHP SESSION

---

🚀 快速開始

1. 初始化資料庫

mysql -u root -p < sql/initialize.sql

2. 配置資料庫連線

編輯 src/db.php，設定正確的資料庫連線資訊：

$host = 'localhost';
$db = 'auth_project';
$user = 'root';
$pass = 'your_password';

3. 啟動開發伺服器

cd public
php -S localhost:8000

4. 訪問系統

• 開啟瀏覽器：http://localhost:8000
• 自動導向註冊頁面建立第一個管理員帳號

---

📚 學習重點

新手可從此專案學到：

1. 認證與授權 - 帳號登入、權限檢查
2. 資料庫操作 - PDO 查詢、插入、更新
3. SESSION 管理 - 使用者狀態保持
4. 密碼安全 - 加密儲存與驗證
5. MVC 思想 - 邏輯與視圖分離
6. 錯誤處理 - 使用者友善的錯誤訊息
7. SQL 注入防護 - Prepared Statements 預防 SQL 注入

---

🔗 檔案依賴關係

index.php
  └─ src/auth.php
      └─ src/db.php

register.php
  └─ src/auth.php
      └─ src/db.php

front/todos.php
  └─ src/auth.php
      └─ src/db.php

admin_review.php, admin/users.php, admin/groups.php
  └─ src/auth.php
      └─ src/db.php

---

📝 版本控制

• Git 倉庫已初始化
• 所有 PHP 代碼已版本控制
• .gitignore 忽略了敏感檔案

---

💡 提示

• 修改資料庫密碼時，記得更新 src/db.php
• 新增功能時，確保使用 require_login() 保護受限頁面
• 所有使用者輸入使用 htmlspecialchars() 進行淨化，防止 XSS 攻擊
• 使用 Prepared Statements 防止 SQL 注入