Wednesday, May 22, 2013

Membuat Aplikasi Web Chatting Sederhana dengan PHP

Entah beberapa bulan/tahun yang lalu saya pernah ada permintaan dari seorang teman untuk membuatkan aplikasi chatting sederhana untuk digunakan pelengkap/ tambahan fasilitas aplikasi yang sedang dia buat. Dikarenakan untuk membuat sendiri tidak mencukupi waktunya maka saya searching di internet trus menemukan script untuk membuatnya. Aplikasi ini bukan buatan saya sendiri tapi saya juga lupa dari mana saya mendapatkannya. File asli downloadnya pun sudah enggak ketemu.
Berhubung sepertinya bermanfaat berikut saya share script nya dimana beberapa sudah saya rubah dan sesuaikan agar lebih menarik. Aplikasi ini menggunakan perpaduan bahasa HTML, PHP, CSS dan Javascript. Aplikasi ini juga tidak menggukan database karena menyimpan history nya disiman dalam bentuk html. Aplikasi ini bisa jalan dengan baik dan sudah saya test di browser Internet Explorer 8 dan Mozilla Firefox 21.0.
Aplikasi ini terdiri dari 4 file, berikut nama file dan source code nya:

1. index.php
<?
session_start();

if(isset($_GET['logout'])){   
   
    //Simple exit message
    $fp = fopen("log.html", 'a');
    fwrite($fp, "<div class='msgln'><i>User ". $_SESSION['name'] ." telah meninggalkan ruang obrolan.</i><br></div>");
    fclose($fp);
   
    session_destroy();
    header("Location: index.php"); //Redirect the user
}

function loginForm(){
    echo'
    <div id="loginform">
    <form action="index.php" method="post">
        <p>Silakan ketikkan nama anda untuk mulai:</p>
        <label for="name">Nama:</label>
        <input type="text" name="name" id="name" />
        <input type="submit" name="enter" id="enter" value="Enter" />
    </form>
    </div>
    ';
}

if(isset($_POST['enter'])){
    if($_POST['name'] != ""){
        $_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name']));
            $fp = fopen("log.html", 'a');
        fwrite($fp, "<div class='msgln'><i>User ". $_SESSION['name'] ." masuk ruang obrolan.</i><br></div>");
        fclose($fp);
    }
    else{
        echo '<span class="error">Silakan tulis nama dulu</span>';
    }
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chat - ProNgang.blogspot.com</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<font color='#4169E1' type='comic sans ms' size='4'>WebChat App.<align='center'></align></font>
<font color='#4169E1' type='arrial narrow' size='1'>Version 1.0<align='center'></align></font></br></br>
<?php
if(!isset($_SESSION['name'])){
    loginForm();
}
else{
?>
<div id="wrapper">
    <div id="menu">
        <p class="welcome">Selamat Datang, <b><?php echo $_SESSION['name']; ?></b></p>
        <p class="logout"><a id="exit" href="#">Keluar Chat</a></p>
        <div style="clear:both"></div>
    </div>   
    <div id="chatbox"><?php
    if(file_exists("log.html") && filesize("log.html") > 0){
        $handle = fopen("log.html", "r");
        $contents = fread($handle, filesize("log.html"));
        fclose($handle);
       
        echo $contents;
    }
    ?></div>
   
    <form name="message" action="">
        <input name="usermsg" type="text" id="usermsg" size="63" />
        <input name="submitmsg" type="submit"  id="submitmsg" value="Kirim" />
    </form>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
    //If user submits the form
    $("#submitmsg").click(function(){   
        var clientmsg = $("#usermsg").val();
        $.post("post.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: "log.html",
            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, 2500);    //Reload file every 2.5 seconds
   
    //If user wants to end session
    $("#exit").click(function(){
        var exit = confirm("Apakah anda yakin mengakhiri obrolan ini?");
        if(exit==true){window.location = 'index.php?logout=true';}       
    });
});
</script>
<?php
}
?>
</body>
</html>
2. post.php
<?
session_start();
if(isset($_SESSION['name'])){
    $text = $_POST['text'];
   
    $fp = fopen("log.html", 'a');
    fwrite($fp, "<div class='msgln'>(".date("g:i A").") <b>".$_SESSION['name']."</b>: ".stripslashes(htmlspecialchars($text))."<br></div>");
    fclose($fp);
}
?>
3. style.css

/* CSS Document */
body {
    font:12px arial;
    color: #222;
    text-align:center;
    padding:35px; }

form, p, span {
    margin:0;
    padding:0; }

input { font:12px arial; }

a {
    color:#0000FF;
    text-decoration:none; }

    a:hover { text-decoration:underline; }

#wrapper, #loginform {
    margin:0 auto;
    padding-bottom:25px;
    background:#EBF4FB;
    width:504px;
    border:1px solid #ACD8F0; }

#loginform { padding-top:18px; }

    #loginform p { margin: 5px; }

#chatbox {
    text-align:left;
    margin:0 auto;
    margin-bottom:25px;
    padding:10px;
    background:#fff;
    height:270px;
    width:430px;
    border:1px solid #ACD8F0;
    overflow:auto; }

#usermsg {
    width:395px;
    border:1px solid #ACD8F0; }

#submit { width: 60px; }

.error { color: #ff0000; }

#menu { padding:12.5px 25px 12.5px 25px; }

.welcome { float:left; }

.logout { float:right; }

.msgln { margin:0 0 2px 0; }

 
4. log.html
File ini bawaannya kosong tapi harus ada karena untuk menyimpan log/ history percakapan dll....

Capture dari aplikasinya adalah berikut:
Halaman Login


Halaman Obrolan


Sourcecode lengkap bisa didownload disini

Semoga bermanfaat.....



42 comments:

  1. pasang di webnya bagaimana caranya ? itu kode di taruh sebelah mana ? supaya ada disebagian halaman web, seperti aplikasi cbox. trims ( iwa4ns@gmail.comn)

    ReplyDelete
  2. Om boleh di edit untuk belajar ya,..

    ReplyDelete
  3. Selamat siang gan, ane mohon ijin untuk menggunakan karya ente yah,,
    ane juga mohon ijin untuk ngembangin untuk belajar gan,,

    Suksess Selalu

    ReplyDelete
  4. sangat berguna, nice post,
    ijin ngembangin mas,

    ReplyDelete
  5. Thank gan, lagi butuh buat tugas.. mampir di blog baru ane juga ya gan.. inilhooo.blogspot.com

    ReplyDelete
  6. punya ane di halaman obrolan kok tdk bisa itu apanya ya? saya tulis kata2 trus saya kirim kok enggak muncul, itu apa yg salah ya?

    ReplyDelete
  7. gan jgn lupa berkunjung ke http://bakron.web.id >> primbon online dalam satu klik

    ReplyDelete
  8. ijin download buat belajar ya gan? tapi databasenya mana ya gan?

    ReplyDelete
  9. sourcecodenya bermasalah tuh mang

    ReplyDelete
  10. Sangat bermanfaat gan...sdh lama pengen buat chat sendiri

    ReplyDelete
  11. Sangat bermanfaat gan...sdh lama pengen buat chat sendiri

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. pas kirim, gamuncul di log.html nya gan..
    gmn tuh??

    ReplyDelete
  14. bagaimana caranya mas tidak muncul messagenya

    ReplyDelete
  15. butuh XAMPP gak nih gan untuk bukanya??

    ReplyDelete
  16. terima kasih informasinya

    www.smartkiosku.com

    ReplyDelete
  17. thx kungjungan balik ya http://www.official-edu.ga/

    ReplyDelete
  18. ijin make. walau gagal. wakwakwak

    ReplyDelete
  19. Ini PHP versi Berapa ya gan?? Di Web Saya Gk Bisa... PHP5

    ReplyDelete
  20. maaf mau nanya bikin chat cuma bisa di php kah ?

    ReplyDelete
  21. Fatal error: Call to undefined function loginForm()

    ReplyDelete
  22. This comment has been removed by the author.

    ReplyDelete
  23. Cara share ke web lain pake ap? Pake IP masukkin ke web perangkat lain atau gmn?

    ReplyDelete
  24. gan link download rusak
    perbaiki segera ea gan

    ReplyDelete
  25. gan terus untuk menghapus pesan yang telah di pos gimana gan.
    pesannya kagak bisa d hapus

    ReplyDelete
  26. link downloadnya tidak berlaku gan..
    post ulang

    ReplyDelete
  27. terima kasih bro atas materinya .. codingan ny pun lengkap

    Kunjungi juga website saya di : https://bagussmj.mahasiswa.atmaluhur.ac.id/
    dan website kampus saya di : http://www.atmaluhur.ac.id/

    ReplyDelete
  28. ndak bisa di download mas... ling error

    ReplyDelete
  29. Gan link download di post ulang,,
    link ya eror

    ReplyDelete