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

25 November 2009 เขียนเมื่อ 14 ปีก่อน โดย Ninenik Narkdee

สมาชิก jquery php ajax

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

UPDATE! อัพเดทล่าสุด 03-03-2019
.

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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ