---
# System prepended metadata

title: 線上訂餐系統 開發總整理

---

## 🧾「線上訂餐系統＋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**        | 管理者登入（帳號：[admin123@gmail.com](mailto:admin123@gmail.com)、密碼：admin123），成功後導入後台。 |
| **admin_panel.html**       | 管理後台，可檢視、刪除與更新所有顧客訂位資料。                                                        |
| **contact_admin.html**     | 聯繫管理者介面（選填功能）。                                                                 |
| **qrcode.php**             | 透過 PHP 產生動態 QR Code，結合 ngrok 提供外網連結，讓手機掃描即可開啟網站。                                      |


---

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

* 新增會員登入機制，帳號密碼驗證後建立 `$_SESSION` 狀態。
* 回首頁後仍保持登入狀態（解決原本返回首頁後會登出問題）。
* 特殊帳號 `admin123@gmail.com` + 密碼 `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`
   * 確認以下設定存在，且前面沒有 `;`

     ```bash
     extension=gd
     ```

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

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

     ```bash
     ngrok config add-authtoken 你的token
     ```
   * 顯示 `Authtoken saved` 即設定成功。


## 🚀 每次開啟專案步驟

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

   ```bash
   php -S 0.0.0.0:80
   ```

   在瀏覽器輸入：

   ```
   127.0.0.1
   ```

   可進入本機網站。

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

   ```bash
   ngrok http 80
   ```

   出現類似：

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

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