สร้างระบบ สมาชิกออนไลน์ member online ด้วย php และ ajax ใน jQuery อย่างง่าย

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
สมาชิก php ajax jquery

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





1.สร้างตารางในฐานข้อมูล

CREATE TABLE `memberonline` (
  `onlineID` int(11) NOT NULL auto_increment,
  `onlineMemberID` int(11) NOT NULL,
  `onlineMemberName` varchar(100) NOT NULL,
  `onlineTimestamp` int(11) NOT NULL,
  PRIMARY KEY  (`onlineID`)
) ENGINE = MYISAM CHARACTER SET utf8 COLLATE utf8_general_ci;
2.สร้างไฟล์สำหรับแสดงจำนวนสมาชิกออนไลน์ และ รายชื่อสมาชิก เป็น gmemberonline.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);    
// ส่วนของการติดต่อฐานข้อมูล
$link=mysql_connect("localhost","root","test");  
mysql_select_db("test");  


$memberNameOnline=""; // กำหนดตัวแปรสำหรับเก็บชื่อสมาชิกที่ออนไลน์
$q="SELECT onlineMemberID,onlineMemberName  FROM memberonline WHERE 1";
$qr=mysql_query($q);
$numMemberOnline=mysql_num_rows($qr); // เก็บจำนวนสมาชิกที่ออนไลน์
while($rs=mysql_fetch_array($qr)){
	$memberNameOnline.=$rs['onlineMemberName']."<br>"; // เก็บชื่อสมาชิกที่ออนไลน์
}
echo "$numMemberOnline Member Online<br>"; // แสดงจำนวนสมาชิกที่ออนไลน์
echo	  $memberNameOnline; // แสดงชื่อสมาชิก


/*
แก้ไขตัวแปร session  ในที่นี้ใช้ 
$_SESSION['ses_memberID'] เก็บ  id ของสมาชิก
$_SESSION['ses_memberName']  เก็บ ชื่อของสมาชิก
ให้แก้ไขตัวแปรตาม ทั้งสองข้างต้นตามต้องการ
*/
if(isset($_SESSION['ses_memberID']) && $_SESSION['ses_memberID']!=""){
	$q="SELECT * FROM memberonline WHERE onlineMemberID='".$_SESSION['ses_memberID']."' ";
	if(mysql_num_rows(mysql_query($q))<=0){
	$q="INSERT INTO  `memberonline` (
	`onlineID` ,
	`onlineMemberID` ,
	`onlineMemberName` ,
	`onlineTimestamp`
	)
	VALUES (
	NULL ,  '".$_SESSION['ses_memberID']."',  '".$_SESSION['ses_memberName']."', '".time()."'
	);";
	mysql_query($q);
	}else{
		mysql_query("DELETE FROM memberonline WHERE unix_timestamp( ) - onlineTimestamp > 60 ");
	}
}
?>  

3. แสดงข้อมูลด้วย ajax ใน jQuery ไฟล์ memberonline.php

CSS code

<style type="text/css">
div#memberOnlineShow{
	width:120px;
	border:1px solid #99FFCC;
	color:#3366CC;
	text-align:center;
}
</style>

HTML code

<div id="memberOnlineShow">

</div>

Javascript Code

<script src="http://www.google.com/jsapi" type="text/javascript"></script>  
<script type="text/javascript">  
google.load("jquery", "1.3.2");  
</script>  
<script type="text/javascript">  
$(function(){  
	callMemberOnline();
});  
var intV=setInterval("callMemberOnline()",5000);
function callMemberOnline(){
		var html=$.ajax({
			url:"gmemberonline.php",
			data:"memberID=&memberName=",
			async: false,
			success:function(html){
				$("div#memberOnlineShow").html(html);
			},
			error:function(){
					clearInterval(intV);
			}
		}).responseText;		
}
</script> 

รวมไฟล์ memberonline.php (สำหรับทดสอบ)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

</head>

<body>
<style type="text/css">
div#memberOnlineShow{
	width:120px;
	border:1px solid #99FFCC;
	color:#3366CC;
	text-align:center;
}
</style>
<div id="memberOnlineShow">

</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>  
<script type="text/javascript">  
google.load("jquery", "1.3.2");  
</script>  
<script type="text/javascript">  
$(function(){  
	callMemberOnline();
});  
var intV=setInterval("callMemberOnline()",5000);
function callMemberOnline(){
		var html=$.ajax({
			url:"gmemberonline.php",
			data:"memberID=&memberName=",
			async: false,
			success:function(html){
				$("div#memberOnlineShow").html(html);
			},
			error:function(){
					clearInterval(intV);
			}
		}).responseText;		
}
</script> 


</body>
</html>


   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 03-03-2019


ไฟล์ gmemberonline.php กรณีใช้การเชื่อมต่อฐานข้อมูลด้วย mysqli


<?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);    
// ส่วนของการติดต่อฐานข้อมูล
// โค้ดไฟล์ dbconnect.php ที่ https://www.ninenik.com/forum_view_2398_1.html#comment_5642
require_once("dbconnect.php");
 
 
$memberNameOnline=""; // กำหนดตัวแปรสำหรับเก็บชื่อสมาชิกที่ออนไลน์
$numMemberOnline = 0; // กำหนดตัวแปรสำหรับเก็บจำนวนสมาชิกที่ออนไลน์
$sql = "
SELECT 
onlineMemberID,onlineMemberName  
FROM memberonline WHERE 1
";
$result = $mysqli->query($sql);
if($result && $result->num_rows>0){  // คิวรี่ข้อมูลสำเร็จหรือไม่ และมีรายการข้อมูลหรือไม่
	$numMemberOnline = $result->num_rows;
    while($row = $result->fetch_assoc()){ // วนลูปแสดงรายการ
        $memberNameOnline.=$row['onlineMemberName']."<br>"; // เก็บชื่อสมาชิกที่ออนไลน์
    }    
}
echo "$numMemberOnline Member Online<br>"; // แสดงจำนวนสมาชิกที่ออนไลน์
echo      $memberNameOnline; // แสดงชื่อสมาชิก
 
 
/*
แก้ไขตัวแปร session  ในที่นี้ใช้ 
$_SESSION['ses_memberID'] เก็บ  id ของสมาชิก
$_SESSION['ses_memberName']  เก็บ ชื่อของสมาชิก
ให้แก้ไขตัวแปรตาม ทั้งสองข้างต้นตามต้องการ
*/
if(isset($_SESSION['ses_memberID']) && $_SESSION['ses_memberID']!=""){
	$sql = "
	SELECT * FROM memberonline 
	WHERE onlineMemberID='".$_SESSION['ses_memberID']."' 
	";
	$result = $mysqli->query($sql);
	if($result && $result->num_rows>0){
		$mysqli->query("
		DELETE FROM memberonline WHERE unix_timestamp( ) - onlineTimestamp > 60			
		");
	}else{
		$mysqli->query("
		INSERT INTO memberonline SET
		onlineMemberID='".$_SESSION['ses_memberID']."',
		onlineMemberName='".$_SESSION['ses_memberName']."',
		onlineTimestamp='".time()."'				
		");		
	}
}
?> 


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











URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ