Kode Program:
Php
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kasir - Transaksi</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body {
background: #f0f2f5;
padding: 20px;
}
.sidebar {
background: #2c3e50;
min-height: 100vh;
border-radius: 15px;
color: white;
}
.sidebar a {
color: #ecf0f1;
text-decoration: none;
display: block;
padding: 12px 20px;
margin: 5px 0;
border-radius: 8px;
}
.sidebar a:hover,
.sidebar a.active {
background: #e67e22;
}
.card-header {
background: #e67e22;
color: white;
border-radius: 12px 12px 0 0;
}
.btn-primary {
background: #e67e22;
border: none;
}
.btn-primary:hover {
background: #d35400;
}
.total-box {
background: linear-gradient(135deg, #27ae60, #229954);
color: white;
padding: 20px;
border-radius: 12px;
text-align: center;
}
.produk-item {
border: 1px solid #dee2e6;
border-radius: 10px;
padding: 10px;
margin-bottom: 8px;
transition: all 0.2s;
}
.produk-item:hover {
background: #f8f9fa;
border-color: #e67e22;
}
/* Data dummy untuk demo */
.table-responsive {
min-height: 200px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-md-3">
<div class="sidebar p-3">
<h4 class="text-center mb-4"><i class="fas fa-cash-register me-2"></i>Kasir Panel</h4>
<a href="#"><i class="fas fa-boxes me-2"></i> Kelola Barang</a>
<a href="#"><i class="fas fa-users me-2"></i> Kelola Kasir</a>
<a href="#" class="active"><i class="fas fa-shopping-cart me-2"></i> Transaksi</a>
<hr class="bg-light">
<div class="mt-4 small text-center">
<i class="fas fa-user me-1"></i> admin (admin)<br>
<a href="#" class="text-danger mt-2 d-block"><i class="fas fa-sign-out-alt me-1"></i> Logout</a>
</div>
</div>
</div>
<!-- Main Content -->
<div class="col-md-9">
<div class="row">
<!-- Left Column -->
<div class="col-md-5">
<!-- Tambah Barang -->
<div class="card mb-3">
<div class="card-header"><i class="fas fa-plus-circle me-2"></i> Tambah Barang</div>
<div class="card-body">
<form class="row">
<div class="col-md-8 mb-2">
<select class="form-select" required>
<option value="">-- Pilih Barang --</option>
<option value="1">Indomie Goreng - Rp 3.500 (Stok: 50)</option>
<option value="2">Aqua 600ml - Rp 4.000 (Stok: 30)</option>
<option value="3">Teh Pucuk 350ml - Rp 4.500 (Stok: 25)</option>
<option value="4">Roti Tawar - Rp 12.000 (Stok: 15)</option>
</select>
</div>
<div class="col-md-2 mb-2">
<input type="number" class="form-control" placeholder="Qty" value="1" required>
</div>
<div class="col-md-2 mb-2">
<button type="submit" class="btn btn-primary w-100"><i class="fas fa-cart-plus"></i></button>
</div>
</form>
</div>
</div>
<!-- Daftar Barang -->
<div class="card">
<div class="card-header"><i class="fas fa-boxes me-2"></i> Daftar Barang</div>
<div class="card-body" style="max-height: 400px; overflow-y: auto;">
<!-- Produk Item 1 -->
<div class="produk-item">
<div class="d-flex justify-content-between align-items-center">
<div>
<strong>Indomie Goreng</strong><br>
<small>Rp 3.500 | Stok: 50</small>
</div>
<form class="d-flex">
<input type="number" value="1" style="width: 60px;" class="form-control form-control-sm me-1">
<button type="submit" class="btn btn-sm btn-primary"><i class="fas fa-plus"></i></button>
</form>
</div>
</div>
<!-- Produk Item 2 -->
<div class="produk-item">
<div class="d-flex justify-content-between align-items-center">
<div>
<strong>Aqua 600ml</strong><br>
<small>Rp 4.000 | Stok: 30</small>
</div>
<form class="d-flex">
<input type="number" value="1" style="width: 60px;" class="form-control form-control-sm me-1">
<button type="submit" class="btn btn-sm btn-primary"><i class="fas fa-plus"></i></button>
</form>
</div>
</div>
<!-- Produk Item 3 -->
<div class="produk-item">
<div class="d-flex justify-content-between align-items-center">
<div>
<strong>Teh Pucuk 350ml</strong><br>
<small>Rp 4.500 | Stok: 25</small>
</div>
<form class="d-flex">
<input type="number" value="1" style="width: 60px;" class="form-control form-control-sm me-1">
<button type="submit" class="btn btn-sm btn-primary"><i class="fas fa-plus"></i></button>
</form>
</div>
</div>
<!-- Produk Item 4 -->
<div class="produk-item">
<div class="d-flex justify-content-between align-items-center">
<div>
<strong>Roti Tawar</strong><br>
<small>Rp 12.000 | Stok: 15</small>
</div>
<form class="d-flex">
<input type="number" value="1" style="width: 60px;" class="form-control form-control-sm me-1">
<button type="submit" class="btn btn-sm btn-primary"><i class="fas fa-plus"></i></button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Right Column -->
<div class="col-md-7">
<!-- Keranjang Belanja -->
<div class="card mb-3">
<div class="card-header">
<i class="fas fa-shopping-cart me-2"></i> Keranjang Belanja
<button class="btn btn-sm btn-danger float-end" onclick="return confirm('Yakin reset keranjang?')">
<i class="fas fa-trash"></i> Reset
</button>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Barang</th>
<th>Harga</th>
<th>Qty</th>
<th>Subtotal</th>
<th></th>
</tr>
</thead>
<tbody>
<!-- Data keranjang dummy -->
<tr>
<td>1</td>
<td>Indomie Goreng</td>
<td>Rp 3.500</td>
<td>
<form class="d-flex">
<input type="hidden" name="id" value="1">
<input type="number" name="qty" value="2" style="width: 70px;" class="form-control form-control-sm" min="1">
<button type="submit" class="btn btn-sm btn-info ms-1"><i class="fas fa-sync-alt"></i></button>
</form>
</td>
<td>Rp 7.000</td>
<td><button class="btn btn-sm btn-danger"><i class="fas fa-times"></i></button></td>
</tr>
<tr>
<td>2</td>
<td>Aqua 600ml</td>
<td>Rp 4.000</td>
<td>
<form class="d-flex">
<input type="hidden" name="id" value="2">
<input type="number" name="qty" value="1" style="width: 70px;" class="form-control form-control-sm" min="1">
<button type="submit" class="btn btn-sm btn-info ms-1"><i class="fas fa-sync-alt"></i></button>
</form>
</td>
<td>Rp 4.000</td>
<td><button class="btn btn-sm btn-danger"><i class="fas fa-times"></i></button></td>
</tr>
</tbody>
</table>
</div>
<div class="total-box">
<small>TOTAL BELANJA</small>
<h2>Rp 11.000</h2>
</div>
</div>
</div>
<!-- Pembayaran -->
<div class="card">
<div class="card-header"><i class="fas fa-money-bill-wave me-2"></i> Pembayaran</div>
<div class="card-body">
<form>
<div class="row">
<div class="col-md-6 mb-3">
<label>Diskon (%)</label>
<input type="number" class="form-control" value="0" min="0" max="100">
</div>
<div class="col-md-6 mb-3">
<label>Uang Dibayar</label>
<input type="number" class="form-control" placeholder="Masukkan jumlah uang" required>
</div>
</div>
<button type="submit" class="btn btn-success w-100 py-2">
<i class="fas fa-check-circle me-2"></i> Bayar & Cetak Struk
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Struk -->
<div class="modal fade" id="strukModal" tabindex="-1" data-bs-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body p-0">
<div style="padding:20px; background: #fff9e6; border-radius: 12px; font-family: monospace; font-size: 13px;">
<div style="text-align:center; margin-bottom:15px">
<strong>TOKO KITA MINIMARKET</strong><br>
Jl. Belajar No. 123, Medan<br>
Kasir: admin<br>
<small>17/06/2026 14:30:25</small><br>
<small>No: TRX20260617143025</small>
<div style="border-top: 1px dashed #ccc; margin: 10px 0;"></div>
</div>
<div>
<div style="display:flex; justify-content:space-between; margin-bottom:8px">
<span>Indomie Goreng x2</span>
<span>Rp 7.000</span>
</div>
<div style="display:flex; justify-content:space-between; margin-bottom:8px">
<span>Aqua 600ml x1</span>
<span>Rp 4.000</span>
</div>
</div>
<div style="border-top: 1px dashed #ccc; margin: 10px 0;"></div>
<div>
<div style="display:flex; justify-content:space-between">
<span>Total</span>
<span>Rp 11.000</span>
</div>
<div style="display:flex; justify-content:space-between">
<span>Diskon (0%)</span>
<span>- Rp 0</span>
</div>
<div style="display:flex; justify-content:space-between; font-weight:bold; margin-top:8px">
<span>Total Bayar</span>
<span>Rp 11.000</span>
</div>
<div style="display:flex; justify-content:space-between">
<span>Uang Dibayar</span>
<span>Rp 20.000</span>
</div>
<div style="display:flex; justify-content:space-between; font-weight:bold; color:#27ae60">
<span>Kembalian</span>
<span>Rp 9.000</span>
</div>
</div>
<div style="border-top: 1px dashed #ccc; margin: 10px 0;"></div>
<div style="text-align:center; margin-top:15px">
Terima kasih!<br>Selamat berbelanja kembali
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
<button type="button" class="btn btn-primary" onclick="window.print()">Cetak Struk</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Tampilkan modal struk saat halaman dimuat (demo)
window.onload = function() {
var modal = new bootstrap.Modal(document.getElementById('strukModal'));
modal.show();
};
</script>
</body>
</html>
Geser ke samping untuk lihat kode lengkap
Perhatian: Kode ini hanya untuk dilihat, tidak dapat disalin.