## 🧾「線上訂餐系統＋QR Code 網站」開發總整理

### 一、專案主題

建立一個可登入、訂餐、查看會員資料與自動生成 QR Code 的 **PHP 網站系統**，支援本機與區域網瀏覽。

---

### 二、主要功能與架構

#### 1️⃣ 網站主要頁面
| 檔案名稱 | 功能說明 |
| -------------------------- | ------------------------------------------------------------------------------ |
| **index.php** | 首頁，顯示餐廳簡介、登入區、營業時間條件（週一公休、營業時段 11:00–14:00、17:00–21:00），並連結各功能頁面。 |
| **register.html** | 會員註冊頁面，可設定帳號、密碼、姓名、電話、Email、頭像等，含基本格式驗證。 |
| **login.html** | 會員登入頁面，登入後儲存登入狀態至 LocalStorage。 |
| **logout.html** | 登出成功頁面，顯示登出提示並導回首頁。 |
| **member_home.php** | 會員專區，登入後可修改個人資料（含頭像預覽），具 Email、電話格式檢查。 |
| **reservation_form.html** | 線上訂位頁面，輸入姓名、電話、信箱、日期、時間、人數、區域與備註，符合營業條件才可送出。 |
| **thankyou.html** | 訂位成功頁面，顯示完成提示。 |
| **check_reservation.html** | 查詢、修改、刪除訂位資料（依姓名或信箱）。 |
| **adminLogin.html** | 管理者登入（帳號：[[e-mail]](mailto:[e-mail])、密碼：admin123），成功後導入後台。 |
| **admin_panel.html** | 管理後台，可檢視、刪除與更新所有顧客訂位資料。 |
| **contact_admin.html** | 聯繫管理者介面（選填功能）。 |
| **qrcode.php** | 透過 PHP 產生動態 QR Code，結合 ngrok 提供外網連結，讓手機掃描即可開啟網站。 |

---

#### 2️⃣ 登入與權限控制

* 新增會員登入機制，帳號密碼驗證後建立 `$_SESSION` 狀態。
* 回首頁後仍保持登入狀態（解決原本返回首頁後會登出問題）。
* 特殊帳號 `[e-mail]` + 密碼 `admin123` → 自動導向後台管理頁。

---

#### 3️⃣ 後台管理功能

* 可查看所有訂單與會員資料。
* 支援資料 **刪除、更新、查詢**。
* 與前端訂餐紀錄串接，讓管理員能直接控制資料庫內容。

---

#### 4️⃣ QR Code 功能

* 自動生成可掃描的網站連結 QR Code。
* 我們利用 PHP 的 phpqrcode 函式庫自動生成 QR Code，並設計輸入框讓管理員可輸入 ngrok 網址
* 使網站在外網也能被掃描開啟。掃描後即可連線至系統首頁，達成「一掃即訪」的便捷體驗。

---

#### 5️⃣ 營業時間條件判斷

* 限定營業時段為：

  11:00 - 14:00
  17:00 - 21:00

* 週一公休（自動顯示「今日公休」訊息，不開放訂餐）。

---

### 三、開發與問題解決過程

| 問題 | 解決方式 |
| ------------------------------------------ | ------------------------------------------------------- |
| QR Code 外網連結、圖片壞掉或亂碼 | 使用 `ngrok` 並確保無多餘輸出。 |
| `Call to undefined function ImageCreate()` | 開啟 `php.ini` 的 `extension=gd`。 |
| `mb_list_encodings()` 錯誤 | 啟用 `extension=mbstring`。 |
| 網頁僅能在 localhost 使用 | 開啟防火牆 80 連線權限，使用區網 IP 存取。 |
| 登入狀態無法保留 | 新增 `session_start()` 與登入後導向控制。 |

---

### 四、目前完成的功能清單 ✅

* [x] 使用者註冊／登入／登出
* [x] 會員資料修改（格式檢查）
* [x] 管理員後台（檢視、刪除、更新資料）
* [x] 訂餐首頁介面
* [x] 判斷營業時段與公休日、mail 和 phone格式限制
* [x] 產生 QR Code ( ngrok )

---

### 五、專案特色

* 🌐 **全區域網可用**：掃描 QR Code 即可進入訂餐系統。
* 🧠 **登入狀態維持**：使用 session 保存使用者登入資訊。
* 🔐 **權限分層清楚**：一般會員與管理員介面分離。
* ⏰ **營業條件**：營業時間與週一公休。

## 🧩 一次性設定（初次使用需做一次）

1. **開啟 PHP 圖形功能**

* 找到並打開 `php.ini`
* 確認以下設定存在，且前面沒有 `;`

     extension=gd

2. **安裝並登入 ngrok**

* 前往 [ngrok 註冊頁面](https://dashboard.ngrok.com/signup) 建立帳號
* 登入後到 [authtoken 頁面](https://dashboard.ngrok.com/get-started/your-authtoken)
* 複製指令並在終端機執行：

     ngrok config add-authtoken 你的token

* 顯示 `Authtoken saved` 即設定成功。

## 🚀 每次開啟專案步驟

1. **啟動 PHP 內建伺服器**

   php -S 0.0.0.0:80

在瀏覽器輸入：

   127.0.0.1

可進入本機網站。

2. **開啟 ngrok 外網通道**

   ngrok http 80

出現類似：

   Forwarding https://xxxxx.ngrok-free.app -> http://localhost:80

代表外網連線成功。
之後用這個 `https://xxxxx.ngrok-free.app` 產生 QR Code，即可讓手機或其他裝置連入網站。