Berikut ini kita akan belajar contoh aplikasi javascript sederhana, yakni nota pemesanan. Dibawah ini adalah contoh aplikasinya :
NOTA WARUNG ANDA
Source code program secara lengkap adalah sebagai berikut:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org//TR//xhtml/DTD/xhtml-transitional.dtd">
<html xmlns= "http ://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> Nota Digital </title>
</head>
<body>
<script language="Javascript" type="text/javascript">
<!--
function calculate() {
var nota = document.form1;
var hargabakso = 12000 * eval(nota.pesan1.value);
var hargasoto = 10000 * eval(nota.pesan2.value);
var hargamie = 15000 * eval(nota.pesan3.value);
var hargadegan = 5000 * eval(nota.pesan4.value);
var hargacampur = 7000 * eval(nota.pesan5.value);
var hargatotal = hargabakso + hargasoto + hargamie + hargadegan + hargacampur ;
if (hargatotal > 50000){
nota.total.value = hargatotal;
nota.diskon.value = 10000;
nota.bayar.value = hargatotal- eval(nota.diskon.value);
}
else{
nota.total.value = hargatotal;
nota.diskon.value = 0;
nota.bayar.value = hargatotal;
}
}
//-->
</script>
<h2 align="left">NOTA WARUNG ANDA</h2>
<form name="form1" action="#">
<table border="1px">
<tr bgcolor="blue">
<th>NO</th>
<th>Makanan/Minuman</th>
<th>Harga</th>
<th>Jumlah Pesan</th
</tr>
<tr>
<td width="10">1</td>
<td width="250">Bakso Istimewa</td>
<td width="90" bgcolor="yellow">@<input type="text" name="price1" value="12000" size="7" disabled="true"/></td>
<td width="200"><input type="text" name="pesan1" value="0" size="30" Onchange="calculate()"/></td>
</tr>
<tr>
<td width="10">2</td>
<td width="250">Soto Spesial</td>
<td width="90" bgcolor="yellow">@<input type="text" name="price2" value="10000" size="7" disabled="true"/></td>
<td width="200"><input type="text" name="pesan2" value="0" size="30" Onchange="calculate()"/></td>
</tr>
<tr>
<td width="10">3</td>
<td width="250">Mie Ayam Super</td>
<td width="90" bgcolor="yellow">@<input type="text" name="price3" value="15000" size="7" disabled="true"/></td>
<td width="200"><input type="text" name="pesan3" value="0" size="30" Onchange="calculate()"/></td>
</tr>
<tr>
<td width="10">4</td>
<td width="250">Es Degan</td>
<td width="90" bgcolor="yellow">@<input type="text" name="price4" value="5000" size="7" disabled="true"/></td>
<td width="200"><input type="text" name="pesan4" value="0" size="30" Onchange="calculate()"/></td>
</tr>
<tr>
<td width="10">5</td>
<td width="250">Es Campur</td>
<td width="90" bgcolor="yellow">@<input type="text" name="price5" value="7000" size="7" disabled="true"/></td>
<td width="200"><input type="text" name="pesan5" value="0" size="30" Onchange="calculate()"/></td>
</tr>
<tr bgcolor="red">
<td colspan="3" align="right">JUMLAH TOTAL</td>
<td><input type="text" name="total" value="0" size="30" disabled="true"/></td>
</tr>
<tr bgcolor="orange">
<td colspan="3" align="right">DISKON</td>
<td><input type="text" name="diskon" value="0" size="30" disabled="true"/></td>
</tr>
<tr bgcolor="pink">
<td colspan="3" align="right">JUMLAH DIBAYAR</td>
<td><input type="text" name="bayar" value="0" size="30" disabled="true"/></td>
</tr>
</table>
<input type="submit" name="clear" value="clear" size="5" Onclick="reset()"/>
</form>
</body>
</html
Ok, sekian dulu postinga kali ini. Selamat mencoba... Bila ada yang kurang jelas, silahkan tinggalkan komentar.
.
=================================================
kurangin tidur banyakin ngopi
kalo diinput nilai minus jadinya kita malah dibayar..
ReplyDeleteperlu sedikit security check
.....
ReplyDeleteya akan segera saya perbaiki... Makasih... :-)
ReplyDelete