ok teman-teman sampai jumpa kembali masih ditutorial yang sama, pada tahap sebelumnya kita sudah berhasil membuat mesin chattingnya, sekarang lanjut ke pembuatan emoticonnya.
Emcoticon diatas kita tampilkan dengan bantuan popover bootstrap, kemudian kita meloadnya dengan javascript. buka kembali file “ajaxku.js” kemudian ketikan code berikut.
//load emoticon $("#emot").popover({ html: true, content: function(){ // emoticon from www.animated-gifs.eu return "<img src='../nge_chat/emot/akasmaran.gif' title='[kasmaran]' onClick=\"addemot('[kasmaran]')\">"+ "<img src='../nge_chat/emot/akedip.gif' title='[kedip]' onClick=\"addemot('[kedip]')\">"+ "<img src='../nge_chat/emot/aketawa.gif' title='[ketawa]' onClick=\"addemot('[ketawa]')\">"+ "<img src='../nge_chat/emot/amarah.gif' title='[marah]' onClick=\"addemot('[marah]')\">"+ "<img src='../nge_chat/emot/amelet.gif' title='[melet]' onClick=\"addemot('[melet]')\">"+ "<img src='../nge_chat/emot/anangis.gif' title='[nangis]' onClick=\"addemot('[nangis]')\">"+ "<img src='../nge_chat/emot/asakit.gif' title='[sakit]' onClick=\"addemot('[sakit]')\">"+ "<img src='../nge_chat/emot/bye.gif' title='[bye]' onClick=\"addemot('[bye]')\">"+ "<img src='../nge_chat/emot/maki-maki.gif' title='[maki-maki]' onClick=\"addemot('[maki-maki]')\">"+ "<img src='../nge_chat/emot/marah.gif' title='[cmarah]' onClick=\"addemot('[cmarah]')\">"+ "<img src='../nge_chat/emot/murung.gif' title='[cmurung]' onClick=\"addemot('[cmurung]')\">"+ "<img src='../nge_chat/emot/nangis.gif' title='[cnangis]' onClick=\"addemot('[cnangis]')\">"+ "<img src='../nge_chat/emot/sedih.gif' title='[csedih]' onClick=\"addemot('[csedih]')\">"+ "<img src='../nge_chat/emot/smile.gif' title='[csenyum]' onClick=\"addemot('[csenyum]')\">"+ "<img src='../nge_chat/emot/bonus.png' title='[bonus]' onClick=\"addemot('[bonus]')\">"; } });
Jadi apabila tombol emoticon diklik maka akan tampil gambar-gambarnya.
<img src='../nge_chat/emot/akasmaran.gif' title='[kasmaran]' onClick=\"addemot('[kasmaran]')\">
masing-masing gambar terdapat function addemot() yang akan mengirimkan parameter yang berbeda-beda kemudian parameter tersebut akan langsung dimasukkan pada form pesan, mirip seperti chat facebook, tetapi bedanya kalau difacebook emoticon langsung berupa gambar, dan disini masih berupa symbolnya saja, baru nanti setelah pesan di enter akan berubah menjadi emoticon.
berikut code function addemot, letakkan pada file “ajaxku.js”,
Jika pada tutorial sebelumnya kita meletakkan code javascript/jquery didalam document ready.
$(document).ready(function()
{
//code code js/jquery
}
maka pada bagian javascript berikut kita letakkan diluar document ready, alasanya karna ini adalah code function yang dijalankan didalam function, jadi tambahkan saja diluar document ready.
// function add emot to chat form function addemot(emot) { document.forms[0].pesan.value+=" "+emot; }
dan berikut hasilnya.
selanjutnya kita akan menampilkan user yang sedang online pada kotak bagian kanan.
Kotak tersebut mempunyai class="boxonline", lihat kembali file indexnya, kemudian kita akan mengambil user yang sedang online dari database menggunakan ajax.
mungkin ada yang bertanya-tanya kenapa langsung mengambil dari database? dan kapan kita memasukkan user online ini kedalam database ? Jika anda simak tutorial ini dari awal, maka pada bagian daftar dan login kita telah menambhkan code untuk memasukkan user kedalam database online, (lihat pada file daftar.php dan login.php yang sudah kita buat) jadi setiap user yang berhasil login, baik itu lewat form daftar atau lewat form login itu sendiri, maka saat itu juga kita menyimpannya ke dalam database, selanjutnya. Kita hanya meloadnya saja.
buka kembali file "ajaxku.js" kemudian tambahkan code berikut.
//load user online function ol() { $(".boxonline").load("online.php"); } setInterval(ol,1000);
cara kerjanya sama seperti load pesan pada tutorial sebelumnya yakni kita meloadnya dari database kedalam kotak div, kemudian diperbaharui setiap 1 detik.
dan berikut code "online.php"-nya
<?php include "koneksi.php"; $ambil=$koneksi->prepare("select * from online order by id desc"); $ambil->execute(); while($list=$ambil->fetch()) { echo "<i class='icon-user'></i><span class='label label-info'>".$list['nick']."</span><span class='label'>".substr($list['waktu'],0,5)."</span><br>"; } ?>
yupss... Web Chatting Sederhana sudah berhasil kita buat. selanjutnya ke tahap percobaan, silahkan buka di dua browser kemudian lakukan pecakapan.
FIX ............. berhasil.
Alhamdulillah tutorial demi tutorial sudah kita lewati, cukup memusingkan bukan ?
jangan menyerah dan keep coding.
APLIKASI LENGKAP BISA ANDA DOWNLOAD DISINI
Sekian , semoga bermanfaat.
Wassalamualaikum wr.wb.