一些平鋪直敘技術相關文: 使用PHP+jquery+ajax製作簡易自動登入Loign功能

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....

~~然後持續改良他，使他更好用..~~

上傳到空間:

http://yiying2.ueuo.com/my_login2/index.php 可以test/1234567 測試

這個登入畫面的練習重點在於，不想讓登入執行過程中有轉頁的感覺，而輸入的帳號密碼，透過ajax傳送到login_chk.php去動作，若資料正確無誤，則會echo "success"傳回index.php，讓首頁得知可以做正確登入後的動作(顯示你已成功登入的畫面)。

另外session跟sql injection都未做。

再來是ajax的動作，當使用者在首頁填入資料後按下Login的按鈕後，就會執行javascript的userlogin的這個function():

function userlogin(){

//do something

前面幾行我先驗證是否有接收到資料，若沒有就將錯誤訊息傳到#error_msg 這塊div

並且return false，後面不需要再執行。

$.ajax({

//真正的送資料從這裡開始

});

}

為甚麼loading的那張圖片會轉=>

要讓loading的圖片有幾秒的時間轉動，我這邊做了兩件事

1) 寫在$.ajax({}) 裡面的

beforeSend: function(){

$('#loading_div').show();

就是在做這件動作，beforeSend是發送請求之前會執行的函式

將loading的gif圖檔放在一個div區塊內，預設css的display為none.

無論如何，預設是不會有動作的... 除非按下登入或登出，我們才讓這個動畫顯示出來，示

意使用者資料正在讀取，具有提示的作用。

2)在login_chk.php sleep(2) 讓他睡兩秒再執行

3)當ajax request送出到完成的順序是

beforesend->success/error->complete

請參考:http://blog.ericsk.org/archives/839 Query 學習心得筆記 (5) – Ajax (下)

jQuery+Ajax+PHP登錄實例 http://fxc86.blog.hexun.com.tw/51421105_d.html

一些平鋪直敘技術相關文

2012年9月26日星期三

使用PHP+jquery+ajax製作簡易自動登入Loign功能

沒有留言:

張貼留言

Vue multiselect set autofocus and tinymce set autofocus

關於我自己

2012年9月26日 星期三

使用PHP+jquery+ajax製作簡易自動登入Loign功能

沒有留言:

張貼留言

Vue multiselect set autofocus and tinymce set autofocus

2012年9月26日星期三