Dokumen - SKB103302 - STMIK EL RAHMA berbagai model 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 klienserver:
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 languageindependent 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 lainlain.
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.
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 klienserver:
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 languageindependent 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 lainlain.
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.