今天要來看登入頁面,這個最常見的動態網站應用,聊聊其中的設計邏輯與程式碼。
如果你是第一次看本系列的邦友,可以先點擊下方 Day01 文章,內含 30 秒的 Demo 短片跟原始碼下載。
快速瀏覽程式,重點還是多看一眼 <script> 中的 ajax 部分,重點說明跟之前不一樣的部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>The Perfect Cup - Register</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/business-casual.css" rel="stylesheet">
<!-- Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){
$("#login").click(function(){
email=$("#email").val();
password=$("#password").val();
$.ajax({
type: "POST",
url: "pcheck.php",
data: "email="+email+"&password="+password,
success: function(html){
if(html=='true')
{
$("#add_err2").html('<div class="alert alert-success"> \
<strong>Authenticated</strong> \ \
</div>');
window.location.href = "blog.php";
} else if (html=='false') {
$("#add_err2").html('<div class="alert alert-danger"> \
<strong>Authentication</strong> failure. \ \
</div>');
} else {
$("#add_err2").html('<div class="alert alert-danger"> \
<strong>Error</strong> processing request. Please try again. \ \
</div>');
}
},
beforeSend:function()
{
$("#add_err2").html("loading...");
}
});
return false;
});
});
</script>
</head>
<body>
<div class="brand">The Perfect Cup</div>
<div class="address-bar">3481 Melrose Place | Beverly Hills, CA 90210 | 123.456.7890</div>
<!-- Navigation -->
<?php require_once 'nav.php'; ?>
<div class="container">
<div class="row">
<div class="box">
<div class="col-lg-12">
<div class="alert alert-danger">
<strong>You must be logged in to view the blog.</strong>
</div>
<hr>
<h2 class="intro-text text-center">
<strong>Login</strong>
</h2>
<div id="add_err2"></div>
<hr>
<form role="form">
<div class="row">
<div class="form-group col-lg-4">
<label>Email Address</label>
<input type="email" id="email" name="email" maxlength="25" class="form-control">
</div>
<div class="clearfix"></div>
<div class="form-group col-lg-12">
<label>Password</label>
<input type="password" id="password" name="password" maxlength="10" class="form-control">
</div>
<div class="form-group col-lg-12">
<button type="submit" id="login" class="btn btn-default">Login</button>
</div>
</div>
</form>
<div class="form-group col-lg-12">
<a href="register.php"><button type="submit" class="btn btn-default">Not a Member? Register here</button></a>
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<p>Copyright © The Perfect Cup 2016</p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
用 POST 方法連到 pcheck.php 驗證email跟password
我們之後會聊這位 pcheck.php,現在繼續看下去
驗證成功
if(html=='true')
{
$("#add_err2").html('<div class="alert alert-success"> \
<strong>Authenticated</strong> \ \
</div>');
window.location.href = "blog.php";
else if (html=='false') {
$("#add_err2").html('<div class="alert alert-danger"> \
<strong>Authentication</strong> failure. \ \
</div>');
細談 location.href 與 location.replace 的差別與實務應用
出現了新的一對 PHP,今天聊了關於 login.php,而明天我們再聊 pcheck.php,這兩位 php 跟之前 redister.php和 addduser.php,Day15 jQuery 與 Ajax 驗證註冊表單,有許多相似的點,都是前端介面搭配後端資料庫,用jQuery ajax方法搭配php,來連接MySQL資料庫。
謝謝你的收看,我們明天再見!