Post Dalam tutorial kali ini akan dibahas cara membuat form pemesanan makanan berbasis web dengang menggunakan java script.
Form Pemesanan Berbasis JavaScript
Untuk membuat form tersebut diatas kiata harus membuat fungsi untuk menghitung total biaya dalam melakukan pembelian makanan. Fungsi tersebut didefinisikan dengan menggunakan Java Script. Selanjutnya kita buat tabel untuk menempatkan masing2 daftar menu makanan yang dibeli serta harga dari masing2 makanan tersebut. Setelah tabel terbentuk, selanjutnya kita buat textfield dan button. textfield berisi jumlah makanan yang dibeli serta total harga yang harus dibayarkan serta button batal untuk membatalkan semua pesanan. Pada textfield total harga akan berubah/mentotal seluruh harga apabila kita melakukan perubahan pada textfield jumlah makanan yang dipesan. Kita gunakan event onChange untuk melakukan penotalan harga. Sedangkan pada button batal kita tambahkan event onClick untuk membetalkan pesanan dengan mengosongkan seluruh textfield jumlah dan total harga. Berikut ini source code lengkapnya :
<!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>Warung Jawa</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">1:2:3: <!--4:5: function hitung(){6:7: var nt = document.form1;8:9: var hb = 12000 * parseInt(nt.Bakso.value);10:11: var hs = 10000 * parseInt(nt.Soto.value);12:13: var hm = 15000 * parseInt(nt.Mie.value);14:15: var hd = 5000 * parseInt(nt.Degan.value);16:17: var hc = 7000 * parseInt(nt.Campur.value);18:19: var jt = hb + hs + hm + hd + hc;20:21: if (jt > 50000){22:23: nt.Total.value = jt;24:25: nt.Diskon.value = 10000;26:27: nt.Bayar.value = jt - parseInt(nt.Diskon.value);28:29: } else {30:31: nt.Total.value = jt;32:33: nt.Diskon.value = 0;34:35: nt.Bayar.value = jt - parseInt(nt.Diskon.value);36:37: }38:39: }40:41: function resetForm(){42:43: document.form1.reset();44:45: }46:47: //-->48:</script>
<h3>Form Pemesanan Berbasis JavaScript</h3>
<form name="form1" action="#">
<table border="1px">
<tr>
<th>No</th>
<th>Makanan/Minuman</th>
<th>Harga</th>
<th>Pesan</th>
</tr>
<tr>
<td width="15px">1</td>
<td width="200px">Bakso Istimewa</td>
<td width="85px">@ <input type="text" name="bakso" value="12000" size="6" disabled="true"/></td>
<td width="150px"><input type="text" name="Bakso" value="0" onChange="hitung()"/></td>
</tr>
<tr>
<td>2</td>
<td>Soto Spesial</td>
<td>@ <input type="text" name="soto" value="10000" size="6" disabled="true"/></td>
<td><input type="text" name="Soto" value="0" onChange="hitung()"/></td>
</tr>
<tr>
<td>3</td>
<td>Mie Ayam Super</td>
<td>@ <input type="text" name="mie" value="15000" size="6" disabled="true"/></td>
<td><input type="text" name="Mie" value="0" onChange="hitung()"/></td>
</tr>
<tr>
<td>4</td>
<td>Es Degan</td>
<td>@ <input type="text" name="degan" value="7000" size="6" disabled="true"/></td>
<td><input type="text" name="Degan" value="0" onChange="hitung()"/></td>
</tr>
<tr>
<td>5</td>
<td>Es Campur</td>
<td>@ <input type="text" name="campur" value="7000" size="6" disabled="true"/></td>
<td><input type="text" name="Campur" value="0" onChange="hitung()"/></td>
</tr>
<tr>
<td colspan="3" align="right">Jumlah Total</td>
<td><input type="text" name="Total" disabled="true" /></td>
</tr>
<tr>
<td colspan="3" align="right">Diskon</td>
<td><input type="text" name="Diskon" disabled="true" /></td>
</tr>
<tr>
<td colspan="3" align="right">Jumlah Dibayar</td>
<td><input type="text" name="Bayar" disabled="true" align="right"/></td>
</tr>
</table><br/>
<input type="button" value="BATAL" onClick="resetForm()" />
</form>
</body>
</html>
0 komentar:
Posting Komentar