Tuesday, April 26, 2011

Show online members in friend array

Hi there..Today i gonna show you how to display online members in php/ajax.


How the script work? Showing members online members in php is easy and simple. most of php coders, elite or not knows how to query and show online members in the database. But some of us didnt know how to display it  with ajax. Jquery here, will be used to auto refresh the <div> where our output will be displayed.


Well, so much for the words. This script is an extension to the webintersect, an opensource web application developed by Adam Khurry in www.developphp.com and www.webintersect.com. While applying this script into your work, you assume yourself that your work is based in webintersect.


First, we will add a field in members  table in our database..note that in my script, i labeled my table as members instead of myMembers in webintersect



`online` enum('0','1') character set utf8 NOT NULL default '0',




next create a file named online_members.php but remember that in my database i label my table as "members" instead of "myMembers" in webintersect.

<?php
session_start();
// Force script errors and warnings to show on page in case php.ini file is set to not display them
error_reporting(E_ALL);
ini_set('display_errors', '1');
//---------------------------------------------------------------------------------
// Start_session, check if user is logged in or not, and connect to the database all in one included file
require "connect_to_mysql.php";
$id = "";
$username = "";
$friend_array = "";
$online = "";
$online_array = "";
$friendList = "";
$logOptions = ''; // Initialize the logOptions variable that gets printed to the page
//if the session idx is set
if (isset($_SESSION['idx'])) {

$decryptedID = base64_decode($_SESSION['idx']);
$id_array = explode("p3h9xfn8sq03hs2234", $decryptedID);
$logOptions_id = $id_array[1];
$logOptions_username = $_SESSION['username'];
$logOptions_username = substr('' . $logOptions_username . '', 0, 15); // cut user name down in length if too long
/////////// Update Last Login Date Field       ////////////////////////////////////////////
mysql_query("UPDATE members SET online='1', lastlogin=now() WHERE id='$logOptions_id'"); 
//start the query here
$id = preg_replace('#[^0-9]#i', '', $id); // filter everything but numbers on the ID just in case
$sqlArray = mysql_query("SELECT friend_array FROM members WHERE id='" . $logOptions_id ."' LIMIT 1");
while($row=mysql_fetch_array($sqlArray)) { $iFriend_array = $row["friend_array"]; }
//if the friend array is not empty
if ($iFriend_array  != "") { 
//if friends is online
$xxx = mysql_query("SELECT * FROM members WHERE id IN ($iFriend_array) AND online='1'");
$i = 0;
while($row = mysql_fetch_array($xxx)){ 

$username = $row["username"];
$id = $row["id"];
$online_array = $row["friend_array"];
//start query in the friend_array and display the online friends
$online .= '<table align="left" cellpadding="2" cellspacing="0">'; 
$check_pic = 'memberFiles/' . $id . '/pic1.jpg';
   if (file_exists($check_pic)) {
$frnd_pic = '<img src="' . $check_pic . '" width="38px" height="38px" border="0"/>';
   } else {
$frnd_pic = '<img src="memberFiles/0/pic1.jpg" width="38px" height="38px" border="0"/>';
   }
if ($i % 5 == 0) { // if $i is divisible by our target number (in this case "5")
$online .= '<tr><td title="' . $username . '">' . $frnd_pic . '</td>'; 
} else {
$online .= '<td title="' . $username . '">' . $frnd_pic . '</td>'; 
}
$i++;
}
$online .= '</tr></table>'; 
}
}
//set if the user is inactive for 10 minutes
mysql_query("UPDATE members SET online='0' WHERE lastlogin<SUBTIME(NOW(),'0 0:10:0')");
//echo the output
echo $online;
?>

The script above will make a query in the database and echo the online members.. In this script, i want to display an online members which is my friend at the same time. Any members in my friend arry that is inactive for 10 minutes will be updated in the database and marked as not online or online=0. it will also display the pictures of the online members

Next, applying ajax into the page where the output will be displayed.

<html>
<title>Show Online members</title>
<head>

<script src="js/jquery-1.4.2.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
//AUTOREFRESH WITH ONLINE MEMBERS
$(document).ready(function() {
  $("#online").load("online_members.php");
   var refreshId = setInterval(function() {
      $("#online").load('online_members.php');
   }, 1000);
   $.ajaxSetup({ cache: false });
});
</script>

</head>
<body>

<div class="infoBody" align="left" style="overflow:hidden" id="online"></div>';

</body>
</html>

The page above is a php file in your site where the output will be displayed.
The jscript above will auto refresh the online_members.php every seconds and update the database for changes, also refresh the div where the output will be displayed. the file in the ajax was targeted by an id "online" ex.  $("#online").

If  you find hard understanding my script, you can email me at iahnnlusica@gmail.com and ask me anything about it..

special thanks to www.developphp.com
and www.webintersect.com