π Live Website: https://web-production-f8d4b.up.railway.app/
UJIKOM LEVEL 2 β JURUSAN PENGEMBANGAN PERANGKAT LUNAK DAN GIM (PPLG)
SMK MARHAS MARGAHAYU SEKOLAH PUSAT KEUNGGULAN
TAHUN AJARAN 2025 - 2026
Projek ini merupakan pengembangan sistem pemesanan makanan berbasis web untuk Avenoir Kitchen, sebuah restoran premium yang mengangkat mie ayam dan spaghetti sebagai menu utama berkualitas tinggi. Dirancang untuk menciptakan pengalaman kuliner yang higienis dan efisien, sistem ini memungkinkan pelanggan untuk melakukan pemesanan secara mandiri hanya dengan memindai QR Code yang tersedia di meja melalui perangkat smartphone mereka.
Sementara itu, di sisi operasional, kasir dibekali dengan panel admin berbasis template AdminLTE untuk mengelola data menu dan meja dengan mudah, serta memproses pembayaran tunai secara aman melalui validasi pemindaian QR Code khusus untuk mencegah potensi kecurangan. Proses penyajian makanan juga berjalan lebih terstruktur berkat adanya fitur Kitchen Display yang memudahkan koki dalam melihat dan memperbarui status pesanan secara real-time melalui teknik polling, yang keseluruhannya dibangun secara kokoh menggunakan framework Laravel 12 dengan pendekatan arsitektur MVC.
Projek Avenoir Kitchen dirancang dengan berbagai fitur modern yang memberikan nilai tambah (value) baik dari sisi kenyamanan pelanggan maupun efisiensi operasional restoran:
- π± Self-Service Ordering via QR Code Pelanggan cukup memindai QR Code unik di meja masing-masing untuk langsung melihat menu dan melakukan pemesanan tanpa perlu antre di kasir atau menunggu pelayan membawa buku menu.
- π Kitchen Display System (KDS) Real-Time Layar khusus koki yang secara dinamis memantau pesanan masuk. Koki dapat mengubah status pesanan dari Pending -> Diproses -> Siap Disajikan secara langsung yang otomatis terhubung ke sistem.
- π‘οΈ Anti-Fraud Cashier Verification Untuk metode pembayaran tunai, pelanggan akan menerima QR Code verifikasi transaksi unik di layar mereka. Kasir melakukan pemindaian terhadap QR Code tersebut untuk memvalidasi pembayaran secara aman guna menghindari kecurangan internal.
- π³ Simulasi Dual-Payment System Mendukung fleksibilitas transaksi dengan pilihan pembayaran Tunai (memerlukan validasi kasir) maupun pembayaran cashless otomatis (melalui simulasi QRIS).
- π οΈ Dynamic & Autogenerated Table QR Admin tidak perlu membuat QR Code manual untuk setiap meja baru. Sistem secara otomatis membuat QR Code dinamis berbasis URL aktif yang terhubung langsung dengan ID meja terkait.
- π AdminLTE Management Dashboard Dashboard administratif yang komprehensif bagi pengelola restoran untuk manajemen meja, manajemen kategori, kontrol ketersediaan menu makanan/minuman, serta monitoring riwayat transaksi harian.
- Sistem mendeteksi nomor meja dari QR Code yang dipindai pelanggan.
- Sistem menampilkan daftar menu berdasarkan kategori.
- Sistem menyimpan menu yang dipilih pelanggan ke dalam keranjang.
- Sistem menghitung total harga dari seluruh isi keranjang.
- Sistem menyimpan data pesanan ke database saat pelanggan melakukan konfirmasi.
- Sistem mengubah status meja menjadi "terisi".
- Jika pelanggan memilih bayar tunai, sistem menampilkan QR Code khusus untuk diverifikasi admin. Jika QRIS, sistem langsung mencatat status sebagai lunas.
- Sistem menampilkan daftar pesanan baru di halaman koki.
- Sistem mengubah status pesanan menjadi "diproses" saat koki menekan tombol mulai masak.
- Sistem mengubah status pesanan menjadi "siap diambil" saat koki menekan tombol selesai.
- Sistem menampilkan notifikasi di layar pelanggan bahwa makanan siap diambil.
flowchart TD
subgraph Pelanggan
P_Start([Start]) --> P_QR[QR Code di Meja]
P_QR --> P_Scan[Scan QR Code]
P_Scan --> P_Menu[Halaman Menu]
P_Menu --> P_Pilih[Pilih Menu & Metode Pembayaran]
P_Pilih --> P_Form[Formulir Pesanan yang Sudah Diisi]
end
subgraph Admin
A_Form[Formulir Pesanan yang Sudah Diisi]
A_Input[Input Formulir Pesanan]
A_Update[Proses Update Pesanan & Update Meja]
A_DB[(db_resto7)]
A_Verif{Pesanan Diverifikasi?}
A_StatusBelum[Pesanan yang Belum Dimasak]
A_StatusSiap[Pesanan Berstatus Siap Diambil]
A_Metode{Metode Pembayaran?}
A_QR1[QR Code]
A_QR2[QR Code]
A_ScanKasir[Di Scan oleh Kasir]
A_ScanQRIS[Melakukan Scan]
A_SelesaiBayar[Pesanan dan Pembayaran Selesai]
A_Struk[Cetak Struk]
end
subgraph Koki
K_Belum[Pesanan yang Belum Dimasak]
K_TombolMasak[Menekan Tombol Masak]
K_Proses[Pesanan Berstatus Proses]
K_TombolSelesai[Menekan Tombol Selesai]
K_Siap[Pesanan Berstatus Siap Diambil]
end
P_Form --> A_Form
A_Form --> A_Input
A_Input --> A_Update
A_Update --> A_DB
A_DB --> A_Verif
A_Verif --> A_StatusBelum
A_StatusBelum --> K_Belum
K_Belum --> K_TombolMasak
K_TombolMasak --> K_Proses
K_Proses --> K_TombolSelesai
K_TombolSelesai --> K_Siap
K_Siap --> A_StatusSiap
A_StatusSiap --> A_Metode
A_Metode -- Tunai --> A_QR1
A_Metode -- QRIS --> A_QR2
A_QR1 --> A_ScanKasir
A_QR2 --> A_ScanQRIS
A_ScanKasir --> A_SelesaiBayar
A_ScanQRIS --> A_SelesaiBayar
A_SelesaiBayar --> A_Struk
A_Struk --> P_Struk[Struk]
P_Struk --> P_End([End])
| Kode | Kebutuhan Fungsional | Deskripsi |
|---|---|---|
| P01 | Landing Page | Menampilkan halaman depan profil restoran secara publik |
| P02 | Halaman Menu | Menampilkan daftar menu berdasarkan kategori sesuai nomor meja dari QR |
| P03 | Keranjang & Checkout | Menampilkan item, memproses perhitungan total, dan menyimpan data pesanan |
| P04 | Tracking Pesanan | Memantau status pesanan secara otomatis (polling) dan menampilkan QR tunai jika diperlukan |
| P05 | Login | Memverifikasi username dan password untuk mengakses panel internal |
| P06 | Dashboard | Menampilkan ringkasan pendapatan, jumlah pesanan, dan status meja |
| P07 | Manajemen Menu | Mengelola data menu (Tambah, Edit, Hapus, Ubah ketersediaan) |
| P08 | Manajemen Meja | Mengelola data meja dan melakukan generate gambar QR Code secara otomatis |
| P09 | Manajemen Pesanan | Menampilkan seluruh data pesanan dan memproses validasi pembayaran tunai via scan QR |
| P10 | Kitchen Display | Menampilkan daftar pesanan aktif dan menyediakan tombol untuk mengubah status proses memasak |
| P11 | Logout | Menghapus sesi login dan mengarahkan ke halaman login |
graph LR
subgraph Sistem Avenoir Kitchen
UC1(landing page)
UC2(halaman menu)
UC3(keranjang & checkout)
UC4(tracking pesanan)
UC5(login)
UC6(dashboard)
UC7(manajemen menu)
UC8(manajemen meja)
UC9(manajemen pesanan)
UC10(kitchen display)
UC11(logout)
end
Pelanggan((Pelanggan)) --> UC1
Pelanggan --> UC2
Pelanggan --> UC3
Pelanggan --> UC4
Admin((Admin)) --> UC5
Admin --> UC6
Admin --> UC7
Admin --> UC8
Admin --> UC9
Admin --> UC11
Koki((Koki)) --> UC5
Koki --> UC6
Koki --> UC10
Koki --> UC11
- Aktor: Publik atau pelanggan
- Kondisi Awal: Pengguna mengakses root URL website
- Aksi Aktor: Pengguna membuka alamat website Avenoir Kitchen
- Reaksi Sistem: Sistem menampilkan halaman utama berisi profil restoran dan deskripsi singkat
- Kondisi Akhir: Halaman depan restoran berhasil ditampilkan
- Aktor: Pelanggan
- Kondisi Awal: Pelanggan memindai QR code di meja
- Aksi Aktor:
- Pelanggan membuka hasil pemindaian QR code
- Pelanggan memilih kategori menu
- Pelanggan menekan tombol tambah pada menu tertentu
- Reaksi Sistem:
- Sistem membaca nomor meja dari URL
- Sistem menampilkan daftar kategori dan menu
- Sistem memfilter dan menampilkan menu sesuai kategori
- Sistem menyimpan item ke keranjang dan menampilkan notifikasi sukses
- Kondisi Akhir: Item berhasil ditambahkan ke dalam keranjang
- Aktor: Pelanggan
- Kondisi Awal: Terdapat minimal 1 item di dalam keranjang
- Aksi Aktor:
- Pelanggan membuka sidebar keranjang
- Pelanggan memilih metode pembayaran dan menekan "pesan"
- Reaksi Sistem:
- Sistem menampilkan daftar item beserta total harga
- Sistem menyimpan data pesanan ke database
- Sistem mengubah status meja menjadi "terisi"
- Sistem mengarahkan ke halaman tracking
- Jika tunai, sistem menampilkan QR code tunai; jika QRIS, sistem ubah status menjadi "lunas"
- Kondisi Akhir: Pesanan tersimpan dan pelanggan diarahkan ke halaman tracking
- Aktor: Pelanggan
- Kondisi Awal: Pelanggan berada di halaman tracking pesanan
- Aksi Aktor: Pelanggan membuka halaman tracking
- Reaksi Sistem:
- Sistem menampilkan nomor pesanan dan status awal
- Sistem melakukan pengecekan status otomatis (polling) ke database
- Jika status di database berubah, sistem memperbarui tampilan
- Sistem menampilkan notifikasi saat status berubah menjadi "siap diambil"
- Kondisi Akhir: Pelanggan mengetahui bahwa makanan sudah siap diambil
- Aktor: Admin & Koki
- Kondisi Awal: Pengguna berada di halaman login
- Aksi Aktor: Pengguna mengisi username dan password lalu menekan "login"
- Reaksi Sistem:
- Sistem memverifikasi ke data ke database
- Jika valid, sistem membuat session dan mengarahkan ke dashboard
- Jika tidak valid, sistem menampilkan pesan error
- Kondisi Akhir: Pengguna berhasil masuk ke sistem sesuai hak akses
- Aktor: Admin / Koki
- Kondisi Awal: Pengguna sudah memiliki session login
- Aksi Aktor: Pengguna mengakses halaman dashboard
- Reaksi Sistem:
- Sistem menjalankan query agregasi ke database
- Sistem menampilkan statistik pendapatan, pesanan, dan meja
- Kondisi Akhir: Data ringkasan operasional restoran berhasil ditampilkan
- Aktor: Admin
- Kondisi Awal: Admin membuka halaman manajemen menu
- Aksi Aktor: Admin mengisi form data menu dan menekan "Simpan"
- Reaksi Sistem:
- Sistem memvalidasi inputan admin
- Sistem menyimpan data baru ke tabel menu
- Sistem menampilkan pesan sukses dan memperbarui tabel
- Kondisi Akhir: Data menu baru berhasil tersimpan di database
- Aktor: Admin
- Kondisi Awal: Admin membuka halaman manajemen meja
- Aksi Aktor: Admin mengisi form nomor meja dan kapasitas, lalu menekan "Simpan"
- Reaksi Sistem:
- Sistem memvalidasi inputan admin
- Sistem membuat gambar QR Code dan menyimpannya di folder server
- Sistem menyimpan data meja beserta path gambar QR ke database
- Kondisi Akhir: Data meja dan gambar QR Code berhasil dibuat
- Aktor: Admin
- Kondisi Awal: Pelanggan menunjukkan QR Code tunai ke Admin
- Aksi Aktor: Admin memindai QR Code tunai dari pelanggan
- Reaksi Sistem:
- Sistem membaca nomor pesanan dari hasil scan QR
- Sistem memvalidasi pesanan (metode tunai dan status belum bayar)
- Sistem mengubah status pembayaran menjadi "Lunas"
- Sistem menampilkan pesan sukses di layar admin
- Kondisi Akhir: Pembayaran tunai berhasil diproses dengan aman
- Aktor: Koki
- Kondisi Awal: Terdapat pesanan baru yang masuk
- Aksi Aktor:
- Koki menekan tombol "Mulai Masak" pada pesanan
- Koki menekan tombol "Selesai" setelah makanan matang
- Reaksi Sistem:
- Sistem mengubah status pesanan menjadi "Diproses"
- Sistem mengubah status pesanan menjadi "Siap Diambil"
- Sistem mengirim perubahan Status ke halaman tracking pelanggan
- Kondisi Akhir: Status pesanan diperbarui dan pelanggan mendapat notifikasi
- Aktor: Admin / Koki
- Kondisi Awal: Pengguna sedang dalam keadaan login
- Aksi Aktor: Pengguna menekan tombol "Logout"
- Reaksi Sistem:
- Sistem menghapus semua data session pengguna
- Sistem mengarahkan pengguna kembali ke halaman login
- Kondisi Akhir: Pengguna berhasil keluar dari sistem
stateDiagram-v2
state "Publik / Pelanggan" as P {
[*] --> MembukaAlamat: Pengguna membuka alamat website
[*] --> MembukaQR: Pelanggan membuka hasil pemindaian QR code
MembukaQR --> PilihKategori: Pelanggan memilih kategori menu
PilihKategori --> TekanTambah: Pelanggan menekan tombol tambah pada menu tertentu
}
state "Sistem" as S {
MembukaAlamat --> TampilLanding: Sistem menampilkan halaman utama berisi profil restoran dan deskripsi singkat
TampilLanding --> [*]
MembukaQR --> BacaURL: Sistem membaca nomor meja dari URL
BacaURL --> TampilMenu: Sistem menampilkan daftar kategori dan menu
PilihKategori --> FilterMenu: Sistem memfilter dan menampilkan menu sesuai kategori
TekanTambah --> SimpanKeranjang: Sistem menyimpan item ke keranjang dan menampilkan notifikasi sukses
SimpanKeranjang --> [*]
}
stateDiagram-v2
state "Pelanggan" as P2 {
[*] --> BukaKeranjang: Pelanggan membuka sidebar keranjang
BukaKeranjang --> PilihPembayaran: Pelanggan memilih metode pembayaran dan menekan "pesan"
[*] --> BukaTracking: Pelanggan membuka halaman tracking
}
state "Sistem" as S2 {
BukaKeranjang --> TampilTotal: Sistem menampilkan daftar item beserta total harga
PilihPembayaran --> SimpanPesanan: Sistem menyimpan data pesanan ke database
SimpanPesanan --> Terisi: Sistem mengubah status meja menjadi "terisi"
Terisi --> ArahkanTracking: Sistem mengarahkan ke halaman tracking
ArahkanTracking --> QR_Tunai: Jika tunai, tampilkan QR code tunai; Jika QRIS, ubah status "lunas"
QR_Tunai --> [*]
BukaTracking --> TampilNomor: Sistem menampilkan nomor pesanan dan status awal
TampilNomor --> Polling: Sistem melakukan pengecekan status otomatis (polling) ke database
Polling --> UpdateTampilan: Jika status di database berubah, sistem memperbarui tampilan
UpdateTampilan --> NotifikasiSiap: Sistem menampilkan notifikasi saat status berubah menjadi "siap diambil"
NotifikasiSiap --> [*]
}
stateDiagram-v2
state "Admin / Koki" as U {
[*] --> IsiLogin: Pengguna mengisi username dan password lalu menekan "login"
[*] --> AksesDashboard: Pengguna mengakses halaman dashboard
}
state "Sistem" as S3 {
IsiLogin --> VerifDB: Sistem memverifikasi ke data ke database
VerifDB --> Valid: Jika valid, sistem membuat session dan mengarahkan ke dashboard
VerifDB --> Invalid: Jika tidak valid, sistem menampilkan pesan error
Valid --> [*]
Invalid --> [*]
AksesDashboard --> QueryAgregasi: Sistem menjalankan query agregasi ke database
QueryAgregasi --> TampilStatistik: Sistem menampilkan statistik pendapatan, pesanan, dan meja
TampilStatistik --> [*]
}
stateDiagram-v2
state "Admin" as A {
[*] --> IsiFormMenu: Admin mengisi form data menu dan menekan "Simpan"
[*] --> IsiFormMeja: Admin mengisi form nomor meja dan kapasitas, lalu menekan "Simpan"
}
state "Sistem" as S4 {
IsiFormMenu --> ValidasiMenu: Sistem memvalidasi inputan admin
ValidasiMenu --> SimpanMenu: Sistem menyimpan data baru ke tabel menu
SimpanMenu --> SuksesMenu: Sistem menampilkan pesan sukses dan memperbarui tabel
SuksesMenu --> [*]
IsiFormMeja --> ValidasiMeja: Sistem memvalidasi inputan admin
ValidasiMeja --> GenerateQR: Sistem membuat gambar QR Code dan menyimpannya di folder server
GenerateQR --> SimpanMeja: Sistem menyimpan data meja beserta path gambar QR ke database
SimpanMeja --> [*]
}
stateDiagram-v2
state "Admin / Koki" as AK {
[*] --> ScanQRTunai: Admin memindai QR Code tunai dari pelanggan
[*] --> Masak: Koki menekan tombol "Mulai Masak" pada pesanan
Masak --> SelesaiMasak: Koki menekan tombol "Selesai" setelah makanan matang
}
state "Sistem" as S5 {
ScanQRTunai --> BacaPesanan: Sistem membaca nomor pesanan dari hasil scan QR
BacaPesanan --> ValidasiTunai: Sistem memvalidasi pesanan (metode tunai dan status belum bayar)
ValidasiTunai --> StatusLunas: Sistem mengubah status pembayaran menjadi "Lunas"
StatusLunas --> SuksesAdmin: Sistem menampilkan pesan sukses di layar admin
SuksesAdmin --> [*]
Masak --> StatusDiproses: Sistem mengubah status pesanan menjadi "Diproses"
StatusDiproses --> StatusSiap: Sistem mengubah status pesanan menjadi "Siap Diambil"
StatusSiap --> KirimNotif: Sistem mengirim perubahan Status ke halaman tracking pelanggan
KirimNotif --> [*]
}
erDiagram
user ||--o{ pesanan : "membuat / memproses"
meja ||--o{ pesanan : "memiliki"
pesanan ||--|{ detail_pesanan : "memiliki"
menu ||--o{ detail_pesanan : "dipesan"
kategori_menu ||--o{ menu : "memiliki"
user {
bigint id_user PK
string nama
string username
string password
enum role
}
kategori_menu {
bigint id_kategori PK
string nama_kategori
}
menu {
bigint id_menu PK
bigint id_kategori FK
string nama_menu
text deskripsi
decimal harga
string gambar
boolean status_tersedia
}
meja {
bigint id_meja PK
string nomor_meja
integer kapasitas
string qr_code
enum status
}
pesanan {
bigint id_pesanan PK
bigint id_meja FK
bigint id_user FK
string nomor_pesanan
enum metode_pembayaran
enum status_pembayaran
enum status_pesanan
decimal total_harga
text catatan
}
detail_pesanan {
bigint id_detail PK
bigint id_pesanan FK
bigint id_menu FK
integer jumlah
decimal harga_satuan
decimal subtotal
}
user:{id_user, nama, username, password, role}menu:{id_menu, id_kategori, nama_menu, deskripsi, harga, gambar, status_tersedia}kategori_menu:{id_kategori, nama_kategori}meja:{id_meja, nomor_meja, kapasitas, qr_code, status}pesanan:{id_pesanan, id_meja, id_user, nomor_pesanan, metode_pembayaran, status_pembayaran, status_pesanan, total_harga, catatan}detail_pesanan:{id_detail, id_pesanan, id_menu, jumlah, harga_satuan, subtotal}
- Framework Utama: Laravel 12 (Model-View-Controller / MVC Architecture)
- Bahasa Pemrograman: PHP 8.2 / 8.3 & JavaScript (ES6)
- Database Driver: MySQL & SQLite Support
- Pustaka QR Code:
simplesoftwareio/simple-qrcode&bacon/bacon-qr-code - Admin Template: AdminLTE Theme
- Bundler & UI: Vite, HTML5, Vanilla CSS, Bootstrap
- Hosting & PaaS: Railway Cloud Platform (Nixpacks Builder with PHP GD Extension)
git clone https://github.com/RyukaAngga/Avenoir_Kitchen.git
cd Avenoir_Kitchencomposer install
npm installcopy .env.example .env
php artisan key:generate- Metode SQLite (Instan):
php artisan migrate --force php artisan db:seed --force
- Metode MySQL (Laragon/XAMPP):
Atur kredensial MySQL pada
.env, lalu jalankan:php artisan migrate --seed
npm run build
php artisan serveAkses di browser melalui: http://localhost:8000
| Role | Username | Password | Hak Akses Utama |
|---|---|---|---|
| Admin 1 | admin1 |
admin123 |
Kelola Menu, Meja, Validasi Pembayaran |
| Admin 2 | admin2 |
admin123 |
Kelola Menu, Meja, Validasi Pembayaran |
| Koki | koki |
koki123 |
Display Dapur & Kontrol Status Masak (/koki/kitchen) |
Untuk pengembangan jangka panjang, aplikasi Avenoir Kitchen ini sangat potensial untuk ditambahkan peran (role) khusus Kasir agar pengelolaan transaksi pembayaran terpisah secara terstruktur dan meringankan beban kerja Admin dalam memantau operasional restoran. Selain itu, integrasi dengan sistem payment gateway otomatis seperti Midtrans atau Xendit perlu diterapkan guna memfasilitasi berbagai metode pembayaran digital secara real-time sekaligus meminimalisir kesalahan konfirmasi manual. Sebagai penyempurna, penambahan fitur dasbor analisis bisnis berbasis kecerdasan buatan (AI) dapat diintegrasikan untuk memprediksi tren menu terlaris dan mengoptimalkan manajemen stok bahan baku secara otomatis di masa depan.
Proyek ini dibuat untuk keperluan Ujikom Level 2 PPLG SMK Marhas Margahayu Tahun 2026 dan dilindungi di bawah lisensi MIT License.