Display Online Users using PHP Mysql with Ajax Jquery
It is very important for any website to find out who are currently login into our syste or who are online. Because it will increase the value of website into another user who has online to system. This type of feature most we have seen in social media or forum site. So in this post we have discuss topic like display user information who are currently login into our website by using simple PHP Script Mysql database with Ajax JQuery. If you are using internet and you have already seen on many website in which we can seen the number of online users. So displaying online user details may create nice image on the new visitors of websites.
For create this type of feature there are following steps to create this type of feature.
1. Store User Login Information in table
2. Update Last Activity of Login user into his login information
3. Fetch Online User data from table
Store User Login Information in table
First when user has login into our system then we have to save his login information like his id, login time into our login details database. When login into our system by entering correct login details then after we have create one SESSION variable login id in which we have store the id of login details id based on this id we can update his last activity table column data with current time stamp.
Update Last Activity of Login user into his login information
After storing user login information in table and generate one unique login id and store into SESSION variable, so we can access this variable value into accros our system. So when user logged into system after this we will update current time stamp into his last activity table column into login details based on the unique value of login id get from SESSION variable. For update time stamp data on every three second we have use Ajax with JQuery. For update last activity data we have make one jquery function and in that function we have use Ajax request which send request to server for update login user last activity data and by using JQuery setInterval method we have called this function on every three seconds. So this way we have update login user last activity data with current time stamp data by using Ajax JQuer with PHP Sever script.
Fetch Online User data from table
Now We have already discuss how logged in user data insert into login details details table and how we have update that login used login details every three seconds, now we have move to master user login. This master user can view who is currently logged into our website. So for this we have make one jquery function and in this function we have use Ajax request which send request to PHP server script for fetch data from login details table and here we have condition like it fetch only that data whose last activity table column data is current time stamp data minus five second. That means it only fetch that user data whose last activity time stamp data less than of current time stamp minus five. So this query will return only that user data who currently online with our system or use our system. After fetching this data we have use setInterval() method, by using this method we have called this jquery function on every three second. So on every three second it will display live online user data on web page.
So this is simple system in which we have discuss topic like how to display online information by using PHP with Ajax JQuery and Mysql.
CREATE TABLE user_details (
user_id int(11) NOT NULL AUTO_INCREMENT,
user_email varchar(200) NOT NULL,
user_password varchar(200) NOT NULL,
user_type enum('master','user') NOT NULL,
user_image varchar(150) NOT NULL,
PRIMARY KEY (user_id )
);
CREATE TABLE login_details (
login_details_id int(11) NOT NULL AUTO_INCREMENT,
user_id int(11) NOT NULL,
last_activity datetime NOT NULL,
PRIMARY KEY (login_details_id )
);
INSERT INTO user_details (user_id, user_email, user_password, user_type, user_image) VALUES
(1, 'kwikl3arn@yahoo.com', 'kwikl3arn', 'master', ''),
(2, 'disney@gmail.com', 'mickey', 'user', 'mickey.jpg'),
(3, 'carttoonnetwork@rediffmail.com', 'jerry', 'user', 'jerry.jpg'),
(4, 'peter@gmail.com', 'pete', 'user', 'pete.jpg'),
(5, 'thomas@gmail.com', 'thomas', 'user', 'thomas.jpg'),
(6, 'william@gmail.com', 'wil123', 'user', 'william.jpg');
database_connection.php
<?php
$host='localhost';
$user='root';
$password='';
$database='kwikl3arn';
$connect= mysqli_connect($host, $user, $password, $database);
session_start();
?>
login.php
<?php
//login.php
include('database_connection.php');
if(isset($_SESSION["type"]))
{
header("location: index.php");
}
$message = '';
if(isset($_POST["login"]))
{
if(empty($_POST["user_email"]) || empty($_POST["user_password"]))
{
$message = "<label>Both Fields are required</label>";
}
else
{
$email=$_POST["user_email"];
$pass=$_POST["user_password"];
$query = "SELECT * FROM user_details WHERE user_email = '$email' and user_password= '$pass'";
$statement = mysqli_query($connect,$query);
$values= mysqli_fetch_assoc($statement);
$count= mysqli_num_rows($statement);
if($count >0)
{
$active='1';
$last_activity=date("Y-m-d H:i:s", STRTOTIME(date('h:i:sa')));
$insert_query = "INSERT INTO login_details (user_id,last_activity,activity) VALUES ('".$values['user_id']."','$last_activity','$active')";
$statement1 =mysqli_query($connect,$insert_query);
$login_id=$values['user_id'];
if(!empty($login_id))
{
$_SESSION["type"] = $values['user_type'];
$_SESSION["login_id"] = $login_id;
$_SESSION["email"]=$email;
$_SESSION["active"]=$active;
header("location: index.php");
}
}
else
{
$message = "<label>Wrong Email Address</labe>";
}
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>How Display Users Online using PHP with Ajax JQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br />
<div class="container">
<h2 align="center">How Display Users Online using PHP with Ajax JQuery</h2>
<br />
<div class="panel panel-default">
<div class="panel-heading">Login</div>
<div class="panel-body">
<form method="post">
<span class="text-danger"><?php echo $message; ?></span>
<div class="form-group">
<label>User Email</label>
<input type="text" name="user_email" class="form-control" />
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="user_password" class="form-control" />
</div>
<div class="form-group">
<input type="submit" name="login" value="Login" class="btn btn-info" />
</div>
</form>
</div>
</div>
</div>
</body>
</html>
index.php
<?php
//index.php
include('database_connection.php');
if(!isset($_SESSION["type"]))
{
header("location: login.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<title>How Display Users Online using PHP with Ajax JQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br />
<div class="container">
<div align="right">
<a href="logout.php">Logout</a>
</div>
<br />
<?php
if($_SESSION["type"] =="user")
{
echo '<div align="center"><h2>Hi... Welcome '. $_SESSION["email"].'</h2></div>';
}
else
{
?>
<div class="panel panel-default">
<div class="panel-heading">Online User Details</div>
<div id="user_login_status" class="panel-body">
</div>
</div>
<?php
}
?>
</div>
</body>
</html>
<script>
$(document).ready(function(){
<?php
if($_SESSION["type"] == "master")
{
?>
//fetching data for admin
function fetch_user_login_data()
{
var action = "fetch_data";
$.ajax({
url:"action.php",
method:"POST",
data:{action:action},
success:function(data)
{
$('#user_login_status').html(data);
}
});
}
//loading page for every 30seconds
fetch_user_login_data();
setInterval(function(){
fetch_user_login_data();
}, 3000);
<?php
}
?>
});
</script>
action.php
<?php
//action.php
include('database_connection.php');
if($_POST["action"] == "fetch_data")
{
$output = '';
$query = "
SELECT login_details.user_id, user_details.user_email, user_details.user_image FROM login_details
INNER JOIN user_details
ON user_details.user_id = login_details.user_id
WHERE user_details.user_type = 'user' and activity='1'
";
$statement =mysqli_query($connect,$query);
$count= mysqli_num_rows($statement);
$output .= '
<div class="table-responsive">
<div align="right">
'.$count.' Users Online
</div>
<table class="table table-bordered table-striped">
<tr>
<th>No.</th>
<th>Email ID</th>
<th>Image</th>
</tr>
';
$i = 0;
while($row = mysqli_fetch_assoc($statement))
{
$i = $i + 1;
$output .= '
<tr>
<td>'.$i.'</td>
<td>'.$row["user_email"].'</td>
<td><img src="images/'.$row["user_image"].'" class="img-thumbnail" width="50" /></td>
</tr>
';
}
$output .= '</table></div>';
echo $output;
}
?>
logout.php
<?php
//logout.php
include('database_connection.php');
session_start();
echo $query = "delete from login_details where user_id =".$_SESSION["login_id"];
//$query = "UPDATE login_details
// SET activity = '0'
// WHERE user_id =".$_SESSION["login_id"];
$statement =mysqli_query($connect,$query);
session_destroy();
header("location:login.php");
?>
