題組一步驟1 切版、建置前後台畫面

一、目錄規劃與檔案更名

【步驟說明】

開立 css/、js/、upload/、icon/、view/、Controller/ 等目錄。
將素材 .css、.js、icon 圖檔複製到對應目錄。
素材版型更名，以符合解題需要：
- 01P01.html → login.php
- 01P02.html → index.php
- 01P03.html → backend.php
- 01P04.html → news.php
修改各 PHP 檔中 <link>、<script> 的路徑，指向新目錄。
view/ 下再建 front/（前台）、backend/（後台）、modal/（彈出視窗）三個子目錄。

二、用 include 拆分頁面框架

【概念】

index.php 與 backend.php 只保留「不變的外框」（導覽、頁首、頁尾），中間「會變動的內容區」挖出來，存成獨立的 view/ 檔案。
用 include 把對應的 view 檔案嵌回去，達到「一個外框 + 多個內容」的架構。

1 2 3 4 5 6

/* index.php 示意（只保留外框，中間用 include 填入） */
<!-- 導覽列 HTML -->
<div id="content">
    <?php include './view/front/main.php'; ?>
</div>
<!-- 頁尾 HTML -->

三、為什麼 include 要用 switch-case？

【問題根源】

頁面要根據 ?do=xxx 的 GET 參數決定要 include 哪個 view 檔案。
最直覺的做法是直接把 $do 拼進路徑：

1 2 3 4 5 6 7

// ❌ 危險做法：直接把 GET 值拼進路徑
$do = $_GET['do'] ?? 'main';
$file = './view/front/' . $do . '.php';
if (file_exists($file)) {
    include $file;   // ?do=../../config 就能 include 任意檔案
}

【風險】使用者可以傳入 ?do=../../config，讓伺服器 include 到不該公開的檔案（路徑穿越攻擊）。

【switch-case 解法】

明確列出「允許的頁面名稱」，只有 case 裡寫到的才能被載入，其他一律走 default（回到預設頁）。
這就是「白名單」概念：你不給路就走不到。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

// ✅ 前台 index.php
$do = (!empty($_GET['do'])) ? $_GET['do'] : 'main';

switch ($do) {
    case 'main':
        include './view/front/main.php';
        break;
    case 'login':
        include './view/front/login.php';
        break;
    case 'news':
        include './view/front/news.php';
        break;
    default:
        include './view/front/main.php';
}

// ✅ 後台 backend.php（同樣邏輯）
$do = (!empty($_GET['do'])) ? $_GET['do'] : 'title';

switch ($do) {
    case 'title': include './view/backend/title.php'; break;

【學習重點】

switch-case = 白名單：只有明確寫進 case 的頁面才能被 include，任意路徑一律被擋下。
default 扮演「保底」角色：不管傳什麼奇怪的值，都回到預設頁，不會出錯也不會洩漏。
同時也讓程式碼一眼看出「這個頁面有哪些子頁」，可讀性更高。
前台 index.php 和後台 backend.php 各有自己的 switch，管各自的 view 目錄。