Archive for Belajar AJAX dan PHP

Mengirim Data ke Web Server

Ajax & PHP : Mengirim Data Ke Web Server

Post By : Ellyx Christian
Post Date : Fri, Feb 19th 2010, 21:47
Category : Tutorial AJAX

Tutorial Ajax & PHP : Mengirim Data Ke Web Server akan menjelaskan bagaimana mengirim data ke web server menggunakan Ajax (XMLHttpRequest). Pada website yang tidak menggunakan ajax, untuk mengirim data ke server, web browser akan membuat request ke document di server dengan method POST dan setidaknya akan mengirim header Content-type: application/x-www-form-urlencoded. Jika menggunakan Ajax maka anda akan mengunakan method open() dari XMLHttpRequest untuk membuka koneksi ke server. Menggunakan method setRequestHeader()  untuk menentukan header yang akan dikirim web server, dan yang terakhir menggunakan method send() untuk mengirim request ke server dan sekaligus mengirim data ke server.

Untuk mengirim data ke web server menggunakan Ajax (XMLHttpRequest), anda dapat menggunakan method POST. Sebagai contoh jika anda memiliki Sebuah HTML form seperti di bawah.

First name : Last name :

Code Form :

<form id="form1" name="form1" method="post" action="handle_data.php">
First name :
<input name="first_name" type="text" id="first_name" />
<p>Last name :
<input name="last_name" type="text" id="last_name" />
<input type="button" name="Button" value="Submit" />
</p>
</form>

Pada website yang tidak menggunakan Ajax, web browser akan mengirim nilai-nilai dari element form di atas dan mengirim header “Content-Type: application/x-www-form-urlencoded” ke web server. Jika menggunakan Ajax anda dapat menggunakan script di bawah untuk mengirim nilai-nilai dari element form di atas dan juga mengirim header ke server.

//membentuk XMLHttpRequest menggunakan function 
//yang telah dibuat pada tutorial sebelumnya 
var xmlhttp=getXMLHttpRequet(); 
function sendData(handlePage,ElementID){ 
//mengambil nilai dari element form 
var first_name=document.getElementById('first_name').value; 
var last_name=document.getElementById('last_name').value; 
var obj=document.getElementById(ElementID); 
obj.innerHTML="Sending Data Please wait...."; 
if(xmlhttp.readyState==4 || xmlttp.readyState==0){
  xmlhttp.open("POST",handlePage,true);  
  xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
  xmlhttp.onreadystatechange=function(){ 
  if(xmlhttp.readyState==4 && xmlhttp.status==200){
    obj.innerHTML=xmlhttp.responseText; 
  } 
} 
var dataToSend="first_name="+first_name; 
dataToSend+="&last_name="+last_name; 
xmlhttp.send(dataToSend); } }

function di atas mengambil dua buah parameter, yaitu : handlePage dan ElamentID. handlePage adalah document atau file di web server yang akan meng-handle data yang dikirim, ElementID adalah ID element HTML tempat menampilkan response dari web server. Pertama yang dilakukan oleh function di atas adalah mengambil nilai dari element-element form, kemudian menampilkan text “Sending Data Please wait….“, membuka koneksi ke web server menggunakan method POST. Selanjutnya men-set header yang akan dikirim ke server dengan method setRequestHeader, mengirim nilai-nilai dari element form dengan method send, dan yang terakhir menampilkan response dari web server pada saat readyState=4 (complete) dan status=200(OK).

Contoh Ajax Mengirim Data ke Web Server

Untuk lebih memperjelas dan memperdalam pemahaman anda, anda akan diajak berlatih mengirim data ke web server dengan Ajax dan menggunakan function yang telah dijelaskan di atas. Latihan ini akan dijelaskan menggunakan video.

 

Download Video

Download Tutorial

Daftar Rujukan

Babin lee. 2007. Beginning Ajax with PHP: From Novice to Professional. United State : Apress.
Ullman Larry. 2008. Building a Web Site with Ajax: Visual QuickProject Guide. United State: Peachpit Press

Leave a Comment

Dasar-dasar AJAX

Ajax & PHP : Dasar Dasar Ajax

Post By : Ellyx Christian
Post Date : Thu, Feb 18th 2010, 20:41
Category : Tutorial AJAX

Tutorial Ajax & PHP : Dasar Dasar Ajax akan menjelaskan pengertian ajax, konsep dasar HTTP request & HTTP response, membentuk XmlHttpRequest Object, Method dan properti Ajax, cara mengirim request ke server dengan ajax serta contoh dasar penggunaan Ajax

Pengertian Ajax

AJAX adalah singkatan dari Asynchronous JavaScript and XML. Pada dasarnya ajax menggunakan XMLHttpRequest object Javascript untuk membuat request ke server secara asynchronous atau tanpa melakukan refresh halaman website. Yang dibutuhkan agar ajax dapat berjalan adalah javascript harus di enable pada browser yang digunakan. Walaupun javascript merupakan dasar dari Ajax, dimana javascript sangat susah pada implementasi dan maintenance, tetapi Ajax memiliki struktur pemrograman yang lebih mudah untuk dipahami. Anda tinggal membuat object XMLHttpRequest dan memastikan object tersebut terbentuk dengan benar. Kemudian menentukan kemana hasilnya akan ditampilkan atau dikirim.

Ajax dapat digunakan untuk melakukan banyak hal, seperti loading halaman HTML tanpa refresh halaman web, validasi form dan banyak lagi yang bisa dilakukan dengan ajax. Di tutorial ini Ajax akan dipadukan dengan bahasa pemrograman PHP yang sangat powerfull. Ajax bertugas melakukan request ke web server dan PHP yang berada di server akan melakukan apa yang diminta oleh Ajax, mengirim hasilnya ke web browser dan Ajax menampilkannya kepada user. Karena Ajax dibangun dengan javascript maka untuk dapat mengikuti tutorial ini dengan baik anda perlu memiliki dasar-dasar javascript. Selain itu anda juga perlu memiliki dasar-dasar pemrograman PHP. Jika anda belum memiliki dasar-dasar PHP anda dapat memperoleh tutorialnya di website ini. Sedangkan untuk tutorial javascript anda bisa memperolehnya dari berbagai sumber yang ada di internet.

Konsep HTTP Request dan Response

Untuk mengetahui bagaimana konsep dari Ajax anda perlu mengetahui bagaimana sebuah web browser memproses sebuah request dan menerima sebuah response dari web server. Standar yang digunakan web browser pada saat ini adalah HTTP (HyperText Transfer Protocol). HTTP digunakan oleh web browser untuk mengirim request dari website ke web server dan kemudian menerima response dari web server. HTTP request berkerja seperti email, memberitahukan kapan request dikirim, berisi header yang memberitahu apa yang harus dilakukan server dan bagaimana menghandle request tersebut.

Sekali sebuah request diterima, web server kemudian menentukan response apa yang akan diberikan. Terdapat banyak kode response, tabel dibawah memperlihatkan kode yang umumnya.

Tabel 1.
Common  Response Code
Sumber : Beginning Ajax with PHP From Novice to Professional, Lee Babin, 2007, hal :12.

Terdapat banyak request method yang ada, tetapi yang paling sering digunakan adalah GET dan POST. Sekarang anda telah memiliki bayangan bagaimana request dikirim ke web server dan kemudian web server mengirim response dari request tersebut ke web browser, akan mudah bagi anda untuk memahami bagaimana XMLHttpRequest berkerja. Keduanya sangat mirip, tetapi XMLHttpRequest dioperasikan di belakang layar dan tanpa memerlukan refresh halaman.

XMLHttpRequest Object

Ajax bisa dibilang adalah sebuah konsep untuk menerangkan interaksi antara client-side XMLHttpRequest Object dengan script server-side. Untuk membuat request ke web server menggunakan Ajax, anda harus membentuk Object XMLHttpRequest terlebih dahulu. Untuk membentuk object XMLHttpRequest berbeda pada setiap browser. Pada microsoft internet explorer object dibentuk sebagai ActiveX control, sedang pada browser seperti Firefox dan safari menggunakan basic javascript object.

XMLHttpRequest Methods

Setelah XMLHttpRequest terbentuk, terdapat beberapa method atau fungsi yang bisa digunakan. Method-method tersebut dijelaskan di bawah ini.

  1. abort()
    Method abort() digunakan untuk menghentikan request yang sedang berjalan. Method ini sangat berguna jika anda memperhitungkan lama waktu koneksi, misalnya jika waktu koneksi melebihi rentang waktu tertentu anda bisa menggunakan method abort() untuk menghentikan request secara prematur.
  2. getAllResponseHeader()
    Anda dapat menggunakan method ini untuk memperoleh semua informasi dari semua header HTTP yang sedang diberikan oleh server. Misalnya set sebuah header akan terlihat seperti :

    Date: Sun, 13 Nov 2005 22:53:06 GMT

    Server: Apache/2.0.53 (Win32) PHP/5.0.3
    X-Powered-By: PHP/5.0.3
    Content-Length: 527
    Keep-Alive: timeout=15, max=98
    Connection: Keep-Alive
    Content-Type: text/html
  3. getResponseHeader(“headername”)
    Method ini dapat digunakan untuk memperoleh isi dari begian sebuah header, sebagai contoh untuk memperoleh ukuran dari document yang sedang direquest, anda dapat menggunakan getResponseHeader(“Content-Length”).
  4. open (“method”,”URL”,”async”,”username”,”pswd”)
    Method ini merupakan method yang paling penting dan berguna pada XMLHttpRequest. Method ini digunakan untuk membuka koneksi dengan document yang ada di server. Dengan method ini anda memberitahukan kepada web server method apa yang digunakan untuk membuka file (“GET” atau “POST”). Sebagai catatan tidak semua argument pada method ini harus diisi, tergantung dengan situasi dan kebutuhan.
  5. setRequestHeader(“label”,”value”)
    Method ini dapat digunakan untuk menentukan header pada saat melakukan request. Sebagai catatan, method ini hanya bisa dipanggil setelah method open digunakan dan sebelum method send dipanggil.
  6. send(“content”)
    method ini digunakan untuk mengirim request ke server. Jika request dikirim secara asynchronous, maka response akan datang secepatnya. Jika tidak, response akan datang setelah response diterima oleh web browser. Parameter pada method ini tidak harus diisi, parameter ini sangat berguna untuk memproses HTML form dan memberikan anda untuk mengirim nilai dari element form ke web server.

XMLHttpRequest Properties

XMLHttpRequest memiliki properti yang dapat digunakan dan dimanipulasi, seperti dijelaskan di bawah.

  1. onreadystatechange
    Properti ini adalah sebuah event handler yang memberikan anda untuk men-trigger sebuah blok kode atau function, ketika state (sampai dimana proses request berlangsung pada waktu tertentu) berubah. Contoh, misalnya anda ingin menampilkan pesan (alert) pada saat state telah berubah menjadi complete state.
  2. readyState
    berisi informasi state dari object XMLHttpRequest pada saat properti ini digunakan (0: uninitialized, 1: loading,
    2: loaded, 3: interactive, 4: complete). Properti ini bisa digunakan untuk menangani kesalahan, memanggil blok kode atau function untuk setiap readyState. Misalnya, untuk menampilkan text “loading” pada saat readyState sama dengan 1 (fase loading) dan memanggil sebuah function pada saat readyState=4 (complete).
  3. responseText
    Properti ini akan dihasilkan pada saat request telah berhasil/complete. Misalnya anda melakukan request terhadap sebuah document di server, respon dari server akan disimpan pada properti ini. Biasanya properti ini digunakan untuk mengganti properti innerHTML dari sebuah element HTML.
  4. responseXML
    Properti ini sama dengan responseText, tetapi respon yang dihasilkan dalam format XML.
  5. status
    Properti ini memberitahukan response code yang dihasilkan dari direquest yang dilakukan. Response code yang umum terlihat pada Tabel 1. Misalkan, jika file yang direquest ke server tidak ditemukan maka status akan berisi 404.
  6. statusText
    Properti ini merupakan textual dari properti status, misal status sama dengan 404 maka statusText akan sama dengan Not Found.

Membentuk Object XMLHttpRequest

Untuk membentuk sebuah object XMLHttpRequest anda dapat menggunakan kode berikut ini :

	
function getXMLHttpRequest(){
//jika user menggunak IE
	if(window.ActiveXObject){
	    return new ActiveXObject("Microsoft.XMLHTTP"); 
	}else if(window.XMLHttpRequest){
	//user menggunakan browser selain IE
	    return new XMLHttpRequest();
	}else {alert("Status : can not create XMLHttpRequest Object");} 
}

Mengirim Request ke Server

Setelah selesai membuat object XMLHttpRequest anda dapat mengirim request ke server. Saat mengirim request ke server anda harus menentukan request method yang digunakan, apakah akan menggunakan GET atau POST. Jika anda ingin menampilkan informasi dari server maka anda akan menggunakan method GET, sedangkan jika anda mengirim informasi ke server maka gunakan method POST. Pada tutorial ini ada akan belajar menggunakan method GET (POST akan dijelaskan pada tutorial selanjunya). Untuk mengirim request ke server menggunakan method GET, anda dapat menggunakan kode di bawah.

var xmlhttp=getXMLHttpRequet();
function sendRequest(pageUrl,elementID){
	var obj=document.getElementById(elementID);
	var obj.innerHTML='loading... please wait'; 
	if(xmlhttp.readyState==4 || xmlhttp.readyState==0){
	    xmlhttp.open("GET",pageUrl,true);
	    xmlhttp.onreadystatechange=function(){
	        if(xmlhttp.readyState==4 && xmlhttp.status==200){
	            obj.innerHTML=xmlhttp.responseText;
	        } 
	    }
	xmlhttp.send(null); 
	} 
}

function di atas mengambil parameter HTML element ID dan URL dari file yang ada di server. Pertama yang dilakukan adalah mengganti properti innerHTML dari HTML element, untuk menampilkan text “loading…please wait”. Kemudian membuka koneksi ke server dengan method open(). Jika properti readyState sama dengan 4 (complete) dan status sama dengan 200 (OK) maka tampilkan response dari server dengan mengganti properti innerHTML dari element HTML dengan properti responseText dari object XMLHttpRequest.

Contoh Dasar Ajax

Setelah berhasil membuat object XMLHttpRequest dan mengirim request server, sekarang anda akan belajar membuat website sederhana yang berisi 3 halaman :Home, About Us dan Contact US dengan menggunakan Ajax. Contoh ini akan dijelaskan menggunakan video.

 

Download Video

Download contoh

Demo

Di tutorial Ajax & PHP : Dasar Dasar Ajax anda telah belajar pengertian ajax, konsep dasar HTTP request & HTTP response, membentuk XmlHttpRequest Object, Method dan properti Ajax serta cara mengirim request ke server dengan ajax.

Daftar Rujukan

Babin lee. 2007. Beginning Ajax with PHP: From Novice to Professional. United State : Apress.
Ullman Larry. 2008. Building a Web Site with Ajax: Visual QuickProject Guide. United State: Peachpit Press

Leave a Comment

Follow

Get every new post delivered to your Inbox.