ANALISA PERBANDINGAN PENGGUNAAN JQUERY DEFERRED PADA AJAX DAN JQUERY AJAX BIASA UNTUK MEMPROSES MULTIPLE AJAX GUNA MENGOPTIMALKAN PERFORMA WEB SERVER

(1)

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

(2)

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

(3)

1

ANALISA PERBANDINGAN PENGGUNAAN JQUERY DEFERRED PADA

AJAX DAN JQUERY AJAX BIASA UNTUK MEMPROSES

MULTIPLE AJAX GUNA MENGOPTIMALKAN

PERFORMA WEB SERVER

Didy Septiyono

1)

_{, Armadyah Amborowati}

2)

1,2)

Teknik Informatika STMIK AMIKOM Yogyakarta

Jl Ringroad Utara, Condongcatur, Depok, Sleman, Yogyakarta Indonesia 55283

Email : didy.s@students.amikom.ac.id1)_{, armadyah.a@amikom.ac.id}2)

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

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]

(4)

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]

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

Prosesor Intel(R) Core(TM) i5-2415M CPU @ 2.3 GHz

Memory 8 GB RAM

VGA Card Intel HD Graphics 3000 GPU 512 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.2 Perangkat Lunak

Perangkat lunak yang digunakan dalam penelitian ini adalah sebagai berikut:

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.

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

(5)

3 pada server, penggunaan cpu pada server, dan hasil dari

request.

3.2 Alur Penelitian

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.

Dari hasil pengujian, peneliti melakukan analisa data yang telah didapatkan sehingga mendapatkan sebuah kesimpulan dan dilanjutkan dengan pembuatan laporan

4. Hasil dan Pembahasan 4.1 Implementasi Program

Sebelum melakukan pengujian maka perlu implementasi program, berikut adalah implementasi program.

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 Jumla h Reque st Waktu Request Pengguna an Memory Server Pengguna an CPU Server Hasil Request B D B D B D B D 5 1.47 s 3.03 s 41 9 22 9 0.0 4 0.0 6 100 % 100 % 10 1.70 s 2.65 s 41 9 24 1 0.0 5 0.0 8 100 % 100 % 50 3.53 s 6.10 s 42 2 24 6 0.3 3 0.0 8 100 % 100 % 100 5.81 s 11.2 8s 42 4 24 7 0.5 1 0.0 8 100 % 100 % 200 9.14 s 20.5 4s 42 6 24 7 0.7 3 0.2 3 100 % 100 % 300 15.6 4s 28.8 4s 42 4 25 0 1.2 4 0.3 1 100 % 100 % 500 25.4 3s 47.8 1s 42 5 24 2 1.5 9 0.3 7 100 % 100 %

(6)

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.

Tabel 5. Perbandingan Query jQuery Ajax Biasa dan Deffered Server 2 Juml ah Requ est Waktu Request Penggun aan Memory Server Penggun aan CPU Server Hasil Request B D B D B D B D 5 847 ms 1.64 s 32 6 32 2 0.0 4 0.0 4 100 % 100 % 10 888 ms 1.93 s 33 7 33 2 0.0 5 0.0 6 100 % 100 % 50 1.50 s 4.46 s 34 2 34 4 0.3 3 0.0 1 100 % 100 % 100 2.73 s 9.18 s 35 4 34 6 0.5 1 0.0 8 100 % 100 % 200 3.67 s 17.2 2s 37 1 34 6 0.7 3 0.1 3 100 % 100 % 300 4.37 s 28.9 2s 37 1 34 7 1.2 4 0.1 9 100 % 100 % 500 7.95 s 39.3 0s 37 3 35 2 1.5 9 0.2 2 100 % 100 % Keterangan :

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.

Tabel 6. Perbandingan Grabbing Gambar jQuery Ajax Biasa dan Deffered Server 1

Juml ah Requ est Waktu Request Penggun aan Memory Server Penggun aan CPU Server Hasil Request B D B D B D B D 5 4.91 s 12.0 7s 41 2 23 6 0.0 3 0.0 4 60 % 80 % 10 4.93 s 19.5 3s 42 7 23 6 0.1 0 0.0 5 80 % 100 % 50 26.9 3s 108s 41 0 24 4 0.3 5 0.1 2 70 % 100 % 100 52.0 1s 252s 41 7 24 5 0.4 3 0.1 9 70 % 86 % 200 30.7 2s 444s 46 3 29 4 0.8 7 0.2 4 70 % 84 % 300 138s 792s 39 7 33 7 0.9 8 0.2 7 74 % 92 % 500 210s 136 8s 37 5 38 2 1.5 3 0.2 1 72 % 93 % Keterangan :

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 7. Perbandingan Grabbing Gambar jQuery Ajax Biasa dan Deffered Server 2

Juml ah Requ est Waktu Request Penggun aan Memory Server Penggun aan CPU Server Hasil Request B D B D B D B D 5 2.97 s 16.0 3s 32 8 27 2 0.0 5 0.0 2 80 % 100 % 10 5.89 s 25.3 4s 34 2 27 5 0.0 6 0.0 2 80 % 100 % 50 16.3 9s 102s 41 6 28 1 0.1 6 0.1 0 78 % 100 % 100 38.9 6s 270s 42 5 31 5 0.3 2 0.1 2 77 % 100 % 200 90s 504s 44 4 36 4 0.3 5 0.1 2 78 % 100 % 300 126s 726s 46 7 36 8 0.3 4 0.1 3 78 % 100 % 500 222s 133 4s 55 0 39 2 0.4 1 0.1 1 78 % 100 % Keterangan :

Tabel 8. Perbandingan Grabbing Text jQuery Ajax Biasa dan Deffered Server 1

Juml ah Requ est Waktu Request Penggun aan Memory Server Penggun aan CPU Server Hasil Request B D B D B D B D 5 4.45 s 16.2 8s 18 2 16 3 0.0 7 0.0 5 63 % 100 %

(7)

5 10 5.61 s 20.1 3s 20 3 18 5 0.3 3 0.0 8 74 % 100 % 50 27.2 4s 54.8 8s 24 7 20 2 1.2 2 0.2 3 78 % 100 % 100 53.2 0s 78s 24 3 20 3 1.8 3 0.4 1 65 % 99.9 % 200 84s 222s 25 2 21 0 2.5 7 0.3 8 83 % 98.5 % 300 138s 342s 26 7 20 9 3.0 9 0.4 8 79 % 99% 500 216s 522s 24 1 21 6 4.2 9 0.4 7 64 % 97.4 % Keterangan :

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.

Tabel 9. Perbandingan Grabbing Text jQuery Ajax Biasa dan Deffered Server 2

Juml ah Requ est Waktu Request Penggun aan Memory Server Penggun aan CPU Server Hasil Request B D B D B D B D 5 8.45 s 6.99 s 26 4 24 4 0.0 5 0.0 7 60 % 100 % 10 17.6 7s 9.52 s 29 9 25 6 0.0 4 0.1 0 72 % 100 % 50 40.9 2s 45.2 8s 32 2 26 8 0.3 1 0.1 8 72 % 100 % 100 60s 84s 33 0 27 3 0.3 9 0.2 5 70 % 99% 200 90s 168s 33 6 27 3 0.7 3 0.2 7 74 % 98.5 % 300 162s 270s 33 9 27 5 0.8 4 0.3 8 70 % 99% 500 216s 456s 37 3 27 7 1.3 6 0.3 9 75 % 97.4 % Keterangan :

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.

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.

5. Kesimpulan

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.

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.

Daftar Pustaka

[1] Setiawan. 2013. Web Chat Application using Long-Polling 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.

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.