Tutorial Belajar Website PHP MySQL ASP.Net Photoshop Coreldraw Flash Template » Ajax http://www.ilmuwebsite.com Webmaster Resource Center Wed, 01 Sep 2010 07:25:51 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 jQuery Ajax Display for Loading Content http://www.ilmuwebsite.com/ajax/jquery-ajax-display-for-loading-content http://www.ilmuwebsite.com/ajax/jquery-ajax-display-for-loading-content#comments Sun, 31 May 2009 04:02:23 +0000 Admin Image

jQuery merupakan sebuahlibrary javascript yg saat pertama kali muncul langsung berimbas padaberalihnya para developper untuk segera memanfaatkan nya sebagailibrary yang powerfull untuk menyaingi ajax. Awal muncul nya sempatmembuat ajax hanya mendapat hitungan jari kelingking dari paradevelopper. Karena seperti motto jQuery sendiri adalah “Write Less, Do More”. Wah pantes aja posisi ajax langsung ketendang.

Berikutadalah tutorial sederhana cara mengimplementasikan jQuery sebagailibrary yang powerfull, dapat menciptakan interaktif user pada halamanwebsite lu :) )

Sebelumnya download dlu library nya:

Download Page

jQuery 1.2.6 {The Latest Release}

jQuery Ajax Display for Loading Content

Siapkan HTML kosong bwat halaman utama, pada header panggil dlu library jQuery na:

Code:
<script language=”javascript” src=”jquery-1.2.6.min.js”></script>

untuk interaktif user na, gunakan Ajax jQuery Animation, atau dalam code na dinamakan sebagai AJAX DISPLAY

Code:
<script language=”javascript”>
//show animation
$(function(){
$(“#ajax_display”).ajaxStart(function(){
$(this).html(<div style=”position:absolute;”><imgsrc=”ajax-loader-refresh.gif”/> <br><strong>Loading….</strong><br><br>Pleasebe patien, do not close the window. <br>Gathering data beingprogress …</div>);
});
$(“#ajax_display”).ajaxSuccess(function(){
$(this).html();
});
$(“#ajax_display”).ajaxError(function(url){
alert(jqSajax is error );
});
});
</script>

Sedangkanuntuk simulasi load external file na, gw pake script random padalibrary jQuery, script ini gw temukan di salah satu forum luar, gw lupanama forum na, mudah2an berguna bwat kalian:

Code:
<script type=”text/javascript”>
function getRandom() {
$(“#random”).hide(“slow”);
$(“#random”).load(“sleep.php”, , callback);
}
function callback() {
$(“#random”).show(“slow”);
setTimeout(“getRandom();”, 10000);
}
$(document).ready(getRandom);
</script>
<div id=”random”></div>

“sleep.php”adalah file external yang diload oleh javascript random, dengan timeout10000 (10 detik). Timeout berarti, setelah 10 detik halaman akan diload ulang dari awal kembali (setelah 10 detik).

sleep.php berisi script yg akan di load, lu bisa isi apa aja seperti contoh code dibawah ini untuk simulasi gw kasiin sleep(10)

Code:
<?
sleep(10);
echo “<span style=font-weight:bold;font-color:green;> All Data loaded successfully !!</span>”;
?>

Jadi untuk lengkapna, berikut code HTML na:

Code:
<!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=iso-8859-1″ />
<title>jQuery Ajax Display</title>
<script language=”javascript” src=”jquery-1.2.6.min.js”></script>
<script language=”javascript”>
//show animation
$(function(){
$(“#ajax_display”).ajaxStart(function(){
$(this).html(<div style=”position:absolute;”><imgsrc=”ajax-loader-refresh.gif”/> <br><strong>Loading….</strong><br><br>Pleasebe patien,  do not close the window. <br>Gathering data beingprogress …</div>);
});
$(“#ajax_display”).ajaxSuccess(function(){
$(this).html();
});
$(“#ajax_display”).ajaxError(function(url){
alert(jqSajax is error );
});
});
</script>

<style type=”text/css”>
<!–
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
body {
background-color: #FFFFFF;
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
a:link {
color: #0066FF;
}
a:visited {
color: #0066FF;
}
a:hover {
color: #009900;
}
a:active {
color: #0066FF;
}
–>
</style></head>

<body>
<div id=”ajax_display”></div>
<div style=”position:absolute; top:100px;”>
<script type=”text/javascript”>
function getRandom() {
$(“#random”).hide(“slow”);
$(“#random”).load(“sleep.php”, , callback);
}
function callback() {
$(“#random”).show(“slow”);
setTimeout(“getRandom();”, 10000);
}
$(document).ready(getRandom);
</script>
<div id=”random”></div>
This is an Implementation for jQuery Ajax Display,  while loading a progress from an external source.<br />
developped by <a href=”http://dremi.info” target=”_blank”>dr.emi</a></div>
</body>
</html>

woke, siap dicoba, klik disini bwat preview hasil na:

Image

ni bwat download code na:

Image

]]> http://www.ilmuwebsite.com/ajax/jquery-ajax-display-for-loading-content/feed 1 Membuat Comment Ajax http://www.ilmuwebsite.com/ajax/membuat-comment-ajax http://www.ilmuwebsite.com/ajax/membuat-comment-ajax#comments Thu, 28 May 2009 18:41:11 +0000 Admin ajax commentHampir dari kita semua pasti telah memiliki account facebook. Pada situs jejaring sosial ini, apapun bisa kita komentari. Setiap kali ada teman ganti status kita bisa langsung beri komentar. Kalau ada teman yang baru ganti foto, kita bisa langsung beri komentar. Justru karena komentar-komentar inilah yang menjadikan kita kembali mengunjungi situs ini.

Menurut perkiraan saya, hampir 80% dari proses apalikasi yang ada pada facebook menggunakan pendekatan ajax. Begitu pula dengan aplikasi komentarnya.

Ketika kita menekan tombol submit setelah menuliskan komentar, tanpa ada proses refresh halaman, komentar kita akan secara otomatis muncul dan berbarengan dengan itu di simpan juga ke dalam database. Bagaimana kah proses ini bisa terjadi? Saya akan menjelaskannya berikut ini.

DEMO | DOWNLOAD

Proses menambahkan komentar

Untuk bisa menampilkan komentar yang baru saja kita tulis tanpa perlu refresh halaman, kita perlu mendapatkan komentar-komentar yang sudah diposting sebelumnya. Untuk mendapatkannya kita menggunakan:

document.getelementbyId(’nama_id’).innerHTML;

Nama_id di sini adalah div yang berada di antara semua komentar yang sudah ada. Contohnya adalah sebagai berikut:

<div id=”CommentList”>
<!– list start –>
<div class=”Comment” id=”1?>
<div class=”SenderName”>Kandar</div>
<div class=”CommentDate”>23, April 2009</div>
<div class=”CommentContent”>Ini komentar dari kandar</div>
</div>
<div class=”Comment” id=”2?>
<div class=”SenderName”>Foo</div>
<div class=”CommentDate”>24, April 2009</div>
<div class=”CommentContent”>hellow world</div>
</div>
<div class=”Comment” id=”3?>
<div class=”SenderName”>Kandar</div>
<div class=”CommentDate”>23, April 2009</div>
<div class=”CommentContent”>Ini komentar dari kandar</div>
</div>
<!–list end–>
</div>

Untuk mendapatkan seluruh isi dimulai dari komentar list start hingga list end kita gunakan method

document.getElementById(’CommentList’).innerHTML;

Untuk mendapatkan komentar yang telah ada kita buat satu variable dengan nama currentContent.

var currentContent = document.getElementById(’CommentList’).innerHTML;

Berikutnya kita membuthkan sebuah variabel yang berfungsi untuk menginisialisasi nilai dari form komentar. Variabel ini bertugas mendapatkan nilai dari input nama dan isi komentar. Variabel ini kita beri nama commentValue.

var commentValue = ‘name=’ + encodeURI( document.getElementById(’name’).value ) + ‘&YourComment=’ + encodeURI( document.getElementById(’YourComment’).value );

Agar variabel ini bisa berfungsi, kita harus membuat sebuh form html. Berikut adalah kodenya:

<form name=”CommentForm” id=”CommentForm” class=”cssform” action=”javascript:postContent()” method=”post” />
<p><label for=”name”>Name:</label> <input type=”text” name=”name” id=”name” />
<p><label for=”YourComment”>Comment:</label> <textarea name=”YourComment” id=”YourComment” /></textarea></p>
<p><input name=”Submit” type=”submit” value=”Submit” /></p>
</form>

Langkah berikutnya adalah membuat suatu fungsi javascript yang bernama postContents yang salah satu isinya adalah variabel commentValue. Kodenya adalah sebagai berikut:

function postContent(){/* Query yang nilainya akan dikirim ke php.*/

var commentValue = ‘name=’ + encodeURI( document.getElementById(’name’).value ) + ‘&YourComment=’ + encodeURI( document.getElementById(’YourComment’).value );

/* File php yang bertugas melalukan proses penyumpanan. */

var send_to = ‘manage-comment.php’;

/*Div id untuk menampilan gambar preloader dan error.*/

var respons = ‘alert’;

postAjax(send_to, commentValue, respons, handleResponComment);

}

Selain variabel commentValue, di dalam fungsi postContent kita mendapatkan sebuah fungsi bernama postAjax. Ini adalah fungsi yang mengirimkan nila variabel commentValue dengan metode Ajax. Untuk itu kita membuthkan suatu fungsi yang bertugas yang menginisialisasi XmlHttpRequest. Berikut adalah fungsingya:

var xmlHttp = createXmlHttpRequest();
var obj = ”;function createXmlHttpRequest() {
var xmlHttp = false;
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”);
} else {
xmlHttp = new XMLHttpRequest();
}
if (!xmlHttp) {
alert(”Ops sorry We found some error!!”);
}
return xmlHttp;
}

Selanjutnya kita membuthkan sebuah fungsi yang bertugas untuk menerima respon setelah terjadi proses XmlHttpRequest. Fungsi ini kita beri nama handleResponComment berikut adalah kodenya:

function handleResponComment(){if (xmlHttp.readyState == 4){

if (xmlHttp.status == 200){

/* Untuk menerima respon balik dari php, kita menggunakan JSON. */

var JSONRespons = eval(’(’ + xmlHttp.responseText + ‘)’);

if(JSONRespons.status == 1){

/*

* Jika penyimpanan data ke dalam database telah berhasil, proses selanjutnya adalah memanggil fungsi commentResponse.
*/

commentResponse(JSONRespons);

}

else{

/*Jika komentar baru sudah muncul, form kita aktifkan kembali dengan memanggil fungsi enableForm() dengan menggunakan event onload pada image.*/

document.getElementById(obj).innerHTML = JSONRespons.message + ‘<img src=”ajax-loading.gif” width=”0? height=”0? onload=”enableForm();”>’;

}

} else {

/* Tampilkan error jika ada.*/

document.getElementById(obj).innerHTML = ‘Error: ‘ + xmlHttp.statusText;

}

}

else{

/*

* Nonaktifkan form sesaat setelah user menekan tombol submit.
* Munculkan juga image preloader.
*/

document.getElementById(obj).innerHTML = ‘<img src=”ajax-loading.gif”>’;

document.getElementById(’name’).disabled=true;

document.getElementById(’YourComment’).disabled=true;

document.getElementById(’submit’).disabled=true;

}

}

untuk mencegah user menekan tombol submit kembali, selama proses berlangsung, form kita nonaktifkan dahulu. Jika semua proses telah selesai kita membuthkan sebuah fungsi yang bertugas untuk kembali mengaktifkan form. Berikut adalah fungsinya:

function enableForm(){/* Mengaktifkan kembali form jika semua proses telah selesai. */

document.getElementById(’name’).disabled=false;

document.getElementById(’YourComment’).disabled=false;

document.getElementById(’submit’).disabled=false;

}

Jika semua proses penyumpanan komentar baru telah berhasil, sekarang waktunya untuk menampilkan komentar yang baru saja di tambahkan oleh user. Berikut adalah fungsingya:

function commentResponse(JSONRespons){/*Melist komentar yang telah ada.*/

var current_contents = document.getElementById(’CommentList’).innerHTML;

/* List komentar yang telah ada ditambah komentar baru. */

var newComment = current_contents + ‘<div class=”Comment” id=”‘ + JSONRespons.message_id + ‘”><div class=”Remove”><a href=”javascript:deleteContent(’ + JSONRespons.message_id + ‘);”>Remove</a></div><div class=”SenderName”><img src=”ajax-loading.gif” width=”0? height=”0? onload=”enableForm();”>’ + JSONRespons.name + ‘</div><div class=”CommentDate”>’ + JSONRespons.date + ‘</div><div class=”CommentContent”>’ + JSONRespons.comment + ‘</div></div>’;

/* Mendapatkan total komentar saat ini*/

var currTotalComm = document.getElementById(’numComment’).innerHTML;

/* Total komentar saat ini ditambah satu.*/

document.getElementById(’numComment’).innerHTML = parseInt(currTotalComm) + parseInt(1);

/*Munculkan semua komentar, termasuk yang baru saja ditambahkan.*/

document.getElementById(’CommentList’).innerHTML = newComment;

/* reset form.*/

document.getElementById(’CommentForm’).reset();

/* Hilangkan image preloader.*/

document.getElementById(’alert’).innerHTML = ”;

}

Proses menghapus komentar

Berikut ini adalah tiga buah fungsi yang bertugas untuk menangani proses penghapusan komentar.

function deleteContent(messageID){var postValue = ‘id=’ + messageID;

var send_to = ‘manage-comment.php’;

var respons = ‘alert’;

input_box = window.confirm(’Are you sure want to delete this comment?’);

if (input_box==true){

postAjax(send_to, postValue, respons, handleDeletedComment);

}

}

function handleDeletedComment(){

if (xmlHttp.readyState == 4){

if (xmlHttp.status == 200){

var JSONRespons = eval(’(’ + xmlHttp.responseText + ‘)’);

if(JSONRespons.status == 1){

deleteNow(JSONRespons.id);

}

else{

document.getElementById(obj).innerHTML = JSONRespons.message;

}

} else {

document.getElementById(obj).innerHTML = ‘Error: ‘ + xmlHttp.statusText;

}

}

}

function deleteNow(id){

var delete_comment = document.getElementById(id);

var currTotalComm = document.getElementById(’numComment’).innerHTML;

document.getElementById(’numComment’).innerHTML = parseInt(currTotalComm) – parseInt(1);

delete_comment.parentNode.removeChild(delete_comment);

enableForm();

document.getElementById(’alert’).innerHTML = ”;

}

Untuk proses yang ditangani php, semuanya ada pada file manage-comment.php.

Demikian panduan Comment Ajax ini dibuat, semoga bisa membantu para teman-teman developer.

]]> http://www.ilmuwebsite.com/ajax/membuat-comment-ajax/feed 8