Dalam melakukan usaha dagang, baik usaha penjualan makanan, pakaian dan lain sebagainya terkadang kita membutuhkan sebuah applikasi kecil untuk melakukan perhitungan harga terhadap penjualan barang-barang yang kita lakukan. Berikut ini akan saya uraikan bagaimana cara membuat sebuah applikasi kecil perhitungan harga penjualan barang:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en">

<head>
<title>Form Pembayaran Makanan</title>
<script type="text/javascript" src="currencyFields.js"></script>
<script language="JavaScript" type="text/JavaScript">

<!--
function hitung() {
var myForm = document.form1;
var hargaBakso = parseInt(myForm.bakso.value) * parseInt(myForm.pesanbakso.value);
var hargaSoto = parseInt(myForm.soto.value) * parseInt(myForm.pesansoto.value);
var hargaMie = parseInt(myForm.mie.value) * parseInt(myForm.pesanmie.value);
var hargaDegan = parseInt(myForm.degan.value) * parseInt(myForm.pesandegan.value);
var hargaCampur = parseInt(myForm.campur.value) * parseInt(myForm.pesancampur.value);

var hargaTotal= hargaBakso + hargaSoto + hargaMie + hargaDegan + hargaCampur;

if(hargaTotal>50000)
{
myForm.total.value = hargaTotal;
myForm.diskon.value = 10000;
myForm.bayar.value = hargaTotal - parseInt(myForm.diskon.value);
}
else
{
myForm.total.value = hargaTotal;
myForm.diskon.value = 0;
myForm.bayar.value = hargaTotal;
}
}

function hapus(){
document.form1.reset();
}

//-->

</script>
</head>

<body background="cup.jpg">
<h2 align="center">Form Pemesanan Makanan Berbasis JavaScript</h2>
<form name = "form1" action="#">
<table border="1" align="center">

<tr>
<td width="30" align="center" bgcolor="white"><strong>No</strong></td>
<td width="200" align="center" bgcolor="white"><strong>Makanan/Minuman</strong></td>
<td align="center" bgcolor="white"><strong>Harga</strong></td>
<td align="center" bgcolor="white"><strong>Pesan</strong></td>
</tr>

<tr>
<td align="center" bgcolor="white">1</td>
<td bgcolor="white">Bakso Istimewa</td>
<td bgcolor="white">@<input type="text" name="bakso" value="12000" disabled="true"/></td>
<td bgcolor="white"><input type="text" name="pesanbakso" value="0" onkeyup="hitung()" />
</td>
</tr>

<tr>
<td align="center" bgcolor="white">2</td>
<td bgcolor="white">Soto Spesial</td>
<td bgcolor="white">@<input type="text" name="soto" value="10000" disabled="true"/></td>
<td bgcolor="white"><input type="text" name="pesansoto" value="0" onkeyup="hitung()"/></td>
</tr>

<tr>
<td align="center" bgcolor="white">3</td>
<td bgcolor="white">Mie Ayam Super</td>
<td bgcolor="white">@<input type="text" name="mie" value="15000" disabled="true"/></td>
<td bgcolor="white"><input type="text" name="pesanmie" value="0" onkeyup="hitung()"/></td>
</tr>

<tr>
<td align="center" bgcolor="white">4</td>
<td bgcolor="white">Es Degan</td>
<td bgcolor="white">@<input type="text" name="degan" value="5000" disabled="true"/></td>
<td bgcolor="white"><input type="text" name="pesandegan" value="0" onkeyup="hitung()"/></td>
</tr>

<tr>
<td align="center" bgcolor="white">5</td>
<td bgcolor="white">Es Campur</td>
<td bgcolor="white">@<input type="text" name="campur" value="7000" disabled="true"/></td>
<td bgcolor="white"><input type="text" name="pesancampur" value="0" onkeyup="hitung()"/></td>
</tr>

<tr>
<td colspan="3" align="right" bgcolor="white"><strong>Jumlah Total</strong></td>
<td bgcolor="white"><input type="text" name="total" style="text-align:right" disabled="true"/></td>
</tr>

<tr>
<td colspan="3" align="right" bgcolor="white"><strong>Diskon</strong></td>
<td bgcolor="white"><input type="text" name="diskon" style="text-align:right" disabled="true"/></td>
</tr>

<tr>

<td colspan="3" align="right" bgcolor="white"><strong>Jumlah Dibayar</strong></td>
<td bgcolor="white"><input type="text" name="bayar" style="text-align:right" onchange="currency(this);" /></td>
</tr>
<tr>

<td colspan="4" align="right" bgcolor="white"><input type="button" value="Clear" onclick="hapus()" style="width:100px; height:30px;"></td>
</tr>

</table>
</form>
</body>
</html>

kode program selengkapnya dapat didownload di sini

Share