Seringkali kita menjumpai sebuah aplikasi (khususnya aplikasi web) seperti facebook, yahoo, gmail, dlsb. Dimana terdapat list atau daftar pengguna / user yang sedang online saat sesi berlangsung. Pada artikel ini, akan diulas sedikit tentang cara pembuatan aplikasi tersebut secara sederhana. Sebenarnya ada beberapa cara untuk menampilkan data user yang sedang online saat sesi sedang berlangsung, salah satunya dapat menggunakan session atau dapat juga menggunakan parameter baru (istilah saya sendiri lho). Parameter baru yang seperti apa sih ? kok seumur-umur di dunia perwebsite’an baru dengar kali ini. Yah, mungkin itu hanya sekedar istilah saja, maklum penulis mempelajari ini semua dengan cara otodidak dengan bantuan internet. Ok, Let’s start…..
- Bagian Login, yang berfungsi untuk mengetahui siapa yang boleh mengakses aplikasi tsb, apakah user atau bukan. Disini juga akan dilakukan pencocokan user-id dan password user.
- Bagian User Log, Apabila berhasil melewati bagian pertama, data user akan di simpan ke dalam basis data (data yang di simpan meliputi : jam login, hari atau tanggal login, nama user, dan status login). Status login inilah yang saya istilahkan parameter baru.
- Bagian Penampil, Berfungsi untuk menampilkan siapa saja user yang sedang mengakses sistem (user online) mengacu pada status user.
Step 1
Buat Database dan Tabel-nya, seperti gambar berikut (hanya contoh) :
Database Name : user_online ; Tabel Name : user & log
Gambar 1. Struktur Tabel user
Gambar 2. Struktur Tabel log
Step 2
Proses pembuatan Halaman Login / Login Page (index.php)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script language="javascript">
function validasi(form){
if (form.username.value == ""){
alert("Anda belum mengisikan Username.");
form.username.focus();
return (false);
}
if (form.password.value == ""){
alert("Anda belum mengisikan Password.");
form.password.focus();
return (false);
}
return (true);
}
</script>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<head>
<title>LOGIN</title>
</head>
<body>
<form name="login" action="cek_login.php" method="POST" onSubmit="return validasi(this)">
<br /><br /><br /><br />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div align="center">
<table cellpadding="0" cellspacing="0">
<tr>
<td height="25">Username :</td>
<td>
<input type="text" name="username" /></td></tr>
<tr><td height="30">Password :</td>
<td>
<input type="password" name="password" /></td></tr>
<tr><td colspan="2"><div align="right">
<input name="submit" type="submit" value="LOGIN" /></div></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
Step 3Membuat koneksi ke database (koneksi.php)
Source Code :
<?php
// -- Host, Username dan Password Database
$host = "localhost";//db-host
$username = "root";//db-user
$password = "123456";//db-password
$db = "user_online";//db-name
// Melakukan koneksi ke database
mysql_connect($host,$username,$password) or die("Koneksi gagal");
mysql_select_db($db) or die("Database tidak bisa dibuka");
?>
Step 4Proses Validasi / Pencocokan data user & password ke Database (cek_login.php)
Source Code :
<?php
include "koneksi.php";
function antiinjection($data){
$filter_sql = mysql_real_escape_string(stripslashes(strip_tags(htmlspecialchars($data,ENT_QUOTES))));
return $filter_sql;
}
$username = antiinjection($_POST[username]);
$pass = antiinjection($_POST[password]);
$login=mysql_query("SELECT * FROM user WHERE username='$username' AND password='$pass'");
$ketemu=mysql_num_rows($login);
$r=mysql_fetch_array($login);
// Apabila username dan password ditemukan
if ($ketemu > 0)
{
session_start();
session_register("username");
session_register("password");
$_SESSION[username] = $r[username];
$_SESSION[password] = $r[password];
$jam = date("H:i:s");
$tgl = date("Y-m-d");
mysql_query("INSERT INTO log(username,
tanggal,
jamin,
jamout,
status)
VALUES('$_SESSION[username]',
'$tgl',
'$jam',
'logged',
'online')");
header('location:home.php');
}
else
{
echo "<center><br><br><br><br><br><br><b>LOGIN GAGAL! </b><br>
Username atau Password Anda tidak benar.<br>";
echo "<br>";
echo "<input type=button value='ULANGI LAGI' onclick=location.href='index.php'></a></center>";
}
?>
Step 5Proses selanjutnya bila login berhasil (home.php)
<?php
include "koneksi.php";
session_start();
if (empty($_SESSION[username]) AND empty($_SESSION[password]))
{
header('location:index.php');
}
else
{
?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>HOME</title>
<style>
th{
color: #FFFFFF;
font-size: 8pt;
text-transform: uppercase;
text-align: center;
padding: 0.1em;
border-width: 1px;
border-style: solid;
border-color: #969BA5;
border-collapse: collapse;
background-color: #265180;
}
</style>
</head>
<body>
<?php
echo"
<center>USER ONLINE
<table border=1 width='650' align=center>
<tr><th>No</th><th>Username</th><th>Tanggal Login</th><th>Jam Login</th><th>Jam Logout</th><th>Status</th></tr>";
$sql = mysql_query("SELECT * FROM log ORDER BY no DESC");
$no=1;
while($d=mysql_fetch_array($sql))
{
echo "<tr><td align=center>$no</td>
<td align=center>$d[username]</td>
<td align=center>$d[tanggal]</td>
<td align=center>$d[jamin]</td>
<td align=center>$d[jamout]</td>";
if($d[status]=='offline')
{
echo"<td style='background-color:red' align=center>OFFLINE</td>";
}
else
{
echo"<td style='background-color:00ff00' align=center>ONLINE</td>";
}
echo"</tr>";
$no++;
}
echo "</table>";
echo "<br /><br /><input type=button value='LOGOUT' onclick=location.href='logout.php'></a></center>";
?>
</body>
</html>
<?php
}
?>
Step 6
Proses keluar / Logout (logout.php)
Source Code :
<?php
include "koneksi.php";
$jam = date("H:i:s");
session_start();
mysql_query("UPDATE log SET jamout='$jam',
status='offline'
WHERE username = '$_SESSION[username]' AND jamout='logged' AND status='online'");
session_destroy();
header('location:index.php');
?>
Tamat ¦..Pada aplikasi diatas masih memiliki beberapa kekurangan, mohon koreksi dari kawan-kawan dan para pembaca yang budiman. Saran kedepannya untuk user online ini akan lebih baik lagi apabila dipadukan dengan AJAX, sehingga user yang baru melakukan proses login dapat diketahui langsung tanpa me-reload atau me-refresh halaman website tersebut.
