.:: Bikin Ajax Shoutbox ::.

Dikirim oleh : Po3nX, pada 20-11-2008, kategori : Tips & Trick
"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 :

  1.  
  2. CREATE TABLE `shoutbox` (
  3.   `id` smallint(5) NOT NULL auto_increment,
  4.   `nama` varchar(100) NOT NULL,
  5.   `tanggal` date NOT NULL,
  6.   `pesan` varchar(200) NOT NULL,
  7.   `ip` varchar(50) NOT NULL,
  8.   PRIMARY KEY  (`id`)
  9. ) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;
  10.  


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

  1.  
  2. var xmlHttp
  3. function shout(nama,pesan)
  4. {
  5. xmlHttp=GetXmlHttpObject()
  6. if (xmlHttp==null)
  7.         {
  8.         alert ("Browser tidak support HTTP Request")
  9.         }
  10. var url="shoutbox.php"
  11. url=url+"?cmd=save&nama="+nama
  12. url=url+"&pesan="+pesan
  13. url=url+"&sid="+Math.random()
  14. xmlHttp.onreadystatechange=stateChanged
  15. xmlHttp.open("GET",url,true)
  16. xmlHttp.send(null)
  17. }
  18. function stateChanged()
  19. {
  20. if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
  21.         {
  22.         document.getElementById("output").innerHTML=xmlHttp.responseText
  23.         }
  24. }
  25. function GetXmlHttpObject()
  26. {
  27. var xamlHttp=null;
  28. try
  29.         {
  30.         // ngecek buat browser firefox, opera 8.0+, safari
  31.         xmlHttp=new XMLHttpRequest();
  32.         }
  33.         catch (e)
  34.                 {
  35.                 // browser Internet Explorer
  36.                 try
  37.                         {
  38.                         // IE 6.0+
  39.                         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  40.                         }
  41.                         catch (e)
  42.                                 {
  43.                                 // IE 5.0
  44.                                 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  45.                                 }
  46.                 }                      
  47. return xmlHttp;
  48. }
  49.  

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

  1.  
  2. <?
  3. //koneksi ke mysq, isikan dengan host, user dan pass anda
  4. $connection = mysql_connect("localhost","root","");
  5. mysql_select_db("shoutbox",$connection);
  6. if ($_GET[cmd]=='save'){
  7.         $adre=getenv("REMOTE_ADDR");
  8.         $tgl=date("Y-m-d");
  9.         if($_GET[nama]==""||$_GET[pesan]==""){
  10.                 echo "<font color='red'><b>PERHATIAN...!!</b><br><br>Nama dan Pesan Tidak Boleh Kosong</font><br>";
  11.         }else{
  12.                 mysql_query("insert into shoutbox ( tanggal,nama, pesan, ip) values ( '$tgl','$_GET[nama]', '$_GET[pesan]', '$adre')",$connection);
  13.                 echo "<font color='red'><b>TERIMAKASIH...!!</b>Pesan anda telah tersimpan</font>";
  14.         }
  15.         echo "<table>";
  16.         $shouts=mysql_query("select * from shoutbox order by id desc limit 0,10",$connection) or die(mysql_error());
  17.         while($row_shout = mysql_fetch_array($shouts))
  18.         {
  19.                 echo "<tr><td align='left'><small>$row_shout[tanggal]</small> >";
  20.                 echo "<b>".$row_shout[nama]." :</b><br>";
  21.                 echo "$row_shout[pesan]</td></tr>";
  22.         }
  23.         echo "</table>";
  24.        
  25. } else {
  26.         echo "
  27.         <script language=\"JavaScript\" src=\"ajax.js\"></script>
  28.         <table width='100%'><tr><td><b>SHOUTBOX</b></td></tr><tr><td>
  29.         <form name='shoutbox' method='post' action='shoutbox.php'>
  30.         <table border='0'>
  31.         <tr><td>Nama :<input type='text' name='nama' size='20'></td></tr>
  32.         <tr><td valign='top'>Pesan :<textarea name='pesan' cols='20' rows='2'></textarea></td></tr>
  33.         <tr><td><br><input type='button' onclick='shout(nama.value,pesan.value)' value='Kirim'> <input type='reset' name='reset' value='Reset'></td></tr>
  34.         </table>
  35.         </form>
  36.         </td></tr></table>
  37.         ";
  38.         $shout=mysql_query("select * from shoutbox order by id desc limit 0,10",$connection) or die(mysql_error());
  39.         $jumlah=mysql_num_rows($shout);
  40.         if ($jumlah==0){
  41.                 echo "<div id='output'>Shoutbox Kosong</table></div>";
  42.         }else{
  43.                 echo "<div id='output'>
  44.                 <table>";
  45.                 while($row_shout = mysql_fetch_array($shout))
  46.                 {
  47.                         echo "<tr><td align='left'><small>$row_shout[tanggal]</small> >";
  48.                         echo "<b>".$row_shout[nama]." :</b><br>";
  49.                         echo "$row_shout[pesan]</td></tr>";
  50.                 }
  51.                 echo "</table></div>";
  52.         }
  53. }
  54. ?>
  55.  

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

Selamat mencoba , semoga bermanfaat.

Regards,


Po3nX

Komentar Pembaca : 25 komentar

pada : 20-11-2008, [Tom Gembus ] menulis :
Gravatar

lanjut kang, makasih triknya

pada : 24-11-2008, [Aley ] menulis :
Gravatar

Tetep selalu berkarya boz...

pada : 24-11-2008, [Bure' ] menulis :
Gravatar

pada : 24-11-2008, [Eko ] menulis :
Gravatar

Wuah muanteb euy....
coba ach....

pada : 25-11-2008, [Po3nX ] menulis :
Gravatar

terimakasih semuanya atas kunjunganya, selamat mencoba
semoga bermanfaat

pada : 02-01-2009, [sn1ff3r ] menulis :
Gravatar

Kang kok aku ra iso connect ke mysqlnya

pada : 02-01-2009, [sn1ff3r ] menulis :
Gravatar

om klw di coba jadi double kenapa yah

pada : 03-01-2009, [Po3nX ] menulis :
Gravatar


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?

pada : 07-01-2009, [sn1ff3r ] menulis :
Gravatar

thx om ... mang akunya yang error

pada : 10-01-2009, [sh4d0W ] menulis :
Gravatar

mas, boleh ngoreksi dikit g ?

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

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

thx.

pada : 10-01-2009, [Po3nX ] menulis :
Gravatar

Yup betul sekali om sh4dow,
Thanks atas koreksinya

Pengaruh sekali terutama jika Register Globalnya off ya om? CMIIW
makasih banget kunjunganya

pada : 10-01-2009, [sh4d0w ] menulis :
Gravatar

yupz, register global direkomendasikan off. kl register globalnya off ya ga jalan scriptnya. hheu.

pada : 17-02-2009, [tegar ] menulis :
Gravatar

koq gak jalan ya mas???? tolong dong... thanks

pada : 18-02-2009, [Po3nX ] menulis :
Gravatar

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

pada : 07-03-2009, [anonymous ] menulis :
Gravatar

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

pada : 07-03-2009, [Po3nX ] menulis :
Gravatar

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.

pada : 05-04-2009, [anonymous ] menulis :
Gravatar

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.

pada : 05-04-2009, [anonymous ] menulis :
Gravatar

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.

pada : 26-05-2009, [Slebraefferly ] menulis :
Gravatar

I like your work

pada : 05-06-2009, [noname ] menulis :
Gravatar

bingung tapi makasih triknya ak pelajarin lagi, coz otakku ini dah jubel ga masuk2

pada : 07-06-2009, [kenshi ] menulis :
Gravatar

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

pada : 21-07-2009, [wesy ] menulis :
Gravatar

mantaap shoutbox-nya, langsung jalan gak ada error. thankyu Om..

pada : 25-07-2009, [ok ] menulis :
Gravatar

pada : 29-10-2009, [jjjj ] menulis :
Gravatar

[u]

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

pada : 03-09-2009, [scriptskirt.blogspot.com ] menulis :
Gravatar

langsung copas! kodenya hehehe

Ikut Mengomentari

Nama *:
Web:
Email:
Komentar *:
Verivication code :
Write code here *:


Note : Data dengan tanda * harus diisi
allowed :