Monday, April 19, 2010

Tutorial Script Ajax: Ajax Comment



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


<?php

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


<?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/

Download Sript

Cara Menghapus Foto Kiriman Teman di Facebook


Facebook sebagai media pertemanan online atau situs jejaring sosial menunjukkan begitu bermanfaatnya sebuah media internet yang berfungsi untuk mempertemukan antara seorang dan seorang yang lain dengan sangat mudah.



Aplikasi facebook tidak hanya menampilkan status-status berupa tulisan saja tetapi juga di setiap profile dilengkapi dengan foto-foto maupun video serta aplikasi tambahan lainnya.