PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

25 November 2009 By
php สมาชิก jquery ajax

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



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:: php สมาชิก ajax jquery






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


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