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

Membuat kerangka HTML POS

Pada layar desktop, POS dibagi menjadi header, sidebar, katalog, dan panel pesanan. CSS Grid cocok digunakan karena kita dapat menentukan posisi setiap bagian dengan jelas.

<div class="pos-shell">
  <header class="topbar">...</header>

  <aside class="sidebar">
    <nav>
      <button class="nav-item active" data-view="kasir">Kasir</button>
      <button class="nav-item" data-view="transaksi">Transaksi</button>
      <button class="nav-item" data-view="meja">Meja</button>
      <button class="nav-item" data-view="stok">Stok</button>
      <button class="nav-item" data-view="laporan">Laporan</button>
    </nav>
  </aside>

  <main class="catalog-panel">...</main>
  <aside class="order-panel">...</aside>
  <main class="module-view" id="moduleView">...</main>
</div>

Gunakan atribut data-view sebagai penanda halaman yang akan dibuka oleh JavaScript. Dengan cara ini, navigasi dapat bekerja tanpa membuat lima file HTML terpisah.

.pos-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 390px;
  grid-template-rows: 76px minmax(0, 1fr);
  grid-template-areas:
    "top top top"
    "side catalog order";
}

.topbar { grid-area: top; }
.sidebar { grid-area: side; }
.catalog-panel { grid-area: catalog; }
.order-panel { grid-area: order; }

minmax(0, 1fr) mencegah area katalog mendorong layout melebihi lebar layar ketika kontennya panjang.