Contoh Coding POS Restaurant dengan Bootstrap, CSS, HTML, dan JavaScript

Mengaktifkan Navigasi Modul

Semua modul dirender dalam moduleView. Saat menu Kasir dipilih, katalog serta panel pesanan ditampilkan kembali.

document
  .querySelectorAll('.nav-item[data-view]')
  .forEach(button => {
    button.onclick = () => openView(button.dataset.view);
  });

function openView(view) {
  const shell = document.querySelector('.pos-shell');

  if (view === 'kasir') {
    shell.classList.remove('module-open');
    return;
  }

  shell.classList.add('module-open');
  document.getElementById('moduleContent').innerHTML =
    viewConfig[view].render();
}

Pendekatan ini cocok untuk prototype. Jika aplikasi sudah besar, pertimbangkan pemisahan view, routing, dan komponen agar source code lebih mudah dirawat.

Cara Menjalankan Project

1. Download dan ekstrak file ZIP.
2. Buka folder source-code.
3. Jalankan index.html pada browser.
4. Klik produk untuk memasukkannya ke keranjang.
5. Coba ubah jumlah, memilih meja, memberikan diskon, dan membuka pembayaran.
6. Gunakan sidebar untuk membuka Transaksi, Meja, Stok, dan Laporan.
7. Gunakan mode responsive browser untuk menguji ukuran tablet dan ponsel.

Koneksi internet diperlukan untuk memuat Bootstrap dan Bootstrap Icons dari CDN. Jika POS harus tetap berfungsi ketika koneksi putus, download file Bootstrap dan ikon lalu simpan secara lokal.

Pengujian yang Disarankan

• Pastikan produk dapat ditambah lebih dari satu kali.
• Pastikan jumlah nol menghapus produk dari keranjang.
• Pastikan subtotal dan pajak berubah setelah jumlah diperbarui.
• Pastikan tombol Bayar tidak aktif ketika keranjang kosong.
• Pastikan kategori dan pencarian dapat digunakan bersama.
• Pastikan sidebar dapat dibuka dan ditutup pada ponsel.
• Pastikan tabel transaksi dan stok dapat digeser tanpa merusak halaman.
• Pastikan seluruh tombol penting nyaman disentuh pada tablet.
• Uji tampilan pada lebar 360 px, 768 px, 1024 px, dan desktop.

Pengembangan Selanjutnya

Prototype dapat dikembangkan menjadi aplikasi kasir lengkap dengan menambahkan:

• Backend CodeIgniter 4 dan database MySQL.
• Login serta pembagian hak akses kasir, supervisor, dapur, dan pemilik.
• Master produk, kategori, bahan, resep, meja, pelanggan, serta pengguna.
• Transaksi dan detail transaksi tersimpan di database.
• Kitchen Display System untuk pesanan dapur.
• Printer thermal dan pencetakan struk.
• Shift kasir, kas masuk, kas keluar, serta rekonsiliasi.
• Riwayat perubahan harga, stok, diskon, dan pembatalan.
• Integrasi payment gateway dengan verifikasi server-to-server.
• Laporan berdasarkan outlet, metode pembayaran, menu, dan periode.

Untuk kebutuhan yang memerlukan integrasi database, dashboard admin, dan alur bisnis khusus, layanan jasa pembuatan website di Bali dapat membantu mengembangkan prototype menjadi sistem yang sesuai dengan operasional usaha. Tautan ini disertakan secara kontekstual karena pengembangan POS produksi biasanya membutuhkan analisis kebutuhan dan integrasi backend.

Kesimpulan

Dalam tutorial ini kita telah membuat contoh coding POS restaurant menggunakan Bootstrap 5, HTML, CSS, dan JavaScript. Project mencakup katalog kasir, keranjang, pembayaran, transaksi, manajemen meja, stok, dan laporan. Desainnya juga menyesuaikan komputer, tablet, ponsel, serta perangkat layar sentuh.

Gunakan project ini sebagai dasar pembelajaran dan prototype antarmuka. Sebelum digunakan untuk transaksi nyata, tambahkan backend, database, keamanan, audit log, pengujian, serta integrasi pembayaran yang benar.

Referensi

• Bootstrap Documentation: https://getbootstrap.com/docs/5.3/getting-started/introduction/
• Bootstrap Modal: https://getbootstrap.com/docs/5.3/components/modal/
• Bootstrap Toasts: https://getbootstrap.com/docs/5.3/components/toasts/
• MDN Web Docs — CSS Grid Layout: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout
• MDN Web Docs — Responsive Design: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design