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

Membuat Web Chatting dengan Ajax Jquery, PHP, dan Bootstrap 2.3.2 [Part 4]

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.

var con = document.getElementById("boxpesan");
con.scrollTop = con.scrollHeight;
 
kemudian code diatas dalah code javascript untuk membuat scroll selalu berada dibawah kotak div, ini berguna saat pesan sudah melebihi tinggi div, jadi pesan yang baru akan tampil dari bagian bawah.
 

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


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

  • Shun Typer
    kok gw kgk msk njir

  • Shun Typer
    bantu dong

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