Official CyberDark News: Tutorial Mengecek Online User Unik PHP dan MySQL + AJAX Simple

Tutorial Mengecek Online User Unik PHP dan MySQL + AJAX Simple

Pada postingan kali ini saya akan mencoba mengulas mengenai pengecekan pengguna atau pengecekan user yang sedang online dalam website kita. Ohh ya sebelumnya saya sebelumnya saya memposting mengenai hal ini mungkin terinspirasi oleh seorang teman yang bertanya kepada saya tentang cara bagaiman untuk mengetahui pengunjung yang sedang online di website kita. Mungkin sudah tidak asing lagi yaa.. dengan judul yang satu ini, dan mungkin agan – agan dan aganwati sekalian udah pada tahu bagaimana cara membuatnya.
Tetapi pada kasus ini saya akan mengintegrasikannya dengan AJAX, kenapa harus sambil menggunakan AJAX?? ohh ya jadi begini ceritanya.., berawal ketika saya membuat kode standar untuk membuat pengecekan online user dan ketika itu semuanya berjalan dengan lancar dalam kasus ini saya menggunakan 2 browser. Ketika saya buka browser skrip nya berjalan dengan baik dan menunjukan 2 pengunjung yang sedang online. Tapi setelah browser ke-dua saya tutup window-nya, pada browser pertama tadi tetap menampilkan dua pengunjung yang sedang online hingga saya me-refresh browser pertama tadi jadii dengan AJAX ini kita tidak perlu me-refresh lagi untuk mengecek berapa orang yang benar-benar online pada waktu tersebut .
close_pointer
Ohh ya sebelumnya bisa dikatakan unik karena saya menggunakan fungsi dari pengambilan session_id untuk mebuat setiap browser tampak unik selain itu skrip ini juga mirip – mirip dengan aplikasi chating yang ketika kita menutup jendela obrolan kita maka pengunjung yang sedang online akan berkurang…bagaimana? asyikan? hahah maaf saya terlalu lebay hehe…Oke langsung aja ke pembahasan ya, Cekidot ikuti langkah dibawah ini…

1.Pembuatan Table

Berikut adalah gambar penampakan table yang akan dibuat..
g_table
karena kita akan membuat skrip online usernya yang simple, jadi saya kira sudah lebih dari cukup untuk menggunakan dua field saja hehe :D , Untuk sintaks MySQL nya silahkan lihat dibawah ini…
?
1
2
3
4
5
CREATE TABLE IF NOT EXISTS `online_user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `id_session` varchar(32) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=44 ;

2. File koneksi.php

Seperti biasa kita buat file koneksi secara terpisah :D
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
    $host ='localhost';
    $user ='root';
    $pass ='';
    $dbase   ='herey';
    $koneksi = mysql_connect($host, $user, $pass);
     
    if (!$koneksi)
    {
        die ('Tidak Bisa Konek: ' . mysql_error());
    }
     
    mysql_select_db($dbase, $koneksi);
     
?>

4.File cekOnline.php

File ini berfungsi untuk mengecek apakah user sedang online atau tidak dengan cara melakukan pengecekan ke dalam tabel.
?
1
2
3
4
5
6
7
8
9
<?php
include "koneksi.php";
$query = mysql_query("SELECT * FROM online_user");
$hitung = mysql_num_rows($query);
echo $hitung;
?>
dapat dilihat bahwa kita menggunakan fungsi mysql_num_rows() untuk menghitung jumlah rows yang ada dalam table yang dengan kata lain merupakan jumlah user yang sedang online :D

5. File online.php

File ini berfungsi untuk memasukan nilai kedalam tabel.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
include "koneksi.php";
session_start();
$id_saya = session_id();
$query = mysql_query("SELECT id_session FROM online_user WHERE id_session = '".$id_saya."'");
$query2 = mysql_fetch_array($query);
if ($query2 == null)
{
    mysql_query("INSERT INTO online_user (id, id_session) VALUES ('', '$id_saya')");
}
?>
Dapat dilihat bahwa pada awal – awal baris kita menggunakan fungsi session yaitu session_start() yang berguna untuk memulai session dan mengecek setiap user yang unik atau berbeda seperti yang sudah dijelaskan diatas hehe :D . Jika dijelaskan skrip diatas adalah kita akan melakukan insert query kedalam table jika id_session tidak sama dengan variable $id_saya yang berarti browser yang kita pakai :)

6. File exit.php

File ini berguna untuk menghapus sesi online kita.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
session_start();
$id_saya = session_id();
include "koneksi.php";
mysql_query("DELETE FROM online_user WHERE id_session='".$id_saya."'");
session_destroy();
?>

7. File index.php

File ini berfungsi untuk menampilkan pengunjung yang online, ohh ya file nya disatuin aja yaa sama javascriptnya biar agak jelas hehe..

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<html>
    <head>
        <script>
            //Skirp yang wajib ada jika ingin menggunakan AJAX
            function GetXmlHttpObject()
                {
                var xmlHttp;
                try
                    {
                    // Firefox, Opera 8.0+, Safari
                    xmlHttp = new XMLHttpRequest();
                    }
                catch (e)
                    {
                    //Internet Explorer
                    try
                        {
                        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                        }
                    catch (e)
                        {
                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                    }
                return xmlHttp;
                }
                 
            function cekOnline()
            {
                xmlHttp = GetXmlHttpObject();
                 
                if (xmlHttp == null)
                {
                    alert("Browser Anda Tidak Mendukung HTTP Request");
                    return;
                }
                 
                var url = "cekOnline.php";
                xmlHttp.open("POST", url, true);
                xmlHttp.onreadystatechange = stateChanged;
                xmlHttp.send(null);
            }
             
            function stateChanged()
                {
                if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
                    {
                    var hitung = xmlHttp.responseText;
                    document.getElementById("jumlahOnline").innerHTML = "<font color='red'>" + hitung + "</font> user online";
                    window.setTimeout("cekOnline();", 2000);
                    }
                }
             
            function online()
            {
                online = GetXmlHttpObject();
                if (online == null)
                    {
                    alert("Browser Anda Tidak Mendukung HTTP Request");
                    return;
                    }
                var url = "online.php";
                online.open("POST", url, true);
                online.onreadystatechange = responeOnline;
                online.send(null);
            }
             
            function responeOnline()
            {
                if (online.readyState == 4 || online.readyState == 0)
                    {
                    cekOnline();
                    }
            }
                         
            function exit()
            {
                exit = GetXmlHttpObject();
                 
                if (exit == null)
                {
                    alert("Browser Tidak Support HTTP Request");
                    return;
                }
                 
                var url = "exit.php";
                exit.open("POST", url, true);
                exit.send(null);
            }
                         
        </script>
    </head>
     
    <body onload="online();" onbeforeunload="exit();">
        <h1>Yang sekarang sedang Online adalah: <span id="jumlahOnline"></span> </h1>
    </body>
</html>
Baiklah dapat dilihat bahwa pada
  • Baris ke 5 sampai baris ke 28 merupakan baris yang biasa digunakan dalam menggunakan AJAX, yaitu pendeklarasian penggunaan dalam XMLHttpRequest yang dilakukan didalam sebuah javascript..
  • Baris ke 30 sampai 54 merupakan fungsi untuk membuat request ke server untuk mebuka file cekOnline.php setelah itu pada baris ke 46 akan mengupdate data dengan elemen di html yang memiliki id=”jumlahOnline”
  • Pada baris ke 56 sampai baris 78 merupkan fungsi untuk membuat request ke server untuk membuka file online.php yang didalam file tersebut sudah dijelaskan diatas yaitu untuk memasukan nilai user yang sedang online yang setelah itu membuat respon pada fungsi responOnline()
  • Baris 80 sampai baris 93 merupakan fungsi untuk membuat request ke server untuk membuka file file exit.php yang berfungsi untuk melakukan delete rows pada table yang memiliki nilai dari id_session kita..
  • Baris ke 98 merupakan tag HTML body yang memiliki onload event yang berfungsi ketika halaman di load maka jalankan fungsi online() dan onbeforeunload event yang berfungsi untuk menjalankan fungsi exit()
  • Baris ke 99 terlihat tag HTML <span> yang memiliki attribut id=”jumlahOnline” yang berfungsi untuk menampilkan jumlah user yang sedang online dengan memanfaatkan fungsi jumlahOnline tadi :)
Ohh ya untuk penampakannya seperti nampak pada gambar dibawah ini…
online_user
Keterangan:
Ohh ya karena dalam skrip ini memanfaatkan event onbeforeunload() oleh karenan itu skrip ini akan berjalan dengan baik jika menggunakan chrome dan internet explorer :)
Labels: Posted by at
< >

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)
Copyright © Official CyberDark News Urang-kurai