Just another WordPress.com site

JavaScript terbentuk atas elemen-elemen fundamental. Salah satu kemampuan utama JavaScript adalah 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.

Ketikkan sript seperti di bawah ini:

<!DOCTYPE html>
<html lang=”en”><head>
<title>Form Pemesanan Berbasis JavaScript</title>
</head>
<body background=”Picture1.jpg”>
<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>
<h1>FORM PEMESANAN MAKANAN</h1>
<form name=”form1″ action=”#”>
<table border=”2″>
<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=”RESET” />
</form>
</body>
</html>

Kemudian simpan dengan nama “form-makanan.html”

Setelah itu, jalankan…maka tampilannya akan tampak seperti di bawah ini:

 

 

 

 

 

 

Selamat Mencoba..🙂

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

Tag Cloud

%d bloggers like this: