2026 暑訓 / COURSE 02.02

Day 1 - PHP 複習（下）

PHP 複習，把遺忘的都回憶起來。

INSTRUCTOR王朝威UPDATED2026.08.23

前半段我們已經複習了 PHP 的基本語法、變數、陣列、條件判斷、迴圈與函式。

接下來要開始進入 PHP 在 Web 開發中真正會使用到的部分：

使用 PHP 產生 HTML
HTML Form
GET 與 POST
PHP 超全域變數
檔案上傳
Linux 檔案權限
帳號密碼表單
JavaScript Fetch
JSON 回應

這些概念之後都會直接延伸到 CakePHP 的：

Request
FormHelper
Controller
Session
Authentication
Upload
JSON Response

因此這一段也是從「PHP 語法」正式進入「Web Application」的重要階段。

20. Form Processing

接下來開始進入 PHP 非常重要的用途：

處理 HTML Form。

PHP 很常被用來接收使用者從 Browser 傳送到 Server 的資料。

例如：

登入
註冊
搜尋
新增文章
留言
上傳檔案

本質上都包含：

Browser
   ↓
Form
   ↓
HTTP Request
   ↓
PHP
   ↓
處理資料

GET 與 POST

HTML Form 常見有兩種傳送資料的方法：

GET
POST

例如：

<form method="get">

或者：

<form method="post">

兩者都可以把 Browser 中的表單資料送到 Server，但是用途與傳送方式不同。

GET

GET 的資料通常會放在 URL 中。

例如：

/search.php?keyword=cakephp

這裡：

keyword

是參數名稱。

而：

cakephp

是參數值。

PHP 可以透過：

$_GET

取得資料。

例如：

$keyword = $_GET['keyword'];
echo $keyword;

如果網址是：

/search.php?keyword=cakephp

就會得到：

cakephp

POST

POST 通常用在表單資料提交。

例如：

<form method="post">

資料不會直接顯示在一般 URL Query String 中。

PHP 可以透過：

$_POST

取得 POST 資料。

例如：

$username = $_POST['username'];
$password = $_POST['password'];

這也是稍後登入表單會使用的方式。

21. PHP 超全域變數

PHP 提供很多 Superglobal Variables。

這些變數可以直接在程式的不同 Scope 中使用。

PPT 中介紹了以下幾個重要的超全域變數：

$_GET
$_POST
$_SERVER
$_FILES
$_COOKIE
$_SESSION
$_REQUEST
$_ENV

`$_GET`

取得透過：

method="GET"

送出的資料。

例如：

$_GET['keyword'];

`$_POST`

取得透過：

method="POST"

送出的資料。

例如：

$_POST['username'];

`$_SERVER`

取得目前 Server 與 Request 執行環境相關資訊。

例如可能包含：

HTTP Headers
Request Method
Script Path
Server Name
Client Information

可以直接：

var_dump($_SERVER);

觀察內容。

`$_FILES`

用來取得：

上傳檔案的資訊。

例如：

$_FILES['myFile'];

稍後會完整使用。

`$_COOKIE`

取得 Cookie。

例如：

$_COOKIE['username'];

`$_SESSION`

取得 Session 資料。

例如：

$_SESSION['user'];

之後在登入、Authentication 等功能中會接觸到這類概念。

`$_REQUEST`

$_REQUEST 可以取得 GET 或 POST 等來源的資料。

不過在實際開發時，通常還是建議清楚知道資料來自：

$_GET

或：

$_POST

`$_ENV`

取得 Server 環境變數。

例如開發系統時常見：

Database Username
Database Password
App Environment
API Key

等資訊都可能透過環境變數提供。

22. File Upload：建立 HTML 表單

接下來實作檔案上傳。

先建立：

10.html

內容：

<!DOCTYPE html>
<html lang="zh-tw">

<head>
    <meta charset="UTF-8">
    <title>File Upload</title>
</head>

<body>

    <form
        action="10.php"
        method="post"
        enctype="multipart/form-data"
    >
        <input type="file" name="myFile">
        <input type="submit" value="Upload">
    </form>

</body>

</html>

這個 Form 有幾個非常重要的地方。

`action="10.php"`

action="10.php"

代表表單送出後，資料會送到：

10.php

因此流程是：

10.html
   ↓ Submit
10.php

也就是：

Form
→ POST Request
→ PHP

`method="post"`

因為檔案內容要送給 Server，所以這裡使用：

method="post"

之後在 PHP 中會使用：

$_FILES

取得檔案資訊。

`enctype="multipart/form-data"`

如果 HTML Form 中要包含 File Upload，必須使用：

enctype="multipart/form-data"

例如：

<form
    action="10.php"
    method="post"
    enctype="multipart/form-data"
>

否則上傳檔案不會用正確的格式送給 Server。

這是 File Upload Form 很重要的一個設定。

`<input type="file">`

選擇檔案的控制項：

<input type="file" name="myFile">

其中：

name="myFile"

非常重要。

因為 PHP 之後會使用：

$_FILES["myFile"]

取得它。

因此：

HTML name
        ↓
PHP Array Key

也就是：

name="myFile"

對應：

$_FILES["myFile"]

PHP 接收上傳檔案

建立：

10.php

PPT 的程式如下：

<?php

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if ($_FILES["myFile"]["error"] == 0) {
        $target_dir = "uploads/";
        $fileName = $_FILES["myFile"]["name"];
        $target_file =
            $target_dir . basename($fileName);

        if (
            move_uploaded_file(
                $_FILES["myFile"]["tmp_name"],
                $target_file
            )
        ) {
            echo "檔案 "
                . basename($_FILES["myFile"]["name"])
                . " 已上傳。";

            print_r($_FILES["myFile"]);
        } else {
            echo "抱歉，檔案上傳失敗。<br>";
            print_r($_FILES["myFile"]);
        }

    } else {
        echo "請選擇檔案";
    }
}
?>

這一段雖然比前面的 PHP 程式稍長，但只要拆開來看就很好理解。

判斷 Request Method

首先：

if ($_SERVER["REQUEST_METHOD"] == "POST") {

$_SERVER 可以取得 HTTP Request 相關資訊。

其中：

$_SERVER["REQUEST_METHOD"]

表示目前使用的 HTTP Method。

當 Form：

method="post"

提交時：

$_SERVER["REQUEST_METHOD"]

就是：

POST

所以這個判斷可以理解為：

如果使用者真的提交 Form
才執行後面的上傳程式

取得上傳錯誤狀態

接著：

if ($_FILES["myFile"]["error"] == 0) {

$_FILES["myFile"] 裡面包含一組檔案資訊。

其中：

["error"]

用來判斷上傳是否發生錯誤。

範例中：

== 0

表示沒有上傳錯誤。

設定 Upload Folder

接著：

$target_dir = "uploads/";

設定檔案最後要儲存的資料夾：

uploads/

所以專案結構大致會變成：

/var/www/html
│
├── 10.html
├── 10.php
│
└── uploads/

取得原始檔名

$fileName = $_FILES["myFile"]["name"];

這一行取得使用者上傳檔案的名稱。

例如使用者選擇：

photo.jpg

那麼：

$fileName

就可能是：

photo.jpg

建立檔案儲存路徑

接著：

$target_file =
    $target_dir . basename($fileName);

如果：

$target_dir = "uploads/";

而：

$fileName = "photo.jpg";

最後：

$target_file

就是：

uploads/photo.jpg

`basename()`

範例使用：

basename($fileName);

例如：

basename("/home/user/photo.jpg");

會取得：

photo.jpg

也就是從 Path 中取得最後的檔案名稱部分。

上傳檔案先放在哪裡？

Browser 將檔案送到 PHP 之後，PHP 並不是直接把它放進：

uploads/

而是先放到一個暫存位置。

這個位置可以透過：

$_FILES["myFile"]["tmp_name"]

取得。

概念上：

Browser
   ↓ Upload
PHP Temporary File
   ↓
tmp_name

接著我們才需要把它搬到真正希望儲存的位置。

`move_uploaded_file()`

PPT 使用：

move_uploaded_file(
    $_FILES["myFile"]["tmp_name"],
    $target_file
);

它的概念是：

PHP 暫存檔案
        ↓
移動
        ↓
uploads/photo.jpg

也就是：

tmp_name
→ target_file

如果成功：

if (move_uploaded_file(...)) {

就顯示：

echo "檔案 ... 已上傳。";

如果失敗：

else {

顯示：

抱歉，檔案上傳失敗。

查看 `$_FILES`

PPT 中也使用：

print_r($_FILES["myFile"]);

來觀察上傳檔案的內容。

你可以實際上傳一個檔案，再查看 PHP 收到哪些資料。

大致上可以看到與：

name
type
tmp_name
error
size

相關的資訊。

這也是理解 File Upload 很好的方式。

建立 uploads 資料夾

只有 PHP 程式還不夠。

因為程式中指定：

$target_dir = "uploads/";

所以 Server 中必須存在：

uploads

資料夾。

可以執行：

mkdir uploads

這表示：

Make Directory

也就是建立：

uploads/

資料夾。

設定 uploads 的 Owner

PPT 接著使用：

chown -R www-data:www-data uploads

chown 是：

Change Owner

也就是修改檔案或資料夾的擁有者。

這裡：

www-data:www-data

表示：

Owner = www-data
Group = www-data

因為 Apache / PHP 在這個 Container 環境中會以相關 Web Server 使用者執行。

因此需要讓 Web Server 有適當權限操作：

uploads/

`-R`

指令中的：

-R

表示 Recursive。

也就是：

不只 uploads 本身
還包含 uploads 底下的內容

因此：

chown -R www-data:www-data uploads

可以理解成：

將 uploads 與其底下的內容，遞迴設定成指定 Owner 與 Group。

chmod 755

接著：

chmod -R 755 uploads

chmod 用來修改：

File Permission

也就是檔案權限。

Linux 權限主要分成三組：

u：User
g：Group
o：Other

可以理解為：

自己
同群組的人
其他人

Read / Write / Execute

Linux 常見三種權限：

r = read
w = write
x = execute

數字表示：

r = 4
w = 2
x = 1

因此：

7 = 4 + 2 + 1

也就是：

rwx

而：

5 = 4 + 1

就是：

r-x

所以：

拆開來就是：

7  5  5
│  │  │
│  │  └─ Other
│  └──── Group
└─────── User

755 的實際意思

User  = 7 = rwx
Group = 5 = r-x
Other = 5 = r-x

因此：

代表：

Owner
→ Read + Write + Execute

Group
→ Read + Execute

Others
→ Read + Execute

PPT 使用：

chmod -R 755 uploads

就是替：

uploads/

及其內容設定對應權限。

File Upload 流程整理

到這裡可以把整個檔案上傳流程整理成：

使用者選擇檔案
       ↓
<input type="file">
       ↓
multipart/form-data
       ↓
POST Request
       ↓
$_FILES
       ↓
PHP 暫存檔案
       ↓
move_uploaded_file()
       ↓
uploads/

同時 Server 端還需要：

正確的目錄
+
正確的 Owner
+
正確的 Permission

否則即使 PHP 程式本身正確，也可能無法成功儲存檔案。

23. 帳號密碼表單

接下來使用一般 POST Form。

建立：

11.html

PPT 的程式如下：

<!DOCTYPE html>
<html lang="zh-tw">

<head>
    <meta charset="UTF-8">
    <title>Form Test</title>
</head>

<body>

    <form
        id="form"
        action="11.php"
        method="post"
    >
        <fieldset>

            <legend>帳單資訊</legend>
            <label for="name">帳號</label>
            <input
                type="text"
                name="username"
                id="username"
                placeholder="請輸入帳號"
                required
            >

            <label for="password">密碼</label>
            <input
                type="password"
                name="password"
                id="password"
                placeholder="請輸入密碼"
                required
            >

            <button type="submit">
                送出
            </button>

        </fieldset>
    </form>

    <div id="output"></div>

</body>

</html>

這次 Form 沒有 File，所以不需要：

enctype="multipart/form-data"

只需要：

method="post"

Form 的 `name`

帳號欄位：

<input
    type="text"
    name="username"
>

密碼欄位：

<input
    type="password"
    name="password"
>

這兩個 name 就會成為 POST 的 Key。

因此 PHP 可以使用：

$_POST['username'];
$_POST['password'];

取得資料。

這個對應關係一定要熟悉：

HTML
name="username"
       ↓
PHP
$_POST['username']

以及：

HTML
name="password"
       ↓
PHP
$_POST['password']

required

PPT 的 Input 中加入：

required

例如：

<input
    type="text"
    name="username"
    required
>

這表示 Browser 會要求使用者填寫這個欄位。

如果完全沒有輸入，就嘗試送出，Browser 通常會先阻止 Form Submit。

PHP 接收帳號密碼

接著建立：

11.php

PPT 程式：

<?php

$username = $_POST['username'];
$password = $_POST['password'];

if ($username == "guest") {

    echo "歡迎，訪客！";

} elseif (
    $username == "admin"
    && $password == "1234"
) {

    echo "歡迎，管理員！";

    var_dump($_SERVER);
    var_dump($_GET);
    var_dump($_POST);

} elseif (
    $username == "user"
    && $password == "5678"
) {

    echo "歡迎，使用者！";

} else {

    echo "無效的帳號或密碼！";
}
?>

這個範例把前面學過的很多概念全部串起來了。

取得 POST Data

首先：

$username = $_POST['username'];
$password = $_POST['password'];

也就是：

Browser Form
       ↓
POST
       ↓
$_POST
       ↓
PHP Variable

guest

第一個條件：

if ($username == "guest") {
    echo "歡迎，訪客！";
}

只要 Username：

guest

就會輸出：

歡迎，訪客！

admin

第二個條件：

elseif (
    $username == "admin"
    && $password == "1234"
)

這裡使用前面學過的：

==
&&

也就是：

username 必須是 admin

而且

password 必須是 1234

兩個條件都成立才進入這一段。

成功後：

echo "歡迎，管理員！";

並使用：

var_dump($_SERVER);
var_dump($_GET);
var_dump($_POST);

觀察目前 Request 的相關資料。

user

第三個條件：

elseif (
    $username == "user"
    && $password == "5678"
)

符合：

username = user
password = 5678

就顯示：

歡迎，使用者！

登入失敗

其他情況：

else {
    echo "無效的帳號或密碼！";
}

例如：

username = admin
password = abc

就不會通過：

$username == "admin"
&&
$password == "1234"

因此最後進入：

else

24. 傳統 Form Submit 的問題

目前 11.html：

<form action="11.php" method="post">

當按下：

送出

Browser 會直接跳到：

11.php

例如：

11.html
   ↓ Submit
11.php

這種做法完全沒有問題，而且也是 HTML Form 最基本的運作方式。

但有時候我們希望：

不要重新載入整個網頁

而是在背景將資料送到 Server。

這時可以使用 JavaScript：

Fetch API

使用 Fetch 提交表單

PPT 的做法是：

先將：

11.html

複製成：

12.html

再於：

</form>

後面加入 JavaScript。

程式如下：

<script>

const form =
    document.getElementById('form');

form.onsubmit = function (event) {
    event.preventDefault();

    fetch('12.php', {
        method: 'POST',
        body: new FormData(form)
    }).then(function (response) {
        return response.json();
    }).then(function (text) {
        document
            .getElementById('output')
            .innerHTML = text.msg;
        if (text.detail) {
            console.log(text.detail);
        }
    });
};

</script>

取得 Form Element

第一行：

const form =
    document.getElementById('form');

對應 HTML：

<form id="form">

JavaScript 透過：

document.getElementById('form')

取得這個 Form。

`onsubmit`

接著：

form.onsubmit = function (event) {

表示：

當使用者 Submit Form 時
執行這個 Function

這裡再次出現前面 PHP 已經學過的：

Function

只是現在換成 JavaScript 語法。

`event.preventDefault()`

event.preventDefault();

用來取消 Browser 原本的 Form Submit 行為。

原本：

Submit
↓
跳到 12.php

加入：

event.preventDefault();

之後變成：

Submit
↓
JavaScript 接手
↓
fetch()

因此整個頁面不必直接跳轉。

Fetch API

接著：

fetch('12.php', {

表示發出一個 HTTP Request 到：

12.php

並指定：

method: 'POST'

因此仍然是：

POST Request

只是這次不是 Browser 傳統 Form Navigation，而是 JavaScript 發送 Request。

FormData

body: new FormData(form)

FormData 會把 Form 裡的資料整理起來。

例如 HTML：

<input name="username">
<input name="password">

最後會把：

username
password

一起傳給 Server。

因此 PHP 端仍然可以：

$_POST['username'];
$_POST['password'];

取得資料。

也就是說，PHP 的接收方式沒有因為使用 Fetch 就完全改變。

Server 回應 JSON

接著：

.then(function (response) {
    return response.json();
})

表示我們預期：

12.php

回傳的是 JSON。

因此 Server 端也不能只是單純：

echo "歡迎，管理員！";

而是需要產生 JSON 格式。

PHP 產生 JSON

建立：

12.php

PPT 程式如下：

<?php

$username = $_POST['username'];
$password = $_POST['password'];

if ($username == "guest") {
    $output = [
        "msg" => "歡迎，訪客！"
    ];
} elseif (
    $username == "admin"
    && $password == "1234"
) {
    $output = [
        "msg" => "歡迎，管理員！",
        "detail" => $_SERVER
    ];
} elseif (
    $username == "user"
    && $password == "5678"
) {
    $output = [
        "msg" => "歡迎，使用者！"
    ];
} else {
    $output = [
        "msg" => "無效的帳號或密碼！"
    ];
}

echo json_encode($output);
?>

這次最大的差別在於：

以前是：

echo "歡迎，訪客！";

現在改成先建立 Array：

$output = [
    "msg" => "歡迎，訪客！"
];

PHP Array 作為 Response Data

例如：

$output = [
    "msg" => "歡迎，管理員！",
    "detail" => $_SERVER
];

這是一個 PHP Array。

結構可以理解成：

msg
→ 歡迎，管理員！

detail
→ Server Information

但 JavaScript 不能直接接收 PHP Array。

因此需要轉換成：

JSON

`json_encode()`

PHP 使用：

json_encode()

把 PHP 資料轉換成 JSON。

例如：

$output = [
    "msg" => "歡迎，訪客！"
];

echo json_encode($output);

產生的 JSON 概念上類似：

{
    "msg": "歡迎，訪客！"
}

這樣 JavaScript 就可以解析它。

JavaScript 取得 JSON

Fetch：

return response.json();

將 Server 回應解析成 JavaScript 可以使用的資料。

接著：

.then(function (text) {

這個：

text

就代表 PHP 回傳的 JSON 資料。

例如：

text.msg

就可以取得：

歡迎，訪客！

將結果顯示在網頁

PPT 使用：

document
    .getElementById('output')
    .innerHTML = text.msg;

對應 HTML：

<div id="output"></div>

因此：

PHP JSON
   ↓
text.msg
   ↓
JavaScript
   ↓
#output
   ↓
Browser 顯示結果

例如：

歡迎，管理員！

直接顯示在原本的網頁裡。

額外資料輸出到 Console

Admin 登入時 PHP 回傳：

$output = [
    "msg" => "歡迎，管理員！",
    "detail" => $_SERVER
];

因此 JavaScript 中：

if (text.detail) {
    console.log(text.detail);
}

會先判斷：

detail 是否存在

如果有，就把它輸出到 Browser Developer Tools 的 Console。

這裡：

if

其實和前面 PHP 的 Branch 概念完全相同。

25. 傳統 Form 與 Fetch 比較

到這裡可以比較兩種 Form Processing。

傳統 Form

User Submit
   ↓
Browser
   ↓
POST
   ↓
11.php
   ↓
Browser 跳到 PHP 回應頁

HTML：

<form
    action="11.php"
    method="post"
>

PHP：

echo "歡迎，使用者！";

Fetch

流程則是：

User Submit
   ↓
JavaScript
   ↓
preventDefault()
   ↓
fetch()
   ↓
POST
   ↓
12.php
   ↓
JSON
   ↓
JavaScript
   ↓
更新目前頁面

整個頁面不需要重新導向。

這就是很多現代 Web Application 常見的前後端互動模式。

PHP、JavaScript 與 JSON 的角色

這個範例可以很好地看出三者分工。

PHP

PHP 在 Server：

接收資料
處理邏輯
建立 Response

例如：

$username = $_POST['username'];

JavaScript

JavaScript 在 Browser：

監聽使用者操作
送出 Request
取得 Response
更新畫面

例如：

fetch(...)

JSON

JSON 是 Browser 與 Server 之間交換資料的一種格式。

例如：

{
    "msg": "歡迎，管理員！"
}

所以完整概念：

Browser
JavaScript
   ↓ POST
PHP Server
   ↓ JSON
JavaScript
   ↓
HTML

26. Exercise：統一發票兌獎系統

請使用 HTML、JavaScript 與 PHP 製作一個簡易的「統一發票兌獎系統」。

題目要求

建立一個發票兌獎表單，讓使用者輸入 8 碼發票號碼。
本練習不需要連接資料庫，也不需要從網路取得開獎資料。
請直接使用 PHP 的 Array 將中獎號碼寫死在程式中。
系統至少需要包含下列獎項：
- 特別獎
- 特獎
- 頭獎
- 二獎
- 三獎
- 四獎
- 五獎
- 六獎
- 未中獎
請建立兩個檔案：
- exercise.html：負責顯示表單與結果。
- exercise.php：負責判斷發票是否中獎。
exercise.html 不可以使用傳統表單送出後重新載入頁面的方式顯示結果。
請參考 12.html 的作法：
- 使用 JavaScript fetch() 將表單資料傳送至 exercise.php。
- 使用 POST 方法傳送資料。
- 使用 FormData 傳送表單內容。
- 使用 response.json() 解析 PHP 回傳的資料。
- 將兌獎結果顯示在目前頁面中。
exercise.php 請使用 $_POST 取得使用者輸入的發票號碼。
請自行建立 PHP Array 儲存開獎號碼，例如：
- 特別獎號碼
- 特獎號碼
- 三組頭獎號碼
中獎號碼可自行設定，不需要使用真實開獎資料。

兌獎規則

假設頭獎號碼為：

12345678

則：

12345678 → 頭獎
2345678 → 二獎
345678 → 三獎
45678 → 四獎
5678 → 五獎
678 → 六獎

請依照發票號碼的末幾碼判斷是否符合各獎項。

PHP 程式要求

至少使用一個 Array 儲存中獎號碼。
使用 foreach 遍歷頭獎號碼並進行比對。
至少撰寫一個 Function 負責判斷中獎結果。
使用 if、elseif 或其他條件判斷完成兌獎邏輯。
判斷時應注意獎項順序，應優先判斷較高獎項，避免同一張發票被判斷成較低獎項。
使用 json_encode() 將結果轉換成 JSON 格式後回傳。

JSON 回傳格式

PHP 回傳結果至少應包含：

{
    "success": true,
    "invoice": "12345678",
    "prize": "頭獎",
    "msg": "恭喜中頭獎！"
}

若輸入資料格式錯誤，例如不是 8 碼數字，可回傳：

{
    "success": false,
    "msg": "請輸入正確的 8 碼發票號碼"
}

完成後應達成

使用者輸入發票號碼並按下「兌獎」後：

JavaScript 將資料傳送至 exercise.php。
PHP 根據寫死的開獎號碼進行判斷。
PHP 使用 JSON 格式回傳兌獎結果。
JavaScript 接收 JSON。
網頁直接顯示「中獎獎項」或「未中獎」，不重新整理整個頁面。

Bonus

完成基本功能後，可以嘗試加入：

顯示各獎項的獎金。
顯示本期所有中獎號碼。
一次輸入多張發票進行兌獎。
使用 CSS 將中獎與未中獎顯示成不同樣式。

27. 從 PHP Form Processing 到 CakePHP

這一章看起來只是 PHP 基礎，但之後進入 CakePHP 時，你會發現這些概念全部都還在。

例如 PHP 原生寫法：

$_POST['username'];

進入 CakePHP 後，我們會使用 CakePHP Request Object 取得資料。

例如之後會看到：

$this->request->getData();

兩者的目的都是：

取得 Client 傳來的資料

只是 CakePHP 幫我們提供了一層更完整的抽象。

Request Method

現在我們寫：

$_SERVER["REQUEST_METHOD"] == "POST"

之後在 CakePHP 中會看到類似：

$this->request->is('post')

概念仍然是：

目前是不是 POST Request？

Form

現在我們手寫：

<form method="post">

之後 CakePHP 中則會使用：

$this->Form->create()

產生 Form。

現在手寫：

<input
    type="text"
    name="username"
>

之後會看到：

$this->Form->control('username')

本質仍然是在建立：

HTML Form Control

JSON

現在我們手動：

echo json_encode($output);

建立 JSON。

後續如果開發 API 或 AJAX 功能，也同樣會碰到 JSON Response 的概念。

因此 Day 1 的 Fetch + JSON 範例不只是 JavaScript 練習，而是在建立之後理解 Web Request / Response 的基礎。

28. Day 1 完整學習流程

到這裡，Day 1 的 PHP 複習就完成了。

整體內容可以整理成：

PHP
│
├── 基礎語法
│   ├── Variable
│   ├── Data Type
│   ├── Output
│   ├── Scope
│   ├── Constant
│   └── Operator
│
├── 程式流程
│   ├── Array
│   ├── Branch
│   ├── Loop
│   └── Functions
│
└── Web
    ├── HTML Form
    ├── GET
    ├── POST
    ├── $_SERVER
    ├── $_POST
    ├── $_FILES
    ├── File Upload
    ├── Linux Permission
    ├── Fetch
    └── JSON

29. Day 1 重點整理

完成這一天後，至少應該能理解下列 PHP 程式：

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    $username = $_POST['username'];

    if ($username == "admin") {
        echo "Hello Admin";
    }
}

你應該可以辨認：

if
→ 條件判斷

$_SERVER
→ Server / Request 資訊

$_POST
→ POST Form Data

$username
→ Variable

==
→ Comparison Operator

echo
→ Output

也應該可以理解：

$items = ['A', 'B', 'C'];

function showItem($item)
{
    echo "<div>$item</div>";
}

foreach ($items as $item) {
    showItem($item);
}

其中：

array
+
function
+
foreach
+
echo

共同產生 HTML。

以及：

fetch('12.php', {
    method: 'POST',
    body: new FormData(form)
})

代表：

Browser 使用 JavaScript
向 PHP Server 發送 POST Request

而 PHP：

echo json_encode($output);

則代表：

Server 將處理結果轉換成 JSON
回傳給 Browser

下一步：CakePHP

完成 PHP 基礎複習之後，下一步就可以正式進入 CakePHP。

接下來會開始認識：

CakePHP 是什麼
Convention over Configuration
MVC
Model Layer
View Layer
Controller Layer
CakePHP Request Cycle
CakePHP Naming Convention
CakePHP Directory Structure

從下一章開始，我們就正式進入：

CakePHP 5.x。

COURSE FILES

附件下載

FILE2026 CakePHP-Day1 PHP複習.pdf下載 ↓

NEXT COURSE / 02.03Day 2 - 概覽 →

20. Form Processing

GET 與 POST

GET

POST

21. PHP 超全域變數

$_GET

$_POST

$_SERVER

$_FILES

$_COOKIE

$_SESSION

$_REQUEST

$_ENV

22. File Upload：建立 HTML 表單

action="10.php"

method="post"

enctype="multipart/form-data"

<input type="file">

PHP 接收上傳檔案

判斷 Request Method

取得上傳錯誤狀態

設定 Upload Folder

取得原始檔名

建立檔案儲存路徑

basename()

上傳檔案先放在哪裡？

move_uploaded_file()

查看 $_FILES

建立 uploads 資料夾

設定 uploads 的 Owner

-R

chmod 755

Read / Write / Execute

755 的實際意思

File Upload 流程整理

23. 帳號密碼表單

Form 的 name

required

PHP 接收帳號密碼

取得 POST Data

guest

admin

user

登入失敗

24. 傳統 Form Submit 的問題

使用 Fetch 提交表單

取得 Form Element

onsubmit

event.preventDefault()

Fetch API

FormData

Server 回應 JSON

PHP 產生 JSON

PHP Array 作為 Response Data

json_encode()

JavaScript 取得 JSON

將結果顯示在網頁

額外資料輸出到 Console

25. 傳統 Form 與 Fetch 比較

傳統 Form

Fetch

PHP、JavaScript 與 JSON 的角色

PHP

JavaScript

JSON

26. Exercise：統一發票兌獎系統

題目要求

兌獎規則

PHP 程式要求

JSON 回傳格式

完成後應達成

Bonus

27. 從 PHP Form Processing 到 CakePHP

Request Method

Form

JSON

28. Day 1 完整學習流程

29. Day 1 重點整理

下一步：CakePHP

附件下載

`$_GET`

`$_POST`

`$_SERVER`

`$_FILES`

`$_COOKIE`

`$_SESSION`

`$_REQUEST`

`$_ENV`

`action="10.php"`

`method="post"`

`enctype="multipart/form-data"`

`<input type="file">`

`basename()`

`move_uploaded_file()`

查看 `$_FILES`

`-R`

Form 的 `name`

`onsubmit`

`event.preventDefault()`

`json_encode()`