Journal of Digital Business and Technology Innovation (DBESTI) Vol.
2 No.
2 2025, 246-251
Journal of Digital Business and Technology Innovation (DBESTI) https://journal.
id/index.
php/DBESTI P-ISSN: 3047-1028 E-ISSN: 3032-775X
PERANCANGAN SISTEM PEMESANAN MAKANAN BERBASIS WEB PADA
UMKM DENGAN FRAMEWORK LARAVEL
Ahmad Fadhliansyah1.
Edi Wibowo2.
Krisna Panji3 Sistem Informasi.
Sekolah Tinggi Teknologi Terpadu Nurul Fikri Bisnis Digital.
Sekolah Tinggi Teknologi Terpadu Nurul Fikri Jakarta Selatan.
DKI Jakarta.
Indonesia 12640 fadhliansyah9f@gmail.
com, ediwibowo@nurulfikri.
id, panji@nurulfikri.
Abstract Mie Ayam & Bakso Mas Dava is a culinary MSME that still uses manual order recording, often leading to errors, long queues, and service delays.
This study aims to design a webbased ordering application to improve operational efficiency, reduce recording errors, and simplify order and sales management.
The development method used is Extreme Programming (XP), which includes planning, design, coding, testing, and evaluation phases.
The application was developed using the Laravel framework, supported by Tailwind CSS.
HTML.
MySQL, and integrated with Midtrans as a payment gateway.
Key features of the system include menu ordering, shopping cart, special order notes, order status tracking, and an admin dashboard for managing products and sales reports.
Testing using the Black Box testing method shows that the system is 100% running as Evaluation involving 15 users showed that the application is easy to use and speeds up the ordering process.
The business owner also confirmed that the system significantly reduces recording errors and improves service efficiency.
Based on these results, the application is considered feasible for implementation and has the potential to be further developed to support the digital transformation of culinary MSMEs.
Keywords: Digitalization.
Extreme Programming.
Laravel.
MSME.
Web Ordering Abstrak UMKM Mie Ayam & Bakso Mas Dava merupakan usaha kuliner yang masih menggunakan pencatatan manual dalam proses pemesanan makanan, yang sering menimbulkan kesalahan pencatatan, antrean panjang, dan keterlambatan pelayanan.
Penelitian ini bertujuan merancang aplikasi pemesanan berbasis web untuk meningkatkan efisiensi operasional, mengurangi kesalahan pencatatan, dan mempermudah pengelolaan pesanan serta penjualan.
Metode pengembangan yang digunakan adalah Extreme Programming (XP) dengan tahapan perencanaan, perancangan, coding, pengujian, dan evaluasi.
Aplikasi dibangun menggunakan Laravel dengan dukungan Tailwind CSS.
HTML.
MySQL, dan integrasi Midtrans untuk pembayaran.
Fitur utama aplikasi mencakup pemesanan menu, keranjang belanja, catatan pesanan, cek status, dan dashboard admin untuk kelola produk serta laporan penjualan.
Pengujian menggunakan metode Black Box testing menunjukkan bahwa sistem 100% berjalan sesuai harapan.
Evaluasi terhadap 15 pelanggan menunjukkan aplikasi mudah digunakan dan mempercepat proses pemesanan.
Pemilik usaha juga menyatakan aplikasi ini sangat membantu dalam mengurangi kesalahan dan meningkatkan efisiensi Berdasarkan hasil tersebut, aplikasi ini layak digunakan oleh UMKM dan memiliki potensi untuk dikembangkan lebih lanjut dalam mendukung digitalisasi usaha kuliner.
Kata kunci: Digitalisasi.
Extreme Programming.
Laravel.
Pemesanan Web.
UMKM
PENDAHULUAN
Usaha Mikro.
Kecil, dan Menengah (UMKM) memegang Indonesia, menyumbang lebih dari 60% terhadap Produk Domestik Bruto (PDB) nasional dan menyerap sebagian besar tenaga Salah satu tantangan utama UMKM di bidang kuliner adalah efisiensi layanan, khususnya dalam proses pencatatan pesanan yang masih dilakukan secara manual .
UMKM Mie Ayam & Bakso Mas Dava, yang didirikan pada Juni 2023 di Depok, menghadapi kendala dalam proses pemesanan saat jam sibuk, seperti antrean panjang, kesalahan pencatatan, dan keterlambatan pelayanan.
Dalam menghadapi tantangan tersebut, adopsi teknologi informasi Diterima 8 Juli 2025.
Direvisi 15 Desember 2025.
Diterima untuk publikasi 15 Desember 2025 247 | Journal of Digital Business and Technology Innovation (DBESTI) Vol.
2 No.
2 November 2025 menjadi solusi potensial.
Sistem pemesanan berbasis web memungkinkan pencatatan pesanan secara otomatis, meminimalkan kesalahan, mempercepat proses transaksi, dan menyajikan data penjualan secara real time.
Framework Laravel menjadi pilihan pengembangan aplikasi karena fleksibilitasnya dalam membangun aplikasi web secara cepat dan efisien .
Laravel mengusung Model-View-Controller (MVC) memungkinkan pemisahan logika aplikasi dan tampilan, serta mendukung pengembangan berorientasi objek .
Selain itu, metode Extreme Programming (XP) dipilih karena menekankan pada pengembangan perangkat lunak secara iteratif dan kolaboratif .
, cocok untuk proyek skala UMKM.
Penelitian ini merancang dan membangun aplikasi pemesanan web berbasis Laravel yang diintegrasikan dengan Tailwind CSS untuk desain antarmuka .
MySQL untuk manajemen basis data .
, serta Midtrans sebagai layanan pembayaran digital .
Evaluasi dilakukan menggunakan metode Black Box testing .
dan wawancara dengan pemilik UMKM dan pelanggan untuk menilai efektivitas dan kemudahan penggunaan sistem.
Penelitian ini bertujuan:
Merancang sistem informasi pemesanan berbasis web yang akurat dan efisien.
Mempercepat proses transaksi dan mengurangi antrean di UMKM.
Menyediakan data penjualan yang dapat diakses pemilik usaha secara mudah untuk pengambilan Dengan adanya aplikasi ini, diharapkan UMKM Mie Ayam & Bakso Mas Dava dapat meningkatkan kualitas layanan, mengoptimalkan proses bisnis, dan menjadi contoh digitalisasi usaha kecil di sektor kuliner.
METODE PENELITIAN
Penelitian ini merupakan jenis Research and Development (R&D) dengan pendekatan deskriptif-kualitatif yang bertujuan untuk mengembangkan dan menguji sistem pemesanan berbasis web pada UMKM kuliner.
Pengembangan sistem dilakukan menggunakan metode Extreme Programming (XP) yang terdiri atas tahapan planning, design, coding, dan testing .
Penelitian dilakukan di UMKM Mie Ayam & Bakso Mas Dava yang berlokasi di Pasir Putih.
Sawangan.
Depok.
Observasi dengan mengamati proses pemesanan secara langsung di lokasi usaha untuk mengidentifikasi permasalahan yang terjadi.
Wawancara:
A Pra-penelitian: Dilakukan kepada pemilik usaha untuk mengetahui kendala operasional, kebutuhan fitur, dan ekspektasi sistem.
A Pasca-pengembangan: Dilakukan kepada 15 pelanggan dan pemilik untuk mengevaluasi kemudahan penggunaan, efisiensi, dan saran perbaikan.
Instrumen wawancara menggunakan daftar pertanyaan semi-terstruktur yang dibagi untuk pelaku usaha dan Contoh pertanyaan kepada pelanggan antara lain mengenai kemudahan pemakaian, kecepatan pemesanan, dan fitur favorit.
Sementara kepada pemilik usaha difokuskan pada pengalaman menggunakan dashboard admin dan manfaat fitur laporan penjualan.
2 Tahapan penelitian Pengembangan sistem mengikuti Programming (XP) sebagai berikut:
Extreme .
Perencanaan (Plannin.
Dilakukan identifikasi kebutuhan sistem berdasarkan hasil observasi dan wawancara awal.
Fitur utama yang dirancang mencakup pemesanan menu, integrasi pembayaran, manajemen produk, dan pelacakan status pesanan.
Perancangan (Desig.
Desain sistem dilakukan dengan membuat use case diagram, activity diagram, dan Entity Relationship Diagram (ERD) menggunakan Draw.
Desain UI dirancang dengan Figma berdasarkan hasil wawancara dan kebutuhan pengguna.
Pengodean (Codin.
Proses pengembangan aplikasi menggunakan Laravel 11 dengan arsitektur MVC.
Desain tampilan dibangun menggunakan Tailwind CSS dan HTML, serta database menggunakan MySQL.
Server lokal menggunakan Laragon.
Fitur Midtrans diintegrasikan sebagai gateway pembayaran digital berbasis QR Code.
Pengujian (Testin.
Pengumpulan data dilakukan melalui tiga metode, yaitu:
Pengujian dilakukan dengan metode Black Box testing terhadap 10 skenario utama, seperti pemesanan, pembayaran, cek status, dan manajemen produk.
Setiap fitur diuji untuk memastikan fungsionalitas sistem tanpa melihat struktur internal kode.
Studi Literatur mengkaji teori-teori mengenai Laravel, pemesanan online.
Extreme Programming (XP), serta digitalisasi UMKM.
HASIL DAN PEMBAHASAN
Penelitian ini menghasilkan sebuah aplikasi pemesanan web yang dirancang khusus untuk mendukung operasional 1 Metode Pengumpulan Data Instrumen Penelitian 248 | Journal of Digital Business and Technology Innovation (DBESTI) Vol.
2 No.
2 November 2025 UMKM Mie Ayam & Bakso Mas Dava.
Sistem dikembangkan menggunakan pendekatan Extreme Programming (XP) dan telah melalui proses implementasi serta evaluasi menyeluruh dari sisi fungsionalitas dan pengalaman pengguna.
1 Hasil Implementasi Sistem Gambar 3.
Halaman Kelola Produk oleh Admin Aplikasi dibagi menjadi dua antarmuka utama, yaitu antarmuka pelanggan dan antarmuka admin.
Fitur pelanggan meliputi:
A Tampilan katalog menu berdasarkan kategori makanan dan minuman yang ditunjukkan oleh Gambar 1.
A Fitur keranjang belanja dengan catatan khusus dari pelanggan seperti pada Gambar 2.
A Formulir checkout dengan input nama dan nomor A Pembayaran digital menggunakan Midtrans QRIS.
A Pelacakan status pesanan menggunakan nomor pesanan.
Gambar 4.
Halaman Laporan Penjualan Sistem ini dirancang dengan arsitektur MVC untuk memisahkan antara logika bisnis, tampilan, dan kontrol Struktur basis data menggunakan MySQL dengan perancangan ERD seperti pada Gambar 5 yang mendukung operasi CRUD.
Gambar 1.
Halaman Pemesanan Menu Gambar 5.
Rancangan ERD 2 Pengujian Fungsional (Black Box testin.
Gambar 2.
Halaman Keranjang Belanja Pengujian dilakukan menggunakan metode Black Box testing pada 10 skenario utama untuk memastikan seluruh fitur berjalan sesuai fungsinya tanpa melihat struktur internal kode.
Hasil pengujian pada Tabel 1 menunjukkan bahwa semua fitur berhasil dijalankan dengan baik.
Tabel 1.
Ringkasan Hasil Pengujian Black Box testing Fitur admin diperuntukkan bagi pemilik UMKM untuk melakukan proses administratif toko yang meliputi:
Fitur Skenario Uji Hasil A Dashboard login untuk admin.
Pemesanan Menambahkan menu dan menyelesaikan pesanan Berhasil A Manajemen produk .
ambah, edit, hapu.
seperti pada Gambar 3.
Pembayaran Melakukan pembayaran via QRIS Midtrans Berhasil A Manajemen status pesanan .
iproses/selesa.
Cek Status Menampilkan status pesanan Berhasil A Laporan penjualan berdasarkan kategori menu yang ditunjukkan oleh Gambar 4.
Manajemen Produk Kelola produk .
ambah, edit, dan hapu.
Berhasil 249 | Journal of Digital Business and Technology Innovation (DBESTI) Vol.
2 No.
2 November 2025 Fitur Skenario Uji Hasil Laporan Penjualan Melihat laporan berdasarkan Berhasil 3 Evaluasi Pengguna Evaluasi dilakukan terhadap 15 pelanggan dan 1 pemilik usaha setelah sistem digunakan secara langsung.
Wawancara menunjukkan bahwa pengguna merasa puas terhadap kemudahan dan kecepatan aplikasi dalam proses Hasil wawancara dengan 15 pelanggan menunjukkan bahwa aplikasi mudah digunakan, bahkan oleh pengguna baru.
Proses pemesanan rata-rata hanya memerlukan waktu 1Ae2 Fitur yang paling disukai adalah keranjang belanja dan pembayaran melalui QRIS.
Beberapa masukan diberikan terkait pengembangan fitur notifikasi dan promo.
Ringkasan hasil evaluasi pelanggan dan pemilik UMKM ditunjukkan pada Tabel 2 dan Tabel 3.
Tabel 2.
Ringkasan Evaluasi Pelanggan Aspek Temuan Kemudahan Mudah digunakan tanpa pelatihan Efisiensi Waktu Rata-rata pemesanan selesai dalam 1Ae2 menit Fitur Favorit Keranjang belanja.
QR Code pembayaran, dan catatan khusus pesanan Masukan Tambahan notifikasi, preset menu, dan fitur Selanjutnya, pemilik UMKM menyatakan bahwa aplikasi ini sangat membantu operasional usaha.
Sistem dashboard yang sederhana membuat pengelolaan pesanan menjadi lebih tertata dan tidak terjadi lagi kekeliruan pencatatan.
Fitur laporan penjualan juga dinilai sangat berguna untuk analisis menu terlaris, walaupun masih ada saran agar laporan dari Midtrans bisa diakses langsung tanpa perlu login manual.
Tabel 3.
Ringkasan Evaluasi Pemilik Usaha Aspek Temuan keterbatasan informasi penjualan yang sebelumnya dihadapi UMKM.
Keunggulan sistem terletak pada:
A Automasi pemesanan yang mengurangi beban pelayanan A Integrasi pembayaran digital yang praktis melalui QRIS Midtrans.
A Dashboard admin yang efisien dan mudah diakses.
Jika .
, penelitian ini memiliki kekuatan pada pengembangan sistem yang lebih ringan, mudah diimplementasikan oleh UMKM, dan penggunaan pendekatan evaluasi langsung dari pengguna.
Sistem ini berpotensi direplikasi oleh UMKM sejenis untuk meningkatkan efisiensi, kecepatan layanan, dan profesionalisme dalam bertransaksi.
5 Analisis Kelayakan Sistem dan Dampaknya terhadap UMKM Kelayakan implementasi aplikasi pemesanan berbasis web pada UMKM Mie Ayam & Bakso Mas Dava dianalisis berdasarkan tiga aspek utama, yaitu aspek teknis, operasional, dan ekonomi.
Analisis ini bertujuan untuk menilai sejauh mana sistem dapat diimplementasikan secara nyata dan berkelanjutan, serta memberikan dampak positif terhadap pelaku usaha.
Aspek Teknis Aplikasi dirancang dengan menggunakan framework Laravel yang dikenal stabil, ringan, dan mendukung arsitektur MVC.
Kombinasi Laravel.
Tailwind CSS.
MySQL, dan server lokal Laragon menghasilkan sistem yang tangguh dan mudah di maintenance.
Seluruh fitur utama seperti pemesanan, pelacakan status, manajemen produk, dan laporan penjualan telah melalui pengujian Black Box testing dan dinyatakan berjalan dengan baik.
Oleh karena itu, dari sisi teknis, sistem dinilai sangat layak untuk diimplementasikan secara langsung pada lingkungan UMKM.
Aspek Operasional Kemudahan Dashboard mudah digunakan tanpa pelatihan Efisiensi Proses pencatatan pesanan lebih rapi dan cepat dibanding manual Fitur Laporan penjualan dan status pesanan sangat memudahkan pengawasan Saran Integrasi laporan langsung dari Midtrans tanpa login terpisah 4 Pembahasan Aplikasi yang dikembangkan mampu menjawab masalah pencatatan manual, keterlambatan layanan, dan Dari evaluasi pengguna, baik pelanggan maupun pemilik usaha dapat mengoperasikan sistem tanpa pelatihan khusus.
Hal ini menunjukkan bahwa desain antarmuka yang sederhana mampu meningkatkan adaptabilitas pengguna awam terhadap teknologi digital.
Pemilik usaha merasa terbantu dalam pengelolaan pesanan dan laporan penjualan, sementara pelanggan merasa proses pemesanan menjadi lebih cepat dan efisien.
Hal ini menunjukkan bahwa sistem tidak hanya layak dari sisi penggunaan, tetapi juga mendukung kelancaran operasional harian usaha.
Aspek Ekonomi 250 | Journal of Digital Business and Technology Innovation (DBESTI) Vol.
2 No.
2 November 2025 Sistem dibangun dengan memanfaatkan teknologi open source yang tidak memerlukan biaya lisensi.
Selain itu, integrasi dengan Midtrans sebagai layanan pembayaran digital memberikan fleksibilitas transaksi tanpa menambah beban operasional yang signifikan.
Efisiensi waktu dan pengurangan kesalahan pencatatan turut mendukung penghematan biaya secara tidak langsung.
Maka dari itu, secara ekonomis, aplikasi ini layak diterapkan oleh UMKM tanpa membutuhkan investasi besar.
Dampak terhadap UMKM Implementasi sistem ini mendukung transformasi digital pada UMKM, khususnya dalam meningkatkan efisiensi layanan dan profesionalisme pengelolaan pesanan.
Sistem juga membuka peluang untuk ekspansi ke layanan daring yang lebih luas seperti pemesanan online berbasis mobile, serta integrasi dengan sistem loyalty dan promosi digital.
Dengan demikian, sistem ini tidak hanya menjawab kebutuhan saat ini, tetapi juga berpotensi meningkatkan daya saing UMKM dalam jangka panjang.
KESIMPULAN
Penelitian ini menghasilkan sebuah aplikasi pemesanan berbasis web yang dirancang untuk mengatasi permasalahan UMKM Mie Ayam & Bakso Mas Dava dalam hal pencatatan manual pesanan, antrean panjang, serta keterlambatan pelayanan.
Aplikasi ini dikembangkan menggunakan metode Extreme Programming (XP) dan teknologi Laravel.
Tailwind CSS.
MySQL, serta Midtrans sebagai sistem pembayaran digital.
membuka peluang bagi UMKM untuk mengadopsi teknologi informasi secara lebih luas dan terstruktur.
Untuk pengembangan selanjutnya, disarankan agar sistem dilengkapi dengan fitur notifikasi otomatis, integrasi laporan penjualan langsung dari Midtrans tanpa login terpisah, serta kemungkinan ekspansi ke aplikasi mobile untuk menjangkau pengguna lebih luas.
DAFTAR PUSTAKA