Back to projects
Web• May 2026•
Completed

DFC CIREBON

php
javascript
css
html
mysql
DFC CIREBON Preview

Dexpress Fried Chicken (DFC) - F&B Management & E-Commerce System

Deskripsi Proyek

DFC Web App adalah sebuah platform pemesanan makanan mandiri (Self-Order E-Commerce) dan sistem manajemen terintegrasi untuk bisnis kuliner lokal Dexpress Fried Chicken di area Cirebon (Tuparev, Plered, Sumber, dll). Sistem ini menghubungkan pelanggan langsung dengan outlet terdekat tanpa melalui aplikasi pihak ketiga, sehingga seluruh alur transaksi—dari pemesanan hingga perekaman laporan keuangan—dapat dilacak secara real-time dan terpusat.

Latar Belakang & Tujuan

Proyek ini dikembangkan dengan tujuan untuk mendigitalisasi proses pemesanan dan pencatatan operasional UMKM kuliner. Mengusung konsep belanja cepat tanpa hambatan, aplikasi ini memungkinkan konsumen untuk memesan ayam goreng favorit mereka secara instan tanpa perlu mendaftar akun. Di sisi lain, sistem ini memberikan alat kontrol penuh kepada Owner untuk memantau performa cabang dan membuka peluang pendaftaran kemitraan franchise secara transparan.

Tech Stack

  • Frontend: HTML5, Vanilla CSS3 (Custom Responsive Layout), Vanilla JavaScript.
  • Backend: PHP (Native / Procedural).
  • Database: MySQL (Relational Database).
  • Iconography & UI: Phosphor Icons, FontAwesome, SweetAlert2.
  • Deployment Architecture: CPanel / InfinityFree Hosting (dengan konfigurasi Waktu Indonesia Barat).

Arsitektur Sistem & Fitur Utama

Aplikasi ini mengadopsi arsitektur Multi-Role yang dibagi menjadi 4 panel kendali:

1. Panel Konsumen (Public Facing)

  • Guest Checkout System: Pengalaman berbelanja secepat kilat. Pelanggan dapat memesan makanan tanpa kewajiban registrasi atau login.
  • Dynamic Outlet Selector: Sistem cerdas yang memungkinkan pembeli memilih cabang terdekat, lengkap dengan pengecekan ketersediaan stok real-time per outlet.
  • Keranjang JSON: Mengelola keranjang belanja dan catatan khusus pesanan di sisi client sebelum dikirim ke database.
  • Live Tracking Berbasis WA: Pelanggan dapat melacak status pesanan (Menunggu -> Disiapkan -> Siap Diambil -> Selesai) dan mencetak struk secara mandiri dengan menggunakan Nomor WhatsApp mereka sebagai kunci pencarian.
  • Smart Chatbot UI: Asisten virtual interaktif di halaman depan untuk menjawab FAQ dan memberikan navigasi instan.

2. Panel Admin Outlet (Kasir / Dapur)

  • Auto-Sync Order Dashboard: Layar kasir yang secara otomatis memperbarui antrean pesanan web setiap 10 detik tanpa perlu refresh manual.
  • Order Fulfillment: Tombol kendali alur pesanan satu klik (Terima & Masak -> Makanan Siap -> Selesaikan).
  • Manajemen Stok Manual: Dilengkapi Floating Action Button (FAB) untuk mencatat penjualan offline dan mengurangi stok ayam secara otomatis agar data gudang tetap presisi.
  • Request Restock: Modul terintegrasi untuk mengirim permohonan bahan baku ke Gudang Pusat.

3. Panel Owner (Super Admin)

  • Dashboard Pemantauan Terpusat: Memantau status operasional (Buka/Tutup) seluruh outlet cabang secara live.
  • Riwayat Penjualan Web: Menampilkan tabel arsip seluruh transaksi yang terjadi di website dengan fitur filter berdasarkan tanggal dan cabang.
  • Smart Omzet Calculator: Perhitungan otomatis total pendapatan (omzet) yang memvalidasi dan hanya menghitung uang dari pesanan berstatus "Selesai".
  • Manajemen Konten & Kemitraan: Fitur pengelolaan konten Company Profile, Visi Misi, dan rekapitulasi data calon mitra yang mendaftar.

4. Panel Mitra & Gudang

  • Sistem portal khusus untuk pendaftaran calon pengusaha UMKM (franchisee) dan manajemen distribusi logistik bahan baku dari pusat ke seluruh cabang.

Alur Transaksi Pemesanan (End-to-End)

  1. Order: Konsumen mengakses web -> Memilih Outlet -> Memilih Menu & menambah catatan -> Menuju halaman Checkout (Mengisi data & memilih metode pembayaran Tunai/QRIS).
  2. Track: Konsumen diarahkan ke halaman Live Tracking. Pesanan tersimpan di database dengan status "Menunggu Konfirmasi".
  3. Process: Dashboard kasir Outlet berkedip memunculkan pesanan baru -> Karyawan menekan tombol "Terima & Masak" -> Layar tracking konsumen otomatis berubah menjadi "Sedang Disiapkan".
  4. Pickup: Ayam selesai digoreng -> Karyawan menekan "Makanan Siap" -> Konsumen mengambil pesanan.
  5. Complete: Kasir menekan "Selesaikan" -> Karyawan menekan tombol Floating Action untuk memotong stok bahan baku -> Data transaksi terkunci permanen sebagai omzet di Laporan Keuangan Owner. Konsumen kini dapat mencetak struk digital.