IMPLEMENTASI METODE AJAX DALAM SEBUAH APLIKASI SITUS WEB DI INTERNET

1 Pendahuluan

Informasi adalah suatu sumber daya yang dibutuhkan dalam mengelola bisnis pada zaman yang modern ini perkembangan ilmu pengetahuan dan teknologi semakin maju pesat. Manusia berlomba-lomba untuk dapat menguasai ilmu pengetahuan dan teknologi. Manusia dapat melakukan suatu pekerjaan dengan mudah, hampir semua pekerjaan dapat dibantu dengan teknologi.

Menjamurnya penggunaan Internet benar-benar mengubah kehidupan kita semua. Tempat dan jarak yang dulu memisahkan sekarang makin tidak terasa dampaknya. Kita mudah berhubungan dengan orang-orang negara lain, yang belum pernah kita kunjungi sebelumnya, melalui media email, chat room, web-cam, dan sebagainya. Pengguna Internet sendiri selalu meningkat terutama dikota-kota besar, Internet sudah menjadi kebutuhan hidup sehari-hari (Empy Effendi dan Hartono Zhuang).

Untuk mendapatkan suatu informasi, manusia melakukan suatu bentuk komunikasi dalam berbagai cara. Informasi dapat berupa sesuatu yang dikomunikasikan antara orang satu dengan orang lain yaitu berbentuk audio dan dalam bentuk visual yaitu dokumentasi gambar maupun tulisan. Perkembangan teknologi kian mampu menghadirkan teman bercakap dan berdiskusi dari tempat yang berlainan tanpa harus bertemu muka dan dengan biaya yang lebih murah dengan memanfaatkan jaringan Internet.

Dalam dunia bisnis dan entertainment dunia web juga kian berkembang dengan pesat, penjualan, pemesanan hingga pembayaran dapat dilakukan dengan memanfaatkan jaringan internet. Sehingga untuk menciptakan teknologi pemesanan secara online tidaklah mustahil untuk dikerjakan.

Di Indonesia banyak pengusaha-pengusaha yang membangun usaha yang bergerak pada bidang penjualan produk seperti super market. Namun kenyataannya di Indonesia pemanfaatan jaringan internet di super market belum berada di tingkat maksimal jaringan internet hanya mereka gunakan sebatas media promosi dan informasi.

Telah banyak perkembangan yang terjadi di dunia aplikasi situs web salah satunya yang lagi sering dibicarakan orang adalah teknologi metode AJAX pada aplikasi situs web.

2 Dasar Teori Javascript

JavaScript merupakan modifikasi dari bahasa C++ dengan pola penulsan yang lebih sederhana. Interpreter bahasa ini sudah disediakan asp ataupun Internet Explorer. Secara khusus beberapa hal yang penting dalam JavaScript adalah.

· Menggunakan blok awal “{” dan blok akhir “}”.

· Automatic conversion dalam pengoperasian tipe data yang berbeda.

· Case Sensitive, sehingga programmer java harus ekstra hati-hati dalam menggunakan nama variable, fungsi dan lain-lain.

· Extension umumnya menggunakan “*.js”.

· Setiap statement dapat diakhiri dengan “;” sebagaimana halnya C++ tetapi dapat juga tidak.

· Jika tidak didukung oleh browser versi lama, scriptnya dapat disembunyikan diantara tag “”.

· Jika program dalam suatu baris terlalu panjang dapat disambung ke baris berikut dengan karakter “\”.

Script ini dapat diletakan pada tiga lokasi yaitu section head, section body atau bisa berupa eksternal source dengan file yang berekstensi “*.js”.

Tipe data pada JavaScript umumnya sama pada setiap mesin, hal ini diakibatkan desain awal java memang dikhususkan untuk jalan pada semua mesin.

3 Apa Itu AJAX?

AJAX kepanjangan dari Asynchronous JavaScript and XML. Yang perlu diingat adalah AJAX bukanlah sebuah aplikasi ataupun bahasa pemograman tetapi AJAX adalah sebuah metode fungsi yang berjalan di aplikasi website dan dibuat oleh bahasa pemograman tingkat client yaitu JavaScript dengan bantuan XML (eXtended Markup Language) yang menyediakan objek untuk menampung data-data untuk dikirimkan ke server.

Dengan AJAX, user berkomunikasi dengan server hanya dibelakang layar, dapatkan data yang diinginkan dan tampilkan secara instant di halaman web tanpa harus melakukan refresh halaman, tanpa kedipan layar di browser, tidak perlu menunggu untuk waktu yang lama. Ini merupakan perubahan besar dalam dunia aplikasi situs web dan internet, karena membuat web aplikasi mulai terlihat seperti aplikasi desktop. Dengan meningkatnya koneksi internet yang cepat, pengambilan data dari server menjadi tepat dan cepat. Jadi web software dapat terlihat dan terasa sama seperti user mengakses aplikasi desktop biasa.

AJAX bisa menjadi solusi yang hebat bagi banyak pengembang-pengembang proyek web. Sebab AJAX dapat menambah kekuatan aplikasi situs web dan bisa mendapatkan perubahan-perubahan yang besar dari yang sebelumnya dikembangkan tanpa teknologi AJAX. Serta dengan penambahan metode ini juga membuat harga dari sebuah aplikasi situs web menjadi bertambah. Bisa dibilang AJAX tidak memerlukan modal yang besar tetapi bisa menghasilkan produk yang cukup besar.

Teknologi ini sangat bermanfaat untuk pemograman web di masa mendatang. Tidak mengherankan AJAX sekarang menjadi topik terpanas dan banyak dibicarakan oleh orang baik pengguna layanan internet maupun pengembang aplikasi stus web karena semuanya bisa menjadi lebih mudah

4 Metode AJAX

AJAX merupakan sebuah fungsi yang dibuat dengan menggunakan bahasa pemograman JavaScript. Secara konsep halaman utama mengirim data (get/post) kemudian data ditampung dan diproses oleh halaman yang memuat script server (PHP, ASP, JSP, dsb) kemudian dikirim balik melalui halaman penampil yang ditampilkan oleh bagian yang sudah disediakan dihalaman utama sehingga semua proses tadi seolah-olah terjadi pada halaman yang sama. Bahasa server disini hanya berperan dibalik layar saja (Behind the Scene), jadi semua event yang terjadi dihandle oleh bahasa client. Berikut adalah script umum dari metode fungsi AJAX yang di buat pada bahasa JavaScript.

function ajaxFunction()

{

var xmlHttp;

try

{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e)

{

// Internet Explorer

try

{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e)

{

try

{

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

}

catch (e)

{

alert("Your browser does not support AJAX!");

return false;

}

}

}

xmlHttp.onreadystatechange=function()

{

if(xmlHttp.readyState==4)

{

document.myForm.time.value=xmlHttp.responseText;

}

}

xmlHttp.open("GET","file.asp",true);

xmlHttp.send(null);

}

Ket:

-- readyState

0 The request is not initialized

1 The request has been set up

2 The request has been sent

3 The request is in process

4 The request is complete

Untuk diingat untuk penulisan script di form HTML selalu menggunakan tag . Script bisa diletakan dalam tag maupun tag .

Pada script diatas pertama kali fungsi terlebih dahulu mengdeklarasikan variabel XMLHttp yang merupakan komponen dari XML yang berfungsi menampung data dari client untuk server. Kemudian sintak ‘try’ digunakan untuk mencoba jenis web browser apa yang digunkan oleh user, apakah IE, mozila, opera, atau safari (Mac OS). Setelah itu atribut OnReadyStateChange dicek nilainya yang secara detail bisa dilihat dari keterangan diatas, jika sudah komplit data akan di akses ke url yang dituju (file.asp/php/jsp). Oleh metode AJAX semua proses tidak akan membuat halaman utama merefresh.

5 Kebutuhan Hardware dan Software

Untuk kebutuhan hardware tidaklah dibutuhkan spesifikasi khusus untuk mengakses AJAX dengan kata lain semua jenis PC maupun Mobile PC bisa menjalankan aplikasi yang memuat metode AJAX asalkan memiliki bagian yang bisa terhubung dengan jaringan internet.

Untuk kebutuhan software juga bukanlah sebuah kendala yang besar karena yang diperlukan hanyalah sebuah aplikasi web browser yang sudah mendukung XML dan JavaScript dengan baik. Contohnya: Microsoft Internet Explorer ver 5.0+ , Mozilla Firefox (Freeware), Opera ver 8.0+ , NetScape (untuk Linux OS), Safari (untuk Mac OS) dan sebagainya. Hanya saja untuk Opera metode ini belum bisa berjalan dengan baik.

6 Keunggulan Menggunakan AJAX

Dengan adanya teknologi AJAX, perkembangan situs web dunia menjadi berkembang pesat. Itu dikarenakan AJAX memiliki beberapa keunggulan yang hebat antara lain:

1. AJAX membuat aplikasi situs web terlihat dan terasa seperti aplikasi desktop biasa. Itu dikarenakan AJAX bisa membuat sebuah proses dihalaman situs web seolah-olah tanpa melakukan refresh halaman.

2. AJAX bisa melakukan banyak proses secara serentak pada halaman situs hanya dengan sekali refresh. Itu menguntungkan daripada menggunakan frame, selain itu AJAX membuat waktu proses menjadi lebih cepat.

3. Karena AJAX bisa mengupdate halaman web tanpa melakukan refresh, itu merupakan pilihan yang baik untuk web yang berbasis chat program. Bisa dilihat contoh pada situs www.plasticshore.com/projects/chat. sebagai gambaran, AJAX berperan ketika user mengetikan kata-kata dan tombol submit di klik untuk mengirim kata-kata tersebut ke server. Seterusnya akan dilihat orang-orang yang sedang chatting pada saat yang bersamaan (halaman web tidak memerlukan refresh).

4. AJAX dapat menampilkan pop-up menu. Maksudnya data-data text yang yang diambil dari server sepanjang yang diperlukan oleh user, text hasil dari server bisa dikirim kembali dalam bentuk pop-up menu dengan menggukanan teknik AJAX.

7 Implementasi AJAX pada Sebuah Aplikasi Situs Web

Sudah banyak situs web di dunia yang sudah menerapkan metode AJAX berikut pembahasan tentang contoh-contoh situs web dunia yang telah mengadopsi teknologi AJAX diantaranya: situs web yahoo (www.yahoo.com) dan situs web Gendou (www.gendou.com).

Situs web yahoo bergerak di bidang entertainment/hiburan dan juga menyediakan layanan e-mail hampir semua belahan dunia sudah mengenal yahoo. Sekarang yahoo telah mengadopsi metode AJAX berikut sedikit tampilan dari yahoo yang menggunakan metode AJAX:

Gambar 7.1 Tampilan yahoo.com

Disini pada saat gambar yang ditandai lingkaran warna merah diklik maka secara otomatis gambar yang besar berubah menjadi gambar yang diklik tadi tanpa merefresh halaman utama. Untuk contoh-contoh yang lain dari yahoo.com bisa dilihat dari gambar selanjutnya.

Gambar 7.2 Icon gambar sebelum diklik

Gambar 7.3 Icon gambar setelah diklik

Disini juga metode AJAX berperan yaitu pada saat icon diklik seccara otomatis akan tampil

yang memuat halaman yang menampilkan secara langsung tanpa melakukan refresh pada halaman utama. Disitu jelas terlihat bahwa AJAX membuat sebuah aplikasi situs web menjadi terasa seperti aplikasi desktop.

Contoh yang lain adalah situs gendou. Situs ini bergerak dibidang multimedia. Situs ini memberikan layanan untuk mendownload lagu-lagu dengan format MP3 tetapi khusus lagu-lagu dari negara jepang. Situs ini juga sudah menerapkan metode AJAX yang terletak pada fasilitas login yang secara instant dibuat dalam bentuk menu pilihan. Berikut tampilan dari gendou.com:

Gambar 7.4 Tampilan login dari gendou.com

Contoh lain juga bisa dilihat dari tampilan fasilitas cari data disini metode AJAX digunakan dalam menampilkan hasil dari pencarian yang diinputkan tanpa harus merefresh halaman utama.

Gambar 7.5 Tampilan dari fasilitas cari data

Dari contoh-contoh diatas membuktikan AJAX membuat waktu menjadi terasa cepat dan membuat web menjadi tidak membosankan.

8 Kesimpulan

Kesimpulan yang didapat dari teknologi ini adalah AJAX membuat perubahan besar dalam dunia pemograman web dan internet. Menumbuhkan banyak sekali ide-ide kreatif yang bisa diterapkan di aplikasi situs web, tampilan yang simpel dan menarik, serta mengurangi jumlah refresh yang membuat layar tampilan berkedip. Itu berarti user tidak harus menunggu loading refresh yang membosankan.

Bagi perusahaan pengembang aplikasi situs web metode AJAX ini sangat membantu merubah suasana produk mereka yang tadinya hanya monoton kini tampilan-tampilan dapat terlihat lebih hebat, serta metode ini dipasaran memiliki daya saing dan harga jual yang tinggi.

Bagi programmer pemula metode tidak menutup kemungkinan bagi mereka yang ingin mencoba. Itu dikarenakan JavaScript dan XML bersifat Open-Source sehingga para pemula bebas mengeksplorasi metode ini dan menghasilkan kreatifitas mereka masing-masing tanpa harus dibatasi oleh “lisensi”.