PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

25 November 2009 By


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>

Tags:: ajax jquery สมาชิก php





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