Pesanan yang mudah
Penapis makanan dan minuman, pilihan item dalam modal, serta cart yang dibuka apabila diperlukan membantu pelanggan fokus pada pesanan.
About Us · Di sebalik laman web
Direka untuk
mudahkan pesanan.
Laman web Kak Qiela menghubungkan pelanggan dengan kiosk: daripada memilih ayam gunting dan minuman, hingga mengetahui bila pesanan sedia diambil.
Kenali reka bentuk kami- 01Pilih.
Cari makanan atau minuman kegemaran.
- 02Pesan.
Sesuaikan pilihan dan hantar pesanan.
- 03Ambil.
Semak giliran dan ambil apabila siap.
01 / Design Philosophy
Mudah digunakan. Jelas pada setiap langkah.
Reka bentuk berpusat pada tugas sebenar pelanggan dan pengurusan kiosk.
Maklumat yang jelas
Harga, ketersediaan menu dan status giliran dipaparkan dengan label yang mudah dibaca. Pelanggan boleh melihat perkembangan pesanan tanpa memuat semula halaman.
Selesa di setiap skrin
Susun atur menyesuaikan diri untuk telefon, tablet dan desktop. Ruang antara kad, saiz butang dan navigasi membantu penggunaan melalui sentuhan atau papan kekunci.
02 / Visual Style
Identiti kiosk, dalam setiap halaman.
Warna hangat, gambar makanan sebenar dan tipografi yang tegas membawa suasana Kak Qiela ke skrin.
MerahIdentiti jenama
#A91624OrenTindakan utama
#F26922KuningAksen hangat
#FFC47EHitamKontras & teks
#231B19Rangup. Ringkas. Konsisten.
Latar krim melembutkan paparan, manakala sudut kad yang bulat dan ikon ringkas menjadikan maklumat lebih mudah diimbas.
Homepage dan halaman maklumat menggunakan Barlow Condensed untuk tajuk serta DM Sans untuk teks. Halaman pesanan turut menggunakan fon sistem supaya borang mudah dibaca.
Peralihan butang dan kad memberi maklum balas yang ringan. Halaman maklumat menghormati tetapan reduced motion peranti.
03 / Technology & Code
Teknologi di sebalik pengalaman ini.
Sistem ini menggunakan halaman PHP, JavaScript dalam browser dan pangkalan data untuk mengurus maklumat pesanan.
HTML5 + CSS
HTML menyusun kandungan. CSS Grid, Flexbox dan media queries membentuk kad serta susun atur responsif. Tailwind CSS digunakan pada halaman pesanan dan beberapa halaman pengurusan; halaman maklumat menggunakan CSS tersuai.
JavaScript + Fetch
JavaScript mengendalikan penapis menu, modal, cart dan perubahan paparan. Fetch API menghantar serta menerima data JSON daripada endpoint PHP tanpa memuat semula keseluruhan halaman.
PHP
PHP memproses login, menyemak peranan pengguna, mengesahkan pesanan dan menyediakan endpoint data. Session digunakan untuk akses pelanggan, staff dan administrator; password disemak menggunakan hash.
MySQL / MariaDB
Data menu, pelanggan, pesanan, inventori dan ulasan disimpan dalam pangkalan data. PHP berhubung melalui MySQLi, termasuk prepared statements dan transaksi semasa checkout.
JSON + Browser Storage
Halaman pesanan menyemak giliran melalui polling kira-kira setiap tiga saat. localStorage dan sessionStorage menyimpan rujukan tiket untuk disahkan semula dengan server apabila halaman dibuka.
Fonts, Icons & XAMPP
Google Fonts, ikon Phosphor dan SVG membentuk bahasa visual. Projek dijalankan secara tempatan menggunakan persekitaran XAMPP untuk Apache, PHP dan pangkalan data.
04 / How It Works
Daripada menu kepada nombor giliran.
Contoh peranan fail yang digunakan oleh sistem ini.
- 01
Paparkan menu
get_menu.phpMengambil senarai item untuk dipaparkan pada halaman pesanan.
- 02
Bina pesanan
kiosk_pintar_web_app_no_qr.phpMengendalikan pilihan pelanggan, nota item dan shopping cart melalui JavaScript.
- 03
Sahkan checkout
checkout_order.phpMenyemak item, menyimpan pesanan dan memulangkan nombor giliran dalam respons JSON.
- 04
Kemas kini giliran
get_order_status.phpMengembalikan status semasa supaya pelanggan tahu bila pesanan sedia diambil.
05 / The Creators
Pasukan di sebalik Kak Qiela.
Gabungan pembangunan backend, dokumentasi dan reka bentuk antaramuka.
Backend
Yanyi
Liew Yanyi
- Registration No.
- 19DIT24F1069
Documentation
Aniq
Mohamad Aniq bin Mohd Maznihan
- Registration No.
- 19DIT24F1033
UI Design
Mizan
Muhammad Hamizan bin Sabri
- Registration No.
- 19DIT24F137