Selanjutnya yakni pembuatan fitur chatting, (bagian inti).

Sekrang kita akan memfungsikan cuilan form pengirim pesan, kita akan memprosesnya memakai ajax

Pada form pesan diatas kita kembali memakai html5 validasi,

required x-moz-errormessage=”Ketik pesannya gan !”

 jadi ketika kosong maka akan tampil pemberitahuan sebagai beikut.

untuk menawarkan efek audio menyerupai facebook, silahkan tambahkan tag HTML5 audio sempurna dibawah form pesan.

<audio controls id="suara"> <source src="../nge_Chat/chat.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>

Pastikan pembaca sudah mendownload file “chat.mp3”, sudah saya saya sediakan semuanya dibagian awal tutorial.

Setelah kita menambahkan audio, akibatnya menyerupai berikut.

selanjutnya sembunyikan tampilan audio tersebut dengan jquery karna kita hanya membutuhkan suaranya saja. berikut codenya.

var audio=$('#suara');audio.hide();

letakkan pada file “ajaxku.js”

kemudian kita akan menciptakan ajax prosesnya masih di file “ajaxku.js”, tambahkan lagi code berikut.

//kirim pesan chat$("#formpesan").submit(function(){var pesan=$(".input-xlarge").val();$.ajax({url : 'kirim.php',type : 'POST',data : 'pesan='+pesan,success : function(pesan){// html5 DOM audio playvar suara=document.getElementById("suara");suara.play();if(pesan=="terkirim"){$(".input-xlarge").val("");}else{return false;}},});return false; });

var suara=document.getElementById(“suara”);

suara.play();

audio akan dinyalakan kalau tombol “Kirim” sudah dilklik atau user menekan enter.

lanjut ke pembuatan file “kirim.php” yang akan memproses ajax diatas.

<?phpsession_start();include "koneksi.php";$nick=$_SESSION['nick'];$pesan=strip_tags($_POST['pesan']);$waktu=date("h:m:s");$masukan=$koneksi->prepare("insert into pesan (nick,pesan,waktu) values (:nick,:pesan,:waktu) ");$masukan->BindParam(":nick",$nick);$masukan->BindParam(":pesan",$pesan);$masukan->BindParam(":waktu",$waktu);$masukan->execute();if($masukan->rowCount()==1){print "terkirim";}else{print "gagal";}?>

 

Mari kita coba mengirim pesan.

 

yups… pesan sudah berhasil dikirim. selanjutnya kita akan menampilkan pesan dari database,

di awal tutorial  kita sudah menciptakan div ber id=boxpesan yaitu pada file “index.php”

<div id=”boxpesan”>

</div>

div inilah nanti yang akan dipakai untuk meload pesan dari database dengan pemberian ajax jquery. Buka kembali file “ajaxku.js” tambahkan code berikut.

 

//load pesanfunction ambilpesan(){$(".boxpesan").load("ambil.php");var con = document.getElementById("boxpesan");con.scrollTop = con.scrollHeight;}setInterval(ambilpesan,1000);

script diatas yakni jquery untuk mengambil pesan dari database, pengambilan dari database berjeda 1 detik, jadi setiap 1 detik, data diperbaharui, inilah yang menjadi inti dari aplikasi.

var con = document.getElementById("boxpesan");
con.scrollTop = con.scrollHeight;
 
kemudian code diatas dalah code javascript untuk menciptakan scroll selalu berada dibawah kotak div, ini mempunyai kegunaan ketika pesan sudah melebihi tinggi div, jadi pesan yang gres akan tampil dari cuilan bawah.
 

lanjut pembuatan file “ambil.php”

<?phpinclude "koneksi.php";$ambil=$koneksi->prepare("select * from pesan order by id");$ambil->execute();while($ulangi=$ambil->fetch()){// this is emoticon's operation bro $text_awal=$ulangi['pesan'];$symbol=array("[kasmaran]","[kedip]","[ketawa]","[marah]","[melet]","[nangis]","[sakit]","[bye]","[maki-maki]","[cmarah]","[cmurung]","[cnangis]","[csedih]","[csenyum]","[bonus]"); $icon=array("<img src='../nge_chat//emot/akasmaran.gif' title='handup'>","<img src='../nge_chat/emot/akedip.gif' title='bingung'>","<img src='../nge_chat/emot/aketawa.gif' title='capek'>","<img src='../nge_chat/emot/amarah.gif' title='cemen'>","<img src='../nge_chat/emot/amelet.gif' title='cool'>","<img src='../nge_chat/emot/anangis.gif' title='galau'>","<img src='../nge_chat/emot/asakit.gif' title='hay'>","<img src='../nge_chat/emot/bye.gif' title='kedip'>","<img src='../nge_chat/emot/maki-maki.gif' title='kesetrum'>","<img src='../nge_chat/emot/marah.gif' title='lol'>","<img src='../nge_chat/emot/murung.gif' title='mewek'>","<img src='../nge_chat/emot/nangis.gif' title='nangis'>","<img src='../nge_chat/emot/sedih.gif' title='nyengir'>","<img src='../nge_chat/emot/smile.gif' title='psimis'>","<img src='../nge_chat/emot/bonus.png' title='rokok'>");$pesan=str_replace($symbol,$icon,$text_awal);  // this is emoticon's operation bro echo "<p><span class='label label-info text-center'><i class='icon-user icon-white'></i> ".$ulangi['nick']." </span><small>&nbsp;".$pesan."</small><small class='muted'>(".$ulangi['waktu'].")</small></p>"; }?>

ode diatas yakni pengambilan pesan dari database, kemudian pada cuilan emoticon, itu adadalah code untuk mengganti text menjadi emoticon/gambar, (lihat tutorialnya disini). Berikut hasilnya.

Sekarang kita coba ketik pesan lagi…..untuk mengetes

Yups… sudah berhasil gan. Hehe.

selanjutnya kita akan menciptakan daerah penampil emoticon.

tetap ikuti tutorialnya.

 

Part 3                   Part 5