網頁設計 EP10-PHP 登出設計

更新 發佈閱讀 6 分鐘

在介紹表單處理時,本來也想順便提及登出機制的部分,礙於篇幅過長,藉由獨立篇幅的方式來介紹登出機制。

實作內容延續表單處理使用的表單網頁 formaction.html 和接收資料的 form.php。

網頁設計 EP08-PHP 表單處理(上)

網頁設計 EP09-PHP 表單處理(下)

登出設計介紹

大家在登入一個網站隔了一段時間後,仍然能維持登入狀態無須重新驗證,其實靠的就是session 和 cookie。

第一步: 開啟記憶功能

<?PHP
session_start();

if($_SERVER['REQUEST_METHOD'] == 'POST'){
    $account = htmlspecialchars($_POST['account']);
    $password = htmlspecialchars($_POST['pw']);
    if($password == "1234"){
        echo "welcome".$_POST['account'];
    }
    else{
        echo "password is error";
    }
}
?>

第二步:設定登出連結位置

<?PHP
session_start();

if($_SERVER['REQUEST_METHOD'] == 'POST'){
    $account = htmlspecialchars($_POST['account']);
    $password = htmlspecialchars($_POST['pw']);
    if($password == "1234"){
        echo "welcome".$_POST['account'];
    }
    else{
        echo "password is error";
    }
}
?>

<a href="?action=logout">Log Out (登出)
</a>

第三步:LOGOUT LOGIC (登出機制)

確認使用者點擊登出時傳送過來的參數是否存在以及參數值是不是 logout

如果是則清除所有 session,並且跳轉回原始登入網頁。

<?PHP
session_start();

if (isset($_GET['action']) && $_GET['action'] == 'logout') {
session_destroy();
header("Location: formaction.html");
exit;
}

if($_SERVER['REQUEST_METHOD'] == 'POST'){
    $account = htmlspecialchars($_POST['account']);
    $password = htmlspecialchars($_POST['pw']);
    if($password == "1234"){
$_SESSION['account'] = $account;
        echo "welcome".$_SESSION['account'];
    }
    else{
        echo "password is error";
    }
}
?>
<a href="?action=logout">Log Out (登出)
</a>

header()

header() 函式用於向客户端發送原始的 HTTP 標頭,常用於頁面跳轉、設定頁面編碼以及文件下載等等,須注意的是 header() 之前不能使用 echo() 或 print(),否則會出現錯誤,以下是常見 header() 常見用法:


頁面跳轉(也可以搭配參數)

header("Location: http://example.com");
header('Refresh: 10; url=http://www.example.com');//延遲跳轉

設定頁面編碼

header("Content-Type: text/html; charset=utf-8")

文件下載

header('Content-Type: application/pdf');
header('Content-Disposition: attachment; filename="' . basename($file) . '"');
header('Content-Length: ' . filesize($file));
exit;

內容類型

header("Content-Type: application/json");

設置http狀態碼

header("HTTP/1.1 404 Not Found");

URL特殊符號

URL 只能使用英文字母、阿拉伯數字和某些標點符號,不能使用其他文字和符號,編碼格式採用的是 ASCII CODE,而不是 Unicode,也就是說 URL 中不能包含任何非 ASCII字符(例如空格),另外有些字元在網址內則具有特殊意義。以下是常見特殊符號的含義:

+ : 空格

/ : 分隔目錄與子目錄

? : 分隔url與參數

% : 指定特殊字符

# : 表示書籤

& : 參數間的分隔符

= : 指定參數值


本篇文章到這裡就結束了,如果喜歡我的文章或覺得有用的話,歡迎動動手指點擊愛心,你/妳的支持是我最大的動力,我們下篇文章見🙌。

留言
avatar-img
逃的沙龍
3會員
13內容數
分享學習路上的內容與心得
逃的沙龍的其他內容
2026/03/30
本文介紹 PHP 如何接收透過 POST 或 GET 方法提交的表單資料,並講解如何利用 htmlspecialchars()、isset() 等函式防範常見的 XSS (跨站腳本攻擊),同時也介紹 empty() 與 is_null() 這兩個常用的 PHP 函式。
Thumbnail
2026/03/30
本文介紹 PHP 如何接收透過 POST 或 GET 方法提交的表單資料,並講解如何利用 htmlspecialchars()、isset() 等函式防範常見的 XSS (跨站腳本攻擊),同時也介紹 empty() 與 is_null() 這兩個常用的 PHP 函式。
Thumbnail
2026/03/24
本文深入介紹 HTML 表單處理的核心概念,包含 form 標籤的各種屬性(如 action, method, target 等)及其作用,以及 input, label, button 等常用輸入元素。此外,也提及了 div 容器、id 與 class 的區別,為後續的表單驗證主題打下基礎。
Thumbnail
2026/03/24
本文深入介紹 HTML 表單處理的核心概念,包含 form 標籤的各種屬性(如 action, method, target 等)及其作用,以及 input, label, button 等常用輸入元素。此外,也提及了 div 容器、id 與 class 的區別,為後續的表單驗證主題打下基礎。
Thumbnail
2026/03/03
本篇文章將深入探討 PHP 函數的核心概念,從內建函數的介紹,到如何撰寫自訂函數,以及參數的傳遞方式。我們將詳細解釋參數預設值、資料型別指定、可變參數、具名參數,以及可變函數、匿名函數和箭頭函數等進階主題。透過清晰的說明與範例,幫助你有效率地編寫更具彈性和可讀性的 PHP 程式碼。
Thumbnail
2026/03/03
本篇文章將深入探討 PHP 函數的核心概念,從內建函數的介紹,到如何撰寫自訂函數,以及參數的傳遞方式。我們將詳細解釋參數預設值、資料型別指定、可變參數、具名參數,以及可變函數、匿名函數和箭頭函數等進階主題。透過清晰的說明與範例,幫助你有效率地編寫更具彈性和可讀性的 PHP 程式碼。
Thumbnail
看更多
你可能也想看
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
這篇文章介紹 Node.js 內建的 HTTP 模組,說明如何使用 createServer、request、response 和 listen 方法建立 Web Server,並提供測試和除錯技巧。
Thumbnail
這篇文章介紹 Node.js 內建的 HTTP 模組,說明如何使用 createServer、request、response 和 listen 方法建立 Web Server,並提供測試和除錯技巧。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
前幾天看到一則標題『貼牌的中國製智慧門鈴內含安全漏洞』,讓我想到以前寫過類似的故事,關於小型資訊公司與貼牌軟體漏洞的故事,也想重新整理思路當面對類似問題無論是開發公司或是購買軟體的公司該如何面對。
Thumbnail
前幾天看到一則標題『貼牌的中國製智慧門鈴內含安全漏洞』,讓我想到以前寫過類似的故事,關於小型資訊公司與貼牌軟體漏洞的故事,也想重新整理思路當面對類似問題無論是開發公司或是購買軟體的公司該如何面對。
Thumbnail
網站速度優化至少可以從主機位置、減少HTTP Requests次數、壓縮網頁程式碼、移除未使用的CSS、JS、HTML、精簡圖片大小、減少HTML元素、延遲載入、善用CDN服務、伺服器端程式演算法和資料庫表單欄位結構等10個面向進行。
Thumbnail
網站速度優化至少可以從主機位置、減少HTTP Requests次數、壓縮網頁程式碼、移除未使用的CSS、JS、HTML、精簡圖片大小、減少HTML元素、延遲載入、善用CDN服務、伺服器端程式演算法和資料庫表單欄位結構等10個面向進行。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
Swipe to Unlock: The Primer on Technology and Business Strategy 作者: 尼爾・梅達、帕爾・德托賈、阿迪亞・加傑    原文作者: Neel Mehta, Parth Detroja, Aditya Agashe 譯者: 劉榮樺
Thumbnail
Swipe to Unlock: The Primer on Technology and Business Strategy 作者: 尼爾・梅達、帕爾・德托賈、阿迪亞・加傑    原文作者: Neel Mehta, Parth Detroja, Aditya Agashe 譯者: 劉榮樺
Thumbnail
在現代網絡世界中,網站速度是一個至關重要的因素。快速加載的網站不僅能提供更好的用戶體驗,還能改善搜索引擎排名和轉換率。為了優化網站速度,我們可以從以下10個面向進行改進,包括選擇靠近目標用戶的主機位置、減少HTTP請求次數、壓縮網頁程式碼、移除未使用的CSS和JavaScript等。
Thumbnail
在現代網絡世界中,網站速度是一個至關重要的因素。快速加載的網站不僅能提供更好的用戶體驗,還能改善搜索引擎排名和轉換率。為了優化網站速度,我們可以從以下10個面向進行改進,包括選擇靠近目標用戶的主機位置、減少HTTP請求次數、壓縮網頁程式碼、移除未使用的CSS和JavaScript等。
Thumbnail
WordPress 使用者註冊郵件發送失敗的常見問題與解決方案,包含檢查垃圾郵件、驗證 WordPress 郵件功能、設定 SMTP、檢查主機提供者、插件衝突、WordPress 版本以及錯誤日誌等步驟,並推薦使用 Brevo (Sendinblue) 作為解決方案。
Thumbnail
WordPress 使用者註冊郵件發送失敗的常見問題與解決方案,包含檢查垃圾郵件、驗證 WordPress 郵件功能、設定 SMTP、檢查主機提供者、插件衝突、WordPress 版本以及錯誤日誌等步驟,並推薦使用 Brevo (Sendinblue) 作為解決方案。
Thumbnail
在這篇教學文章中,我們將展示如何使用 Node.js 建立一個簡單的伺服器,並解決常見的跨來源資源共享(CORS)問題,確保伺服器能夠接收並處理來自不同來源的資料。
Thumbnail
在這篇教學文章中,我們將展示如何使用 Node.js 建立一個簡單的伺服器,並解決常見的跨來源資源共享(CORS)問題,確保伺服器能夠接收並處理來自不同來源的資料。
Thumbnail
內容來自於美國邦邦法官裁定谷歌違反了反壟斷法的起訴內容,揭露廣告商主要透過以下三種方式在發布商的網站上投放數位廣告
Thumbnail
內容來自於美國邦邦法官裁定谷歌違反了反壟斷法的起訴內容,揭露廣告商主要透過以下三種方式在發布商的網站上投放數位廣告
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News