ANALISA PERBANDINGAN PENGGUNAAN JQUERY DEFERRED PADA AJAX DAN JQUERY AJAX BIASA UNTUK MEMPROSES MULTIPLE AJAX GUNA MENGOPTIMALKAN PERFORMA WEB SERVER
NASKAH PUBLIKASI
diajukan oleh Didy Septiyono 14.21.0773
kepada SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER AMIKOM YOGYAKARTA YOGYAKARTA 2015
NASKAH PUBLIKASI
ANALISA PERBANDINGAN PENGGUNAAN JQUERY DEFERRED PADA AJAX DAN JQUERY AJAX BIASA UNTUK MEMPROSES MULTIPLE AJAX GUNA MENGOPTIMALKAN PERFORMA WEB SERVER
disusun oleh Didy Septiyono 14.21.0773
Dosen Pembimbing
Armadyah Amborowati, S.Kom, M. Eng. NIK. 190302063
Tanggal, 21 Agustus 2015 Ketua Jurusan S1 Teknik Informatika
Sudarmawan, M.T. NIK. 190302035
ANALISA PERBANDINGAN PENGGUNAAN JQUERY DEFERRED PADA AJAX DAN JQUERY AJAX BIASA UNTUK MEMPROSES MULTIPLE AJAX GUNA MENGOPTIMALKAN PERFORMA WEB SERVER Didy Septiyono1), Armadyah Amborowati 2) 1,2)
Teknik Informatika STMIK AMIKOM Yogyakarta Jl Ringroad Utara, Condongcatur, Depok, Sleman, Yogyakarta Indonesia 55283 Email :
[email protected]),
Asynchronous JavaScript and XML, or AJAX, is an approach that allows parts of a web page can be refreshed with data from the server without having to replace the entire web. The goal is to Exchange data with the server behind the scenes or a web page, so that web pages do not need to perform the process of loading the page or moved to another page every time users make changes. This will make a website becomes interactive. In some cases, a web page need to process lots of data processing as well as AJAX, and it certainly will be processed in a looping. When processing the AJAX in a looping, the author discovered a problem that that process be processed simultaneously, so the server load becomes heavier, and sometimes failure occurred in the server-side process that resulted in the occurrence of unwanted things, namely an error or errors. Of these problems, the author finds an idea that AJAX are processed one by one and not processed, i.e. all simultaneously using Jquery Deffered. The goal of this research is to know the difference between a common AJAX with using Jquery Deffered on AJAX process until the processing by the server into a lightweight and more optimal. Keywords - AJAX, jQuery, Deffered. 1. Pendahuluan 1.1 Latar Belakang Asynchronous JavaScript and XML, atau disingkat AJAX, adalah suatu pendekatan yang memungkinkan bagian suatu halaman web bisa disegarkan dengan data dari server tanpa harus mengganti keseluruhan web. Tujuannya adalah untuk melakukan pertukaran data dengan server di belakang layar atau halaman web, sehingga halaman web tidak perlu melakukan proses loading page atau pindah ke page yang lain setiap kali pengguna melakukan perubahan. Hal ini akan menjadikan sebuah website menjadi interaktif. Dalam beberapa kondisi, sebuah halaman web butuh untuk memproses maupun mengolah banyak data AJAX, dan sudah pasti akan diproses dalam sebuah perulangan. Saat memproses AJAX dalam sebuah perulangan, penulis menemukan sebuah masalah yaitu proses itu diolah secara bersamaan, sehingga beban server menjadi lebih berat, dan terkadang terjadi kegagalan proses di sisi server yang
[email protected])
mengakibatkan terjadinya hal yang tidak diinginkan, yaitu terjadi kesalahan maupun error. Dari masalah tersebut, penulis menemukan sebuah ide yaitu AJAX diproses satu persatu dan tidak diproses semua secara bersamaan, yaitu menggunakan Jquery Deffered. Harapan dari penelitian ini adalah bisa mengetahui perbedaan proses Jquery AJAX biasa dengan Jquery Deffered sehingga pemrosesan oleh server menjadi ringan dan lebih optimal. 1.2 Rumusan Masalah 1. Bagaimana sistem dan alur kerja Jquery AJAX dan Jquery Deffered Ajax? 2. Seperti apa perbandingan kecepatan pemrosesan, penggunaan memory dan cpu pada server serta tingkat keberhasilan eksekusinya? 3. Apakah dengan Jquery Deffered bisa meringankan dan mengoptimalkan kinerja server? 1.3 Tujuan Penelitian Penelitian ini bertujuan untuk membandingkan proses kerja Jquery Ajax biasa dengan proses kerja Jquery Deffered Ajax pada saat memproses banyak data dari sebuah server. Sehingga dengan adanya penelitian ini diharapkan bisa membantu pembaca untuk menerapkan AJAX yang lebih tepat digunakan dalam membangun sebuah website untuk meringankan dan mengoptimalkan server. 2. Landasan Teori 2.1 Tinjauan Pustaka Menurut Setiawan (2013) peneliti dari Binus pada tulisanya yang berjudul (Web Chat Application using Long-Polling Technology with PHP and AJAX) melakukan penelitian terhadap aplikasi Chat berbasis web dengan menggunakan teknologi Long-Polling berbasis PHP dan AJAX bahwa pemrosesan banyak AJAX akan menurunkan performa dari server. Long-Polling merupakan salah satu teknologi push yang memungkinkan klien untuk menerima data dari server saat itu, daripada meminta untuk update dengan setiap interval. Akibatnya, jumlah koneksi yang dibutuhkan berkurang karena sambungan diakhiri hanya ketika server memiliki sesuatu yang baru untuk memberikan. Namun penelitian ini tetap memproses multiple AJAX.[1]
1
Menurut Rusdi (2014) dalam skripsinya yang berjudul Perancangan Website E-Commerce Dengan Fasilitas Custom Yoghurt Menggunakan Ajax Dan Jquery Pada Toko Pirate Yoghurt melakukan penelitian terhadap penjualan yoghurt pada toko Pirate Yoghurt. Pada penelitian ini peneliti membahas bagaimana membangun sistem baru yang mampu menjual yoghurt secara online sehingga bisa meningkatkan penjualan dan keuntungan yoghurt. Namun penggunaan AJAX hanya digunakan untuk memerindah tampilan dan menjadikan website menjadi lebih interaktif.[2]
1. Sistem Operasi Mac OSX Yosemite versi 10.10.5. Pada penelitian ini peneliti menggunakan laptop MacBook Pro dengan sistem operasi versi OSX Yosemite versi 10.10.5 karena sesuai dengan yang dimiliki oleh peneliti dan dikenal stabil dalam menjalankan banyak aplikasi. 2. Sistem Operasi Centos 6.4 64bit. Penelitian ini menggunakan server dengan sistem operasi Centos dengan versi 6.4 64 bit dikarenakan dukungan komunitas yang banyak, sehingga jika terjadi suatu masalah bisa segera terselesaikan. Selain itu juga mempunyai kemudahan dalam hal instalasi dan penggunaanya. 3. VestaCP. Peneliti menggunakan VestaCP sebagai control panel server karena mempunyai fitur yang lengkap seperti Cpanel dan bisa digunakan secara gratis karena bersifat open source. Selain itu karena proses instalasi dan penggunaan yang mudah, maka peneliti memutuskan untuk menggunakan VestaCP. Kelebihan VestaCP dibaningkan dengan control panel lainya adalah VestaCP hanya membutuhkan sedikit sumber daya yang ada di server sehingga proses kerja server bisa menjadi lebih ringan dan tanpa kehilangan fitur utama sebagai web server. 4. Google Chrome Browser Peneliti menggunakan browser buatan Google yaitu Google Chrome karena mempunyai beberapa fitur yang tidak dimiliki oleh web browser yang lainya. Fitur yang akan dibutuhkan dalam penelitian ini selain sebagai web browser, adalah fitur developer tool, dimana dengan fitur ini, peneliti bisa mengetahui jumlah request, waktu yang dibutuhkan oleh sebuah request ke server, dan kecepatan render dari sebuah website. Sehingga nantinya data ini akan digunakan sebagai bahan penelitian. 5. Htop Htop merupakan aplikasi untuk memonitor proses dan memantau kinerja server serta resources yang digunakan oleh server pada VPS maupun Dedicated server di terminal SSH. Untuk server Centos sebenarnya sudah ada aplikasi bawaanya yaitu fungsi top namun aplikasi htop ini dapat difungsikan untuk menggantikan fungsi "top" standar yang tersedia pada linux dengan berbagai keunggulan terutama dari segi layout dan kemudahan pengoperasian yaitu dengan menggunakan shortcut yang lebih jelas. 6. Terminal Aplikasi ini digunakan untuk melakukan koneksi SSH ke server dan untuk menjalankan semua syntax yang akan dieksekusi oleh server.
Menurut Saputro (2013) pada tulisannya yang berjudul Membangun Aplikasi Simulasi Tes Sbmptn Berbasis Web melakukan penelitian terhadap seleksi masuk perguruan tinggi negeri melalui jalur SBMPTN. Peneliti membangun aplikasi simulasi tes SBMPTN berbasis web, dengan harapan aplikasi Simulasi Tes SBMPTN ini dapat digunakan dimanapun dan kapanpun tanpa menggunakan buku lagi. Berdasarkan penelitian ini, penggunaan AJAX masih belum optimal sehingga saat digunakan oleh banyak user akan terasa berat karena hanya digunakan untuk menjadikan website menjadi interaktif.[3] 3. Metode Penelitian 3.1 Alat dan Bahan Penelitian 3.1.1 Perangkat Keras Penelitian ini menggunakan satu unit laptop dan dua unit server dengan spesifikasi sebagai berikut ini. Tabel 1. Spesifikasi laptop Perangkat Keras Spesifikasi Intel(R) Core(TM) i5-2415M CPU Prosesor @ 2.3 GHz Memory 8 GB RAM Intel HD Graphics 3000 GPU 512 VGA Card MB Harddisk Patriot Blaze 120GB Tabel 2. Spesifikasi Server 1 Perangkat Keras Spesifikasi Prosesor 1 CPU Memory 512 MB RAM Transfer 1000 GB Harddisk 20 GB SSD Tabel 3. Spesifikasi Server 2 Perangkat Keras Spesifikasi Prosesor 2 CPU Memory 2 GB RAM Transfer 3000 GB Harddisk 40 GB
3.1.1 Instrumentasi Penelitian Pada penelitian ini penulis menggunakan instrumen penelitian berupa observasi. Teknik ini dilakukan dengan mengamati pengaruh penggunaan jQuery Ajax dengan jQuery Deffered Ajax terhadap kecepatan waktu yang dibutuhkan untuk menyelesaikan banyak request, penggunaan memori
3.1.2 Perangkat Lunak Perangkat lunak yang digunakan dalam penelitian ini adalah sebagai berikut:
2
pada server, penggunaan cpu pada server, dan hasil dari request.
Sebelum melakukan pengujian maka perlu implementasi program, berikut adalah implementasi program.
3.2 Alur Penelitian
Gambar 2. Screenshoot Implementasi jQuery AJAX Biasa
Gambar 3. Screenshoot Implementasi jQuery Deffered AJAX 4.2 Hasil Pengujian dan Pembahasan Dari data yang telah didapatkan maka bisa dibuat tabel perbandingan untuk mencari sebuah kesimpulan sebagai berikut : Tabel 4. Perbandingan Query jQuery Ajax Biasa dan Deffered Server 1 Gambar 1. Alur Penelitian Dalam penelitian ini, peneliti pertama kali melakukan studi pustaka yaitu dengan cara membaca literatur yang berhubungan dengan jQuery, jQuery Deffered, javascript, html dan php. Setelah itu peneliti melakukan instalasi vestacp, htop dan google chrome yang akan digunakan dalam penelitian ini. Kemudian peneliti melanjutkan dengan melakukan implementasi program berupa implementasi jQuery AJAX biasa dan jQuery Deffered AJAX dan setelah itu melakukan pengujian.
Jumla h Reque st 5 10 50
Dari hasil pengujian, peneliti melakukan analisa data yang telah didapatkan sehingga mendapatkan sebuah kesimpulan dan dilanjutkan dengan pembuatan laporan
100
4. Hasil dan Pembahasan
300
200
4.1 Implementasi Program
500
3
Waktu Request B 1.47 s 1.70 s 3.53 s 5.81 s 9.14 s 15.6 4s 25.4 3s
D 3.03 s 2.65 s 6.10 s 11.2 8s 20.5 4s 28.8 4s 47.8 1s
Pengguna an Memory Server B D 41 22 9 9 41 24 9 1 42 24 2 6 42 24 4 7 42 24 6 7 42 25 4 0 42 24 5 2
Pengguna an CPU Server B 0.0 4 0.0 5 0.3 3 0.5 1 0.7 3 1.2 4 1.5 9
D 0.0 6 0.0 8 0.0 8 0.0 8 0.2 3 0.3 1 0.3 7
Hasil Request B 100 % 100 % 100 % 100 % 100 % 100 % 100 %
D 100 % 100 % 100 % 100 % 100 % 100 % 100 %
Keterangan : B : jQuery Ajax Biasa D : jQuery Deffered Ajax Tabel diatas adalah tabel hasil perbandingan pemrosesan Query antara jQuery Ajax Biasa dengan jQuery Deffered Ajax pada server 1. Saat pemrosesan jQuery Deffered Ajax membutuhkan waktu yang lebih lama dibandingkan dengan jQuery Ajax Biasa.
300
138s
792s
500
210s
136 8s
39 7 37 5
33 7 38 2
0.9 8 1.5 3
0.2 7 0.2 1
74 % 72 %
92 % 93 %
Keterangan : B : jQuery Ajax Biasa D : jQuery Deffered Ajax Penggunaan CPU pada saat memproses jQuery Deffered Ajax lebih sedikit dan tidak menunjukkan perbedaan yang signifikan antara percobaan pertama sampai yang terakhir dibandingkan dengan jQuery Ajax Biasa yang mempunyai perbedaan sangat signifikan saat melakukan pemrosesan pertama hingga terakhir.
Tabel 5. Perbandingan Query jQuery Ajax Biasa dan Deffered Server 2 Penggun Penggun Juml Waktu aan Hasil aan CPU ah Request Memory Request Server Requ Server est B D B D B D B D 847 1.64 32 32 0.0 0.0 100 100 5 ms s 6 2 4 4 % % 888 1.93 33 33 0.0 0.0 100 100 10 ms s 7 2 5 6 % % 1.50 4.46 34 34 0.3 0.0 100 100 50 s s 2 4 3 1 % % 2.73 9.18 35 34 0.5 0.0 100 100 100 s s 4 6 1 8 % % 3.67 17.2 37 34 0.7 0.1 100 100 200 s 2s 1 6 3 3 % % 4.37 28.9 37 34 1.2 0.1 100 100 300 s 2s 1 7 4 9 % % 7.95 39.3 37 35 1.5 0.2 100 100 500 s 0s 3 2 9 2 % %
Tabel 7. Perbandingan Grabbing Gambar jQuery Ajax Biasa dan Deffered Server 2 Penggun Penggun Juml Waktu aan Hasil aan CPU ah Request Memory Request Server Requ Server est B D B D B D B D 2.97 16.0 32 27 0.0 0.0 80 100 5 s 3s 8 2 5 2 % % 5.89 25.3 34 27 0.0 0.0 80 100 10 s 4s 2 5 6 2 % % 16.3 41 28 0.1 0.1 78 100 50 102s 9s 6 1 6 0 % % 38.9 42 31 0.3 0.1 77 100 100 270s 6s 5 5 2 2 % % 44 36 0.3 0.1 78 100 200 90s 504s 4 4 5 2 % % 46 36 0.3 0.1 78 100 300 126s 726s 7 8 4 3 % % 133 55 39 0.4 0.1 78 100 500 222s 4s 0 2 1 1 % %
Keterangan : B : jQuery Ajax Biasa D : jQuery Deffered Ajax Dilihat dari sisi penggunaan memory, jQuery Deffered Ajax membutuhkan lebih sedikit memory dan dari sisi penggunaan CPU, jQuery Deffered Ajax juga membutuhkan sumber daya yang lebih sedikit.
Keterangan : B : jQuery Ajax Biasa D : jQuery Deffered Ajax
Tabel 6. Perbandingan Grabbing Gambar jQuery Ajax Biasa dan Deffered Server 1 Penggun Penggun Juml Waktu aan Hasil aan CPU ah Request Memory Request Server Requ Server est B D B D B D B D 4.91 12.0 41 23 0.0 0.0 60 80 5 s 7s 2 6 3 4 % % 4.93 19.5 42 23 0.1 0.0 80 100 10 s 3s 7 6 0 5 % % 26.9 41 24 0.3 0.1 70 100 50 108s 3s 0 4 5 2 % % 52.0 41 24 0.4 0.1 70 86 100 252s 1s 7 5 3 9 % % 30.7 46 29 0.8 0.2 70 84 200 444s 2s 3 4 7 4 % %
Tabel diatas adalah tabel hasil perbandingan pemrosesan Query antara jQuery Ajax Biasa dengan jQuery Deffered Ajax pada server 2. Saat pemrosesan jQuery Deffered Ajax membutuhkan waktu yang lebih lama dibandingkan dengan jQuery Ajax Biasa. Tabel 8. Perbandingan Grabbing Text jQuery Ajax Biasa dan Deffered Server 1 Penggun Penggun Juml Waktu aan Hasil aan CPU ah Request Memory Request Server Requ Server est B D B D B D B D 4.45 16.2 18 16 0.0 0.0 63 100 5 s 8s 2 3 7 5 % %
4
5.61 s 27.2 4s 53.2 0s
20.1 3s 54.8 8s
200
84s
222s
300
138s
342s
500
216s
522s
10 50 100
78s
20 3 24 7 24 3 25 2 26 7 24 1
18 5 20 2 20 3 21 0 20 9 21 6
0.3 3 1.2 2 1.8 3 2.5 7 3.0 9 4.2 9
0.0 8 0.2 3 0.4 1 0.3 8 0.4 8 0.4 7
74 % 78 % 65 % 83 % 79 % 64 %
100 % 100 % 99.9 % 98.5 %
penggunaan CPU, jQuery Deffered Ajax juga membutuhkan sumber daya yang lebih sedikit.
99%
5. Kesimpulan
97.4 %
Berdasarkan penjelasan dan pembahasan yang telah diuraikan pada bab-bab sebelumnya hingga tahap implementasi program dan pengujian kesimpulan. Pada server 1 maupun server 2 untuk memproses query berupa eksekusi perintah SELECT, UPDATE dan INSERT secara bersamaan, jika menggunakan jQuery Deffered membutuhkan waktu yang agak lama, namun membutuhkan alokasi memory dan load cpu server yang lebih sedikit. Sedangkan untuk tingkat keberhasilan hasil request, baik jQuery ajax biasa maupun yang jQuery Deffered, sama-sama memberikan hasil yang sama.
Penggunaan CPU pada saat memproses jQuery Deffered Ajax lebih sedikit dan tidak menunjukkan perbedaan yang signifikan antara percobaan pertama sampai yang terakhir dibandingkan dengan jQuery Ajax Biasa yang mempunyai perbedaan sangat signifikan saat melakukan pemrosesan pertama hingga terakhir.
Keterangan : B : jQuery Ajax Biasa D : jQuery Deffered Ajax Dilihat dari sisi penggunaan memory, jQuery Deffered Ajax membutuhkan lebih sedikit memory dan dari sisi penggunaan CPU, jQuery Deffered Ajax juga membutuhkan sumber daya yang lebih sedikit.
Saat memproses grabbing gambar dan grabbing text, saat menggunakan server 1 dan server 2 jika menggunakan jQuery Deffered membutuhkan waktu yang agak lama, namun membutuhkan alokasi memory dan load cpu server yang lebih sedikit. Sedangkan untuk tingkat keberhasilan hasil request, jQuery Deffered memberikan hasil yang lebih baik.
Tabel 9. Perbandingan Grabbing Text jQuery Ajax Biasa dan Deffered Server 2 Penggun Penggun Juml Waktu aan Hasil aan CPU ah Request Memory Request Server Requ Server est B D B D B D B D 8.45 6.99 26 24 0.0 0.0 60 100 5 s s 4 4 5 7 % % 17.6 9.52 29 25 0.0 0.1 72 100 10 7s s 9 6 4 0 % % 40.9 45.2 32 26 0.3 0.1 72 100 50 2s 8s 2 8 1 8 % % 33 27 0.3 0.2 70 100 60s 84s 99% 0 3 9 5 % 33 27 0.7 0.2 74 98.5 200 90s 168s 6 3 3 7 % % 33 27 0.8 0.3 70 300 162s 270s 99% 9 5 4 8 % 37 27 1.3 0.3 75 97.4 500 216s 456s 3 7 6 9 % %
Daftar Pustaka [1] Setiawan. 2013. Web Chat Application using LongPolling Technology with PHP and AJAX. Jakarta : Binus [2] Rusdi. 2014. Perancangan Website E-Commerce Dengan Fasilitas Custom Yoghurt Menggunakan Ajax Dan Jquery Pada Toko Pirate Yoghurt. Yogyakarta : Amikom [3] Saputro. 2013. Membangun Aplikasi Simulasi Tes Sbmptn Berbasis Web. Yogyakarta : Amikom
Biodata Penulis Didy Septiyono, memperoleh gelar Sarjana Komputer (S.Kom), Jurusan Teknik Informatika STMIK AMIKOM Yogyakarta, lulus tahun 2015. Saat ini menjadi programmer website dan aplikasi mobile.
Keterangan : B : jQuery Ajax Biasa D : jQuery Deffered Ajax
Armadyah Amborowati, memperoleh gelar Sarjana Komputer (S.Kom), Jurusan Sistem Informasi STMIK AMIKOM Yogyakarta, lulus tahun 2004. Memperoleh gelar Master of Engineering (M.Eng) Program Pasca Sarjana Magister Teknologi Informasi Fakultas Teknik Elektro Universitas Gajah Mada Yogyakarta, lulus tahun 2009. Saat ini menjadi Dosen di STMIK AMIKOM Yogyakarta.
Tabel diatas adalah tabel hasil perbandingan pemrosesan Query antara jQuery Ajax Biasa dengan jQuery Deffered Ajax pada server 2. Saat pemrosesan jQuery Deffered Ajax membutuhkan waktu yang lebih lama dibandingkan dengan jQuery Ajax Biasa. Dilihat dari sisi penggunaan memory, jQuery Deffered Ajax membutuhkan lebih sedikit memory dan dari sisi
5
