gunawantw’s blog

Di posting sebelumnya, kita sudah pelajari cara membuat aplikasi ajax sederhana dengan menggunakan domino designer. Untuk contoh lainnya silahkan download di url di bawah ini.

http://www.nsftools.com/tips/NotesTips.htm#notessuggest

Letakan di domino server anda, dan jangan lupa di sign menggunakan server id / user id yang berhak menjalankan agent.

Aplikasi ini akan me-lookup dari notes address book dan menyarankan pilihan daftar contact yang tersedia. agak mirip-mirip dengan feature type-ahead lah!

Kalau cuma begini, kurang seru ah. Sekarang coba lihat url di bawah ini

http://code.google.com/apis/ajaxfeeds/documentation/blogpreview.html

Di sini contoh script ajax dari google untuk mengambil RSS.

Nah tantangannya adalah, dari dua aplikasi di atas, coba kita akan menggabungkan-nya. Kita akan mengambil salah satu nama yang tercantum dari Notes Addres book dan akan mencari nama itu di http://blogsearch.google.com

FYI, http://blogsearch.google.com dapat menghasilkan search result dalam bentuk XML.

Hasil akhir dari kombinasi (mash-up) dua aplikasi di atas sebagai berikut:

Berikut ini adalah perubahan yang di lakukan di aplikasi notessugest.nsf:

tambahkan formula di bawah ini di HTML Head Content di form WebNabLookup.
“<script type=\”text/javascript\” src=\”http://www.google.com/jsapi?key=GOOGLE_API_KEY\”></script>”

Rubah value dari google api key di atas sesuai dengan nama domain server yang anda gunakan. silahkan daftar di sini
http://code.google.com/apis/ajaxfeeds/signup.html

buat subform seperti gambar di bawah ini:

Masukan subform di atas ke dalam form “WebNabLookup”

Yang terakhir, sisipkan fungsi javascript di bawah ini di library “xmlHTTPLookup”

function searchGoogleBlog() {
 document.all['blog'].style.display = ”
 document.all['blog'].innerText = “Loading ….”
 strURL = “http://blogsearch.google.com/blogsearch_feeds?hl=en&q=”
 strURL = strURL + document.forms[0].NameLookup.value.replace(/ /g, “+”)
 strURL= strURL + “&ie=utf-8&num=10&output=rss”
 document.forms[0].urltextbox.value = strURL
 alert(strURL)
 executeSearch();
}

dan sisipkan fungsi untuk memanggil searchGoogleBlog() di fungsi selectResult(), masih di library yang sama.

Selesai!

Berikut ini kita akan membuat aplikasi AJAX yang sangat-sangat sederhana dengan menggunakan domino designer. Karena sederhananya di harapkan kita bisa mengerti konsep dasar dari pemrograman AJAX.

Yang akan kita buat kali ini adalah, kita akan membuat satu form dengan dua field, di mana satu field akan kita beri nama “username” dan field yang lain kita beri nama field “time”. field “time” akan terisi otomatis bila pengguna (user) mengetik-kan sesuatu di field “username”.

Selain itu kita juga akan membuat suatu page untuk memuat informasi jam. simple.

Oke, silahkan buat satu form dengan dua field “username” dan “time”.

Sudah?

Sisipkan fungsi “ajaxFunction()” di field “username” di event onKeyUp. Ketikan isi lengkap dari fungsi “ajaxFunction()” di jsheader. Lihat gambar di bawah ini.

Sekali lagi saya ingatkan untuk menyisipkan fungsi “ajaxFunction()” di field “username” di event onKeyUp. Ini tidak tampak pada gambar di atas.

Mari kita kupas maksud dari ajaxFunction() ini.

Di sini kita akan membuat suatu object xmlHTTPRequest yang akan melakukan request ke web server.
Dalam contoh ini request yang akan di lakukan adalah request untuk membuka page “time” yang mana outputnya berupa informasi jam pada saat ini dan nilai-nya akan di transfer ke field “time”.

Perhatikan pada baris xmlHttp.readyState == 4, maksudnya adalah ketika request itu telah selesai di lakukan (completed) maka response dari request tadi akan di salin kembali di field “time”.

Langkah selanjutnya buat page dan berikan name “time”. Isi dari page ini adalah suatu <computed value> dengan formulanya “@text(@time(@now))”.

Saat ini aplikasi sudah siap untuk di jalankan. Bila semuanya berjalan dengan mulus, maka akan tampil kurang lebih seperti gambar di bawah ini.

Ketikkan sesuatu di kolom username, kolom time akan terisi otomatis setiap key yang di input di kolom username.

AJAX? Asynchronous JavaScript And XML ???

Pertama kali mengenal istilah ini, kira-kira di sekitar tahun 2004-2005, saya agak bingung dan kurang tertarik untuk mendalami lebih dalam. Apa pentingnya AJAX dengan peran saya sebagai domino developer pada waktu itu.

Lama kelamaan, saya mulai menyadari bahwa teknik web programming (yang saya dapat dari internet dan dari teman2 seperjuangan)  yang saya lakukan di aplikasi domino mirip2 dengan teknik AJAX, dan itu telah mulai saya lakukan di sekitar tahun 98-an.

Saya banyak belajar teknik ini dari teman2 dari LPS (Lotus Profesinal Services) Arvino Mudjiarto dan James Budiono. Contoh sederhana yang saya pelajari dari mereka adalah, lookup Domino Address book melalui Web. Tekniknya adalah membuka suatu window, di mana window tersebut akan menjalankan lotus notes agent. Hasil output dari agent tersebut adalah berupa variabel Javascript (saat itu belum ada XML). Teknik lainnya adalah teknik show / hide suatu div atau span di halaman web. isi dari div / span ini akan di isi melalui notes agent sesuai dengan kebutuhan.

Tapi, teknik ini sekarang mungkin tidak cocok, karena kebanyakan browser dewasa ini by default tidak mengizinkan popup window. Lagipula output data yang di hasilkan tidak standard, suka-sukanya programmer memberikan nama js variable dan juga yang paling penting, kalau mau share data dengan aplikasi non domino juga agak susah.

Belakangan, saya banyak menggunakan teknik iframe window untuk menggantikan popup window dalam melakukan query ke backend database melalui notes agent.  

Oke, lanjut ke AJAX. paragraf ini adalah hasil terjemahan bebas dari situs w3schools 

AJAX bukanlah suatu jenis bahasa pemrograman baru, melainkan teknik untuk membuat aplikasi berbasiskan web secara interaktif, lebih baik, dan lebih cepat

Untuk mengerti AJAX, di harapkan anda telah memahami dengan baik mengenai HTML dan Javascript. Karena AJAX berdasarkan paling sedikit JavaScript dan HTTP request.

Dengan AJAX, javascript dapat berkomunikasi secara langsung dengan server, menggunakan Javascript object XMLHttpRequest. Dengan object ini Javascript dapat melakukan pertukaran data dengan web server tanpa perlu melakukan reload page secara keseluruhan.

AJAX menggunakan transfer data secara asinkron (HTTP request) antara browser dan web server, memungkinkan halaman web untuk meminta suatu informasi kecil yang diperlukan dari server tanpa perlu melakukan pengambilan informasi secara keseluruhan halaman.

Untuk lebih jelasnya, pada kesempatan berikutnya kita akan membuat suatu form sederhana dengan menggunakan IDE tools favorit kita, domino designer