Po3nX dot Web dot ID

Bikin Ajax Shoutbox

20-11-2008 | By : Po3nX

Jika anda mempunyai web, entah itu blog, portal, forum atau apapun pasti akan lebih menarik dan interaktif jika terdapat shoutbox panel, buat apa? ya biar pengunjung bisa berinteraksi disitu, sekedar menyapa, tanya kabar, atau komentar apa aja. banyak penyedia widget shoutbox gratisan, kita tinggal daftar trus pasang kodenya di web kita, tapi rasanya akan lebih nyaman kalo kita bikin sendiri, sehingga databasenya juga tersimpandi server sendiri.

Lewat tulisan pertama saya ini, saya akan mencoba menyampaikan trik membuat shoutbox sendiri, sebagaimana yang ada pada web ini, dengan memanfaatkan teknlogi ajax, dengan harapan akan terkesan lebih dinamis dan menarik.

Sebelum menyiapkan code phpnya pertama yang kita butuhkan adalah sebuah database yang akan menampung isi shoutbox.

Langkah - langkah untuk membuat ajax shoutbox adalah sebagai berikut

1.) Buat database dengan nama 'shoutbox'
2.) Buat tabel pada mysql anda dengan nama 'shoutbox' dengan struktur sebagai berikut :

CODE

CREATE TABLE `shoutbox` (

`id` smallint(5) NOT NULL auto_increment,

`nama` varchar(100) NOT NULL,

`tanggal` date NOT NULL,

`pesan` varchar(200) NOT NULL,

`ip` varchar(50) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;

3.) Buat script ajax engine berikut, simpan dengan nama 'ajax.js' :

CODE

var xmlHttp

function shout(nama,pesan)

{

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)

{

alert ("Browser tidak support HTTP Request")

}

var url="shoutbox.php"

url=url+"?cmd=save&nama="+nama

url=url+"&pesan="+pesan

url=url+"&sid="+Math.random()

xmlHttp.onreadystatechange=stateChanged

xmlHttp.open("GET",url,true)

xmlHttp.send(null)

}

function stateChanged()

{

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

{

document.getElementById("output").innerHTML=xmlHttp.responseText

}

}

function GetXmlHttpObject()

{

var xamlHttp=null;

try

{

// ngecek buat browser firefox, opera 8.0+, safari

xmlHttp=new XMLHttpRequest();

}

catch (e)

{

// browser Internet Explorer

try

{

// IE 6.0+

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e)

{

// IE 5.0

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

}

return xmlHttp;

}

4.) Terakhir, inilah script shoutboxnya, simpan dengan nama 'shoutbox.php' :

CODE

<?

//koneksi ke mysq, isikan dengan host, user dan pass anda

$connection = mysql_connect("localhost","root","");

mysql_select_db("shoutbox",$connection);

if ($_GET[cmd]=='save'){

$adre=getenv("REMOTE_ADDR");

$tgl=date("Y-m-d");

if($_GET[nama]==""||$_GET[pesan]==""){

echo "<font color='red'><b>PERHATIAN...!!</b><br><br>Nama dan Pesan Tidak Boleh Kosong</font><br>";

}else{

mysql_query("insert into shoutbox ( tanggal,nama, pesan, ip) values ( '$tgl','$_GET[nama]', '$_GET[pesan]', '$adre')",$connection);

echo "<font color='red'><b>TERIMAKASIH...!!</b>Pesan anda telah tersimpan</font>";

}

echo "<table>";

$shouts=mysql_query("select * from shoutbox order by id desc limit 0,10",$connection) or die(mysql_error());

while($row_shout = mysql_fetch_array($shouts))

{

echo "<tr><td align='left'><small>$row_shout[tanggal]</small> >";

echo "<b>".$row_shout[nama]." :</b><br>";

echo "$row_shout[pesan]</td></tr>";

}

echo "</table>";

} else {

echo "

<script language=\"JavaScript\" src=\"ajax.js\"></script>

<table width='100%'><tr><td><b>SHOUTBOX</b></td></tr><tr><td>

<form name='shoutbox' method='post' action='shoutbox.php'>

<table border='0'>

<tr><td>Nama :<input type='text' name='nama' size='20'></td></tr>

<tr><td valign='top'>Pesan :<textarea name='pesan' cols='20' rows='2'></textarea></td></tr>

<tr><td><br><input type='button' onclick='shout(nama.value,pesan.value)' value='Kirim'> <input type='reset' name='reset' value='Reset'></td></tr>

</table>

</form>

</td></tr></table>

";

$shout=mysql_query("select * from shoutbox order by id desc limit 0,10",$connection) or die(mysql_error());

$jumlah=mysql_num_rows($shout);

if ($jumlah==0){

echo "<div id='output'>Shoutbox Kosong</table></div>";

}else{

echo "<div id='output'>

<table>";

while($row_shout = mysql_fetch_array($shout))

{

echo "<tr><td align='left'><small>$row_shout[tanggal]</small> >";

echo "<b>".$row_shout[nama]." :</b><br>";

echo "$row_shout[pesan]</td></tr>";

}

echo "</table></div>";

}

}

?>

Selesai, Anda bisa mempercantik tampilan dengan menggunakan CSS.
atau bisa juga menambahkan smilley, supaya lebih menarik.

Selamat mencoba , semoga bermanfaat.

Regards,

Po3nX
>> Arsip Artikel <<

[om onny ]
wah tutorial yang sangat bermanfaat. ijin bokkmark.
09/09/11

[aCieL ]
kalo untuk banned/hapus orang orang yang menyalah gunakan shout kita gimana?
04/07/11

[Po3nX ]
@All: Makasih kunjungannya, maaf baru sempat balas,
@poer: harusnya ga ada masalah pakai browser FF, asalkan javascriptnya enable
@Mercedez: ok semoga bermanfaat
20/06/11

[Mercedes-Benz Mobil Mewah Terbaik Indonesia ]
Mohon izin copy scriptynya gan, mau saya coba. semoga berhasil
20/06/11

[poer ]
from newbie

dah coba di firefox kok gak mau muncul nya
apa kudu pakai IE ?
23/05/11

[jjjj ]

[u]

[code][/code]">[/mail]">[url][mail]

[code][/code]">[/mail][/url][/u]
29/10/09

[scriptskirt.blogspot.com ]
langsung copas! kodenya hehehe
03/09/09

[ok ]

25/07/09

[wesy ]
mantaap shoutbox-nya, langsung jalan gak ada error. thankyu Om..
21/07/09

[kenshi ]
wedew mantep juga nih..
makasih y om po3nx :P
mudah-mudahan amal ibadah om po3nx diterima di sisinya.. :))
wkwkwkwkwkwk

07/06/09

[noname ]
bingung

tapi makasih triknya ak pelajarin lagi, coz otakku ini dah jubel ga masuk2
05/06/09

[Slebraefferly ]
I like your work
26/05/09

[anonymous ]
wah, rasanya senang sekali masukan saya didengarkan.. makasih mas po3nk.

cuma mo nambahin, code paling bawah buat xss attack itu ngga perlu panjang2 pake eregi gitu (setahu saya regex pake ereg itu lambat, lebih baik pake preg), pake strip_tags saja sudah cukup.

terus berkarya ya mas.
05/04/09

[Po3nX ]
thanks anonymous atas masukannya, point saya sebenarnya pada ajaxnya,
tujuan saya biar scriptnya mudah di fahami, jadi saya hilangkan pada bagian sanitize-nya, hehe...

ok deh bagi yang pengen lebih safe silahkan tambahin sanitize sebelum form disimpan ke database, caranya bermacam2 bisa menggunakan html_special_char ato seperti yang dikatakan anonymous dengan menggunakan mysql_real_escape_string

ato boleh coba function berikut:

function stripinput($text) { if (QUOTES_GPC) $text = stripslashes($text); $search = array(""", "'", "", '"', "'", "<", ">", " "); $replace = array(""", "'", "", """, "'", "<", ">", " "); $text = str_replace($search, $replace, $text); return $text; }

tambahkan function diatas sebelum $connection pada file "shoutbox.php"

kemudian cara pakainya:
pada line 12 code "shoutbox.php" diatas ganti code

mysql_query("insert into shoutbox ( tanggal,nama, pesan, ip) values ( '$tgl','$_GET[nama]', '$_GET[pesan]', '$adre')",$connection);

menjadi

$nama=trim(stripinput($_GET[nama])); $pesan=trim(stripinput($_GET[pesan])); mysql_query("insert into shoutbox ( tanggal,nama, pesan, ip) values ( '$tgl','$nama', '$pesan', '$adre')",$connection);

ato lebih extreme lagi anda bisa menggunakan code berikut untuk prevent xss attack, tambahkan sebelum function stripinput diatas

foreach ($_GET as $check_url) { if (!is_array($check_url)) { $check_url = str_replace(""", "", $check_url); if ((eregi("<[^>]*script*"?[^>]*>", $check_url)) || (eregi("<[^>]*object*"?[^>]*>", $check_url)) || (eregi("<[^>]*iframe*"?[^>]*>", $check_url)) || (eregi("<[^>]*applet*"?[^>]*>", $check_url)) || (eregi("<[^>]*meta*"?[^>]*>", $check_url)) || (eregi("<[^>]*style*"?[^>]*>", $check_url)) || (eregi("<[^>]*form*"?[^>]*>", $check_url)) || (eregi("([^>]*"?[^)]*)", $check_url)) || (eregi(""", $check_url))) { die (); } } } unset($check_url);

ok selamat mencoba, mohon dikoreksi kalo masih ada yang salah, dan sekali lagi terimakasih atas segala masukannya.
07/03/09

[anonymous ]
hari gini emang ada host yang masih register global ON?? jadul amat?

Trus ini skrip gak ada sanitize user input gini kok di post sih mas?? klo nyubi gak ngerti masang ginian trus dibongkar servernya siapa yang tanggung jawab?
Coba diutak2 lagi, minimal pake mysql_real_escape_string gitu atau apa-lah..

On second thought, makasih buat scriptnya.. nutrisi yang berguna buat saya yang lagi belajar nge-ajax.. hehe
07/03/09

[Po3nX ]
bisa lebih spesifik, gak jalannya karena apa?
ada pesan error apa?
harusnya kalo mengikuti langkah demi langkah ga ada masalah,
perhatikan penamaan filenya karena ini saling berhubungan, juga seting koneksi databasenya..
18/02/09

[tegar ]
koq gak jalan ya mas???? tolong dong... thanks
17/02/09

[sh4d0w ]
yupz, register global direkomendasikan off. kl register globalnya off ya ga jalan scriptnya. hheu.
10/01/09

[Po3nX ]
Yup betul sekali om sh4dow,

Thanks atas koreksinya

Pengaruh sekali terutama jika Register Globalnya off ya om? CMIIW

makasih banget kunjunganya
10/01/09

[sh4d0W ]
mas, boleh ngoreksi dikit g ?

ini perintah "if ($cmd=='save')" pada shoutbox.php

seharusnya kan "if($_GET[cmd]=='save')"

thx.
10/01/09

[sn1ff3r ]

thx om ... mang akunya yang error

07/01/09

[Po3nX ]

Kang kok aku ra iso connect ke mysqlnya

koneksinya kan disini:

$connection = mysql_connect("localhost","root",""); mysql_select_db("shoutbox",$connection);

pastikan host, user dan passnya benar :$connection=mysql_connect("host","user","pass");
terus nama databasenya juga : mysql_select_db("databasenya",$connection);

om klw di coba jadi double kenapa yah

Double gemana yaa?

03/01/09

[sn1ff3r ]
om klw di coba jadi double kenapa yah

02/01/09

[sn1ff3r ]
Kang kok aku ra iso connect ke mysqlnya

02/01/09

[Po3nX ]
terimakasih semuanya atas kunjunganya, selamat mencoba
semoga bermanfaat

25/11/08

[Eko ]
Wuah muanteb euy....

coba ach....

24/11/08

[Bure' ]

24/11/08

[Aley ]
Tetep selalu berkarya boz...
24/11/08

[Tom Gembus ]

lanjut kang, makasih triknya

20/11/08