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,.
9 comments:
TQ om
sama2 gan..sering2 mampir yak.. :)
Siip deh... Skalian prmo nih gan, tutorial tentang cara Enkripsi kode php supaya tidak terbaca :
http://ujang-rohidin.blogspot.com/2012/08/cara-enkripsi-kode-program-php-agar.html
Thank's
@Ujang Rohidin thanks udah mampir gan.. :)
gan di datachat.php
salah di line 5 sama 7 trus gmn tuh
demonya gak jalan om.. :)
Thanks infonya
permisi gan, ane ada sedikit tulisan tentang websocket di php gan, silahkan jika ingin dikembangkan lebih lanjut, http://datacomlink.blogspot.co.id/2015/11/implementasi-server-websocket-rfc-6455.html
semangat open source...
Cara add kode document.location.href. Di script chat Gimana? Supaya komentar terdeteksi lokasinya
Posting Komentar
Untuk konsultasi, tanya-tanya tentang web programming, php, ajax, mysql, javascript, html, script bisa komen disini.
Untuk proyek atau tugas tentang web bisa komen disini.
Atau dapat langsung hubungi kami:
Email:
tawank.x@gmail.com
bobybibbob@gmail.com
YM:
tawank_x
bobybibbob