基礎篇——html與php聯動
前端包含html(內容)與css(修飾)，後端包含php(處理)和sql(儲存)
此處透過設計一個簡單的登入+註冊系統，說明html與php的聯動過程(php與sql聯動將在下一章闡述)
這裡採用了混編技術(html程式碼內嵌php程式碼)，其基本的互動邏輯為：
後端php解析—>前端html渲染—>使用者提交表單—>後端php解析—>前端html渲染—>......
login.php:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login</title>
<link rel="stylesheet" href="login.css">
<?php
function filter($input) {
$input = trim($input);
$input = stripslashes($input);
$input = htmlspecialchars($input);
return $input;
}
$username_err = "";
$password_err = "";
if (isset($_POST["submit"])) {
$username = filter($_POST["username"]);
$password = filter($_POST["password"]);
if (empty($username)) $username_err = "Username cannot be empty!";
if (empty($password)) $password_err = "Password cannot be empty!";
}
?>
</head>
<body>
<div class="container">
<div class="header">
<h1>LOGIN PAGE</h1>
</div>
<div class="content">
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>" method="POST">
<table>
<tr>
<td><label for="username">Username</label></td>
<td><input type="text" id="username" name="username"></td>
<td><span style="color: red; font-size: 12px;"><?php echo $username_err;?></span></td>
</tr>
<tr>
<td><label for="password">Password</label></td>
<td><input type="password" id="password" name="password"></td>
<td><span style="color: red; font-size: 12px;"><?php echo $password_err;?></span></td>
</tr>
<tr>
<td colspan="3" class="center-align">
<input type="submit" id="submit" name="submit" value="Submit">
</td>
</tr>
<tr>
<td colspan="3" class="center-align">
No account? <a href="register.php" id="link">Register</a>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
login.css:
.container{
text-align: center;
margin-top: 200px;
}
table{
margin: 0 auto;
}
#submit{
margin-top: 10px;
}
#link:link{
color: blue;
text-decoration: none;
}
#link:hover{
text-decoration: underline;
}
#link:visited{
color: purple;
}
登入頁面:
register.php:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Register</title>
<link rel="stylesheet" href="register.css">
<?php
function filter($input) {
$input = trim($input);
$input = stripslashes($input);
$input = htmlspecialchars($input);
return $input;
}
$username_err = "";
$password0_err = "";
$password1_err = "";
$username = "";
$password0 = "";
$password1 = "";
if (isset($_POST["submit"])) {
$username = filter($_POST["username"]);
$password0 = filter($_POST["password0"]);
$password1 = filter($_POST["password1"]);
if (empty($username)) $username_err = "Username cannot be empty!";
else if (!preg_match("/^[a-zA-Z]+$/", $username)) $username_err = "Username can only contain letters!";
if (empty($password0)) $password0_err = "Password cannot be empty!";
else if (!preg_match("/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[\W_]).*$/", $password0)) $password0_err = "Password must contain letters, numbers, and special characters!";
if (empty($password1)) $password1_err = "Confirm Password cannot be empty!";
else if (!preg_match("/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[\W_]).*$/", $password1)) $password1_err = "Confirm Password must contain letters, numbers, and special characters!";
if ($username_err == "" && $password0_err == "" && $password1_err == "") {
if ($password0 === $password1) echo "<script>alert('Register Success!');window.location.href='login.php';</script>";
else echo "<script>alert('Passwords do not match!')</script>";
}
}
?>
</head>
<body>
<div class="container">
<div class="header">
<h1>REGISTER PAGE</h1>
</div>
<div class="content">
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>" method="POST">
<table>
<tr>
<td><label for="username">Username</label></td>
<td><input type="text" id="username" name="username" value="<?php echo $username;?>"></td>
<td><span style="color: red; font-size: 12px;"><?php echo $username_err;?></span></td>
</tr>
<tr>
<td><label for="password0">Password</label></td>
<td><input type="password" id="password0" name="password0" value="<?php echo $password0;?>"></td>
<td><span style="color: red; font-size: 12px;"><?php echo $password0_err;?></span></td>
</tr>
<tr>
<td><label for="password1">Confirm Password</label></td>
<td><input type="password" id="password1" name="password1" value="<?php echo $password1;?>"></td>
<td><span style="color: red; font-size: 12px;"><?php echo $password1_err;?></span></td>
</tr>
<tr>
<td colspan="3" class="center-align">
<input type="submit" id="submit" name="submit" value="Register">
</td>
</tr>
<tr>
<td colspan="3" class="center-align">
Have an account? <a href="login.php" id="link">Login</a>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
register.css:
.container{
text-align: center;
margin-top: 200px;
}
table{
margin: 0 auto;
}
#submit{
margin-top: 10px;
}
#link:link{
color: blue;
text-decoration: none;
}
#link:hover{
text-decoration: underline;
}
#link:visited{
color: purple;
}
註冊頁面:
