Form pemesanan makanan dan minuman ini merupakan suatu halaman web yang aktif dan dinamis. Lalu bagaimana kita bisa membuatnya? Padahal perlu diketahui bahwa suatu halaman web itu merupakan suatu model dokumen yang statis ketika ditampilkan dan tidak akan berubah sampai ada aktivitas navigasi.
Nah, ternyata kita bisa menciptakan suatu halaman web yang lebih aktif dan dinamis tersebut dengan memanfaatkan bahasa scripting, salah satunya yaitu JavaScript. Scripting itu sendiri merupakan jenis lain dari pemrograman, yang pada umumnya lebih mudah dipahami.
Script dapat disisipkan ke dalam dokumen HTML dengan menggunakan tag . Dan script ini bisa terlihat di dalam maupun .
Berikut ini saya tampilkan hasil form pemesanan makanan dan minuman yang telah saya buat :
Spesifikasi dari form ini yaitu :
- field harga, jumlah total, diskon dan jumlah dibayar bersifat read only (disabled).
- Jika field pesan diisi, maka otomatis field jumlah total akan menghitung jumlah total bedasarkan harga dan banyak pesanan yang dimasukkan.
- Field jumlah dibayar juga otomatis terisi berdasarkan perhitungan yang dilakukan.
- Jika pembelian lebih dari 50000 maka field diskon akan otomatis terisi dengan 10000 (tidak berlaku kelipatannya), dan ini nanti akan berpengaruh pada field jumlah dibayar karena nilainya akan berubah sesuai pengurangan diskon.
- Jika button CLEAR di klik maka semua field pesan, jumlah total, diskon dan jumlah dibayat akan dikosongkan.
Bila dijalankan dan mengikuti spesifikasi yang ada maka tampilannya adalah sebagai berikut :
Code Program untuk membuat tampilan form diatas yaitu :
<em><!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 Pesan Bayar Makan</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function hitung() {
var myForm = document.form1;
var hargaBakso = parseInt(myForm.bakso.value) * parseInt(myForm.pesanbakso.value);
var hargaSoto = parseInt(myForm.soto.value) * parseInt(myForm.pesansoto.value);
var hargaMie = parseInt(myForm.mie.value) * parseInt(myForm.pesanmie.value);
var hargaDegan = parseInt(myForm.degan.value) * parseInt(myForm.pesandegan.value);
var hargaCampur = parseInt(myForm.campur.value) * parseInt(myForm.pesancampur.value);
var hargaTotal= hargaBakso + hargaSoto + hargaMie + hargaDegan + hargaCampur;
if(hargaTotal>50000)
{
myForm.total.value = hargaTotal;
myForm.diskon.value = 10000;
myForm.bayar.value = hargaTotal - parseInt(myForm.diskon.value);
}
else
{
myForm.total.value = hargaTotal;
myForm.diskon.value = 0;
myForm.bayar.value = hargaTotal;
}
}
function hapus(){
document.form1.reset();
}
//-->
</script>
</head>
<body background="cup.jpg">
<h2 align="center">Form Pemesanan Warung Pendtium Berbasis JavaScript</h2>
<form name = "form1" action="#">
<table border="1" align="center">
<tr>
<td width="30" align="center" bgcolor="white"><strong>No</strong></td>
<td width="200" align="center" bgcolor="white"><strong>Makanan/Minuman</strong></td>
<td align="center" bgcolor="white"><strong>Harga</strong></td>
<td align="center" bgcolor="white"><strong>Pesan</strong></td>
</tr>
<tr>
<td align="center" bgcolor="white">1</td>
<td bgcolor="white">Bakso Istimewa</td>
<td bgcolor="white">@<input type="text" name="bakso" value="12000" disabled="true"/></td>
<td bgcolor="white"><input type="text" name="pesanbakso" value="0" onkeyup="hitung()" /></td>
</tr>
<tr>
<td align="center" bgcolor="white">2</td>
<td bgcolor="white">Soto Spesial</td>
<td bgcolor="white">@<input type="text" name="soto" value="10000" disabled="true"/></td>
<td bgcolor="white"><input type="text" name="pesansoto" value="0" onkeyup="hitung()"/></td>
</tr>
<tr>
<td align="center" bgcolor="white">3</td>
<td bgcolor="white">Mie Ayam Super</td>
<td bgcolor="white">@<input type="text" name="mie" value="15000" disabled="true"/></td>
<td bgcolor="white"><input type="text" name="pesanmie" value="0" onkeyup="hitung()"/></td>
</tr>
<tr>
<td align="center" bgcolor="white">4</td>
<td bgcolor="white">Es Degan</td>
<td bgcolor="white">@<input type="text" name="degan" value="5000" disabled="true"/></td>
<td bgcolor="white"><input type="text" name="pesandegan" value="0" onkeyup="hitung()"/></td>
</tr>
<tr>
<td align="center" bgcolor="white">5</td>
<td bgcolor="white">Es Campur</td>
<td bgcolor="white">@<input type="text" name="campur" value="7000" disabled="true"/></td>
<td bgcolor="white"><input type="text" name="pesancampur" value="0" onkeyup="hitung()"/></td>
</tr>
<tr>
<td colspan="3" align="right" bgcolor="white"><strong>Jumlah Total</strong></td>
<td bgcolor="white"><input type="text" name="total" style="text-align:right" disabled="true"/></td>
</tr>
<tr>
<td colspan="3" align="right" bgcolor="white"><strong>Diskon</strong></td>
<td bgcolor="white"><input type="text" name="diskon" style="text-align:right" disabled="true"/></td>
</tr>
<tr>
<td colspan="3" align="right" bgcolor="white"><strong>Jumlah Dibayar</strong></td>
<td bgcolor="white"><input type="text" name="bayar" style="text-align:right" disabled="true"/></td>
</tr>
</table>
<br />
<input type="button" value="CLEAR" onclick="hapus()" style="position:absolute; width:100px; height:30px; left: 357px; top: 340px;" />
</form>
</body>
</html></em>
Pembuatan form ini walaupun sederhana namun sangat menarik dan cukup memusingkan, hehe...
Jadi akan lebih baik bila langsung dipelajari dan dicoba...
Semoga bermanfaat... ^_^
1 komentar:
Wah terimakasih banyak mbak..isi bermanfaat kok
Posting Komentar