DHTML dan JavaScript : Form Pemesanan
Gambar. Desain Form Pemesanan Makanan dan Minuman
DHTML (Dynamic HTML) merupakan suatu teknik untuk menciptakan halaman web yang interaktif dengan cara mengombinasikan elemen-elemen seperti HTML, style sheet, dan scripting. Jadi, DHTML bukanlah suatu jenis bahasa pemrograman melainkan hanya sekadar istilah saja. Pembuatan DHTML dapat memanfaatkan JavaScript. JavaScript terbentuk atas
elemen-elemen fundamental. Dengan menggunakan JavaSript memungkinkan Anda untuk menampilkan Kotak Dialog, Dukungan Scripting, Merujuk Elemen, Event, Linked Scripting, dan lain sebagainya. Berikut pemanfaatan JavaScript didalam penggunaan kalkulator.
Berikut source code HTML-nya: (formPemesanan.html)
<script language="JavaScript" type="text/javascript">
<!--
function hitungPesan(){
var nota = document.form2;
var hargaBakso = 12000 * eval(nota.qBakso.value);
var hargaSoto = 10000 * eval(nota.qSoto.value);
var hargaMie = 15000 * eval(nota.qMie.value);
var hargaDegan = 5000 * eval(nota.qDegan.value);
var hargaCampur = 7000 * eval(nota.qCampur.value);
var jumlahTotal = hargaBakso + hargaSoto + hargaMie + hargaDegan + hargaCampur;
if (jumlahTotal > 50000){
nota.Total.value = jumlahTotal;
nota.Diskon.value = 10000;
nota.Bayar.value = jumlahTotal - eval(nota.Diskon.value);
} else {
nota.Total.value = jumlahTotal;
nota.Diskon.value = 0;
nota.Bayar.value = jumlahTotal - eval(nota.Diskon.value);
}
}
function resetForm(){
document.form2.reset();
}
//-->
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Warung "Cangkruk"</title>
</head>
<body>
<!--Letakkan Listing Code JavaScript disini-->
<h3>Form Pemesanan Berbasis JavaScript</h3>
<form name="form2" 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" bgcolor="#F87267">@ <input type="text" name="bakso" value="12000" size="6" disabled="true"/></td>
<td width="150px"><input type="text" name="qBakso" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>2</td>
<td>Soto Spesial</td>
<td bgcolor="#F87267">@ <input type="text" name="soto" value="10000" size="6" disabled="true"/></td>
<td><input type="text" name="qSoto" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>3</td>
<td>Mie Ayam Super</td>
<td bgcolor="#F87267">@ <input type="text" name="mie" value="15000" size="6" disabled="true"/></td>
<td><input type="text" name="qMie" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>4</td>
<td>Es Degan</td>
<td bgcolor="#F87267">@ <input type="text" name="degan" value="7000" size="6" disabled="true"/></td>
<td><input type="text" name="qDegan" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>5</td>
<td>Es Campur</td>
<td bgcolor="#F87267">@ <input type="text" name="campur" value="7000" size="6" disabled="true"/></td>
<td><input type="text" name="qCampur" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr bgcolor="#F87267">
<td colspan="3" align="right">Jumlah Total</td>
<td><input type="text" name="Total" disabled="true" /></td>
</tr>
<tr bgcolor="#F87267">
<td colspan="3" align="right">Diskon</td>
<td><input type="text" name="Diskon" disabled="true" /></td>
</tr>
<tr bgcolor="#F87267">
<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>
Download Selengkapnya DISINI
DHTML dan JavaScript : Form Pemesanan
Subscribe to:
Post Comments (Atom)
0 komentar:
Post a Comment