saat'y posting,... :)
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 language="javascript">
//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 onLoad="setTimeout('ambilData()',1000)">
<table align="center" width="326" height="192" border="1" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="326" height="250">
<div id="hasil" style="overflow:auto; height:250;"></div>
</td>
</tr>
<tr>
<td height="24">
<form name="chat" id="chating">
nama : <input type="text" name="nama" size="15" /><br />
<input id="isiChat" type="text" name="isiChat" size="30" onChange="kirim()" />
<input type="button" value="kirim" onClick="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,.
