Membuat User Online Sederhana Pada Halaman Website (PHP)

20 10 2011

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…..

Untuk memudahkan, akan saya bagi menjadi 3 bagian utama :

  1. 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.
  2. 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.
  3. Bagian Penampil, Berfungsi untuk menampilkan siapa saja user yang sedang mengakses sistem (user online) mengacu pada status user.

Bagaimana, cukup membingungkan bukan penjelasannya ??? saya sendiri juga bingung, hehehe..😀

Ok dehh, selanjutnya langsung ke proses pembuatannya :

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)

Source Code :

<!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> &nbsp;&nbsp;
                          <input type="text" name="username"  /></td>
                      </tr>
                      <tr>
                        <td height="30">Password :</td>
                        <td> &nbsp;&nbsp;
                          <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 3

Membuat 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 4

Proses 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 5

Proses selanjutnya bila login berhasil (home.php)

Source Code :

<?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');
?>

Selesai…..

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.

Sekian tulisan edisi Minggu ke 3 Bulan Oktober ini, semoga bermanfaat.

Referensi :

Google & Buku Lokomedia


Actions

Information

46 responses

20 10 2011
Albet Sagan

Comment ah… Mantap…..

makasih reques ane.. hehehehehehe….. lanjut master heru… hehehe

20 10 2011
heru widakdo

Terima kasih pak sagan, mohon koreksi nya….

23 10 2011
aji

mas itu untuk khusu admin ajja ? klo untuk setiap user dengan nama berbeda g bisa ?

23 10 2011
heru widakdo

@aji

TIdak harus admin sih, asalkan user tersebut memiliki account (username & password) yang tersimpan pada database.

DEMO = http://indo-demo.net63.net/user_online/

USERNAME / PASSWORD
1) = admin / admin
2) = widakdo / widakdo

23 10 2011
aji

mkash ya mas ilmu ya ? kira klo buat album foto kya di fb tw script y g mas

23 10 2011
heru widakdo

@aji
Maksud nya kayak fb tu gmana ? dr segi tampilan nya atau dari segi pembagian foto2 berdasarkan nama albumnya ??

24 10 2011
aji

berdasarkan album

24 10 2011
heru widakdo

@aji
Anda bisa melihat aplikasi cms lokomedia. Disitu terdapat contoh photo album.
Search saja pada mesin pencari dengan keyword : “CMS Lokomedia”

26 10 2011
Albet Sagan

kang la scrip iki… neng lokomedia.. edisi berapa???

26 10 2011
heru widakdo

@sagan = kayak nya ga ada kang….hasil modifikasi sendiri…..ada yg modifikasi dengan ajax juga…. tp blm sempurna….masih perlu pembenahan sedikit

26 10 2011
Albet Sagan

Wakakakakaka………….. Wah… sang master emang Ahli… kikikik ^_^

26 10 2011
heru widakdo

masih banyak para ahli dan master2 lainnya di jagat per-web’an…wkwkwkwk…..cm modal seneng aja gan…

19 12 2011
esti

pak cara bikin alert di php tapi yang ga pake java script bisa ga?Kalo bisa gimana caranya ya? tolong share…

19 12 2011
heru widakdo

@esti : saya belum pernah pakai alert dgn php saja, rata2 saya gunakan penggabungan antara php dan javascript.

19 12 2011
heru widakdo

bs juga dgn yg seperti ini (tp blm saya coba)
http://www.daniweb.com/web-development/php/threads/34967

24 02 2012
FREEWARE EVERYDAY

thx sngt membantu😀

25 02 2012
heru widakdo

Thanks gan udh mampir di blog ane……

6 03 2012
Rungga

Mas kok bisa ga jam keluarnya terdeteksi juga? soalnya yg saya buat ke deteksinya hanya “logged”. Terima kasih dan keren artikelnya

7 03 2012
heru widakdo

@rungga :

“logged” menunjukkan bahwa user tersebut masih aktif / masih login / session nya blm habis….

jam keluar akan ter’record / terekam apabila anda sudah keluar / logout

11 03 2012
agung

mas klo buat laporan y di pdf script y ky ap
coz saya make teknik punya mas tpi binggun buat pdf y
contoh
jika status jiwa ya “almarhum”
echo” red”;
else
echo”white”;
itu kn script php y
klo script pdf y biar tampilan ya sama kya apa y bentuk y

11 03 2012
heru widakdo

Yang agan maksud bgmn ? maaf saya belum bisa menangkap maksud agan nih…..

11 03 2012
agung

misalnya tutorial punya mas heru di kasih tombol cetak terus laporan cetak y dipdf
tpi tampilan ya sama kya tutorial yg di atas menendai siapa aja yg online dan off ?

11 03 2012
heru widakdo

yah logika nya sama aja gan, itu kn cm pembeda aja….

12 07 2012
veatszky

mas…kok saya copy paste kode yang diatas ga mau jalan ya….?
saya sudah login dan logout, tapi tidak muncul juga di halaman home.php nya….
kenapa ya???

14 07 2012
heru widakdo

apakah sudah anda cek script yang anda copy paste tersebut ? cz sudah saya cek di komp saya baik2 saja…

25 10 2012
Rully

kelemehan skripnya mas mungkin kalo misalkan user tidak logout langsung menutup browser status user tersebut masih online

27 10 2012
heru widakdo

Yupz…benar sekali, ini hanyalah comtoh sederhana saja. Bisa kawan modifikasi sendiri sesuai dengan kebutuhan.

Thanks mas rully atas masukan dan idenya.

6 06 2013
Fite

Saya mau tanya.Misalnya database yg di pake menggunakan active directory, apakah bisa menampilkan sperti itu.Apakah pembuatan database di atas bisa menggunakan XAMPP?

12 06 2013
Muhammad Wiwid Sujadty

mas saya mau nanya gimana cara menampilkan data user yang sedang aktif?
mohon pencerahannya ya. thx^^

27 08 2013
nianotnot

gan mau nanya nih, gw mau buat website , nah gw mau buat login form register logout, tapi gw bingung gimana caranya kalo misalnya ada pengguna login / register, setelah berhasil masuk , terus di website gue ada nama username nya. kayak difacebook . nampil.in itu nya gimana ya?
terus gue mau nanya lagi :} kalo tutorial2 cara buat login form kan biasanya , kalo pas udah berhasil login langsung ke halaman berikutnya yg tulisannya misalnya “Anda berhasil login” . nah tapi gw gak pengen gitu. gue pengen nya pas berhasil login , langsung menuju ke Home dan di atas {navbar} ada username nya kyk pertanyaan gw yg pertama.
tolong pencerahannya ya😦 penting nih.😦

27 08 2013
nianotnot

gan mau nanya nih, gw mau buat website , nah gw mau buat login form register logout, tapi gw bingung gimana caranya kalo misalnya ada pengguna login / register, setelah berhasil masuk , terus di website gue ada nama username nya. kayak difacebook . nampil.in itu nya gimana ya?
terus gue mau nanya lagi :} kalo tutorial2 cara buat login form kan biasanya , kalo pas udah berhasil login langsung ke halaman berikutnya yg tulisannya misalnya “Anda berhasil login” . nah tapi gw gak pengen gitu. gue pengen nya pas berhasil login , langsung menuju ke Home dan di atas {navbar} ada username nya kyk pertanyaan gw yg pertama.
tolong pencerahannya ya😦 penting nih.😦

27 08 2013
heru widakdo

@nianotnot : kalau untuk menampilkan user yang aktif (login saat itu) seperti yang anda harapkan, anda bisa memanfaatkan “session” nya.
Sedangkan kalau ingin menuju ke suatu halaman tertentu setelah login berhasil, anda bisa me-redirect ke halaman yang anda inginkan. bisa menggunakan redirect php (ex : header(location…..dst);) atau bisa juga dengan window location nya javascript.
Demikian semoga membantu. Thanks sudah berkenan mampir d blog saya.

5 12 2013
zaidin

mas kok muncul pesan begini mas saat aq coba :

Notice: Use of undefined constant username1 – assumed ‘username1’ in C:\xampp\htdocs\useronline\cek_login.php on line 9

Notice: Use of undefined constant password1 – assumed ‘password1’ in C:\xampp\htdocs\useronline\cek_login.php on line 10

Fatal error: Call to undefined function session_register() in C:\xampp\htdocs\useronline\cek_login.php on line 20

27 01 2014
nur salim

mas heru saya ada pertanyaan nih .. bolehkah ?

15 02 2014
heru widakdo

Silahkan gan, selama saya bisa akan saya jwb sebisa saya..😀

10 02 2014
Aditya Eka Nugraha

Gan Kalau dia login terus data accountnya dihapus maka dia akan logout script nya gimana ya

11 02 2014
zeifhend

mas mau tanya klo untuk buat script jadwal acara televisi gmn yah , buka post barunya dong. thx

19 03 2014
dew

mas mau nanya itu scriptnya pas logout kok ga mau offline saat misalnya cici logout,kemudian tito online.tapi kok cici masih online yah?harusnya kn statusnya offline.mohon pencerahaan yah

6 04 2014
heru widakdo

Iya, itu masih ada beberapa kekurangan, saya contohkan yg sederhana, bisa untuk dikembangkan sendiri.
Klo mau realtime sperti yg anda mksud, bisa ditambahkan ajax / pke jquery.
Thnks u atas komentar, saran, n koreksinya.

6 04 2014
bintang

mas, pertanyaan saya menyimpang sedikit boleh? saya mau tanya nih, skrg kan saya lagi tugas akhir. nah yg mau saya tanya nya kan. gmna caranya supaya website yg kita bangun bisa mengupdate jadwal-jadwal keberangkatan pada bus, mksd nya mengupdate, kita mau buat keberangkatan nya itu secara otomatis sudah ada untuk hari esok nya,soalnya judul saya ga bisa di acc kalo update manual…. kalo ada script nya tolong berikan dong mas.. saya juga pake database nya. makasih

6 04 2014
heru widakdo

Sudah saya balas by email😀

17 09 2014
Fêrdhîkâ Yûdîrâ

terima kasih, sangat membantu.. (y)

9 10 2014
baju muslim pesta

My partner and I stumbled over here coming from a different page and
thought I may as well check things out. I like what I see so i
am just following you. Look forward to looking into your web
page yet again.

31 03 2015
Ridwana

mas, script onlinenya bagus. tp saya pengen pake ajax biar auto refresh shg klo mo liat si user msh OL g nya lngsung terbarui. bisa g ditambahin fitur tsb?

31 03 2015
Ridwana

klo bisa bikin fitur tsb tlg bikinin dong mas. lg butuh nih bwt bikin program social media. dpt amal jariyah lho mas, insya Alloh. please..😦

6 04 2015
BeloSamirono

kalo saya ngk klik tombol Logout maka status masih ONLINE DONGK ???
sekedar masukan adja, klw bisa ditambahin time operation untuk aplikasix, jd klw misalx dalam 15 menit ngk ada pengoperasian pada aplikasi maka statusx akan OFFLINE sendiri.

thx

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: