Home
Website

Cara Membuat Aplikasi Kasir Sederhana Berbasis Web - #Part 1 | UKK RPL

Cara Membuat Aplikasi Kasir Sederhana Berbasis Web - Part 1 | UKK RPL

Aplikasi kasir berbasis web adalah solusi sederhana untuk manajemen transaksi di toko atau bisnis kecil. Dalam tutorial ini, kita akan membuat aplikasi kasir sederhana menggunakan HTML, CSS, dan JavaScript, kemudian menjalankannya di XAMPP.

Langkah 1: Instalasi XAMPP

Sebelum memulai, pastikan XAMPP sudah terinstal di komputer Anda. XAMPP memungkinkan kita untuk menjalankan server lokal di mana aplikasi web ini dapat di-host. Jika Anda belum menginstal XAMPP, Anda bisa mengunduhnya dari situs resmi XAMPP dan menginstalnya.

Langkah 2: Persiapan Folder Proyek

  1. Buka folder instalasi XAMPP (biasanya di C:/xampp).
  2. Di dalam folder htdocs, buat folder baru bernama kasir. Ini akan menjadi tempat semua file aplikasi kita.

Langkah 3: Membuat Struktur Proyek

Dalam folder kasir, buat tiga file berikut:

  • index.html
  • style.css
  • script.js

Langkah 4: Membuat File HTML

Buka file index.html dan tambahkan kode berikut:


<!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>
        <button id="checkout-btn">Bayar</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

Penjelasan HTML:

  1. Bagian Header: Kode ini mendefinisikan struktur dasar aplikasi kasir kita. Judul dan CSS dihubungkan melalui file style.css.
  2. Formulir Tambah Produk: Pengguna dapat memasukkan nama produk dan harga produk untuk ditambahkan ke dalam tabel transaksi.
  3. Tabel Produk: Tabel ini digunakan untuk menampilkan produk yang telah ditambahkan beserta jumlah dan total harganya.

Langkah 5: Styling dengan CSS

Buka file style.css dan tambahkan kode berikut untuk mengatur tampilan aplikasi:


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}
.container {
    width: 80%;
    margin: 50px auto;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1, h2 {
    text-align: center;
    margin-bottom: 20px;
}
.input-section {
    margin-bottom: 30px;
    text-align: center;
}
.input-section label {
    display: block;
    margin-bottom: 5px;
}
.input-section input {
    padding: 10px;
    margin-bottom: 10px;
    width: 100%;
    max-width: 400px;
}
button {
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    border: none;
    font-size: 16px;
    cursor: pointer;
}
button:hover {
    background-color: #218838;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
table, th, td {
    border: 1px solid #ddd;
}
th, td {
    padding: 12px;
    text-align: center;
}
input.quantity {
    width: 50px;
}
.total-section {
    text-align: right;
    margin-top: 20px;
}

Penjelasan CSS:

  1. Desain Layout: Kode CSS ini memberikan tampilan yang rapi dan modern, dengan tata letak yang responsif.
  2. Tabel dan Formulir: Tampilan tabel dan formulir diatur agar terlihat proporsional dan mudah digunakan oleh pengguna.

Langkah 6: Menambahkan Fungsi JavaScript

Buka file script.js dan tambahkan kode berikut untuk memberikan fungsi dinamis pada aplikasi kasir:


document.addEventListener('DOMContentLoaded', () => {
    const cartItems = document.getElementById('cart-items');
    const totalPriceElement = document.getElementById('total-price');
    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', () => {
        if (totalPrice > 0) {
            alert('Total yang harus dibayar: Rp ' + totalPrice);
        } else {
            alert('Keranjang belanja kosong.');
        }
    });
});

Penjelasan JavaScript:

  1. Menambahkan Produk: Ketika pengguna memasukkan nama dan harga produk, produk tersebut akan ditampilkan di tabel.
  2. Menghapus Produk: Pengguna dapat menghapus produk dari tabel jika tidak ingin melanjutkan transaksi.
  3. Perhitungan Total: Total harga akan dihitung secara otomatis berdasarkan harga produk dan kuantitas.

Langkah 7: Menjalankan Aplikasi di XAMPP

  1. Jalankan XAMPP dan pastikan Apache sudah berjalan.
  2. Buka browser dan ketik localhost/kasir untuk melihat aplikasi kasir Anda berjalan.

Kesimpulan

Dengan menggunakan HTML, CSS, dan JavaScript, kita dapat membuat aplikasi kasir sederhana berbasis web yang dapat digunakan untuk mencatat transaksi penjualan. Aplikasi ini dapat dikembangkan lebih lanjut dengan fitur-fitur tambahan seperti menyimpan data ke database atau membuat laporan transaksi.

Post a Comment