Implementasi Sistem Penjualan Berbasis Web Menggunakan HTML5, CSS3, dan JavaScript Vanilla pada UMKM Kuliner.: Studi Kasus pada UMKM Dapur Rumpin, Bogor

Fathya Vaulizayanti; Billie Raditya Akbar; Jupron

doi:10.55382/jurnalpustakadata.v6i3.1938

Penulis

Fathya Vaulizayanti Universitas Pamulang
Billie Raditya Akbar Universita Pamulang
Jupron Universitas Pamulang

DOI:

https://doi.org/10.55382/jurnalpustakadata.v6i3.1938

Kata Kunci:

sistem penjualan berbasis web, Vanilla JavaScript, localStorage, QRIS, digitalisasi UMKM

Abstrak

Dapur Rumpin, sebuah unit usaha kuliner berskala menengah yang beroperasi di Kecamatan Rumpin, Kabupaten Bogor, menghadapi serangkaian hambatan operasional yang bersumber dari sistem pencatatan transaksi penjualan yang masih bersifat konvensional sepenuhnya, mencakup penulisan pesanan secara manual pada buku nota, penghitungan tagihan oleh kasir tanpa bantuan perangkat digital, serta ketiadaan jalur pemesanan berbasis teknologi yang terorganisir. Kondisi tersebut berpotensi memunculkan kesalahan pencatatan data sekaligus menghambat kemampuan pelaku usaha dalam mengambil keputusan berdasarkan data secara real-time. Riset ini bertujuan merancang serta mengimplementasikan sebuah sistem transaksi berbasis web dengan memanfaatkan HTML5, CSS3, dan Vanilla JavaScript (ES6) tanpa keterlibatan framework backend apapun, dengan fokus utama pada optimalisasi efisiensi transaksi di lingkungan usaha mikro, kecil, dan menengah (UMKM) sektor kuliner. Metodologi pengembangan perangkat lunak yang digunakan ialah model Waterfall, yang mencakup empat tahapan berurutan: penggalian kebutuhan sistem, perancangan arsitektur, realisasi kode, dan verifikasi fungsional. Sistem yang berhasil dibangun dilengkapi dengan sejumlah fitur unggulan, yakni katalog menu digital yang mendukung penyaringan kategori secara dinamis, keranjang belanja interaktif yang beroperasi melalui Web Storage API (localStorage), tampilan kode pembayaran QRIS secara statis, dan mekanisme pengiriman konfirmasi pesanan secara otomatis kepada admin lewat WhatsApp URL Scheme API. Evaluasi menggunakan metode Black Box Testing terhadap lima skenario fungsional memperlihatkan bahwa seluruh fungsi utama sistem berjalan tanpa hambatan, meliputi penambahan item ke keranjang, komputasi total tagihan secara otomatis, validasi isian formulir checkout, penayangan kode QRIS, dan pengiriman notifikasi pesanan melalui WhatsApp. Sistem ini berhasil menggantikan alur pencatatan manual dengan solusi digital yang terautomasi, sekaligus menekan potensi kesalahan manusia dan mempercepat siklus pelayanan kepada pelanggan. Penelitian ini menyimpulkan bahwa teknologi web berbasis Vanilla JavaScript layak dijadikan solusi digitalisasi sistem transaksi UMKM kuliner yang praktis, hemat biaya, dan terbukti efektif.

Kata kunci: sistem penjualan berbasis web, Vanilla JavaScript, localStorage, QRIS, digitalisasi UMKM

Unduhan

Data unduhan belum tersedia.

Referensi

I. Fathoni and N. Asfiah, “Transformasi Digital Bisnis UMKM di Indonesia Setelah Masa Pandemi,” vol. 4, no. 2, pp. 10219–10236, 2024.

Asosiasi Penyelenggara Jasa Internet Indonesia (APJII), “Survei Penetrasi Internet Indonesia 2024.,” Jakarta, Indonesia, 2024. [Online]. Available: https://survei.apjii.or.id

Kementerian Koperasi dan UKM RI, “Data UMKM Indonesia Tahun 2023,” Jakarta, Indonesia., 2023.

D. Saputra and H. Setiawan, “Digitalisasi pemasaran umkm kuliner olahan kacang beantien tanjungpinang melalui sistem informasi penjualan berbasis website,” vol. 5, no. 3, pp. 1092–1107, 2025, doi: 10.53363/bw.v5i3.468.

A. Surahmat, T. Dedi, and S. P. Adawiyah, “Penerapan Sistem Informasi Web untuk Optimalisasi Penjualan UMKM Kuliner Pujasera Walet Mas,” vol. 5, no. 2, pp. 119–128, 2025.

N. Rahmi, E., Yumami, E., & Hidayasari, “Analisis Metode Pengembangan Sistem Informasi Berbasis Website?: Systematic Literature Review,” vol. 7, pp. 821–834, 2023.

B. P. Putra, D. C. Assyura, D. Nugroho, and A. Prasetyo, “Penerapan Aplikasi Pemesanan Pada Usaha Mikro Kecil Menengah ( UMKM ) dalam Memudahkan Transaksi Diterima?: Diterbitkan?:,” vol. 12, no. 1, pp. 38–45, 2024.

M. A. Habibirrahman, W. Hayuhardika, N. Putra, and B. Trias, “Pengembangan Sistem Pemesanan Kue berbasis Website menggunakan Midtrans Webservice sebagai Payment Gateway ( Studi Kasus?: Toko Kue De Tasty ),” vol. 6, no. 2, pp. 597–604, 2022.

Y. P. Sutanto, A. Mardliyaturrahma, and A. Wasiqoh, “Digitalisasi pemesanan produk UMKM dengan pemanfaatan WhatsApp Business di Desa Karanggayam Srengat Kabupaten Blitar,” J. Pengabdi. dan Pemberdaya. Nusant., vol. 4, no. 2, pp. 175–181, 2022.

S. Narulita, A. Nugroho, and M. Z. Abdillah, “Diagram Unified Modelling Language ( UML ) untuk Perancangan Sistem Informasi Manajemen Penelitian dan Pengabdian Masyarakat ( SIMLITABMAS ) Universitas Nasional Karangturi Semarang , Indonesia ( deskripsi ) dan perancangan sistem , khususnya pada pemrograman berorientasi objek ( Nistrina,” no. 3, pp. 244–256, 2024.

R. O. Siburian and F. Latifah, “Penerapan Metode Waterfall dalam Perancangan Sistem Informasi Berbasis Web pada PT. Garuda Inti Sentosa untuk Meningkatkan Penjualan,” vol. 7, no. 4, pp. 972–983, 2023, doi: 10.52362/jisamar.v7i4.1252.

A. W. Farhan, A., & Shifa, “Penggunaan Metode Pembayaran QRIS Pada Setiap UMKM di Era Digital,” vol. 4, no. 2, pp. 1198–1206, 2023.

M. Nurudin, W. Jayanti, R. D. Saputro, and M. P. Saputra, “Pengujian Black Bo x pada Aplikasi Penjualan Berbasis Web Menggunakan Teknik Boundary Value Analysis,” vol. 4, no. 4, pp. 143–148, 2020.

A. I. Febriana, A. E. S, and F. Harimurti, “Studi Literatur?: Penerapan QRIS Sebagai Payment Gateway dalam Mendukung Efisiensi Sistem Informasi Akuntansi pada UMKM,” vol. 4, pp. 73–88, 2025.

V. R. Yulianti and R. H. Nugroho, “Implementasi WhatsApp Business dalam Digitalisasi Pemasaran dan Pengelolaan Pelanggan pada Usaha Catering,” J. Stud. Adm. Bisnis, vol. 1, pp. 1097–1105, 2025