Membuat miniChat/shoutbox dengan Ajax

kali ini saya akan membahas tentang membuat miniChat/shoutbox sederhana dengan menggunakan ajax, ini nantinya bisa di terapkan di blog anda atau web anda. Dengan membuat sendiri miniChat dengan script ajax akan membuat web anda lebih ringan,.

Langsung saja ke scipt’y…..

Buat database dan tabelnya, untuk lebih mudah bisa copas text dibawah ini ke Query SQL anda,.

CREATE DATABASE chat ;

CREATE TABLE datachat (
idUser int(4) NOT NULL auto_increment,
namaUser varchar(25) NOT NULL,
isiChat varchar(250) NOT NULL,
date varchar(40) NOT NULL,
PRIMARY KEY (idUser)
);

Langkah berikutnya adalah membuat halaman Ajax, perhatikan script Ajax berikut:

index.php

<html>
<head>
<title>minichat / shoutbox </title>
<script>

//tes browser support
function createRequestObject() {
var ro;
//Firfox, Opera, Safari, Chrome
if(window.XMLHttpRequest)
{
ro=new XMLHttpRequest();

}
//IE
else if(windows.ActiveXObject)
{
ro=new ActiveXObject(“Microsoft.XMLHTTP”);
}
else
{
alert(“browser suport ajax”);
return false;
}
return ro;
}
var xmlhttp = createRequestObject();
function ambilData()
{
var post = “nama=”+null;
xmlhttp.open(“post”, “dataChat.php?data=”+Math.random(), true);
xmlhttp.onreadystatechange = function() {
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
document.getElementById(“hasil”).innerHTML= xmlhttp.responseText;
}
xmlhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
xmlhttp.send(post);
setTimeout(“ambilData()”,4000);
}

function kirim()
{
var post = “nama=”+document.chat.nama.value;
post=post+”&isiChat=”+document.chat.isiChat.value;
xmlhttp.open(“post”, “inputData.php?data=”+Math.random(), true);
xmlhttp.onreadystatechange = function() {
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
document.getElementById(“hasil”).innerHTML= xmlhttp.responseText;
document.getElementById(“isiChat”).value=null;
}
xmlhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
xmlhttp.send(post);
setTimeout(“ambilData()”,4000);
}
</script>
</head>
<body>
<table align=”center” width=”326″ height=”192″ border=”1″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td valign=”top” width=”326″ height=”250″>
<div style=”overflow:auto; height:250;”></div>
</td>
</tr>
<tr>
<td height=”24″>
<form>
nama : <input size=”15″ /><br />
<input size=”30″ />
<input value=”kirim” />
</form>
</td>
</tr>
</table>
</body>
</html>

Script di atas berisi srcript Ajax, script Javascript dan HTML.

Langkah berikutnya buat koneksi ke SQL dengan script PHP, untuk yang kurang jelas bisa lihat postingan saya sebelumnya Tes koneksi ke server MySQL menggunakan script PHP.

<?php
//koneksi ke database
$hostname_conn=”localhost”;
$username_conn=”root”;
$password_conn=””;
$db_conn=”chat”;
mysql_connect($hostname_conn,$username_conn,$password_conn,$db_conn) or die (“Koneksi gagal total”);
mysql_select_db ($db_conn);
?>

isi config.php di atas sesuai dengan data server dan SQL anda

Selanjutnya membuat script PHP untuk menyimpan vareabel javascript/data chating yang ada pada form minichat tadi,.

inputData.php

<?php
//memasukan konfigurasi
include”config.php”;

//ambil vareabel
$nama=$_POST[‘nama’];
$isiChat=$_POST[‘isiChat’];
$date=date(“d F Y H:i:s”);

if($nama!=”” and $isiChat!=”” and $isiChat!=null and $isiChat!=”null”)
{
//masukan vareable ke database
$insert=mysql_query(“INSERT INTO datachat ( idUser , namaUser , isiChat , date )VALUES (”, ‘$nama’, ‘$isiChat’, ‘$date’)”);
if($insert)
{
$query=mysql_query(“SELECT * FROM datachat ORDER BY idUser DESC”);
while($i<=30 and $row=mysql_fetch_array($query))
{
$i++;
echo”$row[namaUser] : $row[isiChat] >> $row[date] <br />”;
}
}
else
{
echo”gagal”;
}
}
else
{
$query=mysql_query(“SELECT * FROM datachat ORDER BY idUser DESC”);
while($i<=30 and $row=mysql_fetch_array($query))
{
$i++;
echo”$row[namaUser] : $row[isiChat] >> $row[date] <br />”;
}
}
?>

Terakhir membuat buat untuk mempilkan data-data chat dengan script PHP, yang di panggil secara auto refresh dengan script Ajax.

dataChat.php

<?php
//include koneksi
include”config.php”;
$query=mysql_query(“SELECT * FROM datachat ORDER BY idUser DESC”);
while($i<=30 and $row=mysql_fetch_array($query))
{
$i++;
echo”$row[namaUser] : $row[isiChat] >> $row[date] <br />”;
}
?>

miniChat dengan Ajax yang tadi saya bahas masih sangat sederhana, untuk tampilan dan lain-lain anda bisa kembangkan sendiri,.

[View demo]
[Download script]

~ oleh wahyututorial pada 8 April 2010.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

 
%d blogger menyukai ini: