.jpg)
Buat kalkulator udah, sekarang coba buat apa lagi yah supaya makin akrab sama Java Script? Bagaimana kalau buat Formulir saja, kan formulir itu banyak gunanya, tiap bikin email baru, blog baru, akun facebook baru dan semuanya yang baru hampir selalu ada formulirnya. Biar gampang sekarang kita coba buat formulir pesanan makanan dan minuman untuk restoran 'MAHAL JAYA' (Kenapa namanya MAHAL JAYA? ya karena harganya tidak bisa dibilang pas untuk kantong mahasiswa yang hidupnya serba prihatin dan pas-pasan...wkwkwk...wkwkwk...) .
Formulir yang kita akan buat memuat harga makanan dan minuman semisal bakso, soto, mie ayam, es degan dan es campur. harga masing-masing item sudah tertulis di samping tiap-tiap item itu. Harga-harga itu nantinya akan dikalikan dengan banyaknya item yang diminta pelanggan. Jika harga totalnya Rp. 50.000,- atau lebih maka si Pembeli dapat diskon Rp. 10.000,- (tapi diskon ini enggak berlaku untuk kelipatanya lho ya!). Harga yang harus dibayar Pembeli adalah Harga total yang dipotong diskon. Kita juga bisa menambahkan tombol Batal untuk membersihkan formulir yang terlanjur kita isi. Bagaimana caranya supaya formulirnya kembali bersih? tentunya bukan dengan disapu pake sapu ijuk, tapi dengan <input type="reset" value="Batal" />..
Terus kodenya bagaimana? Tampilannya seperti apa?
Hmmm..well, check this out....
<!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 pemesanan berbasis java script</title>
</head>
<body background="bunga.JPG">
<script language="JavaSvript" type="text/javascript">
function getharga() { var myForm=document.form1;
var bakso =12000*eval(myForm.pesan1.value);
var soto=10000*eval(myForm.pesan2.value);
var mie=15000*eval(myForm.pesan3.value);
var degan=5000*eval(myForm.pesan4.value);
var campur=7000*eval(myForm.pesan5.value);
var hasil=bakso+soto+mie+degan+campur;
myForm.total.value=hasil;
if (hasil>50000){myForm.diskon.value=10000; myForm.bayar.value=hasil-10000;}
if (hasil<50000){myForm.diskon.value=0; myForm.bayar.value=hasil;}
myForm.bayar1.value=bakso;
myForm.bayar2.value=soto;
myForm.bayar3.value=mie;
myForm.bayar4.value=degan;
myForm.bayar5.value=campur;
}
</script>
<form name="form1" action="#">
<table border="1" width="850" >
<caption style="bold">FORM PEMESANAN MAKANAN RESTO 'MAHAL JAYA'</caption>
<tr bgcolor="#f8bfc4">
<th width="50">No</th>
<th width="200">Makanan/Minuman</th>
<th width="200">Harga</th>
<th width="200">Pesan</th>
<th width="200">Total</th>
</tr>
<tr bgcolor="#eaf8bf">
<td width="50">1</td>
<td width="200">Bakso Istimewa</td>
<td width="200">@<input type="text" name="hrgbakso" value="12000"/></td>
<td width="200"><input type="text" name="pesan1"value="0" onchange="getharga();"/></td>
<td width="200" align="right"><input type="text" name="bayar1"/></td>
</tr>
<tr bgcolor="#eaf8bf">
<td width="50">2</td>
<td width="200">Soto Spesial</td>
<td width="200">@<input type="text" name="hrgsoto" value="10000"/></td>
<td width="200"><input type="text" name="pesan2" value="0" onchange="getharga();"/></td>
<td width="200" align="right"><input type="text" name="bayar2"/></td>
</tr>
<tr bgcolor="#eaf8bf">
<td width="50">3</td>
<td width="200">Mie Ayam Super</td>
<td width="200">@<input type="text" name="hrgmie" value="15000"/></td>
<td width="200"><input type="text" name="pesan3" onchange="getharga();" value="0"/></td>
<td width="200" align="right"><input type="text" name="bayar3"/></td>
</tr>
<tr bgcolor="#eaf8bf">
<td width="50">4</td>
<td width="200">Es Degan</td>
<td width="200">@<input type="text" name="hrgdegan" value="5000"/></td>
<td width="200"><input type="text" name="pesan4" onchange="getharga();" value="0"/></td>
<td width="200" align="right"><input type="text" name="bayar4"/></td>
</tr>
<tr bgcolor="#eaf8bf">
<td width="50">5</td>
<td width="200">Es Campur</td>
<td width="200">@<input type="text" name="hrgcampur" value="7000"/></td>
<td width="200"><input type="text" name="pesan5" onchange="getharga();" value="0"/></td>
<td width="200" align="right"><input type="text" name="bayar5"/></td>
</tr>
<tr bgcolor="#adf2f0">
<td colspan="4" width="650" align="right">Jumlah Total</td>
<td width="200"align="right"><input type="text" name="total" /></td>
</tr>
<tr bgcolor="#adf2f0">
<td colspan="4" width="650" align="right">Diskon</td>
<td width="200"align="right"><input type="text" name="diskon" /></td>
</tr>
<tr bgcolor="#adf2f0">
<td colspan="4" width="650" align="right">Jumlah Yang Harus Dibayar</td>
<td width="200"align="right"><input type="text" name="bayar" /></td>
</tr>
</table>
<br/>
<input type="reset" value="Batal" />
</form>
</body>
</html>
"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 pemesanan berbasis java script</title>
</head>
<body background="bunga.JPG">
<script language="JavaSvript" type="text/javascript">
function getharga() { var myForm=document.form1;
var bakso =12000*eval(myForm.pesan1.value);
var soto=10000*eval(myForm.pesan2.value);
var mie=15000*eval(myForm.pesan3.value);
var degan=5000*eval(myForm.pesan4.value);
var campur=7000*eval(myForm.pesan5.value);
var hasil=bakso+soto+mie+degan+campur;
myForm.total.value=hasil;
if (hasil>50000){myForm.diskon.value=10000; myForm.bayar.value=hasil-10000;}
if (hasil<50000){myForm.diskon.value=0; myForm.bayar.value=hasil;}
myForm.bayar1.value=bakso;
myForm.bayar2.value=soto;
myForm.bayar3.value=mie;
myForm.bayar4.value=degan;
myForm.bayar5.value=campur;
}
</script>
<form name="form1" action="#">
<table border="1" width="850" >
<caption style="bold">FORM PEMESANAN MAKANAN RESTO 'MAHAL JAYA'</caption>
<tr bgcolor="#f8bfc4">
<th width="50">No</th>
<th width="200">Makanan/Minuman</th>
<th width="200">Harga</th>
<th width="200">Pesan</th>
<th width="200">Total</th>
</tr>
<tr bgcolor="#eaf8bf">
<td width="50">1</td>
<td width="200">Bakso Istimewa</td>
<td width="200">@<input type="text" name="hrgbakso" value="12000"/></td>
<td width="200"><input type="text" name="pesan1"value="0" onchange="getharga();"/></td>
<td width="200" align="right"><input type="text" name="bayar1"/></td>
</tr>
<tr bgcolor="#eaf8bf">
<td width="50">2</td>
<td width="200">Soto Spesial</td>
<td width="200">@<input type="text" name="hrgsoto" value="10000"/></td>
<td width="200"><input type="text" name="pesan2" value="0" onchange="getharga();"/></td>
<td width="200" align="right"><input type="text" name="bayar2"/></td>
</tr>
<tr bgcolor="#eaf8bf">
<td width="50">3</td>
<td width="200">Mie Ayam Super</td>
<td width="200">@<input type="text" name="hrgmie" value="15000"/></td>
<td width="200"><input type="text" name="pesan3" onchange="getharga();" value="0"/></td>
<td width="200" align="right"><input type="text" name="bayar3"/></td>
</tr>
<tr bgcolor="#eaf8bf">
<td width="50">4</td>
<td width="200">Es Degan</td>
<td width="200">@<input type="text" name="hrgdegan" value="5000"/></td>
<td width="200"><input type="text" name="pesan4" onchange="getharga();" value="0"/></td>
<td width="200" align="right"><input type="text" name="bayar4"/></td>
</tr>
<tr bgcolor="#eaf8bf">
<td width="50">5</td>
<td width="200">Es Campur</td>
<td width="200">@<input type="text" name="hrgcampur" value="7000"/></td>
<td width="200"><input type="text" name="pesan5" onchange="getharga();" value="0"/></td>
<td width="200" align="right"><input type="text" name="bayar5"/></td>
</tr>
<tr bgcolor="#adf2f0">
<td colspan="4" width="650" align="right">Jumlah Total</td>
<td width="200"align="right"><input type="text" name="total" /></td>
</tr>
<tr bgcolor="#adf2f0">
<td colspan="4" width="650" align="right">Diskon</td>
<td width="200"align="right"><input type="text" name="diskon" /></td>
</tr>
<tr bgcolor="#adf2f0">
<td colspan="4" width="650" align="right">Jumlah Yang Harus Dibayar</td>
<td width="200"align="right"><input type="text" name="bayar" /></td>
</tr>
</table>
<br/>
<input type="reset" value="Batal" />
</form>
</body>
</html>
Tampilannya :
0 komentar:
Posting Komentar