Ajax: Makalah Seminar (senin 050109)

METODE ASYNCHRONOUS JAVASCRIPT AND XML (AJAX) Makalah Seminar

DIAJUKANKAN UNTUK MEMENUHI TUGAS MATA KULIAH SEMINAR PENDIDIKAN ILMU KOMPUTER

OLEH : ASEP SUFYAN TSAURI NIM 056798

PROGRAM STUDI PENDIDIKAN ILMU KOMPUTER FAKULTAS PENDIDIKAN MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS PENDIDIKAN INDONESIA 2008

LEMBAR PENGESAHAN

MAKALAH SEMINAR “METODE ASYNCHRONOUS JAVASRIPT AND XML”

Dosen Pembimbing,

Yudi Wibisono, M.T.

ABSTRAK Pekembangan teknologi internet mendorong manusia untuk beralih dari aplikasi desktop menjadi menggunakan aplikasi berbasis web, hal ini merupakan bukti dari pergeseran kultur masyarakat menjadi masyarakat yang membutuhkan informasi yang lebih cepat. Namun, aplikasi berbasis web dengan metode tradisional belum sepenuhnya dapat menggantikan aplikasi desktop, dengan alasan kecepatan akses, interaktifitas dan kemudahan pemakaiannya. Asynchronous Javascript and XML (AJAX) merupakan suatu metode pemrograman web yang menjadi jawaban dari permasalahan “jurang pemisah” antara aplikasi desktop dan aplikasi berbasis web selama ini. Dengan AJAX aplikasi web dapat dijadikan seolah-olah menjadi aplikasi desktop. Hal ini disebabkan karena dengan metode AJAX, pertukaran data antara klien dan server hanya dilakukan pada data yang diperlukan saja. Metode AJAX bukan merupakan teknologi baru, namun merupakan kesatuan dari teknologi dan standar pemrograman web yang sudah ada sebelumnya, diantaranya xHTML, DOM, Javascript dan XmlHttpRequest. Ide utama AJAX adalah memindahkan sebagian besar interaksi ke sisi klien, dengan berbasiskan Javascript dan request HTTP. Kata kunci : AJAX, Aplikasi Berbasis Web, XmlHttpRequest

BAB I PENDAHULUAN

A. LATAR BELAKANG Kemajuan teknologi internet medorong manusia beralih untuk menggunakan aplikasi berbasis web, hal ini pun membawa pengaruh terhadap perkembangan teknikteknik dalam membangun halaman web. Awalnya, web bersifat statis yang artinya web tidak dapat berubah ketika mengakses pada waktu yang berbeda. Kemudian, muncul web dinamis yang dapat menampilkan isi yang berbeda ketika mengakses pada waktu yang berbeda pula. Perkembangan web dinamis membawa kemajuan yang besar terhadap teknik pemrograman web. Namun terkait dengan kebutuhan yang terus berkembang pula, pengguna menginginkan aplikasi yang lebih interaktif, lebih cepat dan mudah digunakan seperti aplikasi desktop yang biasa mereka gunakan, sehingga diperlukan suatu metode baru dalam pemrograman web untuk memecahkan permasalahan tersebut dengan suatu metode baru, salah satu diantaranya Asynchronous Javascript and XML disingkat AJAX. AJAX adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web lebih interaktif dan dinamis. Tujuannya adalah memindahkan sebagian besar interaksi pada komputer server ke komputer klien, melakukan pertukaran data dengan server di belakang layar, sehingga web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan. Hasil dari makalah ini berupa pemaparan detail mengenai Asynchronous Javascript and XML sebagai teknik pemrograman web, sehingga dapat meningkatkan interaktifitas dan kecepatan akses dari produk yang dihasilkannya. Makalah ini memberi kontribusi pengetahuan berupa metode pemrograman web, selain itu pula ini juga memberikan kontribusi praktis bahwa penerapan metode ini dapat dijadikan arahan dalam proses pengembangan web dinamis yang lebih interaktif, cepat dan mudah.

BAB II ASYNCHRONOUS JAVASCRIPT AND XML (AJAX) A. ASYNCHRONOUS JAVASCRIPT AND XML (AJAX) 1. DEFINISI AJAX AJAX diperkenalkan oleh Jesse James Garret dari Adaptive Path pada tahun 2005. Ia mendeskripsikan bagaimana mengembangkan web yang berbeda dengan metode tradisional. Ia memublikasikan sebuah artikel berjudul “AJAX : A New Approach to Web Applications”. Pada artikelnya, Garret yakin bahwa aplikasi web dapat menutup jurang pemisah antara web dengan aplikasi desktop selama ini. (Jesse James Garrett, 2005) mendefinisikan AJAX bukan sebagai teknologi baru dalam pemrograman web, tetapi merupakan gabungan teknologi pemrograman web yang sudah ada sebelumnya, yaitu XHTML dan CSS, DOM, XML, XMLHttpRequest dan Javascript. Pengembangan web secara tradisional bekerja secara synchronously (langsung), antara aplikasi dan komputer server. Setiap kali melakukan link atau melakukan operasi “submit” pada form. Caranya, browser mengirim data ke server, server merespon dan seluruh halaman di-refresh. Aplikasi web yang bekerja dengan AJAX bekerja secara asynchronously (tidak langsung), yang berarti mengirim dan menerima data dari pengguna ke server tanpa perlu memanggil kembali seluruh halaman, melainkan hanya melakukan pergantian pada bagian web yang hendak diubah. Penggunaan AJAX mulai populer ketika digunakan oleh Google pada tahun 2005. AJAX bukanlah bahasa pemrograman baru, tetapi merupakan metode baru penggunaan standar yang telah ada. Dengan AJAX aplikasi web menjadi lebih baik, yaitu menjadi lebih cepat dan menambah user-friendly serta lebih interaktif. Dengan menggunakan Javascript, AJAX dapat mengirimkan dan menerima data antara web server dan web browser. Teknik yang dimiliki AJAX akan bergantian

bertukar data dan me-reload ulang seluruh halaman. Hal ini merupakan perbedaan mendasar model AJAX dengan model tradisional. Melalui AJAX, Javascript dapat dikomunikasikan secara langsung dengan server menggunakan objek Javasript XMLHttpRequest. Objek Javascript ini dapat metrade data sebuah web server tanpa harus me-reload halaman web. AJAX mengguanakan asynchronous data transfer (pada HTTP request) antara browser dan web server, yang memperbolehkan halaman web memanggil bit yang kecil atau seluruh informasi dari server. Teknik AJAX membuat aplikasi web menjadi kecil, cepat dan lebih user-friendly.

2. MODEL TRADISIONAL Model tradisional disini maksudnya adalah model pemrograman web yang sering digunakan tanpa AJAX. Pertama, browser membuat sebuah HTTP request dikirim ke server. HTML + CSS Interface data HTTP Datastores, User Request Web Server backend

http(s) Browser

processing, legacy transport systems

Client

Server-side Systems

Gambar 1 : Arsitektur Model Tradisional Pemrograman Web

Pada model ini, server mengirimkan respon berisi seluruh halaman termasuk header, logo, navigasi, dan lain-lain. Ketika mengklik Next maka akan menampilkan halaman baru lagi (artinya header, logo, footer dikirim ulang) dan seterusnya akan mengirimkan data halaman baru lagi disetiap diminta request dari pengguna. Halaman seperti ini tidak masalah ketika data yang ditampilkan tidak memerlukan respon cepat. Namun, akan menjadi masalah jika pengguna menginginkan respon yang cepat, misalnya ketika dipilih drop-down tertentu maka data yang ditampilkan berubah menurut nilai dari drop-down.

3. MODEL AJAX AJAX berkomunikasi dengan server tanpa harus memanggil kembali semua halaman. Konsep ini berbeda dengan aplikasi web sistem tradisional. Dalam model AJAX, aksi dari sisi klien dibagi menjadi dua bagian, yaitu layer user-interface dan layer AJAX. HTML +Ajax CSS data Javascript HTTP XML request Data call Web Datastores, User and Interface /Engine XML backend, server

http(s) Browser

processing, legacy transport systems

Client

Server-side Systems Gambar 2 : Arsitektur Model AJAX

Ketika pengguna mengklik sebuah link atau mengirimkan sebuah form maka input tersebut akan ditangani oleh layer AJAX dan diinteraksikan dengan server, kemudian meng-update pengguna interface (UI). Jadi, dalam AJAX, interaksi UI secara logika terpisah dengan interaksi jaringan. Pendekatan yang digunakan AJAX adalah bagaimana mengirimkan jumlah data yang kecil dari dan ke server atas request dari pengguna. Model aplikasi web tradisional di mana browser akan merespon sendiri atas inisialisasi request, memproses request dari web server. Dalam AJAX terdapat layer yang diberi nam “AJAX Engine” untuk menangani komunikasi. “AJAX Engine” adalah sebuah Objek Javascript atau fungsi yang dipanggil ketika informasi dibutuhkan dari server. Proses yang dilakukan mesin AJAX adalah menerima respon dari server, melakukan parsing data dan melakukan sedikit perubahan untuk keperluan menampilkan informasi. Jika dibanding dengan model aplikasi web tradisional maka pengguna interface diubah lebih cepat dan pengguna mampu melakukan pekerjaannya dengan cepat. Beberapa hal penting untuk menggambarkan AJAX : ➢ Layer AJAX tidak memerlukan komunikasi dengan server (contohnya validasi form karena dapat ditangani sepenuhnya oleh sisi klien) ➢ Oleh karena request antar layer AJAX dan server berupa bagian kecil dari informasi

(tidak komplit satu halaman) maka sering digunakan untuk interaksi dengan basis data sehingga waktu render dan waktu pengiriman menjadi pendek ➢ Layer UI secara langsung bergantung pada respon server sehingga pengguna dapat

melanjutkan interaksi dengan sebuah halaman selama aktivitas dikerjakan di background. Berarti, untuk beberapa interaksi, waktu tunggu pengguna hampir tidak ada. ➢ Komunikasi antar halaman dan server tidak selama memerlukan AJAX untuk mengubah perubahan UI. Contoh, beberapa aplikasi menggunakan AJAX untuk notifikasi dengan halaman, tetapi tidak melakukan apapun terhadap respon dari server.

1. TEKNOLOGI DI BALIK AJAX Teknologi AJAX di dalamnya meliputi beberapa komponen, yaitu : ➢ HTML (HyperText Markup Language) digunakan dalam membuat halaman web

dan dokumen-dokumen lain yang dapat ditampilkan dalam browser. HTML merupakan standar internasional dengan spesifikasi yang ditetapkan oleh World Wide Web Consortium (W3C). Versi terakhir saat tulisan ini dibuat adalah HTML 4.01. ➢ XHTML (Extensible HyperText Markup Language), adalah bahasa markup

sebagaimana HTML, tetapi dengan gaya bahasa lebih baik. XHTML digunakan untuk membuat halaman web dan dokumen lain-lain yang dapat ditampilkan dalam sebuah browser. XHTML merupakan standar W3C. Versi terakhir saat tulisan ini dibuat adalah XHTML 2.0. ➢ CSS (Cascading Style Sheets ) adalah sebuah mekanisme sederhana untuk

memberikan style (seperti font, warna, jarak spasi, dll) kepada dokumen web yang ditulis dalam HTML atau XML (termasuk beberapa variasi bahasa XML seperti XHTML dan SVG). ➢ Javascript adalah bahasa scripting kecil, ringan, berorientasi-objek dan lintas

platform. Javascript tidak dapat berjalan dengan baik sebagai bahasa mandiri, melainkan dirancang untuk ditanamkan pada produk. ➢ DOM (Document Object Model) adalah sebuah API (Application Program

Interface) untuk dokumen HTML dan XML. DOM menyediakan representasi dokumen secara terstruktur, dimungkinkan untuk merubah isi dan presentasi visual. Pada dasarnya, DOM menghubungkan halaman web dengan script atau bahasa pemprograman. ➢ XML (Extensible Markup Language) adalah bahasa markup untuk keperluan

umum yang disarankan oleh W3C untuk membuat dokumen markup keperluan khusus. Keperluan utama XML adalah untuk pertukaran data antar sistem yang beraneka ragam. ➢ XSLT (Extensible Stylesheet Language Transformations ) adalah sebuah bahasa

berbasis-XML untuk transformasi dokumen XML. Walaupun proses merujuk pada

transformasi, dokumen asli tidak berubah melainkan dokumen XML baru dibuat dengan basis isi dokumen yang sudah ada. XSLT biasanya digunakan untuk merubah skema XML ke halaman web atau dokumen PDF. ➢ Objek XMLHttpRequest untuk melakukan pertukaran data secara asinkron dengan

peladen (server) web. Beberapa kerangka-kerja Ahax dan dalam beberapa situasi, objek IFrame digunakan selain objek XMLHttpRequest untuk melakukan pertukaran data dengan peladen web. ➢ JSON (Javascript Object Notation) yaitu format pertukaran data komputer yang

ringan dan mudah. Keuntungan JSON dibandingkan dengan XML adalah pada proses

penterjemahan

data

menggunakan

Javascript.

Javascript

dapat

menterjemahkan JSON menggunakan built-in procedure eval(). Dalam kenyataannya, semua teknologi dapat digunakan untuk AJAX, tetapi hanya tiga yang dibutuhkan, yaitu HTML/XHTML, DOM dan Javascript. XHTML diperlukan untuk menampilkan informasi, sedangkan DOM diperlukan untuk halaman XHTML tanpa di-reload ulang. Javascript dibutuhkan untuk komunikasi client-server, sementara manipulasi DOM untuk me-update halaman web. Teknologi lain digunakan agar AJAX lebih bagus, tetapi agar lebih powerfull maka AJAX dapat digabungkan dengan aplikasi pemrograman di sisi server seperti PHP, JSP atau .NET.

1. TEKNIK PENERAPAN AJAX Teknik AJAX memungkinkan pengembang web membuat halaman agar pengguna tidak lagi menunggu untuk melakukan aksi selanjutnya (seperti terjadi dalam model tradisional), yang berarti memungkinkan komunikasi ke server setiap waktu. AJAX memiliki beberapa teknik untuk berkomunikasi. Masing-masing teknik memiliki keuntungan dan kelemahan sehingga sangat penting untuk memilih teknik mana yang harus digunakan. Teknik-teknik tersebut diantaranya adalah Hidden Frame atau iFrame, HTTP Request, Cookie. Dari ketiga teknik tersebut yang akan dibahas adalah teknik HTTP request. a. Penjelasan Teknik HTTP Request

Dalam Javascript standar, jika akan memperoleh informasi dari basis data atau file dalam server, atau mengirimkan informasi pengguna ke server akan menggunakan form HTML dengan metode GET atau POST. Pengguna mengklik tombol “Submit” untuk mengirimkan atau memperoleh informasi, menunggu respon dari server, kemudian halaman baru akan di-load sebagai hasil. Metode HTTP Request memanfaatkan ActiveX Object (IE) atau Objek Javascript XMLHttpRequest (Mozilla/Firefox, Safari, Opera). Objek ini akan melakukan post-back ke server dan menerima respon balik berupa data (bukan halaman). Data yang didapat dari server kemudian diolah di klien untuk ditampilkan ke halaman. Oleh karena server mengembalikan halaman baru dengan pengguna lebih dahulu mengirimkan input maka aplikasi web akan berjalan lambat. Dengan AJAX, Javascript akan mengomunikasikan secara langsung ke web server menggunakan Objek Javascript XMLHttpRequest. HTTP Request, sebuah halaman web dapat meminta request atau memperoleh respon dari web server tanpa me-reload halaman web. Pengguna masih di halaman yang sama. Dan script akan bekerja di background sehingga pengguna tidak melihat kerjanya.

Gambar 3 : Teknik HTTP Request

XMLHttpRequest HTML + CSS Javascript HTTP XML User Datastore Request Data Interface Browser 5XMLHttpRequest 4 3 2 1 callback() WebServer-side Server Data call Client

Systems

Data Exchange

XMLHttpRequest adalah metode yang banyak digunakan AJAX untuk berkomunikasi karena memiliki dua fitur yang unik. Pertama adalah mempunyai kemampuan me-load isi data baru tanpa mengubah seluruhnya dan ini merupakan hal yang berbeda dibanding dengan cara konvensional (model tradisional). Fitur kedua adalah memperbolehkan Javascript melakukan pemanggilan secara asynchronous.

b. Contoh Penggunaan Teknik HTTP Request

Gambar 4 : Fungsi GetXmlHttpObject

Keterangan : Fungsi GetXmlHttpObject, berfungsi untuk membuat objek XmlHttpRequest di browser (dengan beberapa tipe browser), yang selanjutnya akan objek ini akan digunakan untuk fungsi lain.

Gambar 5 : Fungsi ShowMember

Keterangan : Fungsi showMember, berfungsi untuk me-update tabel yang berisi daftar member, namun dengan memanfaatkan fungsi GetXmlHttpObject diatas, sehingga proses update tabel bekerja di belakang layar. Jadi proses antara Ajax Layer dengan server terdapat pada fungsi ini, yaitu dengan memanggil proses di member.php.

C.

CONTOH PENGGUNAAN AJAX DALAM BEBERAPA PRODUK Pada saat ini sudah sangat banyak pemanfaatan AJAX dalam berbagai

aplikasi berbasis web, karena AJAX adalah pendorong utama lahirnya generasi web 2.0. Beberapa produk aplikasi yang sangat memberikan gambaran bahwa aplikasi tersebut menggunakan AJAX. Beberapa contoh tersebut diantaranya adalah : 1. Google Docs, adalah aplikasi yang dikembangkan oleh Google Inc. untuk

melakukan operasi pembuatan, pengubahan sampai dengan pengemasan dokumen secara online. 2. Facebook, merupakan aplikasi web yang berupa aplikasi social networking

(Jejaring sosial). 3. Meebo, adalah aplikasi berbasis web untuk digunakan dalam aktifitas chatting

yang biasanya menggunakan aplikasi berbasis desktop seperti Yahoo!Messenger dan Pidgin. Selain produk yang telah menjadi sebuah aplikasi siap pakai, saat ini pula telah banyak berkembang produk yang merupakan tools yang dapat digunakan sebagai pengembangan aplikasi berbasis AJAX, produk-produk ini biasanya disebut dengan istilah Framework. Adapun beberapa framework yang populer saat ini diantaranya : 1. Google Web Toolkit (GWT) 2. Prototype 3. JQuery 4. MooTools.

1. KELEMAHAN AJAX AJAX merupakan metode baru dalam pengembangan aplikasi berbasis web selain memiliki karakteristik yang unggul seperti diungkapkan sebelumnya, namun AJAX tidaklah sempurna, tetap masih memiliki kelemahan-kelemahan. Diantaranya adalah : 1. AJAX tidak Search Engine Friendly, hal ini disebabkan karena produk yang

berbasis AJAX cenderung menggunakannya untuk content real-time update, sedangkan Search Engine (mesin pencari), akan kesulitan me-crawl content seperti itu. Maka, untuk web yang membutuhkan crawling dari Search Engine disarankan untuk tetap menggunakan model tradisional. 2. Kompatibilitas. AJAX tidak didukung oleh beberapa browser, khususnya

browser-browser lama, sehingga aplikasi berbasis AJAX tidak dapat dijalankan dalam browser-browser lama tersebut. 3. Menguras Bandwidth. Karena beberapa aplikasi AJAX melakukan auto-update,

maka meskipun aplikasi tidak digunakan dalam jangka waktu yang lama tetap mengurangi bandwidth. 4. Keamanan data. Karena prinsip AJAX adalah memindahkan sebagian besar

proses di server ke klien, hal ini menimbulkan celah baru dalam keamanan data, sehingga perlu diputuskan untuk beberapa proses penting untuk tetap menggunakan metode tradisional.

BAB III PENUTUP A. KESIMPULAN Asynchronous Javascript and XML (AJAX) bukan merupakan teknologi baru, tetapi merupakan kesatuan dari teknologi dan standar pemrograman web yang telah ada sebelumnya. AJAX diciptakan untuk menjadikan aplikasi berbasis web dapat menjadi lebih interaktif, cepat dan mudah digunakan. AJAX

dibandingkan

dengan

model

tradisional

memiliki

beberapa

perbedaan, diantaranya dengan adanya Ajax Engine yang menjadi perantara antara client dengan server, sehingga tidak seluruh permintaan harus diproses di sisi server. Selain itu, Ajax engine juga melakukan pertukaran data dengan server dilakukan di belakang layar, sehingga client dapat melakukan permintaan lain selama permintaan sebelumnya masih diproses di server. Namun, AJAX bukan tanpa kekurangan. AJAX memiliki beberapa keterbatasan, diantaranya tidak search engine friendly, kompatibilitas (tidak didukung oleh beberapa browser versi lama), menguras bandwidth, dan alasan keamanan data.

DAFTAR PUSTAKA Crane, Dave. Ajax in Action. Manning. 2006. Holdener, Anthony T. Ajax: The Definitive Guide. O’Reilly. 2008. "Ajax: A New Approach to Web Applications". http://www.adaptivepath.com/ideas/essays/archives/000385.php http://id.wikipedia.org/wiki/AJAX http://www.masykur.web.id/category/AJAX.aspx http://www.w3schools.com/Ajax/