在製作登入與註冊系統前
必須先理解Cookie與Session的概念
簡單來說,
Cookie是本地端紀錄你的登入狀況
Session則是伺服器端紀錄你的登入狀況
推薦一篇淺顯易懂的文章給大家:白話 Session 與 Cookie:從經營雜貨店開始

建立所需的頁面

其中包含了

  • config.php:連線資料庫的基本檔案
  • index.php:預設的首頁(登入頁面)
  • login.php:處理登入
  • logout.php:處理登出
  • register.php:處理註冊
  • register.html:註冊頁面
  • welcome.php:登入成功後出現的頁面(裡面包含一個登出的連結)

連線資料庫

config.php是與資料庫有關的設定檔

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php
/* Database credentials. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
/*define() 函數定義一個常量。
在設定以後,常量的值無法更改
常量名不需要開頭的美元符號 ($)
作用域不影響對常量的訪問
常量值只能是字符串或數字*/
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_NAME', 'test');

/* Attempt to connect to MySQL database */
$link = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
// 輸入中文也OK的編碼
mysqli_query($link, 'SET NAMES utf8');

// Check connection
if($link === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}
else{
return $link;
}
?>

index.php(登入頁面)與register.html

index.php的程式碼中包含了SESSION的確認、登入的表單

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
// Initialize the session
session_start();

// Check if the user is already logged in, if yes then redirect him to welcome page
if(isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true){
header("location: welcome.php");
exit; //記得要跳出來,不然會重複轉址過多次
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>登入介面</title>
</head>
<body>
<h1>Log In</h1>
<h2>你可以選擇登入或是註冊帳號~</h2>
<form method="post" action="login.php">
帳號:
<input type="text" name="username"><br/><br/>
密碼:
<input type="password" name="password"><br><br>
<input type="submit" value="登入" name="submit"><br><br>
<a href="register.html">還沒有帳號?現在就註冊!</a>
</form>
</body>
</html>

register.html包含了簡單的檢核機制、註冊的表單(也可以把register.html&register.php寫在一起)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<?php 
$conn=require_once("config.php");

if($_SERVER["REQUEST_METHOD"]=="POST"){
$username=$_POST["username"];
$password=$_POST["password"];
//檢查帳號是否重複
$check="SELECT * FROM user WHERE username='".$username."'";
if(mysqli_num_rows(mysqli_query($conn,$check))==0){
$sql="INSERT INTO user (id,username, password)
VALUES(NULL,'".$username."','".$password."')";

if(mysqli_query($conn, $sql)){
echo "註冊成功!3秒後將自動跳轉頁面<br>";
echo "<a href='index.php'>未成功跳轉頁面請點擊此</a>";
header("refresh:32;url=index.php");
exit;
}else{
echo "Error creating table: " . mysqli_error($conn);
}
}
else{
echo "該帳號已有人使用!<br>3秒後將自動跳轉頁面<br>";
echo "<a href='register.html'>未成功跳轉頁面請點擊此</a>";
header('HTTP/1.0 302 Found');
//header("refresh:3;url=register.html",true);
exit;
}
}


mysqli_close($conn);

function function_alert($message) {

// Display the alert box
echo "<script>alert('$message');
window.location.href='index.php';
</script>";

return false;
}
?>

login.php與logout.php

login.php負責處理登入的動作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<?php
// Include config file
$conn=require_once "config.php";

// Define variables and initialize with empty values
$username=$_POST["username"];
$password=$_POST["password"];
//增加hash可以提高安全性
$password_hash=password_hash($password,PASSWORD_DEFAULT);
// Processing form data when form is submitted
if($_SERVER["REQUEST_METHOD"] == "POST"){
$sql = "SELECT * FROM users WHERE username ='".$username."'";
$result=mysqli_query($conn,$sql);
if(mysqli_num_rows($result)==1 && $password==mysqli_fetch_assoc($result)["password"]){
session_start();
// Store data in session variables
$_SESSION["loggedin"] = true;
//這些是之後可以用到的變數
$_SESSION["id"] = mysqli_fetch_assoc($result)["id"];
$_SESSION["username"] = mysqli_fetch_assoc($result)["username"];
header("location:welcome.php");
}else{
function_alert("帳號或密碼錯誤");
}
}
else{
function_alert("Something wrong");
}

// Close connection
mysqli_close($link);

function function_alert($message) {

// Display the alert box
echo "<script>alert('$message');
window.location.href='index.php';
</script>";
return false;
}
?>
?>

logout.php(必要!瀏覽器會記錄登入過的使用者,除非你去清除cookie)

1
2
3
4
5
6
7
<?php 
session_start();
$_SESSION = array();
session_destroy();
header('location:index.php');

?>

register.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<?php 
$conn=require_once("config.php");

if($_SERVER["REQUEST_METHOD"]=="POST"){
$username=$_POST["username"];
$password=$_POST["password"];
//檢查帳號是否重複
$check="SELECT * FROM user WHERE username='".$username."'";
if(mysqli_num_rows(mysqli_query($conn,$check))==0){
$sql="INSERT INTO user (id,username, password)
VALUES(NULL,'".$username."','".$password."')";

if(mysqli_query($conn, $sql)){
echo "註冊成功!3秒後將自動跳轉頁面<br>";
echo "<a href='index.php'>未成功跳轉頁面請點擊此</a>";
header("refresh:32;url=index.php");
exit;
}else{
echo "Error creating table: " . mysqli_error($conn);
}
}
else{
echo "該帳號已有人使用!<br>3秒後將自動跳轉頁面<br>";
echo "<a href='register.html'>未成功跳轉頁面請點擊此</a>";
header('HTTP/1.0 302 Found');
//header("refresh:3;url=register.html",true);
exit;
}
}


mysqli_close($conn);

function function_alert($message) {

// Display the alert box
echo "<script>alert('$message');
window.location.href='index.php';
</script>";

return false;
}
?>

welcome.php

最後則是welcome.php,為使用者成功登入後看到的畫面
之後可以透過$_SESSION控制不同身分使用者看到不同畫面

1
2
3
4
5
6
7
<?php
session_start(); //很重要,可以用的變數存在session裡
$username=$_SESSION["username"];
echo "<h1>你好 ".$username."</h1>";
echo "<a href='logout.php'>登出</a>";

?>

效果

  1. 首先是註冊頁面註冊帳號
  2. 接著是註冊成功跳轉頁
  3. 嘗試用剛剛註冊的帳號進行登入
  4. 成功!透過用$_SESSION傳遞了username並顯示出來