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.......................!!!!

Komentar

Posting Komentar

Postingan populer dari blog ini

Lab 4.2.5.5 Calculating a VLSM Addressing Scheme

Langkah 1: Memeriksa persyaratan jaringan Gunakan diagram topologi untuk menentukan jawaban atas pertanyaan di bawah ini. Ingat bahwa alamat IP akan  diperlukan untuk setiap LAN dan WAN interface. Berapa banyak subnet yang dibutuhkan?  Jawaban: 7 Berapa jumlah maksimum alamat IP yang dibutuhkan untuk satu subnet tunggal ? Jawaban: 55 Berapa banyak host alamat IP yang dibutuhkan untuk LAN terbesar?  Jawaban: 26 Berapa banyak host alamat IP yang diperlukan untuk LAN berikutnya terbesar? Jawaban: 20 Berapa banyak host alamat IP yang dibutuhkan untuk LAN terkecil?  Jawaban: 12 Berapa banyak host alamat IP yang dibutuhkan untuk setiap link WAN?  Jawaban: 2 masing masing, dengan total 6 Berapa jumlah total alamat IP host yang diperlukan untuk jaringan ini?  Jawaban: 119 Berapa jumlah total alamat IP host yang tersedia dalam jaringan 192.168.1.0/24? Jawaban:  254 Jika jaringan adalah subnetted untuk memberikan 7 subnet digunakan, bisa mengatasi persyaratan yang harus dipenuhi?   Jawab
Baca selengkapnya

Lab 7.3.3 Configuring and Testing the Rapid Spanning Tree Prototype

Task 1: Configure all devices Step 1: Configure S1 and S2 Configure the host name, access, and command mode passwords on each switch. Step 2: Configure interface VLAN 1 Configure the VLAN1 IP address and default gateway on each switch. Step 3: Configure FC-ASW-1 for server and end user VLANs VLAN Number VLAN Name 10 Servers 20 Users Step 4: Configure ProductionSW for server and end user VLANs VLAN Number VLAN Name 10 Servers 20 Users Step 5: Assign ports to VLANs on FC-ASW-1 FC-ASW-1# configure terminal FC-ASW-1(config)# interface Fa0/5 FC-ASW-1(config-if)# switchport mode access FC-ASW-1(config-if)# switchport access VLAN10 FC-ASW-1(config-if)# interface Fa0/6 FC-ASW-1(config-if)# switchport mode access FC-ASW-1(config-if)# switchport access VLAN20 Step 6: Assign ports to VLANs on ProductionSW ProductionSW# configure terminal ProductionSW(config)# interface Fa0/5 ProductionSW(config-if)# switchport mode access ProductionSW(config-if)# switchport access VLAN10 Production
Baca selengkapnya

Lab 5.2.3 Configuring RIPv2 with VLSM, and Default Route Propagation

Step 1: Connect the equipment. a. Connect Router3 to Router1 and Router2 with serial cables. b. Connect Router1’s Fa0/0 interface with a straight-through cable to Switch1’s Fa0/1 interface. c. Connect Router2’s Fa0/0 interface with a straight-through cable to Switch2’s Fa0/1 interface d. Connect PC1 to Switch1 and PC2 to Switch 2 with straight-through cables. e. Connect PC3 to Router3’s Fa0/0 interface with a crossover cable. f. Connect a PC with a console cable to perform configurations on the routers and switches. Step 2: Perform basic configurations on the routers. a. Establish a console session with Router1 and configure hostname, passwords, and interfaces as described in the table. Save the configuration. b. Establish a console session with Router2 and perform a similar configuration, using the addresses and other information from the table. Save the configuration. c. Establish a console session with Router3. Configure hostname, passwords, and interfaces according to the table.
Baca selengkapnya