Form Pemesanan Makan dan Minum

JavaScript terbentuk atas elemen-elemen fundamental. Salah satu kemampuan utama JavaScriptadalah mengontrol objek-objek di halaman web. Sehubungan dengan hal ini, ada beragam pendekatan yang bisa digunakan untuk mengacu atau mengakses elemen-elemen objek.

Adapun program aplikasi pemesanan makanan/minuman yang dibuat memiliki spesifikasi antara lain:

  • Field Harga, Jumlah Total, Diskon, dan Jumlah Dibayar bersifat read-only
  • Jika  pesan  disi,  maka  field  jumlah  total  secara  otomatis  akan menghitung totalnya, termasuk juga field jumlah dibayar.
  • Rumus:

Jumlah Total = ∑ (harga * pesan)

Jumlah Dibayar = Jumlah Total – Diskon

  • Jika  pembelian  lebih  dari  50000,  maka  field  diskon  secara  otomatis akan  berisi  nilai  diskon  sebesar  10000  (tidak  berlaku  kelipatannya) dan otomatis pula field jumlah dibayar akan berkurang
  • Jika tombol Batal diklik, maka semua field Pesan akan dibersihkan

<em><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html><head><title>Praktikum 4</title></head><script language=”JavaScript” type=”text/javascript”>
function date(){var currentTime = new Date()var hours = currentTime.getHours()var minutes = currentTime.getMinutes()var month = currentTime.getMonth() + 1var day = currentTime.getDate()var year = currentTime.getFullYear()if (minutes < 10){minutes = “0” + minutes}document.write(month + “/” + day + “/” + year +”/”)document.write(hours + “:” + minutes + ” “)if(hours > 11){document.write(“PM”)} else {document.write(“AM”)}}
function pemesanan(){    var xxx = document.formulir;    var hargaBakso = 12000 * eval(xxx.hargaBakso.value);    var hargaSoto = 10000 * eval(xxx.hargaSoto.value);    var hargaMie = 15000 * eval(xxx.hargaMie.value);    var hargaDegan = 5000 * eval(xxx.hargaDegan.value);    var hargaCampur = 7000 * eval(xxx.hargaCampur.value);    var TotalHarga = hargaBakso + hargaSoto + hargaMie + hargaDegan + hargaCampur;if (TotalHarga > 50000){xxx.Total.value = TotalHarga;xxx.Diskon.value = 10000;xxx.Bayar.value = TotalHarga – eval(xxx.Diskon.value);}  else  { xxx.Total.value = TotalHarga; xxx.Diskon.value = 0; xxx.Bayar.value = TotalHarga – eval(xxx.Diskon.value); }}
function resetForm(){    document.formulir.reset();}

</script>
<body background=”back2.jpg”>

<H1 align=”center”>Form Pemesanan Makan dan Minum</align></H1><br/><form name=”formulir”><table border=”0″ align=”center”><tr><td><button align=”center” type=”button” onclick=”date()”>Display Date</button><br/><br/></td</tr></table>

<table border=”1″ align=”center”><tr>    <th>No</th>    <th>Makanan/Minuman</th>    <th>Harga</th>    <th>Pesan</th></tr>
<tr>    <td width=”20″ >1</td>    <td width=”180″>Bakso Istimewa</td>    <td width=”130″ > @&nbsp<input type=”text” name=”bakso” value=”12000″ size=”7″ readonly=”readonly”/></td>    <td width=”160″><input type=”text” name=”hargaBakso” value=”0″ onfocus=”this.select()” onChange=”pemesanan()”/></td></tr>
<tr>    <td>2</td>    <td>Soto Spesial</td> <td> @&nbsp<input type=”text” name=”soto” value=”10000″ size=”7″ readonly=”readonly”/></td>    <td><input type=”text” name=”hargaSoto” value=”0″ onfocus=”this.select()” onChange=”pemesanan()”/></td></tr>
<tr>    <td>3</td>    <td>Mie Ayam Super</td>    <td> @&nbsp <input type=”text” name=”mie” value=”15000″ size=”7″ readonly=”readonly”/></td>    <td><input type=”text” name=”hargaMie” value=”0″ onfocus=”this.select()” onChange=”pemesanan()”/></td></tr>
<tr>    <td>4</td>    <td>Es Degan</td>    <td> @&nbsp <input type=”text” name=”degan” value=”5000″ size=”7″ readonly=”readonly”/></td>    <td><input type=”text” name=”hargaDegan” value=”0″ onfocus=”this.select()” onChange=”pemesanan()”/></td></tr>
<tr>    <td>5</td>    <td>Es Campur</td>    <td> @&nbsp <input type=”text” name=”campur” value=”7000″ size=”7″ readonly=”readonly”/></td>    <td><input type=”text” name=”hargaCampur” value=”0″ onfocus=”this.select()” onChange=”pemesanan()”/></td></tr>
<tr>    <td colspan=”3″ align=”right”>Jumlah Total</td>    <td><input type=”text” name=”Total” readonly=”readonly” /></td></tr>
<tr>    <td colspan=”3″ align=”right”>Diskon</td>    <td><input type=”text” name=”Diskon” readonly=”readonly”/></td></tr>
<tr>    <td colspan=”3″ align=”right”>Jumlah Dibayar</td>    <td><input type=”text” name=”Bayar” readonly=”readonly” align=”right”/></td></tr></table><br/><br/>
<table border=”0″ align=”center”><tr><td><input align=”center” type=”button” value=”CLEAR” onClick=”resetForm()”></tr></td></table></form></body></html></em>

Tampilan program aplikasi pemesanan makanan/minuman tampak seperti gambar dibawah ini

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s