Ajax comment,.
pada dasarnya Ajax comment hampir sama dengan chat Ajax yang pernah saya buat,.
bedanya klo chat ajax ada sript auto refresh/auto reload, sedang Ajax comment ini tidak menggunakan auto refresh,.
kenapa comment menggunakan ajax?? seperti yang kita tahu salah satu kelebihan Ajax adalah memproses tanpa harus mereload seluruh halaman,. dan dengan Ajax halaman web juga menjadi lebih menarik,.
lansung saja kita ke pokok bahasan kali ini yaitu Ajax comment,.
langkah-langkah untuk membuat Ajax comment ini adalah buat database comnent beserta tabel-tabelnya untuk menyimpan komentar-komentar dari halaman web Ajax comment,.
untuk lebih memudahkan anda bisa men-copy script di bawah ini atau bisa juga impor dari file .sql yang sudah tersedia,.
CREATE DATABASE comment;
CREATE TABLE comment (
nama varchar(25) NOT NULL,
comment varchar(150) NOT NULL,
date varchar(25) NOT NULL
);
selanjutnya kita buat index.php. file ini yang menyimpan script Ajax engine,.
<html>
<head>
<title>Ajax comment</title>
<script language="javascript">
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 kirim()
{
var post = "name="+document.CommentForm.name.value;
post = post+"&comment="+document.CommentForm.comment.value;
alert(document.CommentForm.name.value);
alert(document.CommentForm.comment.value);
xmlhttp.open("post", "inputComment.php?data="+Math.random(), true);
xmlhttp.onreadystatechange = function() {
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
document.getElementById("proses").innerHTML= xmlhttp.responseText;
}
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(post);
}
function warning()
{
alert("data kosong");
}
</script>
<style type="text/css">
body {margin-left: 10px;margin-top: 10px;margin-right: 10px;margin-bottom: 0px;padding:0px;font-family:Arial, Helvetica, sans-serif;font-size:12px;}
p{width: 300px;clear: left;margin: 0;padding: 5px 0 8px 0; padding-left: 50px;}
.Comment {border-bottom:1px solid #3686b8;}
#CommentList {width:350px;}
.totalComment {margin-top:10px;}
.cssform p{width: 300px;clear: left;margin: 0;padding: 5px 0 8px 0; padding-left: 50px;}
.cssform label{font-weight: bold;float: left; margin-left: -50px; width: 80px;}
.cssform input[type="text"]{width: 220px; border:1px solid #3686b8;}
.cssform textarea{width: 220px;height: 120px; border:1px solid #3686b8;}
.cssform input[type="submit"]{margin-left: 30px;}
.SenderName {font:bold 14px arial; padding: 3px;}
.CommentDate {padding: 3px; color:#FF0000;}
.CommentContent {padding: 3px;}
</style>
</head>
<body>
<?php
include"config.php";
$query=mysql_query("SELECT * FROM comment ORDER BY date");
while($row=mysql_fetch_array($query))
{
echo"<p><span class='SenderName'>$row[nama]</span><span class='CommentDate'>$row[date]</span></p><p><span class='CommentContent'>$row[comment]</span></p><hr /><br />";
}
?>
<div id="proses"></div>
<form name="CommentForm" id="CommentForm" class="cssform">
<p><label for="name">Name:</label> <input type="text" name="name" /></p>
<p><label for="YourComment">Comment:</label> <textarea name="comment"></textarea></p>
<p align="center"><input type="button" value="Kirim" onClick="kirim()" /></p>
</form>
</body>
</html>
di bawah ini adalah Script Ajax engine-nya
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 kirim()
{
var post = "name="+document.CommentForm.name.value;
post = post+"&comment="+document.CommentForm.comment.value;
xmlhttp.open("post", "inputComment.php?data="+Math.random(), true);
xmlhttp.onreadystatechange = function() {
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
document.getElementById("proses").innerHTML= xmlhttp.responseText;
}
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(post);
}
pada script ajax diatas adalah script ajax engine yang berfungsi untuk request ke file inputComment.php dan hasil proses inputComnet.php di masukan ke <div id="proses"></div> dengan perintah document.getElementById("proses").innerHTML= xmlhttp.responseText;
sekarang kita buat script php-nya untuk mengkoneksikan dengan database dan beri nama file dengan nama config.php,. isi script config.php dengan data sesuai dengan milik anda,.
//koneksi ke database
$hostname_conn="localhost";
$username_conn="root";
$password_conn="";
$db_conn="coment";
mysql_connect($hostname_conn,$username_conn,$password_conn,$db_conn) or die ("Koneksi gagal total");
mysql_select_db ($db_conn);
?>
sekarang membuat script php untuk yang memproses inputan dari Ajax comment, inputComment.php
include"config.php";
$name=$_POST['name'];
$comment=$_POST['comment'];
$date=date("d F Y H:i:s");
//memasukan data ke database
if($name!="" and $comment!=""){
$insert=mysql_query("INSERT INTO comment ( nama , comment , date ) VALUES ('$name', '$comment', '$date')");
if($insert)
{
echo"<p><span class='SenderName'>$name</span><span class='CommentDate'>$date</span></p><p><span class='CommentContent'>$comment</span></p><hr /><br />";
}else{echo"input gagal";}
}else{echo"data kosong";}
?>
script php di atas sudah sangat familiar buat kita sehingga tidak perluh saya jelaskan lagi,. intinya script php di atas asalah memasukan inputan dari Ajax comment ke database sql
script Ajax comment diatas masih sangat sederhana, untuk lebih bagusnya silahkan anda kembangkan sendiri script-script tersebut,.
View Demo@http://www.catment.co.cc/demo/ajax_comment/
