Menampilkan user online seperti di obrolan step by step Oleh: lukman hakim
Salam hangat temen2 Jagocoding.com, Berikut saya akan berbagi tutorial sederhana yakni bagaimana cara menampilkan user online sederhana seperti di obrolan step by step. buat database dengan nama online kemudian buat sebuah tabel dengan nama user dengan data seperti dibawah ini id = int(11) nama...
Salam hangat temen2 Jagocoding.com, Berikut saya akan berbagi tutorial sederhana yakni bagaimana cara menampilkan user online sederhana seperti di obrolan step by step. buat database dengan nama online kemudian buat sebuah tabel dengan nama user dengan data seperti dibawah ini id = int(11) nama = varchar(75) login_time = varchar(20) id
nama
1
Lukman Hakim
2
Idham Kholid
3
Muhammad Ali
4
Irfatul Laila
login_time
jika sudah selesai, buat 5 file php. 1. 2. 3. 4. 5.
index.php -> Halaman Utama config.php -> Untuk membuat koneksi ke Database login.php -> File untuk login logout.php -> File untuk logout online.php -> File untuk mendapatkan user yang sedang online
ok, langsung ke filenya ya gan, oh ya jangan lupa mengikutkan file jquery ya jquery-1.8.3.js anda bisa mendapatkannya di jquery.com pertama buka file index.php file index.php ini digunakan untuk halaman utama (homepage) , disini berisi daftar user dan aksi ( login / logout ) isikan kode berikut pada file index.php
User Online <style> body{ font-family:arial;font-size:12px; } #onlinebox{ background:#ffffff; position:fixed; z-index:2; top:0px; right:0px; bottom:0px; width:200px; border-left:1px solid grey; } .userlist{ font-family:arial; font-size:12px; display:block; padding:5px; cursor:pointer; } .userlist:hover{ background:#fcfcfc;
} .userlist .status-On{ color:green; font-size:10px; float:right; } .userlist .status-Off{ color:Red; font-size:10px; float:right; } <script src="jquery-1.8.3.js"> <script> function get_user_online(){ $.get('online.php',function(data){ $("#onlinebox").html(data); }); setTimeout("get_user_online()",2000); } function login(id){ $.get('login.php?id='+id,function(){ }); } function logout(id){ $.get('logout.php?id='+id,function(){ }); }
<script> get_user_online();
Kedua buka file config.php. file config.php digunakan untuk melakukan koneksi ke database yang nantinya akan kita gunakan, yakni database online. tambahkan kode berikut pada file config.php :
Ke-3 buka file login.php. disini bukan login menggunakan username ataupun password, namun hanya digunakan untuk meng-update login_time pada database, login time akan diupdate dengan waktu sekarang + 180 detik; tambahkan kode berikut pada file login.php :
Ke-4 buka file logout.php file logout ini digunakan untuk meng-update login_time pada database, login time akan diupdate dengan waktu sekarang; tambahkan kode berikut pada logout.php :
$time=date("YmdHis"); // menyetel waktu logout $id=$_GET["id"]; $update=mysql_query("update user set login_time='$time' where id='$id'"); // mengupdate waktu login == waktu sekarang ?>
Ke-5 buka file online.php file online digunakan untuk mengambil data user yang sedang online, user dinyatakan online jika login_time dari user itu lebih tinggi dari waktu sekarang. tambahkan kode berikut pada online.php: =$time){ $status="On"; }else{ $status="Off"; } ?>
[]
silahkan buka dibowser, halaman index akan seperti gambar dibawah ini :
dan jika anda klik login pada user lukman hakim hasilnya akan seperti gambar dibawah ini, status off akan berganti menjadi on :
sekian tutorial yang saya berikan, terima kasih sudah menyimak ^_^
Tentang Penulis lukman hakim
