Contoh Program Javascript Penjualan

MUAZHAN

4 min read

·

Jun 19, 2024

35

Share

Contoh Program JavaScript Penjualan Sederhana

Berikut adalah contoh sederhana program JavaScript yang dapat digunakan untuk mensimulasikan sistem penjualan. Kode ini menampilkan antarmuka dasar untuk menambahkan item ke keranjang, menghitung total harga, dan menampilkan rincian pembelian.

HTML:

    
    
    


    
Sistem Penjualan

    

        
Tambah Item
        Nama Item:
        


        Harga Item:
        


        Tambahkan
    

    

        
Keranjang
        

    

    

        
Total Harga
        
Rp. 0
    

    

JavaScript (script.js):

let keranjang = [];

function tambahItem() {
  let namaItem = document.getElementById("nama-item").value;
  let hargaItem = parseInt(document.getElementById("harga-item").value);

  if (namaItem && hargaItem) {
    keranjang.push({ nama: namaItem, harga: hargaItem });
    updateKeranjang();
    hitungTotal();
    document.getElementById("nama-item").value = "";
    document.getElementById("harga-item").value = "";
  } else {
    alert("Harap masukkan nama dan harga item.");
  }
}

function updateKeranjang() {
  let keranjangList = document.getElementById("keranjang-belanja");
  keranjangList.innerHTML = "";
  for (let i = 0; i < keranjang.length; i++) {
    let item = keranjang[i];
    let listItem = document.createElement("li");
    listItem.textContent = `${item.nama} - Rp. ${item.harga}`;
    keranjangList.appendChild(listItem);
  }
}

function hitungTotal() {
  let total = 0;
  for (let i = 0; i < keranjang.length; i++) {
    total += keranjang[i].harga;
  }
  document.getElementById("total-harga").textContent = `Rp. ${total}`;
}

Penjelasan:

1. HTML: Kode HTML mendefinisikan struktur dasar halaman web, termasuk input untuk nama dan harga item, daftar untuk menampilkan keranjang belanja, dan elemen untuk menampilkan total harga.
2. JavaScript: Kode JavaScript berisi fungsi untuk:
   • tambahItem(): Menambahkan item baru ke keranjang dengan mengambil input dari pengguna.
   • updateKeranjang(): Memperbarui daftar keranjang belanja dengan item yang ada di keranjang.
   • hitungTotal(): Menghitung total harga semua item di keranjang.

Cara Penggunaan:

1. Simpan kode HTML dan JavaScript di file terpisah (misalnya, index.html dan script.js).
2. Buka index.html di browser web Anda.
3. Masukkan nama dan harga item di input yang tersedia, lalu klik tombol "Tambahkan".
4. Item yang Anda tambahkan akan ditampilkan di keranjang belanja, dan total harga akan diperbarui.

Catatan:

• Contoh ini adalah program sederhana dan hanya menunjukkan fungsionalitas dasar dari sistem penjualan.
• Anda dapat memperluasnya dengan menambahkan fitur seperti menghapus item dari keranjang, menyimpan data ke database, dan mengintegrasikan dengan sistem pembayaran.
• Anda dapat menggunakan CSS untuk meningkatkan tampilan dan desain halaman web.

Semoga contoh ini membantu Anda dalam memahami dasar-dasar program JavaScript untuk aplikasi penjualan.