Hampir dari kita semua pasti telah memiliki
account facebook. Pada situs jejaring sosial ini, apapun bisa kita
komentari. Setiap kali ada teman ganti status kita bisa langsung beri
komentar. Kalau ada teman yang baru ganti foto, kita bisa langsung beri
komentar. Justru karena komentar-komentar inilah yang menjadikan kita
kembali mengunjungi situs ini.
Menurut perkiraan saya, hampir 80% dari proses apalikasi yang ada
pada facebook menggunakan pendekatan ajax. Begitu pula dengan aplikasi
komentarnya. Ketika kita menekan tombol submit setelah menuliskan
komentar, tanpa ada proses refresh halaman, komentar kita akan secara
otomatis muncul dan berbarengan dengan itu di simpan juga ke dalam
database. Bagaimana kah proses ini bisa terjadi? Saya akan
menjelaskannya berikut ini.
Proses menambahkan komentar
Untuk bisa menampilkan komentar yang baru saja kita tulis tanpa
perlu refresh halaman, kita perlu mendapatkan komentar-komentar yang
sudah diposting sebelumnya. Untuk mendapatkannya kita menggunakan:
Nama_id di sini adalah div yang berada di antara semua komentar yang sudah ada. Contohnya adalah sebagai berikut:
<!– list start –>
<div class=”Comment” id=”1″>
<div class=”SenderName”>Kandar</div>
<div class=”CommentDate”>23, April 2009</div>
<div class=”CommentContent”>Ini komentar dari kandar</div>
</div>
<div class=”Comment” id=”2″>
<div class=”SenderName”>Foo</div>
<div class=”CommentDate”>24, April 2009</div>
<div class=”CommentContent”>hellow world</div>
</div>
<div class=”Comment” id=”3″>
<div class=”SenderName”>Kandar</div>
<div class=”CommentDate”>23, April 2009</div>
<div class=”CommentContent”>Ini komentar dari kandar</div>
</div>
<!–list end–>
</div>
Untuk mendapatkan seluruh isi dimulai dari komentar list start hingga list end kita gunakan method
Untuk mendapatkan komentar yang telah ada kita buat satu variable dengan nama currentContent.
Berikutnya kita membuthkan sebuah variabel yang berfungsi untuk
menginisialisasi nilai dari form komentar. Variabel ini bertugas
mendapatkan nilai dari input nama dan isi komentar. Variabel ini kita
beri nama commentValue.
document.getElementById(’name’).value ) + ‘&YourComment=’ +
encodeURI( document.getElementById(’YourComment’).value );
Agar variabel ini bisa berfungsi, kita harus membuat sebuh form html. Berikut adalah kodenya:
<p><label for=”name”>Name:</label> <input type=”text” name=”name” id=”name” />
<p><label for=”YourComment”>Comment:</label>
<textarea name=”YourComment” id=”YourComment”
/></textarea></p>
<p><input name=”Submit” type=”submit” value=”Submit” /></p>
</form>
Langkah berikutnya adalah membuat suatu fungsi javascript yang
bernama postContents yang salah satu isinya adalah variabel
commentValue. Kodenya adalah sebagai berikut:
/* Query yang nilainya akan dikirim ke php.*/
var commentValue = ‘name=’ + encodeURI(
document.getElementById(’name’).value ) + ‘&YourComment=’ +
encodeURI( document.getElementById(’YourComment’).value );
/* File php yang bertugas melalukan proses penyumpanan. */
var send_to = ‘manage-comment.php’;
/*Div id untuk menampilan gambar preloader dan error.*/
var respons = ‘alert’;
postAjax(send_to, commentValue, respons, handleResponComment);
}
Selain variabel commentValue, di dalam fungsi postContent kita
mendapatkan sebuah fungsi bernama postAjax. Ini adalah fungsi yang
mengirimkan nila variabel commentValue dengan metode Ajax. Untuk itu
kita membuthkan suatu fungsi yang bertugas yang menginisialisasi
XmlHttpRequest. Berikut adalah fungsingya:
var obj = ”;
function createXmlHttpRequest() {
var xmlHttp = false;
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”);
} else {
xmlHttp = new XMLHttpRequest();
}
if (!xmlHttp) {
alert(”Ops sorry We found some error!!”);
}
return xmlHttp;
}
Selanjutnya kita membuthkan sebuah fungsi yang bertugas untuk
menerima respon setelah terjadi proses XmlHttpRequest. Fungsi ini kita
beri nama handleResponComment berikut adalah kodenya:
if (xmlHttp.readyState == 4){
if (xmlHttp.status == 200){
/* Untuk menerima respon balik dari php, kita menggunakan JSON. */
var JSONRespons = eval(’(’ + xmlHttp.responseText + ‘)’);
if(JSONRespons.status == 1){
/*
* Jika penyimpanan data ke dalam database telah berhasil, proses selanjutnya adalah memanggil fungsi commentResponse.
*/
commentResponse(JSONRespons);
}
else{
/*Jika komentar baru sudah muncul, form kita aktifkan kembali dengan
memanggil fungsi enableForm() dengan menggunakan event onload pada
image.*/
document.getElementById(obj).innerHTML = JSONRespons.message +
‘<img src=”ajax-loading.gif” width=”0″ height=”0″
onload=”enableForm();”>’;
}
} else {
/* Tampilkan error jika ada.*/
document.getElementById(obj).innerHTML = ‘Error: ‘ + xmlHttp.statusText;
}
}
else{
/*
* Nonaktifkan form sesaat setelah user menekan tombol submit.
* Munculkan juga image preloader.
*/
document.getElementById(obj).innerHTML = ‘<img src=”ajax-loading.gif”>’;
document.getElementById(’name’).disabled=true;
document.getElementById(’YourComment’).disabled=true;
document.getElementById(’submit’).disabled=true;
}
}
untuk mencegah user menekan tombol submit kembali, selama proses
berlangsung, form kita nonaktifkan dahulu. Jika semua proses telah
selesai kita membuthkan sebuah fungsi yang bertugas untuk kembali
mengaktifkan form. Berikut adalah fungsinya:
/* Mengaktifkan kembali form jika semua proses telah selesai. */
document.getElementById(’name’).disabled=false;
document.getElementById(’YourComment’).disabled=false;
document.getElementById(’submit’).disabled=false;
}
Jika semua proses penyumpanan komentar baru telah berhasil, sekarang
waktunya untuk menampilkan komentar yang baru saja di tambahkan oleh
user. Berikut adalah fungsingya:
/*Melist komentar yang telah ada.*/
var current_contents = document.getElementById(’CommentList’).innerHTML;
/* List komentar yang telah ada ditambah komentar baru. */
var newComment = current_contents + ‘<div class=”Comment” id=”‘ +
JSONRespons.message_id + ‘”><div class=”Remove”><a
href=”javascript:deleteContent(’ + JSONRespons.message_id +
‘);”>Remove</a></div><div
class=”SenderName”><img src=”ajax-loading.gif” width=”0″
height=”0″ onload=”enableForm();”>’ + JSONRespons.name +
‘</div><div class=”CommentDate”>’ + JSONRespons.date +
‘</div><div class=”CommentContent”>’ + JSONRespons.comment
+ ‘</div></div>’;
/* Mendapatkan total komentar saat ini*/
var currTotalComm = document.getElementById(’numComment’).innerHTML;
/* Total komentar saat ini ditambah satu.*/
document.getElementById(’numComment’).innerHTML = parseInt(currTotalComm) + parseInt(1);
/*Munculkan semua komentar, termasuk yang baru saja ditambahkan.*/
document.getElementById(’CommentList’).innerHTML = newComment;
/* reset form.*/
document.getElementById(’CommentForm’).reset();
/* Hilangkan image preloader.*/
document.getElementById(’alert’).innerHTML = ”;
}
Proses menghapus komentar
Berikut ini adalah tiga buah fungsi yang bertugas untuk menangani proses penghapusan komentar.
var postValue = ‘id=’ + messageID;
var send_to = ‘manage-comment.php’;
var respons = ‘alert’;
input_box = window.confirm(’Are you sure want to delete this comment?’);
if (input_box==true){
postAjax(send_to, postValue, respons, handleDeletedComment);
}
}
function handleDeletedComment(){
if (xmlHttp.readyState == 4){
if (xmlHttp.status == 200){
var JSONRespons = eval(’(’ + xmlHttp.responseText + ‘)’);
if(JSONRespons.status == 1){
deleteNow(JSONRespons.id);
}
else{
document.getElementById(obj).innerHTML = JSONRespons.message;
}
} else {
document.getElementById(obj).innerHTML = ‘Error: ‘ + xmlHttp.statusText;
}
}
}
function deleteNow(id){
var delete_comment = document.getElementById(id);
var currTotalComm = document.getElementById(’numComment’).innerHTML;
document.getElementById(’numComment’).innerHTML = parseInt(currTotalComm) - parseInt(1);
delete_comment.parentNode.removeChild(delete_comment);
enableForm();
document.getElementById(’alert’).innerHTML = ”;
}
Untuk proses yang ditangani php, semuanya ada pada file manage-comment.php.
Demikian panduan Comment Ajax ini dibuat, semoga bisa membantu para teman-teman developer.
keren,
BalasHapus