ระบบยืนยันตัวตนด้วย PHP กับฐานข้อมูล MySQL

 

สวัสดีครับ วันนี้จะมี Workshop ระบบยืนยันตัวตนด้วย PHP กับฐานข้อมูล MySQL สำหรับเข้าสู่ระบบยืนยันตัวตนในการเข้าใช้ข้อมูลที่สงวนไว้สำหรับชื่อผู้ใช้คนนั้นๆครับ โดยจะใช้ฐานข้อมูล MySQL ในการเก็บข้อมูลชื่อผู้ใช้และรหัสผ่าน และใช้ session เป็นตัวแปรในการเก็บข้อมูลการเข้าสู่ระบบ และใช้เทคนิค ajax+jQuery สำหรับการส่งข้อมูลไปตรวจสอบแบบฉากหลังครับ

 

ขั้นตอนแรกมาดูโครงสร้างไฟล์ครับ

auth_step1

ต่อไปออกแบบตารางฐานข้อมูล MySQL ตามรูปนี้ครับ

auth_step2

ต่อไปสร้างไฟล์ที่ชื่อว่า config.inc.php ตามรูป
<?php
$config['dbs']="localhost"; // mysql server
$config['dbu']="root"; // mysql username
$config['dbp']="root"; // mysql password
$config['database']="db_sample";
@$conn=mysql_pconnect($config['dbs'],$config['dbu'],$config['dbp']) or die('Unable to Connect MySQL');
mysql_select_db($config['database'],$conn) or die('No database: '.$config['database']);
mysql_query('SET NAMES UTF8');
?>

 

** ให้ทำการเปลี่ยน mysql Username และ Password ตามที่ได้กำหนดในระบบของแต่ละคนด้วยนะครับ โดยชื่อฐานข้อมูลในตัวอย่างตั้งชื่อว่า db_sample ครับ **

 

ขั้นตอนต่อไป ทำการสร้างไฟล์ CSS ครับ โดยตั้งชื่อว่า style.css
#login-wrapper{
    position: relative;
    left: 50%;
    margin-left: -130px;
    width: 250px;
    margin-top: 100px;
    padding: 5px;
    border: #C0C0C0 1px solid;
    background-color: #FFFFCA;
}
 
#login-wrapper .titleText{
    text-align: center;
    font-family: "Tahoma";
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}
 
#login-wrapper .topicText{
    font-family: "Tahoma";
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 5px;
}
 
#login-wrapper .frmLayout{
    margin-bottom: 15px;
}
 
#login-wrapper input[type=text],input[type=password]{
    width: 95%;
    font-family: "Tahoma";
    font-size: 12px;
}
 
#login-wrapper .btnLayout{
    text-align: center;
    margin-bottom: 15px;
}
 
#msgText{
    font-family: "Tahoma";
    font-size: 12px;
    text-align: center;
    font-weight: bold;
    color: #006B9F;
}
 
.loginState{
    padding: 100px 0px;
    text-align: center;
    font-family: "Tahoma";
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
}
 
.loginState-btn{
    text-align: center;
}

 

ขั้นตอนต่อไปสร้างไฟล์หลักครับ ตั้งชื่อว่า index.php โดยจะมีไฟล์ jquery ซึ่งในตัวอย่างใช้ jquery-1.7.2.js สามารถดาวน์โหลดได้นี่http://blog.jquery.com/2012/03/21/jquery-1-7-2-released/ ครับ

 

<?php session_start(); ob_start(); ?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Authentication : phpdevthailand.com</title>
<script language="javascript" src="jquery-1.7.2.js"></script>
<script language="javascript" src="jquery.main.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
 
<body>
<?php if($_SESSION['sess_user']==''){ ?>

<div id="login-wrapper">

<div class="titleText">Please Login</div>


<div class="topicText">Username</div>


<div class="frmLayout"><input type="text" id="user_txt" /></div>


<div class="topicText">Password</div>


<div class="frmLayout"><input type="password" id="pass_txt" /></div>


<div class="btnLayout">
        <input type="button" value="Login" onclick="chkLogin();">
    </div>


<div id="msgText"></div>

</div>

<?php }else{ ?>

<div class="loginState">เข้าสู่ระบบสำเร็จแล้ว, ยินดีต้อนรับ <?php echo $_SESSION['sess_user']; ?></div>


<div class="loginState-btn"><a href="ajaxCheck.php?logout=true" onclick="return confirm('ยืนยันการออกจากระบบ?');">ออกจากระบบ</a></div>

<?php } ?>
</body>
</html>

 

ต่อไปสร้างไฟล์ jquery.main.js เพื่อเขียนคำสั่ง jquery สำหรับ ตรวจสอบสถานะการเข้าระบบโดยส่งแบบ ajax ครับ

 

var strTime=null;
function chkLogin(){
    var user=$("#user_txt").val();
    var pass=$("#pass_txt").val();
 
    if(user==''){
        $("#msgText").html('กรุณากรอก Username');
    }else if(pass==''){
        $("#msgText").html('กรุณากรอก Password');
    }else{
        $("#msgText").html('กำลังตรวจสอบ รอสักครู่...');
        strTime=setTimeout(function(){
            checkUser(user,pass);
        },2000);
    }
}
 
function checkUser(u,p){
    $.ajax({
        type: 'POST',
        data: ({user:u,pass:p}),
        url: 'ajaxCheck.php',
        success: function(callBack){
            clearTimeout(strTime);
            if(callBack!='null'){
                $("#msgText").html('เข้าสู่ระบบสำเร็จ');
                setTimeout(function(){
                    window.location.reload();
                },1000);
            }else{
                $("#msgText").html('เข้าสู่ระบบไม่สำเร็จ username หรือ password ผิด');
            }
        }
    });
}

 

ขั้นตอนต่อไปสร้างไฟล์ ajaxCheck.php สำหรับรับคำสั่งจาก ajax มายังสคริป php เพื่อประมวลผลตรวจสอบข้อมูลผู้ใช้จากฐานข้อมูล MySQL ครับ และการลบค่าผู้ใช้ที่ออกจากระบบ
<?php session_start(); ob_start(); header('Content-Type:text/html; charset= utf-8'); include('config.inc.php'); $post=$_POST; $get=$_GET; if(sizeof($post)>0){
        $u=$post['user'];
        $p=$post['pass'];
 
        $sql="Select user_txt From tbl_user Where user_txt='$u' AND pass_txt='$p'";
        $result=mysql_query($sql);
        $num=mysql_num_rows($result);
        if($num>=1){
            $rs=mysql_fetch_assoc($result);
            $_SESSION['sess_user']=$rs['user_txt'];
            echo $rs['user_txt'];
        }else{
            echo 'null';
        }
    }else if($get['logout']=='true'){
        $_SESSION['sess_user']='';
        unset($_SESSION['sess_user']);
        header('Location: index.php');
    }else{
        echo 'null';
    }
?>

 

รูปภาพผลการทำงานโปรแกรม

 

auth_result1

auth_result2

auth_result3

ลองทดลองทำกันดูนะครับ แล้วลองเอามาแลกเปลี่ยนกันว่าทำได้แบบไหนบ้าง ใครมี Idia ดีๆที่จะสามารถเติมแต่งงานชิ้นนี้เอามาแชร์กันนะครับ แล้วจะรอชื่นชมผลงานครับ ใครอ่านบทความนี้แล้ว อย่าลืมส่งต่อความรู้ให้เพื่อนๆและกด Like Fanpagehttp://www.facebook.com/pages/phpdevthailand/432775100101469 กันด้วยนะครับ ขอให้มีความสุขกับการเขียนโปรแกรมครับ /iBoy
ความคิดเห็น
(มีผู้เข้าชม 4,711 ครั้ง, 1 ผู้เข้าชมในวันนี้)

Related posts