AJAX chat application

gan, ane ngetes ilmu PHP ane gan, coba-coba bikin aplikasi chatting,
sekalian ada tugas kuliah,
ne source code nya...

ne yang buat php :
<?php
mysql_connect("localhost","root","");
mysql_select_db("alen");

$nama = $_GET['nama'];
$pesan = $_GET['pesan'];
$waktu = date("H:i");
$akhir = $_GET['akhir'];

$json = '{"messages": {';
if($akhir==0){
    $nomor = mysql_query("select nomor from unpchat order by nomor desc limit 1");
    $n = mysql_fetch_array($nomor);
    $no = $n['nomor'] + 1;
    $json .= '"pesan":[ {';
    $json .= '"id":"'.$no.'",
              "nama":"urang punyo",
              "teks":"Selamat datang di ruang diskusi",
              "waktu":"'.$waktu.'"
              }]';
    $masuk = mysql_query("insert into unpchat values(null,'Admin','$nama bergabung dalam chat','$waktu')");
}else{
    if($pesan){
        $masuk = mysql_query("insert into unpchat values(null,'$nama','$pesan','$waktu')");

    }
    $query = mysql_query("select * from unpchat where nomor > $akhir");
    $json .= '"pesan":[ ';
    while($x = mysql_fetch_array($query)){
        $json .= '{';
        $json .= '"id":"'.$x['nomor'].'",
                  "nama":"'.htmlspecialchars($x['nama']).'",
                  "teks":"'.htmlspecialchars($x['pesan']).'",
                  "waktu":"'.$x['waktu'].'"
                  },';
    }
    $json = substr($json,0,strlen($json)-1);
    $json .= ']';
}

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

ne yang buat HTML nya :
<html>
<head>
<title>
UNPchat beta 1.0
</title>
<script>
var ajaxku = buatAjax();
var tnama = 0;
var pesanakhir = 0;
var timer;
function masukannama(){
    if(tnama==0){
        document.getElementById("nama").disabled = "true";
        tnama = 1;
    }else{
        document.getElementById("nama").disabled = "";
        tnama = 0;
    }
    ambilPesan();
}
function buatAjax(){
    if(window.XMLHttpRequest){
        return new XMLHttpRequest();
    }else if(window.ActiveXObject){
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

function ambilPesan(){
    namaku = document.getElementById("nama").value
    if(ajaxku.readyState == 4 || ajaxku.readyState == 0){
        ajaxku.open("GET","unpchat.php?akhir="+pesanakhir+"&nama="+namaku+"&sid="+Math.random(),true);
        ajaxku.onreadystatechange = aturAmbilPesan;
        ajaxku.send(null);
    }
}

function aturAmbilPesan(){
    if(ajaxku.readyState == 4){
        var chat_div = document.getElementById("div_chat");
        var data = eval("("+ajaxku.responseText+")");
        for(i=0;i<data.messages.pesan.length;i++){
            chat_div.innerHTML += "<font color=red>"+data.messages.pesan[i].nama+"</font> ";
            chat_div.innerHTML += "<font size=1>("+data.messages.pesan[i].waktu+")</font> ";
            chat_div.innerHTML += " : "+data.messages.pesan[i].teks+"<br>";
            chat_div.scrollTop = chat_div.scrollHeight;
            pesanakhir = data.messages.pesan[i].id;
        }
    }
    timer = setTimeout("ambilPesan()",1000);
}

function kirim(){
    pesannya = document.getElementById("pesan").value
    namaku = document.getElementById("nama").value
    if(pesannya != "" && document.getElementById("nama").value !=""){
        ajaxku.open("GET","unpchat.php?akhir="+pesanakhir+"&nama="+namaku+"&pesan="+pesannya+"&sid="+Math.random(),true);
        ajaxku.onreadystatechange = aturAmbilPesan;
        ajaxku.send(null);
        document.getElementById("pesan").value = "";
    }else{
        alert("Nama atau pesan masih kosong");
    }
}

function aturKirimPesan(){
    clearInterval(timer);
    ambilPesan();
}
function blockSubmit() {
    kirimPesan();
    return false;
}
</script>
<style type="text/css">
<!--
#tmbl_login {
    color: #F00;
}
.kirim {
    color: #FF0080;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body bgcolor="#000000" text="#FFFFFF">
<div align="left">Nama :
  <input type=text name=nama id=nama>
  <input type=button value=login id=tmbl_login onClick=masukannama()>
</div>
<p align="left"><div id="div_chat" style="height: 300px; width: 500px; overflow: auto; background-color: lightgreen; border: 1px solid #555555; ">   

</div>
<form onSubmit="return blockSubmit();">
  <div align="left">Pesan :
    <input type=text name=pesan id=pesan size=50>
    <input type=button class="kirim" onClick="kirim()" value="kirim">
  </div>
</form>
</body>
</html>

dan ini yang buat databasenya :
CREATE TABLE `unpchat` (
  `nomor` int(3) NOT NULL auto_increment,
  `nama` varchar(20) NOT NULL,
  `pesan` varchar(200) NOT NULL,
  `waktu` varchar(10) NOT NULL,
  PRIMARY KEY  (`nomor`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;

Dan inilah tampilannya :
tarraaaaaaaaaaaaaaaaaaaaaaaaaaa.......................!!!!

Postingan populer dari blog ini

Belajar React Native, lesson 1

HAKIKAT WAWANCARA DALAM PENELITIAN KUALITATIF

Lab 6.2.1 Determining an IP Addressing Scheme