Home
Website

Penambahan Fitur Pembayaran, Kembalian dan Cetak Nota - Aplikasi Kasir #Part 2 | UKK RPL

Penambahan Fitur Pembayaran, Kembalian dan Cetak Nota - Web Kasir | Part 2

Penambahan fitur aplikasi kasir sederhana berbasis web, yaitu perhitungan total, pembayaran, dan kembalian, serta pencetakan nota menggunakan fungsi window.print().

index.html:


<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aplikasi Kasir Sederhana</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Aplikasi Kasir Sederhana</h1>
        
        <!-- Form untuk menambahkan produk -->
        <div class="input-section">
            <h2>Tambah Produk</h2>
            <label for="product-name">Nama Produk:</label>
            <input type="text" id="product-name" placeholder="Masukkan nama produk">
            <label for="product-price">Harga Produk:</label>
            <input type="number" id="product-price" placeholder="Masukkan harga produk">
            <button id="add-product-btn">Tambah Produk</button>
        </div>
        <!-- Tabel produk untuk transaksi -->
        <table>
            <thead>
                <tr>
                    <th>Nama Produk</th>
                    <th>Harga</th>
                    <th>Jumlah</th>
                    <th>Total</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody id="cart-items">
                <!-- Produk akan ditambahkan di sini -->
            </tbody>
        </table>
        <div class="total-section">
            <h2>Total Bayar: <span id="total-price">0</span></h2>
        </div>
        <!-- Input untuk pembayaran dan kembalian -->
        <div class="payment-section">
            <label for="payment-amount">Jumlah Uang Dibayar:</label>
            <input type="number" id="payment-amount" placeholder="Masukkan jumlah uang dibayar">
        </div>
        <div class="change-section">
            <h2>Kembalian: <span id="change-amount">0</span></h2>
        </div>
        <button id="checkout-btn">Bayar & Cetak Nota</button>
    </div>
    <!-- Bagian Nota (Tersembunyi) -->
    <div id="receipt" style="display: none;">
        <h2>Nota Pembelian</h2>
        <table id="receipt-items">
            <!-- Produk akan ditampilkan di sini untuk nota -->
        </table>
        <p>Total Bayar: <span id="receipt-total">0</span></p>
        <p><strong>Kembalian:</strong> <span id="receipt-change">0</span></p>
    </div>
    <script src="script.js"></script>
</body>
</html>

Penjelasan Elemen:

  • Form Tambah Produk: Untuk menambahkan produk ke dalam daftar transaksi.
  • Tabel Produk: Untuk menampilkan produk yang dimasukkan, lengkap dengan jumlah dan total per item.
  • Total Bayar: Menampilkan total harga dari semua produk yang dibeli.
  • Input Jumlah Bayar: Tempat pengguna memasukkan uang yang dibayarkan oleh pelanggan.
  • Kembalian: Menampilkan hasil kembalian setelah uang dibayarkan.
  • Tombol Bayar & Cetak Nota: Menghitung kembalian dan menampilkan nota untuk dicetak.

style.css (CSS):

Tambahkan file style.css untuk mengatur tampilan aplikasi.


body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 5px;
}
h1, h2 {
    text-align: center;
}
input, button {
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
}
table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
}
table, th, td {
    border: 1px solid #ddd;
}
th, td {
    padding: 10px;
    text-align: center;
}
.total-section, .payment-section, .change-section {
    margin-top: 20px;
    text-align: center;
}
button {
    background-color: #28a745;
    color: white;
    border: none;
    cursor: pointer;
}
button:hover {
    background-color: #218838;
}
@media print {
    body * {
        visibility: hidden;
    }
    #receipt, #receipt * {
        visibility: visible;
    }
    #receipt {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
}

script.js (JavaScript):

Tambahkan file script.js untuk mengatur interaksi pada aplikasi.


document.addEventListener('DOMContentLoaded', () => {
    const cartItems = document.getElementById('cart-items');
    const totalPriceElement = document.getElementById('total-price');
    const receiptItems = document.getElementById('receipt-items');
    const receiptTotal = document.getElementById('receipt-total');
    const receiptChange = document.getElementById('receipt-change');
    const paymentAmountElement = document.getElementById('payment-amount');
    const changeAmountElement = document.getElementById('change-amount');
    let totalPrice = 0;
    // Fungsi untuk menambahkan produk ke tabel
    document.getElementById('add-product-btn').addEventListener('click', () => {
        const productName = document.getElementById('product-name').value;
        const productPrice = document.getElementById('product-price').value;
        if (productName === "" || productPrice === "") {
            alert("Silakan masukkan nama produk dan harga.");
            return;
        }
        const newRow = document.createElement('tr');
        newRow.innerHTML = `
            <td>${productName}</td>
            <td>${productPrice}</td>
            <td><input type="number" value="1" min="1" class="quantity"></td>
            <td class="item-total">${productPrice}</td>
            <td><button class="delete-btn">Hapus</button></td>
        `;
        cartItems.appendChild(newRow);
        // Update total saat jumlah produk berubah
        updateTotal();
        // Tambahkan event listener untuk menghapus produk
        newRow.querySelector('.delete-btn').addEventListener('click', function() {
            newRow.remove();
            updateTotal();
        });
        // Tambahkan event listener untuk mengubah kuantitas
        newRow.querySelector('.quantity').addEventListener('input', updateTotal);
    });
    // Fungsi untuk menghitung total harga
    function updateTotal() {
        totalPrice = 0;
        const rows = cartItems.querySelectorAll('tr');
        rows.forEach(row => {
            const price = parseInt(row.cells[1].textContent);
            const quantity = parseInt(row.querySelector('.quantity').value);
            const itemTotal = price * quantity;
            row.querySelector('.item-total').textContent = itemTotal;
            totalPrice += itemTotal;
        });
        totalPriceElement.textContent = totalPrice;
    }
    // Event listener untuk tombol checkout
    document.getElementById('checkout-btn').addEventListener('click', () => {
        const paymentAmount = parseInt(paymentAmountElement.value);
        if (totalPrice > 0 && paymentAmount >= totalPrice) {
            // Hitung kembalian
            const changeAmount = paymentAmount - totalPrice;
            changeAmountElement.textContent = changeAmount;
            // Generate nota
            generateReceipt(changeAmount);
            // Tampilkan dialog cetak
            window.print();
        } else if (paymentAmount < totalPrice) {
            alert('Uang yang dibayarkan tidak mencukupi.');
        } else {
            alert('Keranjang belanja kosong atau jumlah bayar tidak valid.');
        }
    });
    // Fungsi untuk membuat nota
    function generateReceipt(changeAmount) {
        receiptItems.innerHTML = ''; // Hapus isi nota sebelumnya
        const rows = cartItems.querySelectorAll('tr');
        rows.forEach(row => {
            const productName = row.cells[0].textContent;
            const productPrice = row.cells[1].textContent;
            const quantity = row.querySelector('.quantity').value;
            const itemTotal = row.querySelector('.item-total').textContent;
            const newRow = document.createElement('tr');
            newRow.innerHTML = `
                <td>${productName}</td>
                <td>${productPrice}</td>
                <td>${quantity}</td>
                <td>${itemTotal}</td>
            `;
            receiptItems.appendChild(newRow);
        });
        // Tambahkan total dan kembalian ke nota
        receiptTotal.textContent = totalPrice;
        receiptChange.textContent = changeAmount;
    }
});

Penjelasan Lengkap:

  • HTML: Mengatur struktur aplikasi dengan input produk, jumlah bayar, dan tabel untuk menampilkan daftar produk.
  • CSS: Mengatur tampilan agar terlihat bersih dan terorganisir.
  • JavaScript: Mengatur interaksi, mulai dari menambahkan produk, menghitung total, menghitung kembalian, hingga mencetak nota.

Dengan file ini, Anda dapat menjalankan aplikasi kasir sederhana berbasis web yang bisa digunakan untuk menghitung pembayaran dan mencetak nota.

Post a Comment