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,.
10 comments:
saya masih bingung,saya ingin menambahkan script comment ke web saya,brarti saya harus instal php dan mysql dulu ya?lalu stelah itu script2 diatas cara memasukkan dan menghubungkan dgn web saya bagaimana?
@anonim:mba/mas klo mw pk cntoh script di atas hrus pk php soalnya itu kan dibuat pk pemrograman php,harus ada web server yg bs baca script php,tus klo disini mysql itu database yg dipake bwt nyimpen komen2nya klo mw pk database lain bisa aja,tp yg dicontoh diatas pk mysql..klo g pk database sebenernya bisa pk xml tp ttep hrus ada php nya..
mkasi mba/mas da isi komentar.. :)
mas ini saya taruh di web saya kok pas comment keluar error ya tp klo di refresh bisa,, ini errornya "Warning: date() [function.date]: It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'Asia/Krasnoyarsk' for '7.0/no DST' instead in C:\xampp\htdocs\tpulsa\inputComment.php on line 5"
to: anonim
itu kesalahan pada baris ke 5 di file inputComent.php
coba cek lagi,.
kemungkinan itu masalah di fungsi date()
terimakasih dah berkunjung
_ctr_
saya mau tanya, klo ditambah fasilitas attach file/image, bagaimana mengolahnya?? Trima kasih
tinggal tambah field upload aja gan.. :)
maz, klo comment seperti di blog ini buatnya gimana ya maz??. jadi ketika ketika koment sudah ditulis, terus klik "publikasikan" maka setelah itu muncul captha??gimana ya maz..
tinggal masuk ke setingan comment doank,pilih yes buat setingan Show word verification for
comments?
Thanks... bantu banget scriptnya..
@atas ane..
sama2..makasi y udah mampir.. :)
Posting Komentar
Untuk konsultasi, tanya-tanya tentang web programming, php, ajax, mysql, javascript, html, script bisa komen disini.
Untuk proyek atau tugas tentang web bisa komen disini.
Atau dapat langsung hubungi kami:
Email:
tawank.x@gmail.com
bobybibbob@gmail.com
YM:
tawank_x
bobybibbob