PERBANDINGAN JUMLAH DATA DAN WAKTU LOADING ANTARA WEB TRADISIONAL DAN WEB BERBASIS AJAX
on
PERBANDINGAN JUMLAH DATA DAN WAKTU LOADING
ANTARA WEB TRADISIONAL DAN WEB BERBASIS AJAX
Radityo Adi Nugroho
Program Studi Ilmu Komputer,
Fakultas Matematika dan Ilmu Pengetahuan Alam, Universitas Lambung Mangkurat
Email : [email protected]
ABSTRAK
Hingga awal tahun 2005, karakteristik interaksi aplikasi web selalu tergantung pada event-event yang diberikan oleh pengguna. Serta, harus menunggu munculnya halaman web secara utuh untuk berpindah dari satu event ke event lain. Untuk memperbaiki masalah ini, muncul teknik Asynchronous Javascript and XML(AJAX) yang membuat aplikasi web menjadi mirip aplikasi desktop dan tidak terlalu tergantung pada event yang diberikan pengguna. Namun, Ajax juga memiliki kekurangan karena kode sumbernya sulit untuk ditulis. Beberapa framework hadir untuk mengatasi kekurangan ini, salah satunya adalah ASP.NET Ajax.
Penelitian ini mencoba membuat sebuah aplikasi web Ajax dengan menggunakan ASP.NET Ajax untuk dibandingkan dengan aplikasi web tradisional. Aspek-aspek yang dibandingkan dalam penelitian ini adalah waktu loading dan jumlah data yang dilewatkan. Aplikasi yang dibuat adalah aplikasi web mengenai informasi kepariwisataan di propinsi Daerah Istimewa Yogyakarta.
Hasil penelitian menunjukkan bahwa aplikasi web tradisional memiliki waktu loading yang lebih singkat pada saat me-refresh suatu halaman karena melewatkan data yang lebih sedikit dibandingkan aplikasi web Ajax dengan Atlas. Namun, untuk mengubah isi suatu halaman, aplikasi web Ajax dengan menggunakan ASP.NET Ajax memiliki waktu loading yang lebih singkat karena melewatkan data lebih sedikit.
Kata Kunci : waktu loading, jumlah data, AJAX, ASP.NET Ajax
ABSTRACT
Until the beginning of 2005, the characteristic of the web application interaction always depends on the events given by the user. Moreover, must wait for the occurrance of the whole web page to move from one event to another. To repair this problems, appears the Asynchronous Javascript and XML(AJAX) technique which makes the web application similar to desktop application and not depends too much on the event given by the user. Ajax also be claimed has the shorter loading time. However, Ajax also has some weakness because its source code is hard to be written. Some frameworks appear to overcome this weakness, one of them is ASP.NET Ajax.
This research tries to make an Ajax web application with ASP.NET Ajax to compare with the traditional web. The compared aspects in this research are the loading time and the data amount. The web application that made is tourism information in Daerah Istimewa Yogyakarta province.
The result shows that the traditional web application has the shorter loading time in a whole page refreshing because it passes less data amount rather than Ajax web application using Atlas. However, to change a web page contents, Ajax web application using the ASP.NET Ajax has the shorter loading time because it passes less data amount.
Keywords : loading time, data amount, AJAX, ASP.NET Ajax
PENDAHULUAN
Aplikasi berbasis web adalah aplikasi yang berkembang sangat dinamis sejak dimunculkan pada awal tahun 1990. Generasi pertama adalah aplikasi web statis yang dimulai dengan hadirnya HTML sebagai standar penulisan aplikasi berbasis web. Selang beberapa tahun kemudian aplikasi web dinamis hadir. Namun, karakteristik aplikasi web tetap tidak berubah, yaitu sangat tergantung dari event-event yang diberikan oleh pengguna dan harus menunggu munculnya halaman web secara utuh untuk berpindah event. Gambar 1 mengilustrasikan interaksi antara client dan server pada aplikasi web tradisional.
Gambar 1. Interaksi client dan server pada aplikasi web tradisional Menurut [SMI-06], Asynchronous JavaScript and XML, atau Ajax mulai populer pada awal tahun 2005 setelah kemunculan Google Maps, Google Gmail dan Flickr. Ajax, meskipun menggunakan teknologi lama,
merupakan paradigma baru dalam pembuatan aplikasi berbasis web. Dengan Ajax, aplikasi web menjadi mirip dengan aplikasi desktop.
Ajax adalah istilah yang diperkenalkan pertama kali oleh Jesse James Garrett dari Adaptive Path. Dalam esainya “AJAX : A New Approach to Web Applications”, Garrett menyebutkan bahwa jurang antara aplikasi desktop dengan aplikasi web semakin menipis. Hal tersebut dibuktikan oleh Google dengan munculnya Google Maps dan Google Suggest.
Menurut [GAR-05] teknologi-teknologi pembentuk Ajax terdiri dari : (1) HTML dan CSS, untuk lapisan presentasi; (2) Document Object Model, untuk tampilan dan interaksi dinamis; (3) XML, sebagai format pertukaran data; (4) XMLHttpRequest, untuk mengambil data secara asynchronous; (5) Javascript, untuk menggabungkan semua teknologi diatas
Ajax adalah kumpulan teknologi-teknologi yang membuat sebuah browser bisa berkomunikasi dengan server, tanpa harus me-refresh semua halaman. Hal ini dimungkinkan karena browser melakukan request di belakang layar secara asynchronous. Gambar 2 mengilustrasikan interaksi antara client dan server pada aplikasi web menggunakan Ajax.
Dengan bekerja sebagai lapisan tambahan diantara browser pengguna dan web server, Ajax menangani komunikasi dengan server di belakang layar, melakukan request dan memproses data kembalian. Hasilnya diintegrasikan ke halaman yang sedang ditampilkan tanpa memerlukan refresh atau me-load suatu halaman yang baru.
Gambar 2 Interaksi client dan server pada aplikasi web menggunakan Ajax Namun, Ajax juga memiliki kekurangan. Salah satu kekurangan yang paling utama adalah Ajax berbasis JavaScript yang sulit untuk ditulis, memakan banyak waktu untuk dikembangkan serta sangat sulit untuk di-debug [MOR-06]. Dengan kata lain, untuk membuat suatu aplikasi web
berbasis Ajax, pengembang harus menguasai JavaScript secara mendalam. Untuk mengatasi masalah
pengembangan aplikasi web berbasis Ajax, banyak perusahaan yang membuat kode pustaka dan tool yang dapat dipakai oleh pengembang untuk membuat situs yang memasukkan teknik Ajax. Salah satu perusahaan tersebut adalah Microsoft yang mengembangkan suatu framework yang diberi nama Atlas [SMI-06]. Atlas dimaksudkan agar para pengembang ASP.NET bisa membuat aplikasi web yang berbasis Ajax dengan mudah dan cepat, tanpa harus menjadi seorang pemrogram ahli JavaScript.
Dengan memanfaatkan keunggulan teknik Ajax yang dikombinasikan dengan kemudahan pengembangan aplikasi web dengan menggunakan ASP.NET dan ASP.NET Ajax, penulis mencoba untuk membuat sebuah aplikasi web layanan informasi pariwisata Jogja. Aplikasi ini berisi tentang informasi-informasi mengenai tempat-tempat maupun event-event wisata di Daerah Istimewa Yogyakarta. Tujuan penelitian ini adalah ingin mengetahui apakah aplikasi web Ajax memiliki waktu loading lebih singkat dibandingkan dengan aplikasi web tradisional. Aplikasi web Ajax dibangun dengan menggunakan ASP.NET dan ASP.NET Ajax, sedangkan aplikasi web tradisional dibangun dengan hanya menggunakan ASP.NET.
METODE PENELITIAN
Penelitian ini menggunakan metode teoritik dan aplikasi, dengan cara mempelajari karya-karya ilmiah yang telah dihimpun dan diimplementasikan dengan membuat aplikasi web layanan informasi pariwisata Jogja, baik menggunakan konsep tradisional maupun menggunakan konsep Ajax dengan ASP.NET Ajax.
Pengujian yang dilakukan pada penelitian ini menggunakan metode statistik analisis variansi dua arah, untuk mengetahui apakah aplikasi web Ajax dengan menggunakan Atlas lebih cepat dibanding aplikasi web tradisional.
HASIL DAN PEMBAHASAN
Pada bagian ini akan ditunjukkan hasil penghitungan terhadap waktu tampil yang dibutuhkan oleh aplikasi web berbasis Ajax, dalam hal ini adalah aplikasi web layanan informasi pariwisata Jogja. Selain itu, akan ditunjukkan pula perbandingan waktu tampil antara aplikasi berbasis Ajax dengan aplikasi web tradisional. Serta, akan dihitung pula besarnya data yang dikirim pada saat halaman di-download oleh client.
Gambar 3. Halaman Kalender Wisa
Penghitungan dilakukan pada halaman Kalender Wisata, seperti pada gambar 3, dan dilakukan dengan menggunakan tiga buah komputer di dalam jaringan lokal sebanyak limabelas kali berturut-turut. Penghitungan yang dilakukan terdiri atas dua tipe, yaitu penghitungan lama waktu untuk membuka halaman Kalender Wisata dan lama waktu untuk menampilkan detail suatu acara wisata. Detail acara wisata adalah sebuah submenu yang ada di halaman kalender wisata.
Pengujian yang dilakukan mencatat jumlah data yang dilewatkan untuk menampilkan halaman kalender wisata
dengan menggunakan ASP.NET Ajax lebih besar dibandingkan dengan aplikasi web tradisional. Hal ini disebabkan pada aplikasi web Ajax yang menggunakan ASP.NET Ajax terdapat kode-kode javascript yang harus di-download. Hasil lengkap penghitungan jumlah data dapat dilihat pada tabel 1
Tabel 1. Jumlah data yang diterima saat loading halaman kalender wisata
|
Metode |
Jumlah (byte) |
Type |
|
ASP.NET Ajax |
19. 187 |
text/html |
|
20.931 |
javascript | |
|
Tradisional |
15.199 |
text/html |
Selanjutnya pada tahap ini dilakukan penghitungan waktu yang dibutuhkan untuk menampilkan halaman Kalender Wisata, baik pada web berbasis Ajax maupun web tradisional. Hasil penghitungan dapat dilihat pada tabel 2. Tabel 2. Waktu loading halaman kalender wisata
|
Mesin |
Pengujia n ke- |
Metode | |
|
Tradisi onal |
ASP.NE T Ajax | ||
|
Komputer I |
1 |
0,172 |
0,350 |
|
2 |
0,172 |
0,359 | |
|
3 |
0,157 |
0,375 | |
|
4 |
0,172 |
0,390 | |
|
5 |
0,172 |
0,390 | |
|
6 |
0,172 |
0,345 | |
|
7 |
0,171 |
0,290 | |
|
8 |
0,203 |
0,375 | |
|
9 |
0,156 |
0,359 | |
|
10 |
0,172 |
0,295 | |
|
11 |
0,218 |
0,295 | |
|
12 |
0,157 |
0,310 | |
|
13 |
0,156 |
0,330 | |
|
14 |
0,172 |
0,290 | |
|
15 |
0,156 |
0,290 | |
|
Komputer II |
1 |
0,141 |
0,359 |
|
2 |
0,110 |
0,328 | |
|
3 |
0,110 |
0,297 | |
|
4 |
0,125 |
0,329 | |
|
5 |
0,179 |
0,313 | |
|
6 |
0,125 |
0,375 | |
|
7 |
0,125 |
0,297 | |
|
8 |
0,141 |
0,375 | |
|
9 |
0,141 |
0,344 | |
|
10 |
0,125 |
0,297 | |
|
11 |
0,141 |
0,391 | |
|
12 |
0,109 |
0,266 | |
|
13 |
0,179 |
0,328 | |
|
14 |
0,125 |
0,296 | |
|
15 |
0,109 |
0,328 | |
|
Komputer III |
1 |
0,250 |
0,328 |
|
2 |
0,125 |
0,281 | |
|
3 |
0,109 |
0,343 | |
|
4 |
0,156 |
0,297 | |
|
5 |
0,125 |
0,297 | |
|
6 |
0,125 |
0,281 | |
|
7 |
0,159 |
0,297 | |
|
8 |
0,159 |
0,281 | |
|
9 |
0,109 |
0,391 | |
|
10 |
0,110 |
0,281 | |
|
11 |
0,110 |
0,360 | |
|
12 |
0,172 |
0,344 | |
|
13 |
0,157 |
0,312 | |
|
14 |
0,141 |
0,343 | |
|
15 |
0,250 |
0,344 |
Untuk menampilkan detail acara wisata, yang merupakan submenu pada halaman kalender wisata, pengujian mencatat jumlah data yang dilewatkan pada web yang menggunakan ASP.NET Ajax lebih kecil dibandingkan dengan aplikasi web tradisional. Hasil lengkap penghitungan jumlah data dapat dilihat pada tabel 3
Tabel 3. Jumlah data yang diterima saat menampilkan detail acara wisata
|
Metode |
Jumlah (byte) |
Type |
|
ASP.NET Ajax |
9.331 |
text/plain |
|
Tradisional |
20.797 |
text/html |
Selanjutnya,dilakukanpenghitungan waktu yang dibutuhkan untuk menampilkan detail acara wisata, baik pada web yang menggunakan ASP.NET Ajax maupun web tradisional. Hasil penghitungan dapat dilihat pada tabel 4. Tabel 4. Waktu loading detail acara wisata
|
Mesin |
Peng ujian ke- |
Metode | |
|
Tradisio nal |
ASP.NET Ajax | ||
|
Komputer I |
1 |
0,156 |
0,047 |
|
2 |
0,160 |
0,062 | |
|
3 |
0,172 |
0,047 | |
|
4 |
0,157 |
0,062 | |
|
5 |
0,172 |
0,063 | |
|
6 |
0,160 |
0,047 | |
|
7 |
0,157 |
0,047 | |
|
8 |
0,157 |
0,063 | |
|
9 |
0,172 |
0,063 | |
|
10 |
0,160 |
0,062 | |
|
11 |
0,172 |
0,047 | |
|
12 |
0,156 |
0,047 | |
|
13 |
0,160 |
0,062 | |
|
14 |
0,156 |
0,063 | |
|
15 |
0,171 |
0,062 | |
|
Komputer II |
1 |
0,156 |
0,047 |
|
2 |
0,141 |
0,031 | |
|
3 |
0,165 |
0,047 | |
|
4 |
0,172 |
0,047 | |
|
5 |
0,165 |
0,062 | |
|
6 |
0,171 |
0,063 | |
|
7 |
0,139 |
0,031 | |
|
8 |
0,139 |
0,047 | |
|
9 |
0,125 |
0,046 | |
|
10 |
0,130 |
0,043 | |
|
11 |
0,165 |
0,062 | |
|
12 |
0,133 |
0,063 | |
|
13 |
0,139 |
0,047 | |
|
14 |
0,140 |
0,047 | |
|
15 |
0,145 |
0,063 | |
|
Komputer III |
1 |
0,143 |
0,063 |
|
2 |
0,150 |
0,063 | |
|
3 |
0,150 |
0,062 | |
|
4 |
0,143 |
0,063 | |
|
5 |
0,150 |
0,062 | |
|
6 |
0,150 |
0,062 | |
|
7 |
0,139 |
0,063 | |
|
8 |
0,150 |
0,047 | |
|
9 |
0,150 |
0,062 | |
|
10 |
0,139 |
0,078 | |
|
11 |
0,171 |
0,047 | |
|
12 |
0,180 |
0,063 | |
|
13 |
0,139 |
0,062 | |
|
14 |
0,234 |
0,063 | |
|
15 |
0,150 |
0,063 |
Untuk mengetahui lebih jelas mengenai perbedaan antara web berbasis Ajax dan web tradisional akan diuji dengan menggunakan salah satu metode statistika yaitu analisis ragam klasifikasi dua arah (Two Way Anova) dengan nilai α sebesar 0.05
Pengujian halaman kalender wisata didasarkan data pada tabel 2. Hasil pengolahan data menggunakan metode
Two Way Anova dapat dilihat pada tabel 5.
Tabel 5. Hasil pengujian penghitungan waktu loading halaman kalender wisata
|
Sour ce |
Type III Sum of Squares |
df |
Mean Square |
F |
Sig. |
|
Corr ected Mod el |
0,712 (a) |
5 |
0,142 |
125,41 4 |
0,000 |
|
Inter cept |
5,168 |
1 |
5,168 |
4550,7 93 |
0,000 |
|
mesi n |
0,010 |
2 |
0,005 |
4,237 |
0,018 |
|
meto de |
0,698 |
1 |
0,698 |
614,69 0 |
0,000 |
|
mesi n * meto de |
0,004 |
2 |
0,002 |
1,954 |
0,148 |
|
Error |
0,095 |
84 |
0,001 | ||
|
Total |
5,975 |
90 | |||
|
Corr ected Total |
0,807 |
89 |
Pada tabel 5 dapat dilihat bahwa signifikansi faktor mesin*metode lebih besar dari α, dengan kata lain faktor gabungan mesin dan metode tidak berpengaruh terhadap waktu loading. Karena gabungan kedua faktor tersebut tidak ada pengaruhnya, maka harus dilihat faktor lainnya secara mandiri.
Pengujian selanjutnya adalah hanya pada faktor metode karena penelitian ini dilakukan untuk membandingkan metode Ajax dengan metode tradisional. Hasil pengujian faktor metode dapat dilihat pada tabel 6. Pada tabel tersebut terlihat bahwa web tradisional mempunyai rata-rata yang lebih kecil dibanding web dengan ASP.NET Ajax, sehingga bisa diambil kesimpulan bahwa web tradisional lebih cepat dalam untuk membuka halaman kalender wisata.
Pengujian berikutnya adalah pada saat loading detail acara wisata yang
didasarkan data pada tabel 4. Hasil pengolahan data dapat dilihat pada tabel 7.
Pada tabel 7 dapat dilihat bahwa signifikansi faktor mesin*metode lebih besar dari α, dengan kata lain faktor gabungan mesin dan metode tidak berpengaruh terhadap waktu loading. Karena gabungan kedua faktor tersebut tidak ada pengaruhnya, maka harus dilihat faktor lainnya secara mandiri.
Pengujian selanjutnya adalah hanya pada faktor metode karena penelitian ini dilakukan untuk membandingkan metode Ajax dengan metode tradisional. Hasil pengujian faktor metode dapat dilihat pada tabel 8.
Tabel 6. Hasil pengujian metode yang lebih cepat saat loading halaman kalender wisata
|
Meto de |
Mean |
Std. Error |
95% Confidence Interval | |
|
Lower Bound |
Upper Bound | |||
|
atlas |
0,328 |
0,005 |
0,318 |
0,338 |
|
tradi siona l |
0,152 |
0,005 |
0,142 |
0,162 |
Tabel 7. Hasil pengujian penghitungan waktu loading detail acara wisata
|
Source |
Type III Sum of Squares |
Df |
Mean Square |
F |
Sig. |
|
Corrected Model |
0,226 (a) |
5 |
0,045 |
242,2 18 |
0,000 |
|
Intercept |
1,006 |
1 |
1,006 |
5380, 868 |
0,000 |
|
mesin |
0,002 |
2 |
0,001 |
5,388 |
0,006 |
|
metode |
0,224 |
1 |
0,224 |
1197, 379 |
0,000 |
|
mesin * metode |
0,001 |
2 |
0,000 |
1,467 |
0,236 |
|
Error |
0,016 |
84 |
0,000 | ||
|
Total |
1,248 |
90 | |||
|
Corrected Total |
0,242 |
89 |
Tabel 8. Hasil pengujian metode yang lebih cepat saat loading detail acara wisata
|
Std. |
95% Confidence Interval | |||
|
Metode |
Mean |
Error |
Lower Bound |
Upper Bound |
|
Atlas |
0,056 |
0,002 |
0,052 |
0,060 |
|
tradisional |
0,156 |
0,002 |
0,152 |
0,160 |
Pada tabel 8 terlihat bahwa web Ajax dengan menggunakan ASP.NET Ajax mempunyai rata-rata yang lebih kecil dibanding web tradisional, sehingga bisa diambil kesimpulan bahwa web Ajax dengan menggunakan ASP.NET Ajax lebih cepat untuk menampilkan detail acara wisata.
KESIMPULAN
Aplikasi web Ajax dengan ASP.NET Ajax memiliki waktu loading yang lebih lambat dibandingkan aplikasi web tradisional pada saat dilakukan pengujian loading satu halaman penuh. Hal ini disebabkan ASP.NET Ajax melewatkan jumlah data yang lebih besar karena adanya penambahan berkas javascript sebesar 20.931 byte. Namun, waktu loading aplikasi web Ajax dengan ASP.NET Ajax pada saat menampilkan bagian-bagian tertentu pada suatu halaman lebih cepat dibandingkan aplikasi web tradisional. Hal ini disebabkan karena ASP.NET Ajax hanya meng-update bagian-bagian tertentu saja, sehingga melewatkan data yang lebih sedikit dibanding.
DAFTAR PUSTAKA
[ASL-06] Asleson, R. and N. T.
Schutta. 2006. Foundation of AJAX.
Apress
[GAR-05] Garrett, J. J. 2005. AJAX : A New Approach to Web Application. http://adaptivepath.com/publications/es says/archives. Diakses 27 Agustus 2006 [MOR-06] Moroney, L. 2006.
Foundation of Atlas : Rapid Ajax Development with ASP.NET 2.0. Apress [PAU-05] Paulson, L. D. 2005.
Building Rich Web Applications with Ajax. Computer. no. 10. vol. 38. Oct. pp. 14-17
[SMI-06] Smith, K. 2006. Simplifying Ajax-Style Web Development.
Computer. no. 5. vol. 39. May. pp. 98101
30
Discussion and feedback