ETS - Website Food Ordering "ModjoerMakmoer"

Kelompok :

  1. Muhammad Hisyam Al Arby (5054241006)
  2. Fazle Mawla Wahyuhanda (5054241020)

Kelas : PWEB (N) / RKA

Title Aplikasi : Modjoer Makmoer

Deskripsi Aplikasi :
Deskripsi Aplikasi : Modjoer Makmoer adalah sebuah aplikasi web pemesanan menu makanan dan minuman yang dibuat untuk kafe Modjoer Makmoer milik Hisyam. Website ini dibangun menggunakan HTML5, CSS, Bootstrap 5, dan JavaScript. Website ini dibuat tanpa backend. Seluruh state keranjang belanja disimpan di Client-Side Storage dan pesanan langsung diteruskan ke WhatsApp admin.

Struktur Direktori :

📁 Modjoer Makmoer/
├── 📁 assets/          # Menyimpan aset 
├── 📄 index.html       # Halaman Home
├── 📄 menu.html        # Halaman Menu 
├── 📄 checkout.html    # Halaman Checkout
├── 📄 style.css        # File Stylesheet 
└── 📄 script.js        # File JavaScript

Wireframe :

Fitur :

1. Antarmuka Responsif & Estetis
Desain web sepenuhnya responsif dan dapat menyesuaikan dengan berbagai ukuran layar menggunakan grid system Bootstrap.

2. Navigasi Kategori Menu Mulus (Smooth Tab Filtering)
Pengguna dapat mencari menu berdasarkan kategori dengan mudah. Fitur ini menggunakan Bootstrap Nav-Pills yang memungkinkan pergantian kategori secara instan tanpa perlu loading ulang halaman.

3. Varian Menu Dinamis
Jika pelanggan memilih varian yang berbeda (misalnya: Kopi Panas vs Kopi Es), harga dan ikon pada card menu akan berubah seketika secara real-time karena manipulasi DOM menggunakan JavaScript.

4. Cart Sidebar
Terdapat keranjang belanja interaktif berkonsep Offcanvas (slide-in) yang muncul dari samping layar. Fitur keranjang ini mencakup:

  • Penambahan dan penghapusan item.
  • Pengaturan jumlah pesanan.
  • Penyimpanan menggunakan LocalStorage browser, sehingga data pesanan tidak akan hilang meskipun halaman di-refresh.

5. Kalkulasi Harga
Pada halaman Checkout, sistem secara otomatis merangkum pesanan dari keranjang dan menghitung total harga secara akurat, termasuk perhitungan pajak PB1 (11%).

6. Integrasi Checkout WhatsApp Langsung
Halaman checkout terintegrasi langsung dengan API WhatsApp. Data pesanan, nama pelanggan, dan metode pembayaran (Cash/QRIS) akan diolah menggunakan metode URL Encoding dan dikirimkan sebagai pesan langsung ke nomor WhatsApp admin Modjoer Makmoer.

Infografis

Infografis Modjoer Makmoer

Dokumen Laporan

Video Demo

Tautan Penting:

Comments

Post a Comment

Popular Posts