วิธีการต่อไปนี้ เป็นแนวทางเบื้องต้น สำหรับการทำระบบล็อกอิน ด้วย ajax อย่างง่าย
ไฟล์สำหรับหน้าล็อกอิน สมมติเป็น index.php ประกอบด้วยฟอร์มสำหรับล็อกอิน
1 2 3 4 5 6 7 | <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
ตัวอย่างโครงสร้าง ส่วนของฐานข้อมูลสำหรับทดสอบ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | -- -- 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 สำหรับส่งข้อมูลไปตรวจสอบ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <?phpsession_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 ตามที่กำหนด ให้กลับมาที่หน้าล็อกอิน
1 2 3 4 5 6 7 | <?phpsession_start();if(!isset($_SESSION['ses_user']) || $_SESSION['ses_user']==""){ header("Location:index.php"); }// ใส่ไว้ด้านบนของไฟล์สำหรับ เช็คว่าเป็น user หรือไม่?> |
ตัวอย่างโค้ดไฟล์ทั้งหมด
ไฟล์ index.php หน้าล็อกอิน
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<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">$(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 สำหรับตรวจสอบการล็อกอิน
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <?phpsession_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 หรือไฟล์อื่นๆ
1 2 3 4 5 6 7 | <?phpsession_start();if(!isset($_SESSION['ses_user']) || $_SESSION['ses_user']==""){ header("Location:index.php"); }// ใส่ไว้ด้านบนของไฟล์สำหรับ เช็คว่าเป็น user หรือไม่?> |
เนื้อหาเบื้องต้นเป็นแนวทาง ความต้องการที่เหนือกว่า ขึ้นอยู่กับการประยุกต์ใช้งานของแต่ละคน
