Selanjutnya adalah pembuatan fitur chatting, (bagian inti).

Sekrang kita akan memfungsikan bagian form pengirim pesan, kita akan memprosesnya menggunakan ajax

Pada form pesan diatas kita kembali menggunakan html5 validasi,

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

 jadi ketika kosong maka akan tampil pemberitahuan sebagai beikut.

untuk memberikan efek audio seperti facebook, silahkan tambahkan tag HTML5 audio tepat 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, hasilnya seperti 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 membuat 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 play
                        var 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 jika tombol "Kirim" sudah dilklik atau user menekan enter.

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

<?php
session_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 membuat div ber id=boxpesan yaitu pada file "index.php"

<div id="boxpesan">

</div>

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

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

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

lanjut pembuatan file “ambil.php”

<?php
include "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 adalah pengambilan pesan dari database, kemudian pada bagian 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 membuat tempat penampil emoticon.

tetap ikuti tutorialnya.

Part 3                   Part 5