Membangun Website QR Order System Modern Menggunakan CodeIgniter 4: Solusi Pemesanan Digital untuk Restoran dan UMKM

Di era digital seperti sekarang, hampir semua sektor bisnis mulai beradaptasi dengan teknologi untuk meningkatkan efisiensi dan kualitas pelayanan, termasuk bisnis kuliner. Salah satu inovasi yang semakin banyak digunakan oleh restoran, cafe, dan rumah makan adalah sistem pemesanan berbasis QR Code atau yang sering disebut QR Order System.

Jika beberapa tahun lalu pelanggan harus menunggu pelayan datang untuk mencatat pesanan, kini proses tersebut dapat dilakukan secara mandiri hanya dengan melakukan scan QR Code yang tersedia di meja. Pelanggan dapat langsung melihat menu, memilih makanan dan minuman, lalu mengirim pesanan ke dapur atau kasir secara realtime.

Berangkat dari kebutuhan tersebut, saya mencoba mengembangkan sebuah project website bernama QR Order System, sebuah sistem pemesanan digital berbasis web yang terinspirasi dari sistem yang digunakan oleh restoran modern seperti Mie Gacoan.

Project ini dibangun menggunakan CodeIgniter 4 dengan fokus utama pada kemudahan penggunaan, kecepatan proses pemesanan, serta kemampuan monitoring transaksi secara realtime.

Selain digunakan sebagai media pembelajaran, project ini juga sangat cocok dijadikan referensi bagi mahasiswa, freelancer, maupun developer yang ingin membangun aplikasi kasir dan pemesanan restoran modern.

Apa Itu QR Order System?

QR Order System adalah sistem pemesanan makanan dan minuman yang memanfaatkan QR Code sebagai media akses menu.

Setiap meja memiliki QR Code yang berbeda. Ketika pelanggan melakukan scan menggunakan kamera smartphone, sistem akan langsung menampilkan halaman menu yang dapat diakses tanpa perlu menginstal aplikasi tambahan.

Pelanggan cukup:

1. Scan QR Code

2. Memilih menu

3. Menentukan jumlah pesanan

4. Mengisi nama pelanggan

5. Checkout

Setelah checkout berhasil dilakukan, pesanan akan langsung masuk ke dashboard kasir secara realtime.

Konsep ini menawarkan berbagai keuntungan dibanding metode pemesanan konvensional.

Mengapa Saya Membuat Project Ini?

Saat mengunjungi beberapa restoran modern, saya melihat bahwa penggunaan QR Code dalam proses pemesanan memberikan pengalaman yang lebih cepat dan praktis.

Beberapa masalah yang sering terjadi pada sistem manual antara lain:

• Pelanggan harus menunggu pelayan datang

• Risiko salah catat pesanan

• Antrean panjang saat jam ramai

• Sulit melakukan monitoring pesanan secara realtime

• Human error yang cukup tinggi

Melihat permasalahan tersebut, saya tertarik untuk membuat versi website yang dapat digunakan oleh siapa saja sebagai bahan belajar maupun pengembangan bisnis.

Tujuan utama project ini adalah:

• Membuat sistem pemesanan yang modern

• Mengurangi ketergantungan pada pencatatan manual

• Mempermudah monitoring pesanan

• Menjadi bahan belajar Full Stack Development

• Memberikan source code gratis kepada komunitas programmer Indonesia

Teknologi yang Digunakan

Project ini dibangun menggunakan beberapa teknologi modern yang umum digunakan dalam pengembangan aplikasi web.

Backend

• PHP 8+

• CodeIgniter 4

• MySQL

Frontend

• HTML5

• CSS3

• Bootstrap

• JavaScript

• AJAX

Fitur Tambahan

• QR Code Generator

• Text To Speech (TTS)

• Realtime Notification

• Session Authentication

• Role Management

Dengan kombinasi teknologi tersebut, sistem mampu berjalan dengan cepat dan ringan bahkan pada hosting standar.

Arsitektur Sistem

Dalam project ini terdapat tiga jenis pengguna utama.

1. Pelanggan

Pelanggan hanya berinteraksi melalui halaman menu.

Mereka dapat:

• Scan QR Code

• Melihat menu

• Memilih makanan

• Memilih minuman

• Menambah jumlah pesanan

• Checkout

Pelanggan tidak perlu login untuk melakukan pemesanan.

2. Admin

Admin memiliki akses penuh terhadap sistem.

Admin dapat:

• Mengelola kategori

• Mengelola menu

• Mengelola meja

• Membuat QR Code

• Melihat pesanan masuk

• Monitoring transaksi

Admin berperan sebagai pengelola utama aplikasi.

3. Kasir

Kasir memiliki tampilan yang lebih sederhana.

Fitur kasir meliputi:

• Melihat antrean pesanan

• Memproses pesanan

• Menyelesaikan transaksi

• Melihat riwayat transaksi

• Filter transaksi berdasarkan tanggal

Dengan pembagian role seperti ini, keamanan sistem menjadi lebih baik karena setiap pengguna hanya dapat mengakses fitur yang dibutuhkan.

Fitur Login dan Authentication

Saat pertama kali masuk ke sistem, pengguna akan diarahkan ke halaman login.

Authentication digunakan untuk memastikan hanya pengguna yang memiliki akun yang dapat mengakses dashboard.

Sistem akan memeriksa:

• Email

• Username

• Password

• Role pengguna

Setelah berhasil login, pengguna akan diarahkan ke dashboard sesuai hak akses masing-masing.

Dashboard Admin

Dashboard admin menjadi pusat kontrol seluruh aplikasi.

Pada halaman ini admin dapat melihat:

• Total kategori

• Total menu

• Total meja

• Total pesanan

• Statistik transaksi

Dashboard dirancang agar informasi penting dapat dilihat secara cepat tanpa perlu membuka banyak halaman.

Manajemen Kategori

Kategori digunakan untuk mengelompokkan menu.

Contohnya:

• Paket Combo

• Makanan

• Minuman

• Dessert

• Snack

Admin cukup memasukkan nama kategori lalu menekan tombol tambah kategori.

Sistem akan otomatis membuat slug.

Contoh:

Nama Kategori:

Paket Combo

Slug:

paket-combo

Slug digunakan sebagai identitas unik yang lebih ramah URL.

Keuntungan slug:

• URL lebih rapi

• Mudah dibaca

• SEO Friendly

• Mempermudah routing sistem

Manajemen Menu

Fitur berikutnya adalah pengelolaan menu.

Admin dapat menambahkan berbagai menu makanan dan minuman.

Contoh:

Nama Menu:

Ayam Geprek + Es Teh

Harga:

Rp20.000

Kategori:

Paket Combo

Status:

Aktif

Stok:

Tersedia

Selain itu admin juga dapat mengunggah gambar menu agar tampilan lebih menarik bagi pelanggan.

Menu yang berhasil ditambahkan akan langsung muncul pada halaman pemesanan pelanggan.

Manajemen Meja dan QR Code

Salah satu fitur utama project ini adalah QR Code Generator.

Admin cukup menambahkan nomor meja.

Contoh:

Meja 7

Setelah tombol tambah ditekan, sistem akan otomatis membuat QR Code unik.

QR Code tersebut nantinya dapat dicetak dan ditempel pada meja pelanggan.

Saat pelanggan melakukan scan, sistem langsung mengetahui pesanan berasal dari meja mana.

Keuntungan metode ini:

• Tidak perlu mengetik nomor meja

• Mempercepat proses order

• Mengurangi kesalahan input

Simulasi Pemesanan Pelanggan

Untuk melakukan pengujian sistem, saya menggunakan smartphone sebagai pelanggan.

Alur pemesanan sangat sederhana.

Langkah 1

Scan QR Code.

Langkah 2

Sistem membuka halaman menu.

Langkah 3

Pilih menu.

Langkah 4

Masukkan jumlah pesanan.

Langkah 5

Isi nama pelanggan.

Langkah 6

Klik checkout.

Setelah checkout berhasil, data akan langsung dikirim ke server.

Sistem Realtime

Salah satu fitur favorit pada project ini adalah kemampuan realtime.

Begitu pelanggan melakukan checkout, kasir tidak perlu melakukan refresh halaman.

Pesanan langsung muncul secara otomatis.

Keuntungan realtime:

• Lebih cepat

• Tidak ada pesanan yang terlewat

• Monitoring lebih mudah

• Pengalaman pengguna lebih baik

Notifikasi Popup Otomatis

Saat pesanan baru masuk, sistem akan menampilkan popup notifikasi.

Informasi yang ditampilkan meliputi:

• Nama pelanggan

• Nomor meja

• Waktu pesanan

Kasir dapat langsung mengetahui adanya pesanan baru tanpa harus memeriksa daftar antrean secara manual.

Integrasi Text To Speech (TTS)

Selain popup notifikasi, sistem juga dilengkapi dengan fitur Text To Speech.

Ketika pesanan masuk, sistem akan membacakan informasi pesanan secara otomatis menggunakan suara komputer.

Keuntungan fitur ini:

• Kasir tidak perlu terus melihat layar

• Mengurangi risiko pesanan terlewat

• Meningkatkan produktivitas

Fitur ini sangat berguna ketika kondisi restoran sedang ramai.

Penanganan Double Order

Dalam dunia nyata, sangat mungkin beberapa pelanggan melakukan checkout dalam waktu yang hampir bersamaan.

Oleh karena itu sistem dirancang untuk menangani double order.

Jika terdapat dua atau lebih pesanan masuk secara bersamaan:

• Sistem membuat antrean notifikasi

• Popup muncul bergantian

• TTS dibacakan satu per satu

• Tidak ada notifikasi yang tertumpuk

Dengan mekanisme ini, seluruh pesanan tetap dapat diproses secara berurutan.

Dashboard Kasir

Dashboard kasir dirancang lebih sederhana dibanding dashboard admin.

Tujuannya agar kasir fokus pada proses transaksi.

Menu yang tersedia hanya:

• Antrean Pesanan

• Riwayat Transaksi

Tampilan yang sederhana membuat proses kerja menjadi lebih cepat dan efisien.

Antrean Pesanan

Semua pesanan baru akan masuk ke halaman antrean.

Kasir dapat melihat:

• ID Pesanan

• Nama Pelanggan

• Nomor Meja

• Daftar Menu

• Total Harga

• Waktu Pemesanan

Ketika pesanan selesai diproses, kasir cukup menekan tombol selesai.

Status transaksi akan berubah secara otomatis.

Riwayat Transaksi

Setiap transaksi yang selesai akan masuk ke halaman riwayat transaksi.

Fitur ini berfungsi sebagai arsip seluruh aktivitas penjualan.

Data yang ditampilkan meliputi:

• ID Transaksi

• Nama Pelanggan

• Nomor Meja

• Total Pembayaran

• Tanggal Transaksi

Filter Berdasarkan Tanggal

Riwayat transaksi juga dilengkapi fitur filter tanggal.

Kasir dapat memilih:

Tanggal Awal

dan

Tanggal Akhir

Kemudian sistem akan menampilkan transaksi sesuai periode yang dipilih.

Fitur ini sangat membantu saat membuat laporan harian, mingguan, maupun bulanan.

Keamanan Sistem

Dalam pengembangan project ini, keamanan juga menjadi perhatian utama.

Beberapa mekanisme keamanan yang diterapkan:

• Authentication Login

• Session Management

• Role Based Access Control

• Input Validation

• CSRF Protection

Dengan demikian sistem menjadi lebih aman dari berbagai kesalahan input maupun akses yang tidak sah.

Manfaat Bagi UMKM dan Restoran

Project ini dapat memberikan banyak manfaat bagi pelaku usaha kuliner.

Di antaranya:

Efisiensi Operasional

Pelanggan dapat memesan sendiri tanpa bantuan pelayan.

Mengurangi Human Error

Kesalahan pencatatan pesanan dapat diminimalkan.

Monitoring Lebih Mudah

Semua transaksi tercatat secara digital.

Biaya Lebih Murah

Tidak perlu membuat aplikasi mobile khusus.

Modernisasi Bisnis

Memberikan pengalaman yang lebih profesional bagi pelanggan.

Pengembangan Versi Pro

Saat ini project tersedia dalam versi gratis yang dapat digunakan untuk belajar maupun pengembangan lebih lanjut.

Ke depan akan tersedia versi Pro dengan fitur yang lebih lengkap.

Rencana fitur versi Pro antara lain:

• Payment Gateway

• Midtrans Integration

• QRIS Payment

• WhatsApp Notification

• Multi Outlet

• Multi Branch

• Cetak Struk Otomatis

• Dashboard Analitik

• Laporan Penjualan Lengkap

• TTS Suara Lebih Natural

• Desain Frontend Premium

• Dark Mode

• Manajemen Karyawan

• Stok Otomatis

• Monitoring Dapur

Dan masih banyak fitur menarik lainnya.

Kesimpulan

QR Order System merupakan solusi modern yang mampu meningkatkan efisiensi proses pemesanan pada bisnis kuliner.

Dengan memanfaatkan QR Code, pelanggan dapat melakukan pemesanan secara mandiri tanpa harus menunggu pelayan. Di sisi lain, admin dan kasir dapat mengelola transaksi dengan lebih cepat melalui dashboard yang sederhana namun fungsional.

Project ini juga menjadi contoh implementasi Full Stack Development menggunakan CodeIgniter 4 yang menggabungkan berbagai teknologi seperti QR Code, Realtime Notification, Text To Speech, Authentication, dan Manajemen Transaksi dalam satu aplikasi yang terintegrasi.

Semoga project ini dapat menjadi referensi yang bermanfaat bagi teman-teman programmer, mahasiswa, maupun pelaku usaha yang ingin mulai menerapkan sistem pemesanan digital di bisnis mereka.

Untuk mendapatkan source code project ini secara gratis dan mengikuti update project-project berikutnya, jangan lupa kunjungi KITA NGODING serta ikuti seluruh media sosial yang tersedia. 🚀

Demo : Klik Disini

====================

Admin :

username : admin

password : admin123

====================

Kasir :

username : kasir

password : kasir123

====================

Pelanggan Tanpa Login.

====================