สร้างระบบ สมาชิกออนไลน์ member online ด้วย php และ ajax ใน jQuery อย่างง่าย
25 November 20091.สร้างตารางในฐานข้อมูล
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>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
25 Sep 08 CSS แทรกโค๊ดในเว็บโดยมีหมายเลขบรรทัดกำกับ อ่าน 2743 06 Apr 10 ใช้ คุณสมบัติ css stylesheet สร้างตาราง อ่าน 4586 13 Oct 10 สร้างเส้นทาง จากการ คลิกกำหนด waypoints จุดผ่านเส้นทาง ใน google map อ่าน 1987 06 May 10 สร้าง poll แบบสำรวจ ด้วย ajax ใน jQuery อย่างง่าย อ่าน 3992 01 Feb 10 การใช้งาน method delay() ใน jQuery 1.4 อ่าน 2719 25 Sep 08 ตรวจสอบระดับความปลอดภัยของ รหัสผ่านด้วย Ajax อ่าน 3842 13 Oct 08 คำสั่ง SQL LIKE อ่าน 4447 25 Sep 08 ตรวจสอบสถานะของ MySQL ด้วย phpinfo อ่าน 1780 06 Aug 10 ตรึง หัวข้อ คอลัมน์ ในตาราง ด้วย เทคนิคที่ง่ายกว่า รองรับทุกบราวเซอร์ อ่าน 2430 09 Sep 10 Google map API v.3 กับ jQuery ลากจุดหา พิกัด ค่า latitude และ longitude อ่าน 6372 30 Sep 08 สร้างฟังก์ชัน PHP แยกตัวเลขจากข้อความ อย่างง่าย อ่าน 1756 06 Jun 11 แนวทางการกำหนด expired header ให้กับรูปภาพ ด้วย php อย่างง่าย อ่าน 739 16 Jul 11 แทรก +1 button ในเว็บจาก google plus อ่าน 861 25 Mar 09 การใช้งานแอดทริบิวท์ autocomplete แบบพื้นฐาน อ่าน 3536 25 Sep 08 รู้จักฟังก์ชันของ jQuery ในการกำหนด Style Sheet อ่าน 3462 19 Oct 08 คำสั่ง SQL functions อ่าน 4421 08 Oct 08 การจัดตำแหน่ง div ให้อยู่กี่งกลาง อ่าน 5336 21 Sep 10 ทบทวน การจัดการกับ ตัวแปร array ใน javascript ด้วย ฟังก์ชัน ตอนที่ 1 อ่าน 1394 16 Oct 08 CSS กับการตกแต่งกรอบรูปภาพ อ่าน 10593 19 Mar 10 ทบทวน คุณสมบัติ สี color และ พื้นหลัง background property ของ CSS อ่าน 3508