Mengirim dan menampilkan data dari database berbasis chat

Setelah mempelajari bahan bahan sebelumnya tentang

• Halaman untuk mengirim data  ke sistem database menggunakan php(user login)
• membuat sistem online dan offline dengan database mysql dan php
• Membuat kotak list user yang online menggunakan refress automatis
• membuat logout   

sekarang saatnya untuk memahami bagaimana aplikasi chat menggunakan php mysql ini dapat  mengirim pesan dan menampilkan pesan dari user untuk di lihat oleh pengguna lain. dalam kasus ini kita masih menggunkan script php yang dapat menghubungkan dengan database diantarnya bagaimana mengirim data ke database dan bagaimana mengambil pesan ke databas mysql. namun yang membuat rumit proyek ini adalah  pengiriman dan pengambilan data di fokus kan pada 1 halaman yaitu pada halaman chat.php sedangkan fungsi pengiriman dan pengambilanya di lakukan oleh halaman yang berbeda

• message-line.php = untuk menampilkan dan mengambil data yang selanjutnya di tampilkan pada halaman Chat.php
• post-message.php= Untuk mengirim data ke database 

semua itu dilakukan di belakang layar menggunakan fungsi java script  yang di dalamnya terdapat ajax sehingga tidak harus melakukan refresh halaman aplikasi ini untuk berkerja, denga java script ini aplikasi website chatting kita dapat berkerja secara sistematik,

coba di lihat pada halaman chat.php dan teukan bagian java script seperti ini

<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
    //If user submits the form
    $("#submitmsg").click(function(){  
        var clientmsg = $("#usermsg").val();
        $.post("post-message.php", {text: clientmsg});              
        $("#usermsg").attr("value", "");
        return false;
    });
  
    //Load the file containing the chat log
    function loadLog(){      
        var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
        $.ajax({
            url: "message-line.php",
            cache: false,
            success: function(html){      
                $("#chatbox").html(html); //Insert chat log into the #chatbox div              
                var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
                if(newscrollHeight > oldscrollHeight){
                    $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
                }              
              },
        });
    }
    setInterval (loadLog, 1000);    //Reload file every 2.5 seconds
  
    //If user wants to end session
    $("#exit").click(function(){
        var exit = confirm("Are you sure you want to end the session?");
        if(exit==true){window.location = 'index.php?logout=true';}      
    });
});
</script>

perhatikan dan pelajari script di atas, terdapat fungsi untuk mengirim pesan dengan post-message.php, 
 menampilkan pesan dengan message-line.php  dan ajax refresh,




sedangkan pada halaman-halaman tersebut masih menggunkan sistem php sederhana diantaranya manupulasi table database dan fungsi session, 

tentang css atau mempercantik atau pengembangannya silahkan di lakukan sendiri saya hanya menyampaikan dasarnya yang jauh dari kesempurnaaan

berakhir sudah proyek membuat Aplikasi chat dengan PHP dan mysql serta javascript  apabila terdapat kesalahan atau kekeliruan silahkan sampaikan menggunkan kotak komentar ,
kita sama-sama belajar dan memperbaiki untuk kelancaran hobi dalam meng-codding-kan website ,
atau ada yang tidak di mengerti isikan pada kotak komentar agar sama-sama kita mengsharingkan ilmu kita

Demodownload