Using PHP + jquery + ajax
making simple automatic Login Loign function
一直試，
一直試 .....。
最近一直很好奇jquery的ajax是怎麼樣做出來的，突然想到一直很想做這個(登入的loading功能)，看到那個loading的gif在那裏轉，感覺真是體驗度加分，不過還有很多要改進的地方，對於ajax我還是個菜鳥咧xd，現在只有做出正確登出，正確登入，驗證有無填寫欄位的功能，若有辦法再加強，會再補新版本。
版本說明:
v1.0可正確登入，可登出 , 沒有註冊功能，所以必須從資料庫建。
Demo檔下載:
https://github.com/winwu/AjaxPractice-Login
檔案說明:(抱歉還有一個style.css檔沒畫到)
資料庫欄位說明:
資料庫名為:login_test
資料表為:user
-- 表的結構 `user`
--
CREATE TABLE IF NOT EXISTS `user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`userid` varchar(11) COLLATE utf8_unicode_ci NOT NULL,
`password` int(11) NOT NULL,
`regitster_date` datetime NOT NULL,
`first_name` char(5) COLLATE utf8_unicode_ci NOT NULL,
`last_name` char(10) COLLATE utf8_unicode_ci NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=3 ;
--
-- 轉存資料表中的資料 `user`
--
INSERT INTO `user` (`id`, `userid`, `password`, `regitster_date`, `first_name`, `last_name`) VALUES
(1, 'wwutw0925', 1234567, '2012-09-25 00:00:00', 'win', 'wu'),
(2, 'wwutw09251', 1234567, '2012-09-25 00:00:00', 'win', 'wu');
畫面說明:
這是首頁，需輸入ID跟password，若有其一錯誤或未填寫，皆會有error message
可以test/1234567 測試
這是填寫資料後登入的畫面，此時會看到loading在那裏轉啊轉~此時資料已經被帶到login_chk.php去執行，比對資料是否與資料庫吻合。
若資料吻合就會寫登入成功。
但下登出後。
這個畫面是驗證的畫面，若欄位沒有正確填寫，就會出現灰色那一塊。
這裡是code:
db_conn.php
<?php
mysql_connect('localhost','root','root');
mysql_select_db('login_test');
mysql_query("SER NAMES 'utf8'");
//set taiwan zone
date_default_timezone_set('Asia/Taipei');
?>
index.php
<?php
include('db_conn.php'); //include db connection 將來可能會用到
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>welcome!</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script language="javascript">
$(function(){
$('#submit').mouseover(function(){$(this).css({'background':'black'})});
$('#submit').mouseout(function(){$(this).css({'background':'#5A2626'})});
});
function userlogin(){
<!--先取得欄位值-->
var user_name = $('#user_name').val();
var user_password = $('#user_password').val();
<!--判斷有無正確填寫-->
if(user_name=="" && user_password==""){
$('#error_msg').text('Please enter your ID & password');
return false;
}
if(user_name==""){
$('#error_msg').text('Please enter your ID');
$('#user_name').focus();
return false;
}else if(user_password==""){
$('#error_msg').text('Please enter your password');
$('#user_password').focus();
return false;
};
//真正的ajax動作從這裡開始
$.ajax({
url:"login_chk.php",
data:"user_name="+user_name+"&user_password="+user_password,
type : "POST",
beforeSend:function(){
$('#loading_div').show();
//beforeSend 發送請求之前會執行的函式
},
success:function(msg){
if(msg =="success"){
$('#login_showname').text('Welcome!'+user_name);
$('#login_success').text('You have successfully login!');
$('#login_success').fadeIn();
$('#error_msg').hide();
$('#user_login').hide();
$('#user_logout').fadeIn();
//如果成功登入，就不需要再出現登入表單，而出現登出表單
}else
{
$('#error_msg').show();
$('#error_msg').html('Please Login again,<br/>沒有此用戶或密碼不正確');
}
},
error:function(xhr){
alert('Ajax request 發生錯誤');
},
complete:function(){
$('#loading_div').hide();
//$('#user_login').hide();
//complete請求完成實執行的函式，不管是success或是error
}
});
};
function userlogout(){
$.ajax({
url:"logout.php",
type : "POST",
beforeSend:function(){
$('#loadingout_div').show();
$('#login_success').hide();
$('#error_msg').text('Logout...please wait..');
$('#user_logout').hide();
//beforeSend 發送請求之前會執行的函式
},
success:function(msg){
if(msg=="success"){
$('#user_login').fadeIn();
}else
{
$('#error_msg').html('請在登出一次');
}
},
error:function(xhr){
alert('Ajax request 發生錯誤');
},
complete:function(){
$('#loadingout_div').hide();
$('#user_login').fadeIn();
}
});
}
</script>
<div id="login_block">
<form id="user_login" method="POST">
<table id="login_table">
<tr>
<td>
<label>ID:</label><input type="text" name="user_name" id="user_name"/><br/>
<label>Password:</label><input type="password" name="user_password" id="user_password"/><br/>
<input type='button' id='submit' value='Login' onclick='userlogin();'/>
</td>
</tr>
</table>
</form>
<div id="error_msg"></div>
<form id="user_logout" method="POST" style="display:none;">
<table id="login_table_out">
<tr>
<td>
<span id="login_showname">
<!--放登入狀態-->
</span>
<input type='button' id='submit2' value='Logout' onclick='userlogout();' />
</td>
</tr>
</table>
</form>
<div id="loading_div" style="display:none">
<img src="ajax_loader.gif"><br/>Login...please wait
</div>
<div id="loadingout_div" style="display:none">
<img src="ajax_loader.gif"><br/>Logout...please wait
</div>
<div id="login_success" style="display:none;">
<!--放you are successfully login-->
</div>
</div>
<div id="ft">win design it @ 2012 </div>
</body>
</html>
login_chk.php
<?php
session_start();
/* -------------------------- */
/* Check username & password */
/* -------------------------- */
include('db_conn.php');
sleep(1);
$userid = isset($_POST["user_name"]) ? $_POST["user_name"] : $_GET["user_name"];
$password = isset($_POST["user_password"]) ? $_POST["user_password"] : $_GET["user_password"];
$sql = 'SELECT * FROM user WHERE userid = "'.$userid.'" and password="'.$password.'"';
$result = mysql_query($sql);
$row = mysql_fetch_assoc($result);
$record_count = mysql_num_rows($result);
if($record_count<1){
//無資料回傳no data
echo 'no data';
}else{
//若有這筆資料則回傳success
$_SESSION['user_name'] = $userid;
echo 'success';
//echo $row['first_name'].$row['last_name']; for debug use
}
?>
logout.php
<?php
//unset($_SEEEION['user_name']);
sleep(2);
echo 'success';
?>
style.css
/*author : win*/
html{
background:url(./img/bg.jpg) no-repeat center center; min-height:100%;
background-size:cover;
}
#login_block{
background: url(./img/lo_bg.png) no-repeat;
width: 317px;
height: 400px;
margin: 0px auto;
margin-top: 50px;
padding: 82px 10px 10px 51px;
font-family: arial
}
#submit,
#submit2{
background: #5A2626;
border: 0px;
color: white;
padding: 5px 10px;
width: 243px;
margin-top: 10px;
font-size: 18px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;cursor: pointer;
}
#error_msg{
width: 224px;
background: #525150;
display: block;
color: white;
padding: 0px 10px;
font-size: 12px;
margin: 1px;
line-height: 26px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
input[type=text],
input[type=password]{
border: 1px solid white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px;
-moz-box-shadow: 3px 3px 5px #000000;
-webkit-box-shadow: 2px 2px 3px #424242;
box-shadow: 2px 2px 2px #5A5A5A;width: 231px;
}
label{
width: 74px;
display: block;
padding: 3px 3px;
}
#loading_div,
#login_success,
#loadingout_div{
text-align: center;
width: 252px;
margin-top: 10px;
}
#login_success{width: 269px;}
#login_showname{
text-align: center;
margin: 0 auto;
display: block;
}
#ft{
font-family: arial;
font-size: 10px;
text-align: center;
}
今天實在睏了，有機會會再好好整理這些code....
