pengenalan ajax

www.ibnoe.web.id | i

Ibnu Daqiqil Id

Membangun Rich Web Application

AJAX dan PHP

www.ibnoe.web.id | 2

DAFTAR ISI BAB.1 ............................................................................................................................................................................................ 1

Perkenalan Ajax........................................................................................................................................................................ 1

1.1 Sejarah Aplikasi Web ................................................................................................................................................. 1

1.2 Masa Depan Aplikasi Web Dengan AJAX ......................................................................................................... 2

BAB. 2 ........................................................................................................................................................................................... 5

Konsep AJAX .............................................................................................................................................................................. 5

Dasar‐dasar HTTP Request dan Response ............................................................................................................... 5

Response HTTP.................................................................................................................................................................... 6

XMLHttpRequest ................................................................................................................................................................. 7

BAB 3. XML ............................................................................................................................................................................... 14

Contoh Kasus ...................................................................................................................................................................... 16

BAB 3. JavaScript ................................................................................................................................................................... 17

3.1 EVENT ............................................................................................................................................................................ 17

3.2 EVENT HANDLER ...................................................................................................................................................... 17

3.3 OBJEK DALAM BROWSER ...................................................................................................................................... 18

BAB 4. CASCADING STYLE SHEET .................................................................................................................................. 25

4.1 TIPE‐TIPE CSS RULE ................................................................................................................................................ 25

4.2 PENEMPATAN CSS RULE ....................................................................................................................................... 26

4.3 JENIS JENIS TAG ......................................................................................................................................................... 28

BAB 4. Pengolahan Data XML ...................................................................................................................................... 38

4.1 Pengertian XML .......................................................................................................................................................... 38

Studi Kasus 1. Tabbed Content ........................................................................................................................................ 43

Studi Kasus 2. Image Gallery ............................................................................................................................................. 47


BAB.1 PERKENALAN AJAX

1.1 SEJARAH APLIKASI WEB Seiring dengan perkembangan internet pada awal tahun 1990‐an dan di temukannya HTTP

(Hyper Text Transfer Protokol) yang digunakan untuk mengirimkan data di internet, sejak itulah sejarah aplikasi web dimulai. Pada waktu itu tipe dokumen standar yang digunakan di internet adalah HTML (Hyper Text Markup Language). HTML adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser (Sebuah perangkat lunak yang berfungsi menampilkan dan melakukan interaksi dengan dokumen‐dokumen yang disediakan oleh webserver). HTML tidak dirancang untuk membuat sebuah aplikasi web yang komplek melainkan hanya untuk menampilkan content dan formatnya dalam bentuk teks dan gambar dalam bentuk yang statis.

Aplikasi Web adalah sebuah aplikasi yang menggunakan kemampuan webserver untk memproses data dan mengirimkannya ke user melalui network/internet. Berbeda dengan aplikasi desktop , dimana harus melakukan instalasi di sisi client, untuk dapat menggunakan aplikasi tersebut. Aplikasi web hanya membutuhkan sebuah web browser yang digunakan hanya untuk menampilkan data yang diterima dari server.

Karena keterbatasan diatas akhirnya muncullah beberapa teknologi yang dapat membuat aplikasi web lebih dinamis. Teknologi ini dapat dikelompokkan menjadi dua jenis

1. Teknologi ClientSide. Teknologi ini membuat aplikasi web menjadi dinamis dengan melakukan manipulasi data disisi user. Contoh teknologi ini adalah JavaScript, Java Applet, Flash dan lain‐lain. Keuntungan yang ditawarkan teknologi ini adalah mempermudah dan memberikan “keinteraktifan” pada web user interface.

2. Teknologi ServerSide. Teknologi ini menawarkan ke‐interaktifan data dari sisi server, karena semua data di manipulasi di sisi server.Client hanya menerima output dari server dalam bentuk HTML biasa. Contoh teknologi ini adalah CGI, PHP, ASP, JSP, ColdFusion dan lain lain.

Untuk mendapatkan aplikasi web yang baik biasanya programmer menggunakan kedua teknologi diatas, supaya dapat menghasilkan sebuah aplikasi web yang powerful, karena kedua teknologi tersebut menawarkan keuntungan yang sangat berbeda antara satu dan lainnya.

Keuntungan aplikasi web :

• Aplikasi web lebih mudah dan murah untuk digunakan. Dengan aplikasi web, kita dapat mengurangi biaya untuk mengimplemntasi/menginstall aplikasi disisi client.

• Aplikasi web lebih mudah dan murah untuk di upgrade. Biaya perawatan dan upgrade lebih murah karena hanya mengubah di sisi server.


• Aplikasi web lebih fleksibel. Dengan aplikasi web, kita tidak perlu memikirkan masalah sistem operasi, karena secara default sebuah sistem operasi sudah dilengkapi web browser.

1.2 MASA DEPAN APLIKASI WEB DENGAN AJAX AJAX yang dimaksud disini bukanlah nama club sepakbola yang berasal dari Amsterdam,

belanda atau pun nama pahlawan dalam sejarah perang Trojan, tetapi AJAX disini adalah singkatan dari Asynchronous JavaScript and XML. Pada intinya ajax itu merupakan gabungan beberapa teknologi yang bertujuan untuk menghindari page reload. Dengan menghindari page reload, kita dapat menghindari paradigma clickandwait serta memberikan sebuah fitur yang cukup kompleks pada website seperti validasi data secara realtime, drag n drop dan fitur‐fitur lain yang belum dimiliki web biasa.

Dengan AJAX, suatu aplikasi web dapat mengambil data kemudian diolah di client melalui request asynchronous HTTP yang diinisiasi oleh Javascript, sehingga dapat mengupdate bagian‐bagian tertentu dari web tanpa harus memanggil keseluruhan halaman web. Request ini dapat dieksekusi dalam beberapa cara dan beberapa format transmisi data. Dikombinasikannya cara pengambilan data remote dengan interaktivitas dari Document Object Model (DOM) telah menghasilkan generasi terbaru dari aplikasi web yang mengebrak aturan‐aturan tradisional tentang apa yang dapat terjadi di dalam web.

AJAX memberikan keseimbangan lebih baik antara fungsionalitas client dengan fungsionalitas server ketika mengeksekusi aksi yang diminta oleh user. Hingga saat ini, fungsionalitas di sisi client dan server dipandang sebagai fungsionalitas yang terpisah yang bekerja hanya satu dalam suatu waktu untuk merespon aksi dari user. Dengan adanya AJAX, dihasilkan solusi untuk menyeimbangkan loading web antara client dan server dengan cara memperkenankan komunikasi secara background ketika user bekerja dengan page saat itu. Gambar di bawah ini adalah visualisasi dari apa yang terjadi ketika halaman web dengan AJAX diminta oleh user:

Gambar 1. Proses bekerjanya AJAX

AJAX dibangun dari beberapa teknologi yang telah disediakan oleh web browser modern, seperti Mozilla Firefox, Internet Explorer, atau Opera, sehingga client tidak perlu menginstall modul extra untuk menjalankan website AJAX. AJAX ini dikonstruksi dari:


• JavaScript adalah unsur terpenting dari AJAX, yang dapat membangun fungsionalitas client site. Dalam fungsi‐fungsi JavaScript akan banyak digunakan Document Object Model (DOM) untuk memanipulasi bagian dari halaman HTML.

• Objek XMLHTTPRequest memperkenankan JavaScript untuk mengakses server secara asynchronous, sehingga user dapat melanjutkan pekerjaan, sementara waktu proses dilakukan di background. Mengakses server singkatnya adalah membuat request HTTP sederhana untuk suatu file atau script yang terletak di server. Request HTTP mudah dibuat dan tidak menyebabkan permasalahan yang berhubungan dengan firewall.

• Teknologi server‐side diperlukan untuk menangani request yang datang dari client JavaScript.

Dalam modul ini digunakan PHP untuk menjalankan bagian dari proses yang ada di sisi server. Untuk komunikasi client‐server diperlukan jalan untuk melewatkan data dan memahami data tersebut. Melewatkan data adalah bagian yang mudah. Script client yang mengakses server (menggunakan object XMLHTTPRequest) dapat mengirimkan data name‐value menggunakan GET dan POST. Sangat mudah untuk membaca nilai ini di script server apapun.

Script server kemudian mengirim balik respose melalui HTTP, tetapi tidak seperti website umumnya, response dibuat dengan format yang dapat dengan mudah di‐parsing oleh kode JavaScript yang ada di client. Format yang disarankan adalah XML, karena mempunyai kelebihan yaitu secara luas didukung dan banyak library yang membuat dokumen XML mudah untuk dimanipulasi.

Berikut ini adalah beberapa keuntungan dari aplikasi web berbasis AJAX:

• Memungkinkan untuk membuat website dan aplikasi web yang lebih baik dan lebih responsif.

• Kepopularitasannya mendorong perkembangan pengkodean yang membantu developer untuk menghindarkan pembuatan ulang dalam melakukan pekerjaan yang sudah umum.

• Mendayagunakan teknologi yang telah ada. • Mendayagunakan skill developer yang telah ada. • Fitur‐fitur dari AJAX menyatu dengan baik dengan fungsionalitas yang telah disediakan oleh

browser web.

Skenario umum dimana AJAX dapat digunakan antara lain:

• Validasi form server‐side yang dilakukan dengan segera, sangat berguna di kondisi yang tidak memungkinkan pengiriman keseluruhan data ke client yang dibutuhkan untuk melakukan validasi ketika halaman di‐load di awal mula.

• Membuat chat online sederhana yang tidak membutuhkan library eksternal seperti Java Runtime Machine atau Flash

• Membuat aplikasi dengan fungsionalitas seperti Google Suggest. • Mendayagunakan teknologi yang telah ada secara lebih efektif. Misalnya pembuatan grafik

secara real time menggunakan Scalable Vector Graphics (SVG), atau membuat list drag‐and‐drop sederhana.


• Pembuatan data grid yang responsif yang mengupdate database server‐side secara on‐the‐fly.

• Membuat aplikasi yang membutuhkan update secara real time dari berbagai sumber eksternal, misalnya RSS.

Beberapa kemungkinan permasalahan dengan AJAX antara lain:

• Karena alamat halaman tidak berubah ketika proses bekerja, maka tidak mudah untuk membuat bookmark suatu halaman yang berbasis AJAX.

• Search Engine mungkin tidak dapat meng‐indexing seluruh bagian dari situs dengan aplikasi AJAX.

• Tombol Back di browser, tidak memberikan hasil yang sama dengan aplikasi web klasik, karena seluruh aksi terjadi di halaman yang sama.

• JavaScript dapat di‐disable di sisi client, sehingga aplikasi AJAX tidak berfungsi.

Untuk mengenal teknik AJAX akan lebih baik untuk mengenal Hypertext Transmission Protocol (HTTP) terlebih dahulu. HTTP adalah protokol untuk mengirimkan halaman web, image, dan file lain melalui Internet dari dan ke web.

HTTP terdiri dari dua bagian: request dan response. Ketika mengetikkan URL di browser web, browser akan membuat dan mengirimkan request. Request ini berisi URL yang diketikkan dan beberapa informasi tentang browser itu sendiri. Ketika server menerima request ini, maka response akan dikirimkan. Response berisi informasi sesuai request. Kemudian browser menginterpretasikan response dan menampilkan halaman web (atau resource lain).


BAB. 2 KONSEP AJAX

Sebelum mulai mengimplementasikan AJAX, ada beberapa komponen yang harus diketahui diantaranya adalah request dan respon HTTP, Karena konsepnya akan dipakai pada implementasi ajax.

DASAR‐DASAR HTTP REQUEST DAN RESPONSE Untuk mengetahui bagaimana menggabungkan semua elemen Ajax, penting bagi kita untuk

mengerti bagaimana proses sebuah halaman web di request (diminta) dan diresponse (terima).

‐ Request HTTP

Untuk meminta sebuah halaman atau data tertentu disisi server, browser harus mengirimkan sebuah request (permintaan) melalui protokol HTTP. Format dari request HTTP sebagai berikut:

Di request HTTP, baris pertama mengindikasikan tipe dari request, resource yang akan diakses, dan versi HTTP yang dgunakan. Kemudian bagian headers, mengindikasikan informasi tambahan yang mungkin akan digunakan di server. Setelah headers yaitu baris kosong, yang kemudian dapat ditambahkan data tambahan (disebut body).

Ada banyak tipe request yang didefinisikan dalam HTTP, tapi ada dua yang umum digunakan developer AJAX, yaitu GET dan POST.

‐ Request GET

Ketika mengetikkan URL di browser web, browser mengirimkan request GET ke server berdasarkan URL tersebut, yang kemudian memberitahukan server untuk mendapatkan resource dan mengirimkan balik. Contoh dari request GET untuk http://www.brawijaya.ac.id/ajax/ mungkin seperti berikut:

Untuk mengirimkan parameter untuk request GET dapat ditambahkan informasi yang disebut query string setelah URL. Formatnya seperti berikut:

URL ? name1=value1&name2=value2&..&nameN=valueN

<request‐line><headers> <blank line> [<request‐body>]

GET /images/ HTTP/1.1 Host: www.brawijaya.ac.id User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/20050225 Firefox/1.0.1 Connection: Keep‐Alive


Contohnya

‐ Request POST

Pada request POST ditambahkan data tambahan yang dikirimkan ke server yang terletak di bagian body request. Misalnya, ketika kita mengisi suatu form isian, maka data dikirimkan melalui request POST.

Contohnya:

RESPONSE HTTP Respon HTTP dapat dikatakan output atau balasan dari server. Setelah proses request

dilakukan, server akan memberikan balasan atau response melalui protokol http juga. Format response HTTP mirip dengan request, yaitu:

GET /ajax/?name=SeminarAjax HTTP/1.1 Host: www.brawijaya.ac.id User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/20050225 Firefox/1.0.1 Connection: Keep‐Alive

POST / HTTP/1.1 Host: www.brawijaya.ac.id User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/20050225 Firefox/1.0.1 Content-Type: application/x-www-form-urlencoded Content-Length: 40 Connection: Keep-Alive name=SeminarAjax&tahun=2007

<status-line> <headers> <blank line> [<response‐body>]

Sederhananya, Metode Get adalah metode pengiriman datanya, dimana datanya diletakkan dipada URLnya contoh www.ibnoe.web.id/index.php?data=1. Kelemahan metode ini adalah terdapatnya batasan besar data yang dikirimkan pada URL

Sederhananya, Metode Get adalah metode pengiriman datanya, dimana datanya diletakkan dipada URLnya contoh www.ibnoe.web.id/index.php?data=1

Perbedaan yang nyata terletak pada baris pertama yang mengandung informasi status. Contoh dari response HTTP sebagai berikut:

Status umum yang digunakan antara lain:

• 200 (OK) : Request yang kita minta dibalas dengan baik oleh server • 304 (NOT MODIFIED) : Tidak ada perubahan request yang diberikan sejak request terakhir,

hal ini dapat disebabkan karena mekanisme caching oleh browser • 401 (UNAUTHORIZED): client tidak berhak untuk mengakses halaman ini, hal ini

disebabkan karena request membutuhkan username dan password dan user tidak memberikannya

• 403 (FORBIDDEN): client tidak berhak untuk mengakses halaman ini, hal ini disebabkan karena request membutuhkan username dan password dan user memiliki username tau password yang tidak valid

• 404 (NOT FOUND): request urlnya tidak ditemukan.

Status ini sangat diperlukan ketikan mengecek event pada AJAX

XMLHTTPREQUEST XmlHttpRequest adalah sebuah object javascript yang digunakan untuk mengakses web

server secara asingkron, jadi user dapat terus melakukan aktifitasnya di sebuah halaman web tanpa me‐refresh halaman tersebut, karena proses requestnya dilakukan di background. Mengakses web server artinya adalah melakukan sebuah request biasa ke sebuah halaman di webserver yang berisi script (server side script).

Pada proses request ini, tentunya ada data yang akan kita lewatkan untuk diproses di sisi server. Metode request yang dapat kita gunakan adalah GET atau POST. Tentunya akan sangat mudah bagi server untuk membaca data yang di kirimkan oleh client dengan menggunakan metode tersebut.

Setelah data tersebut terkirim, otomatis server akan mengirimkan respon balik atas request yang telah dilakukan. Berbeda dengan respon web server biasa, biasanya hasil respon tersebut dalam sebuah format yang mudah di parsing oleh javascript di sisi client. Format yang dianjurkan

HTTP/1.1 200 OK Date: Sat, 31 Dec 2005 23:59:59 GMT Content-Type: text/html;charset=ISO-8859-1 Content-Length: 122 <html> <head> <title>Seminar AJax</title> </head> <body>  </body> </html>


adalah XML, karena format ini sudah di dukung banyak system dan ada banyak library yang dapat digunakan untuk memanipulasi dokumen XML tersebut. Selain XML, ada sebuah format yang cukup terkenal yaitu JavaScript Object Notation (JSON).

Pada implementasinya, untuk membuat sebuah object XMLHttp cukup dengan meninstance class XMLHttpRequest(), tetapi pada browser IE, microsoft mengimplentasikannya pada sebuah ActiveX Control, jadi kita harus menggunakan ActiveX tersebut untuk mengimplmentasikan ajax pada IE. Contoh :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

var xmlHttp = createXmlHttpRequestObject(); function createXmlHttpRequestObject(){ var xmlHttp; try { xmlHttp = new XMLHttpRequest(); } catch(e) { //asumsi IE 6 Tertinggi var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"); for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++){ try{ xmlHttp = new ActiveXObject(XmlHttpVersions[i]); } catch (e) {} } } if (!xmlHttp) alert("Error creating the XMLHttpRequest object."); else return xmlHttp; }

Setelah object XMLHttp dibuat, kita dapat membuat HTTP request mengunakan javascript

dengan memanggil fungsi open() yang merupakan member dari class XMLhttp. Fungsi ini mempunyai 3 parameter diantaranya:

• Type Request: Sebuah string yang menunjukkan dengan tipe request apa koneksiyang akan dilakukan.

• URL dimana kita akan mengirim request tersebut. • Async: Sebuah value bertipe boolean yang menunjukkan apakah request akan diminta

secara asingkron

Parameter terakhir Async sangat penting karena ia mengontrol javascript bagaimana cara menangani request. Ketika ia di set True maka request akan dilakukan secara asingkon, artinya


javascript akan tetap menjalankan kode salanjutnya tanpa menunggu response dari server, Tetapi jika di set false maka browser akan menunggu sampai aja respon sebelum melanjutkan eksekusi code. Ini berarti jika respon membutuhkan waktu yang banyak, maka user tidak dapat berinteraksi dengan browser sampai request selesai.

Selanjutnya setelah object XMLhttp terbentuk, kita perlu mendefinisikan sebuah event handler onreadystatechange. Objek XMLHttp mempunyai sebuah properti dengan nama readyState yang berisi informasi tentang status response dari server. Ada 5 jenis status respondari server diantaranya:

• 0 (Uninitialized) : Objek XML Http sudah dibuat tetapi fungsi open belum dipanggil. • 1 (Loading) : Fungsi open telah dipanggil tetapi request belum dikirim • 2 (Loaded) : Request telah dikirim • 3 (Interactive) : Sebagian response telah di terima • 4 (Complete) : Semua data telah diterima

Setiap ada perubahan value pada property readystate maka eventhandler

onreadystatechange akan di panggil. Adapun method/properties pada XMLHTTP Object adalah

Method/Property Keterangan

Abort () Membatalkan request yang telah dikiri

getAllResponseHeaders () Mendapatkan header respon sebagai string

Open ( “method”, ”URL”[,asyncflag [, “username” [, “pasword”]]])

Inisialiasi parameter request

Send (content) Melakukan HTTP Request

setRequestHeader(“Label”, “value”)

Set pasangan label dan valuenya pada header request

Onreadystatechange Digunakan untuk mengeset fungsi callback yang menghandle perubahan request state

readyState Memberikan informasi status request

responseText Mengembalikan respon server dalam format string

responseXML Mengembalikan respon server dalam format XML

Status Mengembalikan kode status request

statusText Mengembalikan pesan status request


Berikut ini adalah contoh sederhana halaman web menggunakan ajax 1. Membuat halaman web antarmuka (index.html) Yang dilakukan pertama kali adalah membuat file HTML yang nantinya akan digunakan sebagai halaman web AJAX. Dalam contoh ini, yang digunakan adalah file index.html. Index.html 1 2 3 4 5 6 7 8 9 10 11 12 13

<!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> <title>Bab 1 - Pengenalan Ajax</title> <script type="text/javascript" src="HelloAjax.js"></script> </head> <body onload='process()'> Nama Anda: <input type="text" id="myName" /> <div id="divMessage" /> </body> </html>

Dalam halaman ini, file JavaScript yang digunakan sebagai AJAX adalah script HelloAjax.js. Dalam body halaman ini, didefinisikan event onload='process(), sehingga ketika halaman ini di‐load maka akan selalu memanggil fungsi process() yang terletak di file HelloAjax.js tersebut. 2. Membuat clientside script JavaScript untuk AJAX dengan objek XMLHttp (HelloAjax.js) Langkah pertama untuk menggunakan objek XMLHttp, adalah membuatnya terlebih dahulu. Karena Microsoft mengimplementasikan dengan kontrol ActiveX, maka harus digunakan kelas ActiveXObject di JavaScript, dengan melewatkan signature kontrol XMLHttp:

var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")

Ada juga beberapa versi baru yang dikeluarkan sesuai dari library MSXML yang dikeluarkan dengan kestabilan dan kecepatan yang makin baik. Beberapa signature lain tersebut adalah:

• MSXML2.XMLHttp • MSXML2.XMLHttp.3.0 • MSXML2.XMLHttp.4.0 • MSXML2.XMLHttp.5.0


Untuk provider lain digunakan objek yang dideklarasikan sebagai berikut:

var xmlHttp = new XMLHttpRequest()

Contoh lengkapnya untuk membuat objek XMLHttp adalah sebagai berikut:

HelloAjax.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 4344 45 46 47 48 49

////////////////////////////////////////////////////////////// // $Hello Ajax.Js // // File untuk memanggil helloAjax.php ///////////////////////////////////////////////////////////// var xmlHttp = createXmlHttpRequestObject(); // Create XMLHttpRequest function createXmlHttpRequestObject() { var xmlHttp; if(window.ActiveXObject){ try{ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { xmlHttp = false; } } // jika mozilla atau yang lain else { try{ xmlHttp = new XMLHttpRequest(); }catch (e){ xmlHttp = false; } } if (!xmlHttp) alert("Error creating the XMLHttpRequest object."); else return xmlHttp; } //Memanggil file HelloAjax.php Secara Asingkron function process(){ if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0){ name = encodeURIComponent(document.getElementById("myName").value); xmlHttp.open("GET", "HelloAjax.php?name=" + name, true); xmlHttp.onreadystatechange = handleServerResponse; xmlHttp.send(null); } else setTimeout('process()', 1000); } //di eksekusi otomati jika pesan diterima function handleServerResponse() { ///jika rewuest complete if (xmlHttp.readyState == 4){ if (xmlHttp.status == 200) { // extract XML yang diterima xmlResponse = xmlHttp.responseXML;


50 51 52 53 54 55 56 57 58 5960

xmlDocumentElement = xmlResponse.documentElement; helloMessage = xmlDocumentElement.firstChild.data; document.getElementById("divMessage").innerHTML = '<i>' + helloMessage + '</i>'; setTimeout('process()', 1000); } else { alert("ERROR: " + xmlHttp.statusText); } } }

Setelah objek XMLHttp dibuat, maka dipanggil method open() untuk inisialisasi objek dengan 3 parameter:

• Tipe Request : string yang mengindikasikan tipe dari request, umumnya GET atau POST. • URL : string yang berisi URL yang akan dikirimkan. • Async : nilai boolean yang mengindikasikan apakah request dibuat secara

asynchronous atau tidak. Contoh untuk membuat request asynchronous GET untuk HelloAjax.php?name= adalah sebagai berikut:

xmlHttp.open("GET", "HelloAjax.php?name=" + name, true);

Kemudian definisikan event handler onreadystatechange. Objek XMLHttp mempunyai properti readyState yang berubah ketika request dikirim dan response diterima.

Setiap kali properti ini berubah, maka event onreadystatechange akan dipanggil. Karena perbedaan implementasi browser, maka nilai readyState yang cross‐browser adalah 0, 1, dan 4.

3. Membuat serverside script dengan PHP (HelloAjax.php) Script PHP inilah yang diminta oleh request XMLHttp sebagai response dalam bentuk format XML yang nanti di‐parsing oleh client JavaScript. HelloAjax.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14

<?php // Output Dalam bentuk XML header('Content-Type: text/xml'); // generate XML header echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>'; echo '<response>'; $name = $_GET['name']; $userNames = array('ANDI', 'SURYA', 'NANA', 'LALA', 'HAKI','PUTRA'); if (in_array(strtoupper($name), $userNames)) echo 'Halo.. ' . htmlentities($name) . '!'; else if (trim($name) == '') echo 'hmm... sapa ya!'; else


15 16

echo htmlentities($name) . ', gak kenal tuh!'; echo '</response>'; ?>

Hasil dari tampilan frontpage web HelloAJAX dapat dilihat dari gambar 1.1 berikut. Dalam contoh AJAX sederhana ini, ketika user diminta untuk mengetikkan nama user, server selalu mengirim response. Ketika user sedang mengetikkan, server dipanggil secara asynchronous, pada selang waktu tertentu (dalam contoh 1000 ms), sehingga menjelaskan kenapa tidak diperlukannya tombol untuk memberitahukan bahwa kita telah selesai mengetik dan mengirimkannya ke server. Untuk beberapa nama tertentu yang diketikkan, pesan yang ditampilkan pada halaman akan berbeda. Pesan yang berbeda tersebut terletak di element <div> dengan id=divMessage, jadi ketika response datang kemudian diparsing, maka pesan yang didapat dari response akan ditampilkan di element ini. Sehingga untuk menampilkan suatu bagian dari halaman web yang

bersifat dinamis diperlukan element, dalam contoh ini <div>, yang digunakan oleh JavaScript untuk dapat dimanipulasi.

Gambar 1.1. Tampilan HelloAJAX

Untuk dapat membuat aplikasi ajax yang lebih kompleks, minimal kita harus mengerti beberapa komponen, diantarannya XMLdan Javascipt. Silakan baca chapter selanjutnya untuk memperdalam tentang javascript dan XML


BAB 3. XML

Pada bab ini akan dibahas mengenai XML. Pada konsep ajax, XML digunakan sebagai format data yang dikirimkan. XML dapat disusun sehingga memiliki struktur tertentu tetapi tujuannya bukan me‐markup data.

Dokumen XML terdiri dari satuan penyimpanan yang disebut entitas, yang memuat baik data terurai maupun data tak terurai. Data terurai terdiri dari karakter‐karakter, dimana sebagian membentuk data karakter, dan sebagian membentuk markup. Markup mengkodekan deskripsi tata letak penyimpanan dokumen dan struktur logika. XML menyediakan mekanisme untuk menentukan batasan‐batasan suatu tata letak penyimpanan dan struktur logika.

XML dikembangkan oleh Kelompok Kerja XML (sebelumnya dikenal dengan nama SGML Editorial Review Board) yang dibentuk di bawah dukungan World Wide Web Consortium (W3C) pada tahun 1996. Kelompok ini dipimpin oleh Jon Bosak dari Sun Microsystems dengan peran serta aktif dari XML Special Interest Group (sebelumnya dikenal dengan nama Kelompok Kerja SGML) yang juga dikelola oleh W3C. Keanggotaan Kelompok Kerja XML diberikan pada lampiran. Dan Connolly berperan sebagai penghubung Pokja dengan W3C.

Tujuan desain XML adalah:

‐ XML harus dapat digunakan secara langsung di Internet. ‐ XML harus mendukung secara luas berbagai aplikasi. ‐ XML harus kompatibel dengan SGML. ‐ Program yang memproses dokumen XML harus mudah dibuat. ‐ Jumlah fitur opsional pada XML harus dibuat seminimum mungkin, idealnya nol. ‐ Dokumen XML harus jelas dan mudah dipahami manusia. ‐ Desain XML harus disiapkan secepatnya. ‐ Desain XML harus formal dan singkat. ‐ Dokumen XML harus mudah dibuat.

Keringkasan suatu markup XML tidak dipentingkan. (http://www.xml.or.id, 2006)

Adapun komponen‐komponen yang dimiliki oleh dokumen XML adalah sebagai berikut:

‐ Deklarasi Deklarasi pada sebuah dokumen xml dibutuhkan. Deklarasi ini sama untuk semua dokumen XML dan diletakkan pada bagian atas dokumen XML. Contoh:

<?xml version="1.0"?>

Deklarasi diatas berarti bahwa ini adalah dokumen XML dan dokumen ini mengikuti rekomendasi W3C


‐ Elemen Elemen adalah bagian dari dokumen XML yang berisi data. Elemen XML disebut juga node. Sebuah dokumen XML harus memiliki satu node sebagai elemen teratas. Contoh :

<?xml version="1.0"?> <ORDERS> <ORDER> <DATETIME>1/4/2000 9:32 AM</DATETIME> <ID>33849</ID> <CUSTOMER>Steve Farben</CUSTOMER> <TOTALAMOUNT>3456.92</TOTALAMOUNT> </ORDER> <ORDER> <DATETIME>1/4/2000 9:32 AM</DATETIME> <ID>33856</ID> <CUSTOMER>Jane Colson</CUSTOMER> <TOTALAMOUNT>401.19</TOTALAMOUNT> </ORDER> <ORDER> <DATETIME>1/4/2000 9:32 AM</DATETIME> <ID>33872</ID> <CUSTOMER>United Disc</CUSTOMER> <TOTALAMOUNT>74.28</TOTALAMOUNT> </ORDER> </ORDERS>

Sebuah elemen dapat berisi data atau elemen lainnya. Contoh order, datetime, id.

‐ Atribut

Atribut adalah bagian dari elemen yang berisi data tentang elemen tersebut. Contoh atribut:

<?xml version="1.0"?> <ORDERS> <ORDER id="33849" custid="406"> <DATETIME>1/4/2000 9:32 AM</DATETIME> <TOTALAMOUNT>3456.92</TOTALAMOUNT> </ORDER> </ORDERS>

Atribut ditulis sebagai pasangan nama/nilai atribut yang dipisahkan tanda sama dengan (=). Nilai atribut harus dalam bentuk text yang dituliskan diantara dua tanda petik satu atau dua (single/double quote).


CONTOH KASUS Sebuah perpustakaan memiliki banyak buku. Masing‐masing buku memiliki data registrasi perpustakaan.

Dari kasus diatas jelas bahwa root node kita adalah perpustakaan. jika di represntasikan maka

maka dapat dibentuk sebuah dokumen XML seperti ini:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <perpustakaan> <buku id=”1”> <judul>Pemogramman PHP</judul> <pengarang>Rico</pengarang> </buku> <buku id=”2”> <judul>Pemogramman ASP</judul> <pengarang>Budi</pengarang> </buku> <buku id=”3”> <judul>Pemogramman Javascrip</judul> <pengarang>Tapai</pengarang> </buku> </perpustakaan >

Perpustakaan

Buku

Judul Pengarang

Buku

Judul Pengarang

pengenalan ajax

Documents