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

Menampilkan user online seperti di obrolan step by step

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 login_time
1 Lukman Hakim  
2 Idham Kholid  
3 Muhammad Ali  
4 Irfatul Laila  

 

 

jika sudah selesai, buat 5 file php.

  1. index.php -> Halaman Utama
  2. config.php -> Untuk membuat koneksi ke Database
  3. login.php -> File untuk login
  4. logout.php -> File untuk logout
  5. 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

<?php include("config.php"); ?>
<!DOCTYPE HTML>
<html>
    <head>
        <title>User Online</title>
        <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;
        }
        </style>
        <script src="jquery-1.8.3.js"></script>
        <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>
    </head>
    <body>    
        <table cellpadding="5">
            <tr><td>User</td><td>Aksi</td></tr>
<?php
$time=date("YmdHis");
$get_user=mysql_query("select * from user"); //mengambil semua data user
while($user=mysql_fetch_array($get_user)){
?>
            <tr>
                <td><a href="#"><?php echo $user["nama"]; ?></a></td>
                <td><a href="#" onclick="login('<?php echo $user["id"]; ?>')">Login</a> <a href="#" onclick="logout('<?php echo $user["id"]; ?>')">Logout</a></td>
            </tr>
<?php } ?>
        </table>
        <div id="onlinebox"></div>
        <script> get_user_online(); </script>
    </body>
</html>

 

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 :

<?php
$host = 'localhost'; // nama host
$user = 'root'; // username database
$pass = ''; // password database
$db = 'online'; // database yang kita gunakan
$connect = mysql_connect($host, $user, $pass);
$pilihdb = mysql_select_db($db);
?>

 

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 :

<?php
include("config.php"); // mengikutkan file config.php untuk koneksi ke database
$time=date("YmdHis")+180; // menyetel waktu login (waktu sekarang + 180 detik atau 3menit )
$id=$_GET["id"];
$update=mysql_query("update user set login_time='$time' where id='$id'"); // mengupdate waktu login
?>

 

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 :

<?php
include("config.php"); // mengikutkan file config.php untuk koneksi ke database
$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:

<?php
include("config.php"); // mengikutkan file config.php untuk koneksi ke database
$time=date("YmdHis"); // menyetel waktu sekarang
$get_user_online=mysql_query("select * from user order by login_time DESC"); // memilih semua user yang waktu loginnya lebih dari waktu sekarang
while($user=mysql_fetch_array($get_user_online)){
    if($user["login_time"]>=$time){
        $status="On";
    }else{
        $status="Off";
    }
?>
<div class="userlist">
    <?php echo $user["nama"]; ?> <b class="status-<?php echo $status ?>">[<?php echo $status ?>]</b>
</div>
<?php } ?>

 

silahkan buka dibowser, halaman index akan seperti gambar dibawah ini :

gambar 1

 

dan jika anda klik login pada user lukman hakim hasilnya akan seperti gambar dibawah ini, status off akan berganti menjadi on :

gambar 2

sekian tutorial yang saya berikan, terima kasih sudah menyimak ^_^


About Author

lukman hakim


Comment & Discussions

    Please LOGIN before if you want to give the comment.