Programmer Nganggur: Membuat Aplikasi Web Chatting Sederhana dengan PHP

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; }