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.
