🔶章節:
🔹[開頭]
🔹[COOKIE的完整名稱與由來]
🔹[什麼是COOKIE?]
🔹[如何工作]
🔹[有什麼用途]
🔹[設置COOKIE的步驟]
🔹[模擬一個偏好設定頁面]
🔹[設定過期時間]
🔹[總結]
如果影片中不清楚,需要補充的地方我會再添加到這邊~
模擬一個偏好設定頁面,使用者可以在頁面中設定他們喜歡的主題顏色,並且我們將記錄使用者訪問網頁的次數。
我們要建立一個設定頁面,讓使用者可以選擇主題顏色。
<html>
<head>
<title>偏好設定</title>
</head>
<body>
<h1>選擇你喜歡的主題顏色:</h1>
<form method="post" action="process.php">
<label><input type="radio" name="color" value="#CD5C5C" style="background-color: var(--morandi-red);">宮廷紅</label>
<label><input type="radio" name="color" value="#76B4EF" style="background-color: var(--morandi-blue);">天空藍</label>
<label><input type="radio" name="color" value="#8AB6A6" style="background-color: var(--morandi-green);">草地綠</label>
<button type="submit">儲存設定</button>
</form>
</body>
</html>
透過單選按鈕(radio)讓使用者選擇不同的顏色,每個按鈕代表一種顏色,分別是「宮廷紅」(#CD5C5C)、「天空藍」(#76B4EF)、和「草地綠」(#8AB6A6)。按下「儲存設定」按鈕後,選擇的顏色值將以 POST 方法提交到 "process.php" 進行後續處理。
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if(isset($_POST['color'])) {
$selectedColor = $_POST['color'];
setcookie("user_color", $selectedColor, time() + 3600); // 設定COOKIE,一小時後過期
}
header("Location: set.php"); // 返回設定頁面
}
?>
當使用者提交表單時(HTTP 方法為 POST),程式會檢查是否有選擇顏色,如果有選擇,則取得選擇的顏色值並設定為 Cookie。setcookie 函式用來設定 Cookie,將選擇的顏色儲存在名為 "user_color" 的 Cookie 中,並設定 Cookie 的過期時間為當前時間加上 3600 秒(一小時後過期)。最後,程式會將使用者重新導向回設定頁面("set.php")。
<?php
session_start();
if(isset($_COOKIE['user_color'])) {
$userColor = $_COOKIE['user_color'];
$colorNames = [
'#CD5C5C' => '宮廷紅',
'#76B4EF' => '天空藍',
'#8AB6A6' => '草地綠'
];
echo "<h1>你選擇了 {$colorNames[$userColor]} 主題。</h1>";
} else {
echo "<h1>尚未設定主題。</h1>";
}
if(isset($_SESSION['visit_count'])) {
$_SESSION['visit_count']++;
} else {
$_SESSION['visit_count'] = 1;
}
$visitCount = $_SESSION['visit_count'];
echo "<p class='visit-count'>你已經訪問了本網頁 $visitCount 次。</p>";
?>
<div class="message">
<a href="index.php">返回設定</a>
</div>