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 fil...

Membuat Web Chatting dengan Ajax Jquery, PHP, dan Bootstrap 2.3.2 [Part 5] (Terakhir)

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.

 


About Author

d-newbie

Adalah seorang ninja dari Coding Gakure, Menguasai jurus HTML no jutsu, CSS no jutsu, Javascript no jutsu, PHP no jutsu, dan MySQL no jutsu, jurus andalan adalah KageLooping no jutsu, yg bisa memperbanyak output sekali coding , ninja yang berasal dari TIM W3, dan diasuh oleh petapa genit yang suka menjilat-jilat situs yaitu google.com. :D #xixixi


Comment & Discussions

  • laewink
    Gan kalau mau di rombak menjadi layanan costumer bisa gan....?

    Jadi konsep.a Private chat antara CS dengan costumer, saat costumer A Mengirim pesan hanya terkirim ke CS begitupun kalau CS Membalas chat.

    MOHON PENCERAHAN GAN.....

  • kurogami
    wah kebetulan lg cari ini, ijin belajar suhu

  • Arif Ninegrafh
    kalau di tambahi melapirkan file atau gambar bisa tidak om,,,

  • Ferdi Setiawan
    Bang thank you bang atas info nya
    Ouh iya bang numpang tanyya

    cara buat Get ke profile orang lain gmna bang ?
    Mohon penjelasannya bang
    terimakasih

  • Muhammad Nasruul
    bang ada masalah ni gak mau daftar, di klik daftarnya ga keluar


  • Please LOGIN before if you want to give the comment.