September 05, 2010

Model Interaksi Aplikasi Web

Pendahuluan


Tulisan ini membahas tentang gambaran umum model interaksi dari aplikasi web. Seperti yang kita ketahui, aplikasi web pada dasarnya terdiri atas dua sisi yaitu sisi klien dan sisi server. Meskipun selalu mempunyai pola klien-server, implementasi model ini mempunyai perkembangan yang menarik untuk diamati karena semakin hari semakin berkembang ke arah interaktivitas yang lebih baik.



Berbagai Model Interaksi Aplikasi Web


Aplikasi web mempunyai siklus request-response. Klien web (web browser) mengirimkan permintaan ke server (request), server menerima request tersebut kemudian memproses request dan mengirimkan hasilnya (response) ke server. Siklus ini bisa kita lihat pada gambar berikut:


Sampai saat ini, ada tiga kategori besar dari aplikasi web berdasarkan pada model interaksi klien-server:
  1. Model Tradisional
  2. Model Ajax
  3. Model Comet
Model Interaksi Tradisional

Model interaksi tradisional mempunyai pola halaman-demi-halaman. Pola ini yang pertama kali digunakan pada saat Tim Berners-Lee mulai mengembangkan HTML dan ingrastrukturnya. Pada model ini, web browser mengirimkan permintaan ke web server, sementara itu web server menerima permintaan dan mengirimkan hasilnya ke web browser. Saat menerima response dari web server, web browser akan me-refresh keseluruhan halaman web. Model ini masih digunakan sampai saat ini. Model ini dianggap "mahal" karena "memaksa" web server untuk mengirimkan keseluruhan halaman yang ditampilkan oleh web browser sehingga memerlukan sumber daya Internet yang relatif besar untuk lalu lintas data. Secara konsepsual, model ini bisa digambarkan untuk aplikasi web yang meminta user untuk melakukan login sebagai berikut:



Pada gambar tersebut, kira-kira logik yang harus dikerjakan oleh pemrogram adalah membuat form HTML dengan action ke script pemroses di server. Saat user mengklik tombol Submit, web browser akan mengirimkan variabel-variabel yang terdapat pada form tersebut dan akan diproses oleh server begitu server menerima variabel tersebut. Setelah diproses, seluruh HTML dikirimkan kembali ke web browser untuk di-render.

Untuk membuat aplikasi web seperti ini, yang diperlukan adalah komponen-komponen berikut:
  1. Web browser yang bisa me-render HTML beserta pendukungnya (CSS,JavaScript, jpg, png, gif, dan lain-lain).
  2. Web server (Apache web server, IIS, yaws, lighttpd, nginx, dan lain-lain)
  3. Jika akan menambahkan pemrosesan business logic di sisi server, bisa ditambahkan server-side scripting language (PHP, JSP, ASP, dan lain-lain tergantung pada compiler/interpreter yang didukung oleh web server).
Model Ajax

Ajax (Asynchronous JavaScript and XML) adalah sekumpulan teknologi untuk membuat aplikasi web lebih interaktif dengan cara menggunakan berbagai teknologi dan spesifikasi yang telah ada untuk mengambil data dari server secara asynchronous dan me-render hasilnya ke display web browser tanpa "mengganggu" bagian lainnya. Konsep inti dari Ajax adalah menetapkan bagian tertentu dari halaman web yang akan diambil dari server, kemudian secara asynchronous mengambil data di latar belakang setelah itu menampilkan hanya pada bagian yang berubah itu saja. Istilah Ajax dikemukakan oleh Jesse James Garret pada essay yang ditulisnya pada tahun 2005 dengan judul "Ajax: A New Approach to Web Applications" (http://www.adaptivepath.com/ideas/essays/archives/000385.php).

Secara konsepsual, model interaksi ini bisa digambarkan sebagai berikut (gambar diambil dari artikel milik Jesse James Garret dan merupakan hak cipta dari yang bersangkutan):


Ajax bekerja dengan menggunakan berbagai teknologi berikut:
  1. HTML/XHTML dan CSS (serta pendukung lainya - gambar PNG, JPG, GIF) untuk lapisan presentasi.
  2. DOM (Document Object Model) merupakan konvensi yang cross-platform dan language-independent untuk merepresentasikan dan berinteraksi dengan obyek dalam HTML, XHTML, dan XML. Antarmuka publik dari DOM ini diimplementasikan dalam bentuk API (Application Programming Interface). JavaScript adalah salah satu contoh bahasa yang mendefinisikan API untuk memanipulasi berbagai elemen DOM ini. Teknologi ini tidak selalu menggunakan JavaScript, tetapi bisa juga menggunakan client-side programming language lainnya seperti JScript (implementasi ECMAScript dari Microsoft) atau VBScript (hanya bisa digunakan di Internet Explorer).
  3. XML untuk format pertukaran data serta XSLT untuk pemrosesnya. Teknologi ini tidak selalu digunakan, banyak diantara pemrogram yang menggunakan JSON sehingga XSLT tidak diperlukan lagi.
  4. XMLHttpRequest, yaitu API yang terdapat pada client-side scripting language (diantaranya JavaScript) yang digunakan untuk mengirimkan request HTTP/S secara langsung ke web server dan me-load response dari web server secara langsung ke dalam script.
  5. JavaScript untuk mem-binding berbagai teknologi tersebut ke dalam suatu interaksi baik dari suatu aplikasi web.
Contoh dari aplikasi yang berbasis Ajax ini bisa dilihat pada berbagai implementasi dari aplikasi web berikut:
  1. Suggestions pada saat mengisikan input text di mesin pencarian Google/Yahoo/dan lain-lain.
  2. Mengisi komentar, mengirimkan message di Facebook dan masih banyak lainnya.
Model Comet

Model ini merupakan model yang mulai banyak digunakan dan merupakan perkembangan terakhir dengan tingkat interaktivitas aplikasi ke user yang paling bagus. Istilah Comet muncul pertama kali pada blog Alex Russel (project leader dari Dojo Toolkit dan presiden dari Dojo Foundation) di http://infrequently.org/2006/03/comet-low-latency-data-for-the-browser/. Comet dikenal juga dengan berbagai istilah berikut:
  1. Ajax Push
  2. Reverse Ajax
  3. Two-way-web
  4. HTTP Streaming
  5. HTTP Server Push
Model ini sebenarnya merupakan sekumpulan teknologi yang memungkinkan suatu aplikasi web untuk mengirimkan data dari server ke browser menggunakan teknologi push. Secara konsepsual, Coment bekerja menggunakan gambaran berikut (gambar diambil dari blog Alex Russel):


Comet bisa diimplementasikan menggunakan dua metode yaitu Streaming dan Long Polling, meskipun penggunaan Long Polling makin banyak digunakan. Contoh dari aplikasi web menggunakan Comet ini antara lain bisa dilihat di Facebook. Pada aplikasi Facebook, notification akan secara otomatis muncul (dalam bentuk angka dengan latar belakang merah) tanpa diminta atau di-request ulang ke server. Server Facebook akan mem-push notification tersebut ke web browser.

Beberapa web server yang sudah mendukung Comet ini antara lain adalah:
  1. Caplin Liberator (http://www.freeliberator.com/ - dibangun menggunakan C)
  2. Cometd (http://cometd.com/ - dibangun menggunakan Python)
  3. ErlyComet (http://erlycomet.googlecode.com/ - Erlang)
  4. Glassfish (http://glassfish.dev.java.net/ - Java)
  5. Jetty (http://jetty.mortbay.org/ - Java)
  6. Lightstreamer (http://lightstreamer.com/ - Java)
  7. Meteor (http://meteorserver.org/ - Perl)
  8. Orbited (http://www.orbited.org/ - Python)
  9. Persevere (http://persevere.sitepen.com/ - Java-JavaScript)
  10. RMDS2Web Server (http://www.migratory.ro/ - Java)
Penutup

Model interaksi tersebut sebenarnya tidak tergantung pada tingkat kekinian tools. Sebagai contoh, menggunakan Jetty yang sudah mendukung Comet tidak serta merta menjadikan aplikasi tersebut sebagai model aplikasi web yang menggunakan interaksi Comet. Dengan demikian, memang harus berhati-hati dalam mendefinisikan hal ini.

Tertarik? Silahkan mencoba membuat aplikasi dengan berbagai macam teknologi dan model interaksi tersebut. Tools sudah banyak tersedia dan banyak pula yang merupakan software bebas.

Selamat belajar dan berkarya :)

0 comments:

Poskan Komentar