Skip to content

T-10 ShoutBox: Simple ShoutBox dengan Ajax + PHP

KurangBiasaLumayanBagusLuar Biasa (4 votes, average: 4.00 out of 5)
Loading ... Loading ...
 970 views

Pernah lihat shoutbox di web yang sering anda kunjungi??? Ya, shoutbox adalah form sederhana yang biasa ditempatkan pada sisi kanan atau kiri website yang bertujuan agar pengunjung dapat memberikan komentar singkat tentang hasil kunjungan mereka di web tersebut.

Biasanya setiap web pribadi menggunakan shoutbox agar si pembuat mengetahui kesan pengunjung website dia. Saya akan menawarkan shoutbox dinamis buatan saya sendiri.

Teknologi shoutbox akhir-akhir ini lebih sering menggunakan Ajax untuk menangani posting yang diinput agar ketika pesan diinput pengunjung tidak harus menunggu halaman yang sedang mereka kunjungi di reload ulang seperti layaknya kita mengisi guestbook atau comment berita.

Saya menggunakan framework prototype.js untuk mengimplementasikan ajax disini, ajax dengan prototype.js lebih mudah dan hemat script dijamin anda pasti akan cepat mengerti.

Sekarang lihat screenshot shoutbox sederhana ini….

shoutbox

Sebelumnya buat table ’shoutbox’ pada database MySQL anda:

CREATE TABLE `shoutbox` (
  `id` int(10) NOT NULL auto_increment,
  `name` varchar(50) NOT NULL,
  `email` varchar(50) NOT NULL,
  `message` varchar(255) NOT NULL,
  `submitdate` datetime NOT NULL default '0000-00-00 00:00:00',
  PRIMARY KEY  (`id`)
);

Lalu jangan lupa untuk meng-copy file prototype.js ke folder web anda lalu buat file html seperti berikut:

<html>
<head>
<title>T-10 ShoutBox ~ Simple PHP Ajax ShoutBox</title>
<style>
 body,table{
 	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
 }
 a:link,a:visited{
 	color:#000;
	font-weight:bold;
 }
 a:hover,a:active{
	text-decoration:none	
 }
 hr{
 	margin:0px;
 }
 #divShoutBoxList{
 	border:1px solid #000;
	overflow:auto;	
	height:120px;
 }
 #tableMain{
 	border:1px solid #000;
 }
</style>
<script language="javascript" src="prototype.js"></script>
<script language="javascript">
 function submitShoutBox(){
    // cek apakah semua form sudah diisi - lihat penggunaan method present di manual prototype.js
    var valid = $('name').present() && $('email').present() && $('message').present();
    if(!valid){
	 alert('Please fill out all the fields');
     return;
    }
	// regular expression untuk mengecek valid atau tidaknya alamat email yang diinput
    var pattern=/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
    if(!pattern.test($F('email'))){ 
	 alert('Please provide a valid email address');
     return;
	}        
	// siapkan request dan kirim request tersebut ke shoutbox_process.php?post
 	new Ajax.Request( 'shoutbox_process.php?post',
	  {
	 	method: 'post',
		// hanya butuh 3 parameter saja untuk memproses data
		parameters: {name: $F('name'),email: $F('email'),message: $F('message')},
		// ketika request berhasil dilakukan maka jalankan perintah-perintah di dalam property onSuccess
		onSuccess: function(){ 		
			// refresh isi shoutbox
			getShoutBoxList(); 
			// kosongkan form dan fokuskan cursor di textfield nama
			$('formShoutBox').reset();
			$('name').focus();
		}
	  }
	);
 }
 function getShoutBoxList(){
	//  siapkan request dan kirim request tersebut ke shoutbox_process.php?get
	/*  Ajax.Updater hanya mengubah isi dari id element  yang dimaksud yaitu 'divShoutBoxList' 
		dengan hasil request dari url yang diberikan - lihat manual prototype.js
	*/
 	new Ajax.Updater('divShoutBoxList','shoutbox_process.php?get');
 }
 
 // ketika document selesai di load
 window.onload = function(){
 	/*  Arahkan event onsubmit form utama ke fungsi submitShoutBox 
		lalu 'return false' agar tidak ada proses loading ulang halaman setelah selesai submit
	*/
 	$('formShoutBox').onsubmit = function(){submitShoutBox(); return false;}
	// tampilkan isi shoutbox sebelumnya
	getShoutBoxList();
 }
</script>
</head>
<body>
<form id="formShoutBox">
  <table width="265" border="0" id="tableMain">
    <tr>
      <th colspan="3"><u>T-10 ShoutBox v1.0</u></th>
	</tr>  	  
    <tr valign="top">
      <td height="120" colspan="3">
	   <div id="divShoutBoxList"></div>
	  </td>
    </tr>
    <tr>
      <td nowrap>Your Name </td>
      <td width="5">:</td>
      <td><input name="name" type="text" id="name" size="20"></td>
    </tr>
    <tr>
      <td nowrap>Your Email </td>
      <td>:</td>
      <td><input name="email" type="text" id="email" size="20"></td>
    </tr>
    <tr valign="top">
      <td nowrap>Your Message </td>
      <td>:</td>
      <td><textarea name="message" cols="20" rows="2" id="message"></textarea></td>
    </tr>
    <tr>
      <td colspan="3">
	  	<input name="submitButton" type="submit" id="submitButton" value="Submit">
		<small>* please complete all fields</small>
	  </td>
    </tr>
  </table>
</form>
</body>
</html>

Siapkan 2 file PHP, 1 file berikan nama “shoutbox.class.php” yang berfungsi untuk memproses database.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<?	
	class Shoutbox{		
 
		var $table = 'shoutbox';	
 
		function Shoutbox(){
			mysql_connect('localhost','root','');
			mysql_select_db('test');
		}
 
		function insert($data){
			$fields = array();
			$values = array();
 
			foreach($data as $key=>$value){
				$fields[] = $key;
				$values[] = "'".$value."'";
			}
 
			$sql = "INSERT INTO ".$this->table."(".implode(',',$fields).",submitdate) VALUES(".implode(',',$values).",now())";
			$result = mysql_query($sql) or die(mysql_error());
			return $result;
		}
 
		function truncate(){
			$result = mysql_query('TRUNCATE TABLE '.$this->table) or die(mysql_error());
			return $result;
		}
 
		function get(){
			$sql = mysql_query('SELECT * FROM '.$this->table) or die(mysql_error());
			$data = array();
			if(!$sql || @mysql_num_rows($sql) == 0){
			  return NULL;
			}else{
			  while($row = mysql_fetch_object($sql)){
			    $row->submitdate = date('d/m/y H:i',strtotime($row->submitdate));
			  	$data[] = $row;
			  }		
			  return $data;
			}			
		}
	}
?>

File PHP lainnya berikan nama “shoutbox_process.php” yang berfungsi untuk menangani request dari ajax.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<?
	/*	
		T-10 ShoutBox - PHP Part
		Source PHP untuk menangani request dari ajax
		Setiap request dapat dipanggil dengan cara shoutbox_process.php?[nama request]
		Utk nama request baru ada 2 disini yaitu 'post' dan 'get'
	*/
	$query = @$_SERVER['QUERY_STRING']; // ambil string di belakang tanda '?' pada url request
 
	require "shoutbox.class.php";
	function filterPost($postname){	
		// Untuk mencegah karakter-karakter html dimasukkan ke dalam posting gunakan method htmlspecialchars
		return htmlspecialchars(get_magic_quotes_gpc() ? $_POST[$postname] : addslashes($_POST[$postname]));
	}	
 
	if($query == 'post'){
	  $shoutbox = new Shoutbox();
	  $data = array(
	   'name' => filterPost('name'),
	   'email' => filterPost('email'),
	   'message' => filterPost('message')
	  );
	  $shoutbox->insert($data);
	}elseif($query == 'get'){
	  $shoutbox = new Shoutbox();
	  $data = $shoutbox->get();
	  if($data){
	    foreach($data as $row){
	      echo '<a href="mailto:'.$row->email.'">'.$row->name.'</a>&nbsp;&raquo;&nbsp;';
	 	  echo '<small>'.$row->submitdate.'</small><br>';
		  echo $row->message.'<hr>';			
	    }
	  }else echo '<div style="color:red" align=center>Shoubox Still Empty</div>';
	}
?>

Aplikasi lengkap dapat anda download disini.

Semoga anda suka dengan aplikasinya… ^_^

Posted in Ajax, JavaScript, PHP, PrototypeJs, Snippets, Tips & Trick. Tagged with , , , , .

By admin
July 21, 2008

10 comments

10 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. leoniko said
    on July 21, 2008

    wah cool banget boz tutorial nya .. aq coba ya boz .. btw bisa nga kita sisipkan icon pic kaya YM! ghitu loe … kl kita ketik :) << langsung keluar nya icon senyum nya .., kl di tambah kaya ghitu keren dech kaya nya .. biar nga bosen …

  2. admin said
    on July 21, 2008

    Itu mah gampang aja bos tp masa pengunjung rela ngasih YM dia???
    Ntar ada yg iseng2 add… ^_^
    Email aja udh cukup dan general.

  3. bajul said
    on July 23, 2008

    alloo ten, nice web….
    mantabbb… gmana kabar nyak babeh sehat ?
    sukses yah !

  4. CR7 said
    on July 23, 2008

    Wah trims berat nih mas chandra, ilmu2nya sgt bermanfaat apalagi shoutbox ini … sip de :D , sy ign bljr OOP nih, btw, klu upload suatu file pk OOP gmn ya .. :) trims

  5. U3 said
    on July 23, 2008

    keren, gak salah deh
    tambah lagi tutorialnya boss :)

  6. ramu said
    on July 23, 2008

    Wah..orang indonesia pada pinter progrm nih klau smua web nampilin tutorial yg lngkap… sprti ini..:D
    makin bnyak tutorialnya mkin bgus nih web…..
    bnyak bnget manfaatnya trutama buat gw yg pemula….

  7. gecko said
    on September 18, 2008

    wah cool. tetep rajin nulis ya bro…
    met kenal

  8. madeinara said
    on July 2, 2009

    jadi pengen nyoba??

    eh eh punya contoh script buat form register dengan ajax??

    atau contoh aplikasi buat kode verifikasi dengan ajax?? tutorialin dunK……..

    Web Kerennnnnnnnnnnnnnn >,>

  9. azmi said
    on August 3, 2009

    akhirnya dapat shoutbox juga.. request dari pembimbing ni kak..
    katanya harus pake shoutbox..
    mudah2-an ga ribet untuk dipelajarin..
    soalnya blm ngerti ajax :-)
    tinggal nyari searching :-D
    makasih kak tutorialnya..
    pelatihan langsungnya ditunggu lho?! hehe..

  10. kk said
    on February 25, 2010

    izin sedot ilmunya kang, thanks

Some HTML is OK

(required)

(required, but never shared)

or, reply to this post via trackback.