begitu ditampilkan tidak akan berubah sampai ada aktivitas navigasi. Adapun
untuk menjadikan HTML sebagai halaman dinamis atau aktif, kita bisa
memanfaatkan bahasa scripting.
Waa..apa itu scripting??? terdengar ngerii...wkwkkwk..
Scripting merupakan jenis lain dari pemrograman, yang umumnya lebih mudah dipahami. Script dapat disisipkan ke dalam dokumen HTML dengan menggunakan tag script. Tidak seperti style sheet, script bisa terlihat di dalam head ataupun body.
Yup..pada bagian ini, kita akan belajar membuat form pemesanan makanan dengan menggunakan java script. Pembuatan form pemesanan makanan ini akan membantu pemilik warung/restoran untuk menghitung nota pemesanan dengan mudah n tidak perlu menggunakan kalkulator..
Satu lagi,,form yang sudah terisi dengan daftar harga pemesanan makanan juga dapat dikosongkan kembali cukup dengan mengklik button "Batal" yang sudah disusun menggunakan kode reset value.
Untuk kolom Harga dan Total,,otomatis terisi ketika kolom Pesan diisi. Jadi tidak bisa diisi secara manual karena fungsinya di disable..
Berikut ini adalah kode lengkap pembuatan form pemesanan makanan menggunakan java script.
</br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html>
<head>
<title>Form Pemesanan Berbasis JavaScript</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
function hitungPesan(){
var myForm = document.form1;
var bakso = 12000 * eval(myForm.menu1.value);
var soto = 10000 * eval(myForm.menu2.value);
var mie = 15000 * eval(myForm.menu3.value);
var degan = 5000 * eval(myForm.menu4.value);
var campur = 7000 * eval(myForm.menu5.value);
var hasil = bakso + soto + mie + degan + campur;
if (hasil > 50000){
myForm.Total.value = hasil;
myForm.Diskon.value = 10000;
myForm.Bayar.value = hasil - 10000;
} else {
myForm.Total.value = hasil;
myForm.Diskon.value = 0;
myForm.Bayar.value = hasil - 0;
}
myForm.bayar1.value=bakso;
myForm.bayar2.value=soto;
myForm.bayar3.value=mie;
myForm.bayar4.value=degan;
myForm.bayar5.value=campur;
}
//-->
</script>
<h3>Nota Pemesanan Makanan</h3>
<form name="form1" action="#">
<table border="5">
<tr>
<th>No</th>
<th>Makanan/Minuman</th>
<th>Harga</th>
<th>Pesan</th>
<th>Total</th>
</tr>
<tr>
<td width="15">1</td>
<td width="200">Bakso Istimewa</td>
<td width="150">@<input type="text" name="bakso" value="12000" size="15" disabled="true"/></td>
<td width="150"><input type="text" name="menu1" value="0" onChange="hitungPesan()"/></td>
<td width="150" align="right"><input type="text" name="bayar1" disabled="true"/></td>
</tr>
<tr>
<td>2</td>
<td>Soto Spesial</td>
<td>@<input type="text" name="soto" value="10000" size="15" disabled="true"/></td>
<td><input type="text" name="menu2" value="0" onChange="hitungPesan()"/></td>
<td><input type="text" name="bayar2" disabled="true"/></td>
</tr>
<tr>
<td>3</td>
<td>Mie Ayam Super</td>
<td>@<input type="text" name="mie" value="15000" size="15" disabled="true"/></td>
<td><input type="text" name="menu3" value="0" onChange="hitungPesan()"/></td>
<td><input type="text" name="bayar3" disabled="true"/></td>
</tr>
<tr>
<td>4</td>
<td>Es Degan</td>
<td>@<input type="text" name="degan" value="7000" size="15" disabled="true"/></td>
<td><input type="text" name="menu4" value="0" onChange="hitungPesan()"/></td>
<td><input type="text" name="bayar4" disabled="true"/></td>
</tr>
<tr>
<td>5</td>
<td>Es Campur</td>
<td>@<input type="text" name="campur" value="7000" size="15" disabled="true"/></td>
<td><input type="text" name="menu5" value="0" onChange="hitungPesan()"/></td>
<td><input type="text" name="bayar5" disabled="true"/></td>
</tr>
<tr>
<td colspan="4" align="right">Jumlah Total</td>
<td><input type="text" name="Total" disabled="true" /></td>
</tr>
<tr>
<td colspan="4" align="right">Diskon</td>
<td><input type="text" name="Diskon" disabled="true" /></td>
</tr>
<tr>
<td colspan="4" align="right">Jumlah Dibayar</td>
<td><input type="text" name="Bayar" disabled="true" align="right"/></td>
</tr>
</table><br/>
<input type="reset" value="Batal" />
</form>
</body>
</html><
Ok..selamat mencoba..:-)
