Membuat Aplikasi Chatting Dinamis Dengan AJAX (HTML, CSS, PHP, MySQL, JavaScript)

Welcome ... Membuat aplikasi iseng-iseng seru loh . Buat ngasih kejutan ke Doi, bikin dia ngakak wkwk.

Sekarang gua cuma mau majang aplikasi Chatting dibawah ini, mungkin berguna buat referensi. Aplikasi ini dibuat dengan AJAX (Asynchronous JavaScript and XML).

AJAX sendiri, terdiri dari HTML, Javascript, DHTML dan DOM yang kemudian digabungkan dengan bahasa pemograman web di sisi server seperti PHP dan ASP, sehingga membentuk suatu aplikasi berbasis web yang interaktif.

AJAX bukanlah bahasa pemograman baru, tetapi adalah teknik baru untuk membuat aplikasi web lebih baik, lebih cepat dan lebih interaktif.

Dengan AJAX, Javascript dapat langsung berkomunikasi dengan server dengan menggunakan objek XMLHttpRequest.

Dengan objek ini, javascript dapat melakukan transaksi data dengan server web, tanpa harus me-reloading halaman web tersebut secara keseluruhan.

Nah jadi seperti aplikasi chat di Sosmed, kurang lebih seperti ini sistemnya.

Okey Chek it Out .

1. Pertama buat terlebih dahulu database beserta struktur tabelnya. Untuk Databasenya bisa diberi nama 'ajaxxx' tanpa tanda (' '), untuk struktur table, berikut Script SQL nya bisa langsung diCopy script dibawah ini.

CREATE TABLE drzchat (
nomor int(3) NOT NULL auto_increment,
nama varchar(20) NOT NULL,
pesan varchar(200) NOT NULL,
waktu varchar(10) NOT NULL,
PRIMARY KEY (nomor)
);

2. Setelah database selesai, buat file html lalu copy script dibawah ini, dan save dengan nama drzchat.html .

<html>
<head>
<style>
body {
   font-family: sans-serif;
   background: url("bg.jpg");
   background-size: cover;
}
.container {
   width: 500px;
   height: 600px;
   margin: auto;
}
#div_chat {
   height: 300px;
   width: 500px;
   overflow: auto;
   background-color: rgba(220,220,220,0.5);
   border: 1px solid #555555;
   margin: 20px 0;
   padding: 10px;
   box-shadow: 1px 1px 15px;
}
h1 {
   text-align: center;
}
h1 a{
   text-decoration: none;
   color: rgba(0,0,0,0.4);
   transition-property: color;
   transition-duration: 2s;
}
h1 a:hover {
   color: rgba(0,0,0,1);
}
</style>
<script>

var ajaxku = buatAjax();
var tnama = 0;
var pesanakhir = 0;
var timer;
function taruhNama() {
   if(tnama==0){
       document.getElementById("nama").disabled = "true";
       tnama = 1;
   }else {
       document.getElementById("nama").disabled = "";
   }
   ambilPesan();
}
function buatAjax() {
   if(window.XMLHttpRequest){
       return new XMLHttpRequest();
   }else if(window.ActiveXObject){
       return new ActiveXObject("Microsoft.XMLHTTP");
   }
}
function ambilPesan() {
   namaku = document.getElementById("nama").value
   if(ajaxku.readyState == 4 || ajaxku.readyState == 0) {
   ajaxku.open("GET", "ambilchat.php?akhir="+pesanakhir+ "&nama="+namaku+"&sid="+
   Math.random(),true);
       ajaxku.onreadystatechange = aturAmbilPesan;
       ajaxku.send(null);
   }
}
function aturAmbilPesan() {
   if(ajaxku.readyState == 4) {
       var chat_div = document.getElementById("div_chat");
       var data = eval("(" + ajaxku.responseText + ")");
       for(i=0;i<data.messages.pesan.length;i++){
           chat_div.innerHTML += "<font color=red>" +data.messages.pesan[i].nama + "</font>";
           chat_div.innerHTML += "<font size=1>(" +data.messages.pesan[i].waktu + ")</font>";
           chat_div.innerHTML += " : " + data.messages.pesan[i].teks +"<br>";
           chat_div.scrollTop = chat_div.scrollHeight;
           pesanakhir = data.messages.pesan[i].id;

       }
   }
   timer = setTimeout("ambilPesan()",1000);
}
function kirimPesan() {
   pesannya = document.getElementById("pesan").value
   namaku = document.getElementById("nama").value
   if(pesannya != "" && namaku != "") {
       ajaxku.open("GET","ambilchat.php?akhir="+pesanakhir+"&nama="+namaku+"&pesan="+pesannya+"&sid="+Math.random(),true);
       ajaxku.onreadystatechange = aturAmbilPesan;
       ajaxku.send(null);
       document.getElementById("pesan").value = "";
   }else {
       alert("Nama atau pesan masih kosong");
   }
}
function aturKirimPesan() {
   clearInterval(timer);
   ambilPesan();
}
function blockSubmit() {
   kirimPesan();
   return false;
}
</script>

</head>
<body>
<div class="container">
<h1><a href="#">Welcome To Love Chat</a></h1>
<label for="nama">Nama :</label>
<input type="text" name="nama" id="nama">

<div id="div_chat">

</div>

<form onSubmit="return blockSubmit();">
<label for="pesan">Pesan :</pesan>
<input type="text" name="pesan" id="pesan" size="50">
<input type="button" value="kirim" onclick="kirimPesan()">

</form>
</div>
</body>
</html>

3. Dan terakhir buat file PHP nya, dan beri nama dengan ambilchat.php. Berikut scriptnya.

<?php
$link = mysqli_connect("localhost", "root", "" , "ajaxxx");

$nama = $_GET['nama'];
$pesan = $_GET['pesan'];
$waktu = date("H:i");
$akhir = $_GET['akhir'];

$json = '{"messages": {';
if($akhir == 0) {
   $nomor = mysqli_query($link, "select nomor from drzchat order by nomor desc limit 1");
   $n = mysqli_fetch_array($nomor);
   $no = $n['nomor'] + 1;
   $json .= '"pesan":[ {';
   $json .= '"id":"'.$no.'","nama":"Admin","teks":"Selamat datang di chatting room","waktu": "' .$waktu. '"}]';
   $masuk = mysqli_query($link, "INSERT INTO drzchat VALUES(null, 'Admin', '$nama bergabung dalam chat','$waktu')");
}else {
   if($pesan) {
       $masuk = mysqli_query($link, "INSERT INTO drzchat VALUES(null, '$nama', '$pesan', '$waktu')");
   }
   $query = mysqli_query($link, "SELECT * FROM drzchat WHERE nomor > $akhir ");
   $json .= '"pesan":[ ';
   while($x = mysqli_fetch_array($query)) {
       $json .= '{';
       $json .= '"id": "'. $x['nomor'] . '", "nama": "' . htmlspecialchars($x['nama']).'", "teks": "' . htmlspecialchars($x['pesan']). '", "waktu": "' . $x['waktu'] . '"},';
   }
   $json = substr($json,0,strlen($json)-1);
   $json .= ']';
}

$json .= '}}';
echo $json;
?>

4. Selesai aplikasi chatting pun bisa digunakan. Berikut tampilan aplikasinya hehe :D .

Yap terlihat simple namun sebenarya cukup kompleks.
Logika dari program di atas adalah :
1. Lakukan koneksi ke server MySQL
2. Ambil nilai-nilai parameter yang di berikan oleh client dengan metode GET
3. Cek apakah user pertama kali login dengan melihat nilai variable $akhir, jika bernilai 0 artinya adalah user chat pertama kali, lalu kita kirim data berupa string berformat JSON,
(JSON sendiri (JavaScript Object Notation) adalah format pertukaran data yang ringan, mudah dibaca dan ditulis oleh manusia, serta mudah diterjemahkan dan dibuat (generate) oleh komputer.) ,
ucapan selamat data dari admin, lalu kita masukkan ke dalam database untuk supaya user lain mengetahui ada user lain yang login
4. Apabila nilai $akhir besar dari 0, artinya user bukan masuk untuk pertama kalinya, berikan data-data dari database setelah yang terakhir dia dapat, yang kita dapat dari variable $akhir
$query = mysql_query("select * from drzchat where nomor > $akhir");
5. Ouput yang kita buat dengan format json, untuk mengirim data ke client cukup
melakukan echo $json;

Dan keterangan pada program chat sisi client di atas (pada file drzchat.html), pertama-tama user harus memasukkan nama mereka di suatu teks input. Maka segera dijalankan fungsi ambilPesan().
Di mana fungsi ini berfungsi untuk melakukan request ke server untuk mengambil data dari server, ambilchat.php.

Data yang diambil dari server berupa teks dengan format JSON sebagai berikut:

{"messages":
   {"pesan":[
       {"id":"35",
       "nama":"Jang",
       "teks":"hai..",
       "waktu":"01:54" },
       {"id":"36",
       "nama":"Nanda",
       "teks":"hai...",
       "waktu":"01:54" },
       {"id":"37",
       "nama":"Jang",
       "teks":"Malam yang indah ya",
       "waktu":"01:55" }
       {"id":"38",
       "nama":"Nanda",
       "teks":"Tentu.. :)",
       "waktu":"01:56" },
       {"id":"39",
       "nama":"Nanda",
       "teks":"Jalan kuy :D",
       "waktu":"01:56" },
       {"id":"40",
       "nama":"Jang",
       "teks":"Kuy lah :D",
       "waktu":"01:57" }
   ]
}}

Format JSON tersebut diambil dari server, yang di masukkan ke dalam variable data, kemudian kita gunakan eval untuk mengubah JSON string menjadi objek javascript

var data = eval("("+ajaxku.responseText+")");

Kemudian Objek JSON yang telah di-parse di atas kita masukkan ke dalam

for(i=0;i<data.messages.pesan.length;i++){
chat_div.innerHTML
chat_div.innerHTML
chat_div.innerHTML
chat_div.scrollTop
+= "<font color=red>"+data.messages.pesan[i].nama+"</font> ";
+= "<font size=1>("+data.messages.pesan[i].waktu+")</font> ";
+= " : "+data.messages.pesan[i].teks+"<br>";
= chat_div.scrollHeight;
pesanakhir = data.messages.pesan[i].id;
}

Supaya ajax hanya megambil data dari pesan yang terakhir maka kita juga mengirimkan nomor pesan id terakhir

pesanakhir = data.messages.pesan[i].id;

Supaya ajax mengambil data tiap satu detik maka kita gunakan fungsi setTimeout()

timer = setTimeout("ambilPesan()",1000);

Biasanya kalau kita chat, kita ketik pesannya di input teks lalu kita tekan ENTER, biasanya kalau form di tekan ENTER akan otomatis ter-submit dan halaman akan bertukar. Untuk mencegah halaman ter-submit ketika tekan enter, maka kita blok menggunakan fungsi berikut :

function aturKirimPesan(){ clearInterval(timer); ambilPesan(); }

Fungsi di atas dipanggil ketika ada event onSubmit.

Okey kurang lebih seperti itu, untuk kurang lebihnya mohon maaf okey.

Navigation

NandaQ

Membuat Aplikasi Chatting Dinamis Dengan AJAX (HTML, CSS, PHP, MySQL, JavaScript)

Share this:

CONVERSATION

14 comments: