แนวทาง การสร้าง ระบบตรวจสอบ การล็อกอิน อย่างง่าย ด้วย ajax ใน jQuery และ php

29 September 2010 เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdee

php ระบบตรวจสอบ ajax jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ php ระบบตรวจสอบ ajax jquery

วิธีการต่อไปนี้ เป็นแนวทางเบื้องต้น สำหรับการทำระบบล็อกอิน ด้วย 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 หรือไม่
?>

เนื้อหาเบื้องต้นเป็นแนวทาง ความต้องการที่เหนือกว่า ขึ้นอยู่กับการประยุกต์ใช้งานของแต่ละคน

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ