Sunday, October 20, 2013

Script chatting sederhana

Program yang bisa digunakan untuk bertukar kabar :)

Langsung saja berikut kode nya :

index.php :
<html>
    <head><title>
            Modifikasi Ngrumpi
        </title>
        <script language="javascript" type="text/javascript">
            <!--
            /*
                        This Script Ripped From Many Source
                        I Just Use/Edit... :D
                        (MRSiregar)
             */

            // Trying To Connect To Mr.Gun Algorithm

            // Global Variable
            // Create Ajax Object For Http Request
            var http = ajaxFunction();
            // Detection If Name Is Set
            var isHasName = false;
            // Detection Last Message ID
            var lastnum = 0;
            // Timer
            var timer = 0;

            // Original Script http://www.tizag.com/ajaxTutorial/ajax-mysql-database.php
            // Browser Support Code
            function ajaxFunction(){
                var ajaxRequest;  // The variable that makes Ajax possible!
                try{
                    // Opera 8.0+, Firefox, Safari
                    ajaxRequest = new XMLHttpRequest();
                } catch (e){
                    // Internet Explorer Browsers
                    try{
                        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
                    } catch (e) {
                        try{
                            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                        } catch (e){
                            // Something went wrong
                            printErrMsg("ajaxFunction : " + e );
                            return false;
                        }
                    }
                }
                return ajaxRequest;
            }

            // Set Name
            function setterName(){
                if(isHasName){
                    document.getElementById("yourname").disabled = "";
                    isHasName = false;
                }else{
                    document.getElementById("yourname").disabled = "true";
                    isHasName = true;
                }
                updateMessages("update");
            }

            // Get User Name
            function getYourData(val){
                var result = "";
                try{
                    result = document.getElementById(val).value;
                }catch(e){
                    printErrMsg("getYourData : " + e );
                }
                return result;
            }

            // Write Messages To The Page
            function writeMsg(dataIn){
                var chat = "";               
                var data = "";
                try{
                    chat = document.getElementById("chat_area");
                }catch(e){
                    printErrMsg("writeMsg (chat_area): " + e );
                }
                try{
                    data = eval("(" + dataIn + ")");
                }catch(e){
                    printErrMsg("writeMsg (eval dataIn): " + e );
                }
                try{
                    var msgData = "";
                    for(i = 0; i < data.msg.length; i++){
                        if(data.msg[i].name == getYourData("yourname")){
                            warna = "<font color=\"blue\"> ";
                        }else if(data.msg[i].name == "Admin"){
                            warna = "<font color=\"brown\">";
                        }else{
                            warna = "<font color=\"red\">";   
                        }
                        msgData += warna + "[" + data.msg[i].name +"]"+ "</font> ";
                        msgData += "<font size=\"1\">(" + data.msg[i].thetime + ")</font> ";
                        msgData += " : " + data.msg[i].txtmsg + "<br>";
                        chat.innerHTML += msgData;
                        chat.scrollTop = chat.scrollHeight;
                        lastnum = data.msg[i].id;
                    }
                }catch(e){
                    printErrMsg("writeMsg : " + e );
                }
            }
           
            // Using POST Method To Send/Get Data
            // Get Data From User And Send It To Database
            // Response Will Be All Data Stored At Database
            // Original Script http://www.openjs.com/articles/ajax_xmlhttp_using_post.php
            function postAndGetData(name, msg, op){
                var url = "save_data.php";
                var params = "lastnum=" + lastnum +"&name=" + name + "&msg=" + msg + "&op=" + op;
                try{
                    http.open("POST", url, true);
                    // Send the proper header information along with the request
                    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                    http.setRequestHeader("Content-length", params.length);
                    http.setRequestHeader("Connection", "close");
                    http.onreadystatechange = function() {//Call a function when the state changes.
                        if(http.readyState == 4 && http.status == 200) {
                            // Modified Line
                            writeMsg(http.responseText);
                        }
                    }
                }catch(e){
                    printErrMsg("postAndGetData : " + e );
                }
                http.send(params);
            }
           
            // Auto Update Page
            function updateMessages(op){
                var name = getYourData("yourname");
                if(op == "send"){
                    var msg = getYourData("yourmsg");
                    document.getElementById("yourmsg").value = "";
                }
                // Get Message Text And Write To Page
                postAndGetData(name, msg, op);
                if(op == "update"){
                    // Update Page Every Second
                    timer = setTimeout("updateMessages('update')", 1000);
                }
            }
           
            // Submit Handler
            function submitHandler(frm){
                if(frm.name == "nameFrm"){
                    setterName();
                }
                if(frm.name == "msgFrm"){
                    updateMessages("send");
                }
                return false;
            }
           
            // Debuging Mode On (MRSiregar)
            function printErrMsg(errText){
                try{
                    var errArea = document.getElementById("error_area");
                    errArea.innerHTML +=  errText + "<br>";
                }catch(e){
                    printErrMsg("printErrMsg : " + e);
                }
            }
            -->
        </script>
    </head>
    <body>
        <?php
        ?>
        <table border="0" height="300" width="500">
            <tr>
            <form method="post" name="nameFrm" onSubmit='return submitHandler(this)'>
                <td>
                    Name : <input type="text" name="yourname" id="yourname">
                </td>
                <td>
                    <input type="button" value="Login" id="LoginButton" onClick="setterName()"><p>
                </td>
            </form>
            </tr>
            <tr>
                <td colspan="2">
                    <div id="chat_area" style="height: 300px; width: 500px; overflow: auto; background-color: lightyellow; border: 1px solid #555555;"></div>
                </td>
            </tr>
            <tr>
            <form method="post" name="msgFrm" onSubmit='return submitHandler(this)'>
                <td>
                    Message : <input type="text" name="yourmsg"  id="yourmsg" size="50">
                </td>
                <td>
                    <input type="button" value="Send" onClick='updateMessages("send")'>
                </td>
            </form>
        </tr>
    </table>
    <table border="0" height="100" width="500">
        <tr>
            <td>
                Error Messages :
                <div id="error_area" style="height: 100px; overflow: auto; background-color: white; border: 1px solid #555555;">
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

save_data.php :
   <?php

    mysql_connect("localhost", "root", "root");
    mysql_select_db("chat_db") or die("DB ERROR");

    @$name = $_REQUEST['name'];
    @$msg = $_REQUEST['msg'];
    @$op = $_REQUEST['op'];
    // WARNING
    date_default_timezone_set('UTC');
    $theTime = date("H:i");
    @$lastNum = $_REQUEST['lastnum'];

    $json = "{";
    if ($lastNum == 0) {
        $numlastNum = mysql_query("select num from tbl_chat order by num desc limit 1");
        $n = mysql_fetch_array($numlastNum);
        $no = $n['num'] + 1;
        $json .= '"msg":[ {';
        $json .= '"id":"' . $no . '",
            "name":"Admin",
            "txtmsg":"Selamat datang di kamar Ngrumpi",
            "thetime":"' . $theTime . '"
            }]';
        if(numlastNum == 0){
            $insert = mysql_query("insert into tbl_chat values(null,'Admin','$name bergabung dalam chat','$theTime')");
        }
    } else {
        if($op == "send"){  
            $insert = mysql_query("insert into tbl_chat values(null,'$name','$msg','$theTime')");
        }
        $query = mysql_query("select * from tbl_chat where num > $lastNum");
        $json .= '"msg":[ ';
        while ($x = mysql_fetch_array($query)) {
            $json .= '{';
            $json .= '"id":"' . $x['num'] . '",
                "name":"' . $x['name'] . '",
                "txtmsg":"' . $x['msg'] . '",
                "thetime":"' . $x['thetime'] . '"
                },';
        }
        $json = substr($json, 0, strlen($json) - 1);
        $json .= ']';
    }

    $json .= '}';
    echo $json;
    ?>

Tabel mysql (tbl_chat) :

+---------+--------------+------+-----+---------+----------------+
| Field   | Type         | Null | Key | Default | Extra          |
+---------+--------------+------+-----+---------+----------------+
| num     | int(4)       | NO   | PRI | NULL    | auto_increment |
| name    | varchar(20)  | NO   |     | NULL    |                |
| msg     | varchar(160) | NO   |     | NULL    |                |
| thetime | varchar(20)  | NO   |     | NULL    |                |
+---------+--------------+------+-----+---------+----------------+


Ini contoh chatting nya : 


Dan teringat pada lagu lama karena begitu gelapnya dunia tanpa informasi.


No comments:

Post a Comment