content top

AJAX Comment Form

Posted by admin in Ajax, PHP, Tutorial on 04 9th, 2010 | no responses

AjaxMungkin anda sering memberi komentar atau membuat status pada facebook anda. ketika anda selesai mengetik komentar anda lalu anda klik tombol ‘comment’,  komentar anda langsung ditampilkan. Facebook salah satu perusahaan besar yang mengembangkan metode AJAX selain google. Pada posting ini akan dibahas implementasi AJAX pada comment form.

Langkah pertama kita akan membuat halaman index.php dimana comment form tersebut berada. Anda dapat melihat contoh dibawah ini:

<?php
include("../config.php");
function displayComment(){
include("comment.cls.php");
$getObj = new Comment();
$getObj->getComment();
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript" src="comment.js"></script>
<style type="text/css">
body {background:#FFFFFF; font-family:tahoma; color:#333333;}
p.list {background: #CACAFF; padding:10px; color:#000000; font-size:12px; width:500px; margin:3px 0;}
#comment {width:500px;}
#comment.form {margin:10px 5px; background:#CCCCCC;}
</style>
<title>Ajax Comment</title>
</head>
<body>
<div id="comment">
<div id="comment-list">
<?=displayComment(); ?>
</div>
<div class="form">
<form method="post">
<p>Nama :<br /> <input type="text" name="nama" id="nama" /></p>
<p>Komentar :<br /> <textarea name="komentar" id="komentar" cols="40" rows="5"></textarea></p>
<p><input type="button" name="commentBtn" id="commentBtn" value="Kirim" onclick="javascript:Comment('addcomment')" /></p>
</form>
</div>
</div>
</body>
</html>

Langkah kedua adalah membuat ajax engine yang berupa kode javascript.Dibawah ini contoh comment.js yang merupakan ajax engine.


var xmlHttp;
function GetXmlHttpObject() {
var xmlHttp=null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}

function Comment(actionstr)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null) {
alert (“Browser does not support HTTP Request”)
return false;
}

var url;
var actionstr;
//addproducts param values list specification
if(actionstr == “addcomment”){
var nama = document.getElementById(‘nama’).value;
var komentar = document.getElementById(‘komentar’).value;

//input validation
if(!nama && !komentar){
alert(‘Please input required fields… Thanks!’);
return false;
}

var values=”nama=”+nama+”&komentar=”+komentar+”&action=”+actionstr;
}else{
var values=”action=”+actionstr;
}
url=”comment.php”;
if(actionstr == “showcomment” || actionstr == “addcomment”){
xmlHttp.onreadystatechange=getstateChanged;
document.getElementById(‘commentBtn’).value=’Processing..’;
}
xmlHttp.open(“POST”,url,true);

xmlHttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
xmlHttp.setRequestHeader(“Content-length”, values.length);
xmlHttp.setRequestHeader(“Connection”, “close”);
xmlHttp.send(values);
}

function getstateChanged()
{
if (xmlHttp.readyState==4 && xmlHttp.status == 200) {
document.getElementById(‘comment-list’).innerHTML=xmlHttp.responseText;
document.getElementById(‘nama’).value=”;
document.getElementById(‘komentar’).value=”;
document.getElementById(‘nama’).focus();
document.getElementById(‘commentBtn’).value=’Kirim’;
}
}

Langkah ketiga membuat class comment (comment.cls.php) yang berisikan function getComment() dan addComment(). Function  getComment() berfungsi menampilkan comment yang ada di database. Fungsi ini dipanggil pada halaman index.php. sedangkan fungsi addComment() berfungsi untuk menyimpan komentar. Fungsi ini dipanggil ketika tombol ‘Kirim’ di klik.


<?php
Class Comment {

function getComment() {
$comm_qry = ‘SELECT * FROM comment ORDER BY date DESC;’;
$comm_res = @mysql_query($comm_qry);
$comment = @mysql_fetch_object($comm_res);

if($comment){
do{
$show = “<p class=’list’>”.$comment->name.” wrote: “;
$show.= ” “.$comment->comment.”</p>”;
echo $show;
}while($comment = @mysql_fetch_object($comm_res));
}else{
echo “<p class=’list’>Belum ada komentar…</p>”;
}
}

function addComment(){
if($_REQUEST['nama'] != ” && $_REQUEST['komentar'] != ”){
$nama = stripslashes($_REQUEST['nama']);
$komentar = stripslashes($_REQUEST['komentar']);
$date = stripslashes($_REQUEST['date']);

$nama = mysql_real_escape_string($_REQUEST['nama']);
$komentar = mysql_real_escape_string($_REQUEST['komentar']);
$date = mysql_real_escape_string($_REQUEST['date']);

$addcomm_qry = “INSERT INTO comment (name, comment, date)
VALUES(‘”.$nama.”‘,’”.$komentar.”‘, now())”;
$add_res= @mysql_query($addcomm_qry)or die(“Error:”.mysql_error());
if($add_res){
$this->getComment();
}else{
die(“Error:”.mysql_error());
}
}else{
echo “Please Enter All Fields Correctly”;
}
}
}
?>

Langkah terakhir membuat sebuah file (comment.php) yang menghubungkan comment.js dengan comment.cls.php.


<?php
error_reporting(E_ALL);
//include config file
include_once('../config.php');
include_once('comment.cls.php');
$obj = new Comment();
switch($_REQUEST['action']){
case 'addcomment':
$obj->addComment();
break;
case 'showcomment':
$obj->showComment();
break;
default:
break;
}
?>

Database name: db_contoh
Table name : comment
field: id, name, comment, date

file config.php


<?php
$db = mysql_connect("localhost", "root", "password_anda") or die("Could not connect to database.");
mysql_select_db("db_contoh",$db);
?>

Hasilnya seperti gambar di bawah ini :

Ajax Comment

Ajax Comment

Anda bisa unduh kode lengkapnya disini Ajax_Contact_Form.rar.  Smoga bermanfaat!….

Bookmark and Share

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment