Postingan lainnya
Chat Apps With Ajax and PHP
I N T R O D U C T I O N kembali lagi bersama saya kali ini kita bakalan buat aplikasi semacam chat system. Kalo temen2 perhatiin di website2 company profile kan suka ada tuh "chat we us" nah kira kira kita bakalan buat semacam gitulah. kali ini kita bakalan menggunakan AJAX kenapa sederhana aja sih karena doi bisa menjembatani komunikasi antara client dan server tanpa harus mereload halaman. jadi cocok banget pake AJAX masa sih setiap user mengetikkan sesuatu terus dia pencet enter harus reload halaman kan enggak lucu. tapi meskipun begitu suatu teknologi tidak terlepas dari kekurangan dan kelebihan. adapun kekurangan diantaranya:
1. integrasi browser jadi karena ajax menganut sistem asinkron (baca: update tapi ga reload) jadinya setiap perubahan ga akan tercatat pada history browser. 2. sulit untuk user nge-bookmark page pada halaman web 3. kurang bagus untuk seo karena halaman di generate oleh javascript, search engine ga bisa ngindeks
terlepas dari itu semua temen temen harus bisa nentuin mana aplikasi yang menguntungkan untuk dibuat sama ajax kalo buat web semisa blog dan lain sebgainya jangan ngegunain ajax. Tapi kalo aplikasi yang dibuat semisa aplikasi perpus, dan aplikasi sejenis yang bentuknya administrasi itu cocok pake ajax karena kan usernya cuma ngelakuin administrasi.
Woke setelah kita ngebahas panjang lebar ga usah berria-ria panjang lagi mari kita berkarya, tapi sebelum itu saya harap temen2 udah belajar tentang 1. PHP & MySql 2. HTML & CSS dasar 3. Javascript 4. dan terakhir bintang utama kita tentu aja AJAX
tadinya mau nampilin hasil akhirnya, tapi harus external artinya kudu disimpen di server maaf yah males ngupload.
I D E A & C O N C E P T Akh saya selalu nulis secara terstruktur karena kebiasaan tuntutan sebagai seorang mahasiswa (baca: penderitaan tiada henti). jadi gini cuma ada dua form inputan dan satu tombol submit, yang satu namanya terus yang kedua pesannya dan ketika kita klik tombol submit bakalan masukin data ke database dan saat itu juga bakalan view hasilnya. hanya dua operasi itu aja
S T R U C T U R E P R O J E C T -DB.PHP -INDEX.PHP -STYLE.CSS -AJAX.JS -VIEW.PHP -INSERT.PHP Kita buat dalam satu folder aja dan kasih nama chat, woi terus gimana sama databasenya buat sendiri yah gampang satu database (chatbox), satu table (chat), dan tiga value (id, chatname, message) sederhana kan. oh iyah idnya kudu auto_increment yah supaya jadi penambahan otomatis
DB.PHP
<?php
$mysqli = new mysqli('localhost', 'root','','chatbox');
if( $mysqli->connect_error ){
die('error');
}
?>
kita koneksiin kedatabase dengan mysqli oop dan server saya localhost, usernamenya root dan passwordnya kosong, dan nama database saya chatbox konfigurasi ini bisa beda beda yah.
INDEX.PHP
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chatbox with AJAX</title>
<link href="style.css">
</head>
<body>
<div id="container">
<div id="chat_box">
<div id="chat"></div>
</div>
<form action="" method="post" name="form1">
<input type="text" name="chatname" placeholder="Enter name"><br>
<textarea name="message" placeholder="Enter message"></textarea><br>
<a href="#" onclick="insert()">Send It</a>
</form>
</div>
<script src="ajax.js"></script>
</body>
</html>
coba temen temen perhatiin id chat nah tempat kosong itulah yang nanti bakalan kita tampilin hasil dari inputan user terus ada form tahu lah yah kegunaannya nah timbul pertanyaan kenapa untuk tombolnya saya pake tag a, pertanyaan yang bagus jadi kalo kita buat tombolnya itu input submit ataupun button dia bakalan tetep ngereload meskipun kita cegah dengan return false di javascript entar deh dijelasi dibawah. nah terus kita pasangin event onclick dan kita mau manggil file ajax.js dengan tag script.
STYLE.CSS
*{
padding: 0; margin: 0;
}
body{
background: silver;
}
#container{
background: white;
padding: 20px;
box-sizing: border-box;
width: 50%;
height: 600px;
margin: 20px auto;
position: relative;
border-radius: 10px;
font-family: arial;
font-weight: bolder;
}
#chat_box{
overflow: hidden;
overflow-y: scroll;
height: 350px;
}
#container span:nth-child(1){
color: green;
}
#container span:nth-child(2){
color: magenta;
}
#container span:nth-child(3){
float: right;
}
form{
position: absolute;
bottom: 20px;
clear: both;
width: 90%;
}
form input[type="text"], form textarea{
padding-bottom: 10px;
border: none;
outline-width: 0;
font-size: 20px;
width: 100%;
height: 50px;
}
form input[type="text"]:focus, form textarea:focus{
border-bottom: 1px solid aqua;
}
form textarea{
height: 50px;
resize: none;
}
kalo temen temen udah belajar css pasti temen2 ngerti, jadi saya ga usah ngejelasi bagian ini
AJAX.JS ini file utama kita, kita bakalan ngerequest dari sini
function view(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
document.getElementById('chat').innerHTML = xhr.responseText;
}
}
xhr.open('GET','chat.php',true);
xhr.send();
}
setInterval(function(){view()},1000);
//insert
function insert(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
xhr.responseText;
}
}
xhr.open('POST','insert.php',true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send('chatname='+form1.chatname.value+'&message='+form1.message.value);
form1.chatname.value='';
form1.message.value='';
return false;
}
ada dua fungsi, fungsi yg pertama untuk menampikan data dan yang kedua menambahkan data. Pada fungsi pertama kita buat variable XMLHttpRequest, lalu kita buat fungsi lagi untuk pengen dimana nih ditampilinnya kita pilih dengan id yaitu chat. lalu xhr.open methodnya GET, tujuannya ke chat.php dan kita mau dia asincronus makanya kasih true yaiyalah. lalu kita kirim dengan send nah terakhir dan bagian yang paling penting kita mau ngejalanin fungsinya secara otomatis dengan waktu 1 detik dengan setInterval, kalo setInterval ga dipasang maka dia ga bisa secara real time ngecek ke database. Pada fungsi yang kedua masih sama kaya diatas kita buat objek xhr terus periksa kondisi apakah sukses dan kita ga usah lagi milih id dan terus nampilih ga usah ini kan nambahin data apa yang mau ditampilin. nah ini bagian yang menarik kita isi methodnya POST tapi kita juga mau ngirim data pada method post kita ga bisa tuh nyelipin datanya misal 'insert.php?name=ujang&umur=19' kayak GET kita ga bisa kaya gini nah solusinya kita kudu ngeset content-typenya dengan setRequestHeader terus kita selipin data yang mau dikirim di method send, terus form1.chatname dan form1.message ini darimana jadi kalo temen2 perhatiin di INDEX.PHP bagian form itu saya kasih name="form1" nah dari situ chatname dan message juga dari inputan namenya bisa aja sih pilih pake id tapi daku malas ngetik (maafkan). terakhir kita ga mau setelah user klik tombol Send It datanya tetep ada disitu jadi kita mau ngilangin dengan cara value dikosongin. dan return false seperti yang udah dijelasin diatas ini untuk mencegah element DOM menerapkan sifat aslinya.
VIEW.PHP
<?php
include_once "db.php";
$query = $mysqli->query("SELECT * FROM chat ORDER BY id DESC");
while( $data = $query->fetch_array() ){
?>
<div id="chat_data">
<span><?php echo $data['chatname']; ?></span>:
<span><?php echo $data['message']; ?></span>
<span><?php echo $data['date']; ?></span>
<hr>
</div>
<?php
}
?>
pada VIEW.PHP kita melakukan koneksi ke database terus kita mau nampilin berdasarkan id dari yang data paling terbaru, untuk nampilinnya kita lakukan perulangan, yaudah sesederhana ini aja nah data ini bakalan ngasih return ke fungsi view yang ada di ajax dan fungsi view bakalan nampilin di id chat sesuai yang dipilih
INSERT.PHP
<?php
include_once "db.php";
if( isset($_POST['chatname']) ){
$chatname = $_POST['chatname'];
$message = $_POST['message'];
$query = $mysqli->query("INSERT INTO chat(chatname,message) VALUES('$chatname','$message');");
}
$mysqli->close();
?>
pada INSERT.PHP kita lakukan juga koneksi ke database. terus periksa apakah inputan udah diisi ataukah belum lalu kita tangkep data yang dikirim oleh fungsi insert() di ajax dan kita lakukan query penambahan data berdasarkan apa yang diketikkan oleh user.
jadi aplikasi ini bisa disimulasiin jadi kalo temen2 buka dua browser misalnya user A di browser pertama ngetikin namanya ujang terus pesannya hai maka akan secara otomatis tampil baik di browser pertama dan kedua begitu juga dengan user B di browser yang kedua kalo dia ngebales hello bakalan nampil di browser pertama dan kedua Woke selesai juga segitu aja dari saya, panjang juga yah ini artikel. moga-moga bermanfaat dan salam C O D I N G dari mahasiswaGEEK
5 Jawaban:
Sudah di tes belum? Yakin bisa realtime gitu tanpa reload (antar 2 browser) hanya bermodalkan AJAX tanpa adanya Web Socket?
[EDIT] Ini realtimenya pakek interval ya? Jadi setiap 1 detik ngecek ke Database? Melakukan query setiap 1 detik? Atau ini realtime dibikin cuma pas event send di-trigger? Misal di browser A ngirim pesan, gimana caranya pesan tersebut langsung bisa muncul di browser B? Apakah mengulangi query juga? Memang bisa sih, tapi cara ini bisa overkill ke sisi server dan kurang efisien.
[INFO] Btw, cara biar bisa realtime yang dianjurkan adalah pakek teknologi Web Socket. Kamu bisa nyobain socket.io.
wah agan @dalikewara udah top yah, emang sengaja kok gan. Emang kurang efektif dan efisien juga sih tadinya ane juga mau pake web socket tapi berhubung ini cuma untuk pembelajaran aja dan jari ane juga udah kriting, jadinya kayak gitu deh. Nah entar deh kalau ada waktu lagi ane edit.
Okeh, itu juga sangat bagus bisa memikirkan logika sistem yang kayak gitu. Memang kebanyakan kalau aplikasi realtime pakek Web Socket, tapi kalau kita bisa membuat realtime dengan logika sendiri yang bisa menjadi efisien dari segi performa, itu lebih keren lagi.