สร้างระบบ สมาชิกออนไลน์ member online ด้วย 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>
บทความในหมวดที่่น่าสนใจ อื่นๆ
