วิธีการต่อไปนี้ เป็นแนวทางเบื้องต้น สำหรับการทำระบบล็อกอิน ด้วย ajax อย่างง่าย
ไฟล์สำหรับหน้าล็อกอิน สมมติเป็น index.php ประกอบด้วยฟอร์มสำหรับล็อกอิน
<form id="form_login_x" name="form_login_x" method="post" action=""> User: <input type="text" name="textfield" id="textfield" /> Pass: <input type="text" name="textfield2" id="textfield2" /> <input type="submit" name="LoginBT" id="LoginBT" value="Login" /> </form>
สิ่งที่จำเป็นต้องกำหนด
id ของฟอร์ม ในที่นี้ <form id="form_login_x"
id ของส่วนกรอกชื่อผู้ใช้ id="user_name"
id ของส่วนกรอกรหัสผ่าน id="user_pass"
กำหนดเพื่อไว้สำหรับอ้างอิงในการใช้งานกับ javascript
ตัวอย่างโครงสร้าง ส่วนของฐานข้อมูลสำหรับทดสอบ
-- -- Table structure for table `tbl_user` -- CREATE TABLE `tbl_user` ( `user_id` int(11) NOT NULL auto_increment, `user_name` varchar(100) NOT NULL, `user_pass` varchar(100) NOT NULL, PRIMARY KEY (`user_id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=2 ; -- -- Dumping data for table `tbl_user` -- INSERT INTO `tbl_user` VALUES (1, 'admin', '12345');
ส่วนของ javascript สำหรับส่งข้อมูลไปตรวจสอบ
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
$("#form_login_x").submit(function(){ // เมื่อมีการ submit ฟอร์ม ล็อกอิน
// ส่งข้อมูลไปตรวจสอบที่ไฟล์ check_login.php แบบ post ด้วย ajax
$.post("check_login.php",$("#form_login_x").serialize(),function(data){
if(data==1){ // ตรวจสอบผลลัพธ์
// ถ้าล็อกอินผ่าน ให้ลิ้งค์ไปที่หน้า main_page.php
window.location='main_page.php';
}else{
/// คำสั่งหรือแจ้งเตือนกรณีล็อกอินไม่ผ่าน
$("#form_login_x")[0].reset();
}
});
return false;
});
});
</script>
ส่วนของไฟล์สำหรับตรวจสอบการล็อกอิน สมมติใช้ check_login.php
<?php
session_start();
header("Content-type:text/html; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
// ส่วนของการเชิ่อมต่อกับฐานข้อมูล
mysql_connect("localhost","root","test") or die("Cannot connect the Server");
mysql_select_db("test") or die("Cannot select database");
mysql_query("set character set utf8");
if($_POST['user_name']!="" && $_POST['user_pass']!=""){
$q="SELECT * FROM tbl_user WHERE user_name='".$_POST['user_name']."' ";
$q.=" AND user_pass='".$_POST['user_pass']."' LIMIT 1 ";
$qr=mysql_query($q);
if(mysql_num_rows($qr)>0){
$rs=mysql_fetch_array($qr);
// $_SESSION['ses_user']=$rs['user_id']; // สร้างตัวแปร session ตามต้องการ
echo "1"; // เมื่อล็อกอินผ่าน
}else{
echo "0";
}
}else{
echo "0";
}
?>
ส่วนสุดท้าย ในไฟล์ main_page.php ให้ตรวจสอบ session ที่สร้างจากไฟล์ check_login.php
ถ้าไม่มีตัวแปร session ตามที่กำหนด ให้กลับมาที่หน้าล็อกอิน
<?php
session_start();
if(!isset($_SESSION['ses_user']) || $_SESSION['ses_user']==""){
header("Location:index.php");
}
// ใส่ไว้ด้านบนของไฟล์สำหรับ เช็คว่าเป็น user หรือไม่
?>
ตัวอย่างโค้ดไฟล์ทั้งหมด
ไฟล์ index.php หน้าล็อกอิน
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<form id="form_login_x" name="form_login_x" method="post" action="">
User:
<input type="text" name="user_name" id="user_name" />
Pass:
<input type="text" name="user_pass" id="user_pass" />
<input type="submit" name="LoginBT" id="LoginBT" value="Login" />
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
$("#form_login_x").submit(function(){ // เมื่อมีการ submit ฟอร์ม ล็อกอิน
// ส่งข้อมูลไปตรวจสอบที่ไฟล์ check_login.php แบบ post ด้วย ajax
$.post("check_login.php",$("#form_login_x").serialize(),function(data){
if(data==1){ // ตรวจสอบผลลัพธ์
// ถ้าล็อกอินผ่าน ให้ลิ้งค์ไปที่หน้า main_page.php
window.location='main_page.php';
}else{
/// คำสั่งหรือแจ้งเตือนกรณีล็อกอินไม่ผ่าน
$("#form_login_x")[0].reset();
}
});
return false;
});
});
</script>
</body>
</html>
ไฟล์ check_login.php สำหรับตรวจสอบการล็อกอิน
<?php
session_start();
header("Content-type:text/html; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
// ส่วนของการเชิ่อมต่อกับฐานข้อมูล
mysql_connect("localhost","root","test") or die("Cannot connect the Server");
mysql_select_db("test") or die("Cannot select database");
mysql_query("set character set utf8");
if($_POST['user_name']!="" && $_POST['user_pass']!=""){
$q="SELECT * FROM tbl_user WHERE user_name='".$_POST['user_name']."' ";
$q.=" AND user_pass='".$_POST['user_pass']."' LIMIT 1 ";
$qr=mysql_query($q);
if(mysql_num_rows($qr)>0){
$rs=mysql_fetch_array($qr);
// $_SESSION['ses_user']=$rs['user_id']; // สร้างตัวแปร session ตามต้องการ
echo "1"; // เมื่อล็อกอินผ่าน
}else{
echo "0";
}
}else{
echo "0";
}
?>
ไฟล์หน้าหลักจะสามารถเข้าใช้งานได้ เมื่อล็อกอินผ่านเท่านั้น main_page.php หรือไฟล์อื่นๆ
<?php
session_start();
if(!isset($_SESSION['ses_user']) || $_SESSION['ses_user']==""){
header("Location:index.php");
}
// ใส่ไว้ด้านบนของไฟล์สำหรับ เช็คว่าเป็น user หรือไม่
?>
เนื้อหาเบื้องต้นเป็นแนวทาง ความต้องการที่เหนือกว่า ขึ้นอยู่กับการประยุกต์ใช้งานของแต่ละคน
