Meningkatkan Unjuk Kerja Akses Data Pada Aplikasi Berbasis Web
Katon Wijaya*, Gabriel Indra Widi Tamtama
Fakultas Teknologi Informasi, Prodi Sistem Informasi, Universitas Kristen Duta Wacana, Yogyakarta, Indonesia Email: *[email protected], [email protected]
Email Penulis Korespondensi: [email protected]
Abstrak-Pemrograman web menjadi lebih efisien ketika sekarang tersedia plugin jQuery. Namun, ketika ukuran database sangat besar, kinerja aplikasi berbasis web sangat menurun. Dalam bisnis retail pencarian data barang yang tersedia sangat diperlukan, jika data yang diunduh terbatas jumlahnya maka beresiko barang yang dicari tidak akan ditemukan. Untuk meningkatkan kinerja aplikasi berbasis web maka akan dibuat suatu metode agar dapat dilakukan pembatasan jumlah data yang diunduh tetapi pencarian data barang yang diinginkan tetap dapat ditemukan, sehingga program aplikasi dapat menampilkan data dengan fitur pencarian yang disediakan oleh plugin jQuery tetapi dapat merespon kebutuhan pengguna dengan cepat. Metode yang digunakan dalam penelitian ini adalah teknik filtering dengan memanfaatkan fitur Multilevel Sequential Query Language (SQL), sehingga data yang ditampilkan dapat dikurangi secara signifikan sehingga kinerja akses data akan meningkat. Dari penelitian ini terbukti bahwa dengan teknik multilevel filtering, data item yang dicari dapat dengan mudah ditemukan dan dapat ditampilkan dengan cepat menggunakan plugin jQuery Data Table, sehingga pemrograman menjadi sangat efisien.
Kata Kunci: Pagination; Kinerja; Pemfilteran Bertingkat; Aplikasi Berbasis
Abstract-Web programming has become even more efficient when there are now jQuery plug-ins available. However, when the size of the database is very large, the performance of the web-based application decreases greatly. In a retail business, the search for available goods data is very necessary, if the data downloaded is limited in number there is a risk that the item sought will not be found. To improve the performance of web-based applications, a method will be made so that restrictions on the amount of data downloaded can be carried out but the search for the desired item data can still be found, so that the application program can display data with the search feature provided by the jQuery plug-in but can respond to user needs quickly. The method used in this research is a filtering technique by utilizing the multilevel Sequential Query Language (SQL) feature, so that the displayed data can be significantly reduced so that data access performance will increase. From this research, it is evident that with the multilevel filtering technique, the item data you are looking for can easily be found and can be displayed quickly using the jQuery Data Table plugin, so that programming becomes very efficient.
Keywords: Pagination; Performance; Multilevel Filtering; Web-Based Applications
1. PENDAHULUAN
Persediaan barang pada toko retail ragamnya sangat banyak, ketika konsumen membutuhkan suatu barang, pelayan toko membutuhkan program aplikasi yang dapat dipergunakan untuk melakukan pencarian barang yang dibutuhkan tersebut agar dapat segera diketahui ketersediaan, harga dan lokasi penyimpanannya. Perkembangan toko retail pun mengalami kemajuan yang sangat pesat seiring dengan perkembangan informasi teknologi. Penggunaan teknologi yang sudah usang, akan tergantikan oleh teknologi yang lebih canggih untuk mendukung proses bisnis toko [1]. Apabila toko retail tidak mampu mengadaptasi perkembangan teknologi, maka bisa terancam kalah bersaing dengan toko lainnya [2].
Membuat sistem yang dibutuhkan oleh toko retail perlu perhatian khusus sehingga sistem yang dibangun dapat tepat sasaran. Dengan kondisi sekarang yang serba online dan kebutuhan data secara real time, maka sistem yang dibangun haruslah berbasis web. Akan tetapi, membangun sebuah web perlu mempertimbangkan beberapa kerangka kerja yang akan digunakan [3]. Salah satu yang bisa diimplementasikan oleh toko retail adalah aplikasi berbasis web yang menggunakan plug-in jQuery dalam sistem basis data [4].
Plug-in jQuery menyediakan cara untuk memanipulasi data dalam tabel HTML yang memungkinkan untuk dilakukan penampilan dalam bentuk tabel yang mempunyai fitur pencarian, menampilkan dalam bentuk halaman- halaman (pagination) dengan jumlah data yang sangat banyak [5][6]. Dengan memakai plug-in ini pengembang tidak perlu bekerja keras untuk membangun aplikasi yang dapat menampilkan, menyaring dan mencari karena tinggal mengimplementasikannya.
Masalah yang muncul yaitu ketika akan menampilkan data yang jumlahnya mencapai puluhan ribu baris memakan waktu yang cukup lama meskipun sudah menggunakan plug-in jQuery, sehingga dapat menghambat kelancaran bisnis.
Pada penelitian ini akan digunakan metode penyaringan bertingkat, agar aplikasi yang dibuat tetap dapat memanfaatkan plug-in jQuery yang sudah tersedia namun dapat melakukan pencarian data dengan cepat sehingga bisnis yang dilakukan dapat berjalan dengan lancar.
2. METODOLOOGI PENELITIAN
Pada penelitian ini pertama akan dilakukan uji coba pemakaian jQuery-plugin. Data Table untuk menampilkan puluhan ribu data untuk diketahui unjuk kerjanya, kemudian akan dilakukan analisa performa penampilan data untuk beberapa jumlah data agar ditemukan jumlah yang paling optimal. Berikut ini adalah analisa, arstitektur serta metode yang dipakai pada penelitian ini.
2.1 Analisa
Unjuk kerja penampilan data dapat dipengaruhi oleh berbagai hal, antara lain perangkat keras dan lunak yang digunakan, banyaknya data yang dimuat, kecepatan transmisi data pada internet dan lain-lain.
2.1.1 Perangkat Keras dan Lunak
Pada penelitian ini digunakan perangkat keras yang memakai mikro prosesor Intel(R) Core(TM) i3-4170 CPU @ 3.70GHz 3.70 GHz dengan RAM 8 GB seperti Gambar 1 di bawah ini:
Gambar 1. Spesifikasi perangkat keras yang digunakan
Sedangkan perangkat lunak Sistem Operasi yang digunakan adalah Windows 10 Pro seperti Gambar 2 di bawah ini:
Gambar 2. Spesifikasi perangkat keras yang digunakan 2.1.2 Banyaknya Data
Untuk mengetahui pengaruh banyaknya data terhadap unjuk kerja penampilan informasi pada Data Table digunakan beberapa ukuran data mulai dari 1.000 data hingga 20.000 data, dari penelitian ini akan diperoleh ukuran data yang cukup dan dapat ditampilkan dalamwaktu yang masih dapat diterima.
2.1.3 Kecepatan Media Akses
Pada penelitian ini digunakan media local host, sehingga band width internet yang dipergunakan tidak akan berpengaruh. Dengan demikian faktor lalu lintas data pada jaringan tidak akan mempengaruhi kecepatan akses data.
2.2 Analisa
Halaman web merupakan hasil dari berbagai pengaturan dan tata letak dokumen yang ditulis dalam bentuk tag-tag HTML, dokumen HTML ini dapat diakses melalui internet berkat adanya web server yang dalam hal ini adalah Apache Web Server [7]. Apache web server dapat mengeksekusi program PHP karena di dalam web server tersebut terdapat middle ware PHP yang dapat mengakses database server maupun menghasilkan dukumen HTML. Gambar 3 menjelaskan mengenai siklus terbentuknya halaman web secara dinamis yang datanya tersimpan pada database MySQL [8].
Bootstrap merupakan kerangka kerja HTML, CSS dan JS yang terkenal saat ini untuk membuat proyek yang responsif dan berorientasi selular di web. Bootstrap ini telah menjadi alat penting bagi pengembang front-end.
Pengembang dan desainer dapat dengan cepat membuat situs web yang sepenuhnya responsif [9][10].
Gambar 3. Spesifikasi perangkat keras yang digunakan 2.3 Metode
Metode pada penelitan ini adalah memakai model Waterfall. Model air terjun (Waterfall) kadang disebut sebagai siklus hidup klasik (classic life cycle), yaitu pendekatan sistemastis dan berurutan (sekuensial) pada pengembangan perangkat lunak, yang dimulai dengan spesifikasi kebutuhan pengguna dan berlanjut melalui tahapan-tahapan perencanaan, pemodelan, konstruksi, serta penyerahan sistem/perangkat lunak [11].
Gambar 4. Siklus hidup tahapan waterfall
Penelitian ini akan fokus pada masalah peningkatan unjuk kerja akses data yang merupakan inti dari sebuah bisnis retail, yaitu mengenai pencarian dan penampilan data barang. Pada bisnis retail, masalah yang sering dialami adalah kesulitan untuk mencari persediaan barang karena banyaknya jenis barang dan lokasi penyimpanannya. Oleh karena itu dibutuhkan kecepatan akses agar pelayanan dapat berjalan dengan baik. Pertama akan dilakukan pengumpulan data persediaan barang dari toko suku cadang kendaraan bermotor yang diperlukan untuk studi kasus peningkatan kecepatan akses, kemudian memodelkan tabel-tabel pada database menjadi entitas-entitas yang diperlukan dalam proses pendataan persediaan barang. Berikutnya adalah perancangan antarmuka yang mengutamakan kemudahan pengguna akan diimplementasikan pada aplikasi yang dibuat, sehingga memudahkan dan menarik minat pengelola toko untuk menggunakan aplikasi ini.
3. HASIL DAN PEMBAHASAN
Pada penelitian ini menggunakan total data maksimal sebanyak 38.854 data barang, ditampilkan memakai antarmuka grafis plug in jQuery Data Table tanpa penyaringan [12]. Ada 2 macam pengukuran waktu, yaitu waktu yang dibutuhkan PHP untuk memuat seluruh data ke memori (data loading), data loading diketahui dari progress indikator yang ada di sebelah kiri atas Browser (Gambar 5) dan waktu yang dibutuhkan oleh front end untuk menampilkan data pada antarmua grafis Data Table (dengan pagination dan fitur filter) hingga siap (ready) seperti pada Gambar 6. Hasil pengukuran adalah seperti pada Tabel 1 di bawah ini.
Gambar 5. Data loading progress indicator
Berikut ini merupakan tabel dari durasi loading dan data ready, dapat dilihat pada tabel 1 dibawah ini:
Tabel 1. Siklus hidup tahapan waterfall No. Banyak Data Loading Ready
1 (semua) 38.854 baris 37 detik 1 menit 8 detik 2 20.000 baris 15 detik 26 detik
3 15.000 baris 8 detik 14 detik
4 10.000 baris 5 detik 8 detik
5 5.000 baris 3 detik 4 detik
Tampilan data tabel pada kondisi ready dapat dilihat pada gambar 6 dibawah ini:
Gambar 6. Tampilan pada saat data tabel pada kondisi ready
Indikator data sedang dimuat
Gambar 7. Grafik durasi loading dan data ready 3.1 Pencarian Data
Pencarian data seharusnya diterapkan pada seluruh data agar dapat dipastikan keberadaannya, namun penampilan seluruh data akan memakan banyak waktu yang tidak dapat diterima oleh pemakai (lebih dari 5 detik). Sedangkan seperti tampak pada Gambar 7, penyaringan data dapat meningkatkan performansi penampilan data, namun berpotensi untuk menghilangkan data yang akan dicari sehingga data tidak ditemukan padahal mungkin sebenarnya data tersebut ada.
3.2 Penyaringan Bertingkat
Berdasarkan fakta di atas, maka akandipergunakan penyaringan bertingkat. Sesuai dengan hasil wawancara dengan pengguna, kunci pencarian barang yang sering dibutuhkan adalah berdasarkan kode barang, jenis mobil, kualitas dan nama barang. Untuk menyederhanakan masalah, tiga elemen kunci pencarian dituangkan dalam bentuk kode barang 31-digit dengan format dibagi menjadi 3 arti seperti berikut:
Tabel 2. Data penyaringan bertingkat
Kode barang Jenis Mobil Kualitas
1 2 3 4 5 6 7 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 1 2 3 4 5 6 7 8 9 3.2.1 Penyaringan Batas Data
Berdasarkan percobaan di atas, dengan memakai peralatan yang dipergunakan pada penelitian ini dan memakai jaringan localhost, batas banyaknya baris yang ditampilkan ideal adalah kurang dari 5.000 baris data, oleh karena itu secara default, batas data yang disarankan adalah 4.000 baris, akan tetapi karena mungkin ada perbedaan peralatan maupun kecepatan akses data, pemakai diperbolehkan memilih batasan ini pada saat login seperti Gambar 8 di bawah ini:
Gambar 8. Batasan data sesuai kebutuhan pemakai 3.2.2 Penyaringan Data yang Dicari
Pembatasan banyak data di atas dapat mengakibatkan data yang dicari tidak dapat ditemukan karena sudah terpotong dan tidak termasuk di dalam data yang tampil. Oleh karena itu diperlukan penyaringan tingkat berikutnya, yaitu berdasarkan kode barang, jenis mobil, kualitas dan nama barang.
3.3 Antarmuka Grafis Penyaringan Data
Berdasarkan kebutuhan penyaringan tersebut, pada antarmuka grafis untuk penampilan data perlu ditambahkan kontrol form seperti Gambar 9 berikut ini:
4. KESIMPULAN
Dari hasil penelitian, pencarian dengan memakai penyaringan bertingkat ini dapat berfungsi dengan baik karena, pemrograman menjadi mudah karena walaupun datanya cukup banyak tetap dapat memakai plug in jQuery Data Table.
Pembatasan banyaknya data dapat meningkatkan unjuk kerja penampilan data secara signifikan. Dengan menerapkan penyaringan bertingkat, data yang dicari dapat ditemukan dengan mudah dan efisien.
REFERENCES
[1] Hart-Davis, G. (2010). HTML, XHTML & CSS QuickSteps (1st ed.). The McGraw-Hill Companies.
[2] Harwani, B. (2022). jQuery Recipes: Find Ready-Made Solutions to All Your jQuery Problems. In jQuery Recipes (2nd ed.).
Apress. https://doi.org/10.1007/978-1-4842-7304-3
[3] Kolagar, M., Parida, V., & Sjödin, D. (2022). Ecosystem transformation for digital servitization: A systematic review, integrative framework, and future research agenda. Journal of Business Research, 146(April), 176–200.
https://doi.org/10.1016/j.jbusres.2022.03.067
[4] Mostaghel, R., Oghazi, P., Parida, V., & Sohrabpour, V. (2022). Digitalization driven retail business model innovation:
Evaluation of past and avenues for future research trends. Journal of Business Research, 146(May 2021), 134–145.
https://doi.org/10.1016/j.jbusres.2022.03.072
[5] Pressman, R. S. (2010). Software Quality Engineering: A Practitioner’s Approach. In Software Quality Engineering: A Practitioner’s Approach (7th ed., Vol. 9781118592). The McGraw-Hill Companies.
[6] Y. Su, G. Chen, M. Li, T. Shi, and D. Fang, “Design and implementation of web multimedia teaching evaluation system based on artificial intelligence and jQuery,” Mob. Inf. Syst., vol. 2021, pp. 1–11, 2021.
[7] Quigley, E., & Gargenta, M. (2006). PHP and MySQL by EXAMPLE (1st ed.). Prentice Hall.
www.prenhallprofessional.com/title/0131875086
[8] Raasch, J., Murray, G., Ogievetsky, V., & Lowery, J. (2015). JavaScript and jQuery for Data Analysis and Visualization (1st ed.). John Wiley & Sons. https://eur-lex.europa.eu/legal content/PT/TXT/PDF/?uri=CELEX:32016R0679&from
=PT%0Ahttp://eur-lex.europa.eu/LexUriServ/LexUriServ.do?uri=CELEX:52012PC0011:pt:NOT
[9] Ramgir, M. (2020). Full Stack Java Development with SPRING MVC, Hibernate, jQuery, and Bootstrap (1st ed.). Wiley India Pvt. Ltd. www.wileyindia.com
[10] M. Y. Putra, “Responsive Web Design Menggunakan Bootstrap Dalam Merancang Layout Website,” Inf. Syst. Educ. Prof.
J. Inf. Syst., vol. 5, no. 1, pp. 61–70, 2020.
[11] Riquelme-Medina, M., Stevenson, M., Barrales-Molina, V., & Llorens-Montes, F. J. (2022). Coopetition in business Ecosystems: The key role of absorptive capacity and supply chain agility. Journal of Business Research, 146(April), 464–
476. https://doi.org/10.1016/j.jbusres.2022.03.071
[12] D. P., Alor-Hernández, G., Valencia-García, R., Rodríguez-Mazahua, L., Rodríguez-González, A., & López Cuadrado, J. L.
(2015). Analyzing best practices on Web development frameworks: The lift approach. Science of Computer Programming, 102, 1–19. https://doi.org/10.1016/j.scico.2014.12.004
