Membuat Form Pemesanan Berbasis Java Script ~ Dream's Zone

Setelah kemarin kita belajar membuat kalkulator sederhana, pada tutorial kali ini kita akan membuat sebuah aplikasi form pemesanan berbasis java script, berikut adalah aplikasi yang akan dibuat:

No	Makanan/Minuman	Harga
1	Bakso Istimewa	@
2	Soto Spesial	@
3	Mie Ayam Super	@
4	Es Degan	@
5	Es Campur	@
Jumlah Total
Diskon
Jumlah Dibayar

Aturan Pemesanan :

Field Harga, Jumlah Total, Diskon, dan Jumlah Bayar bersifat read-only atau hanya bisa dibaca. Karena itu kita perlu men-disable properti elemen field-field tersebut

Jika pesan diisi, maka field Jumlah Total, Diskon, Jumlah Bayar secara otomatis akan menghitung totalnya. Dengan ini kita memberikan event handler onChange di field-field Pesan, dimana fungsi dipanggil ketika teks dalam elemen berubah.

o Jumlah Total = Σ(Harga * Pesan)
o Jumlah Bayar = Jumlah Total – Diskon

Jika pembelian lebih dari 50000, maka field diskon secara otomatis akan berisi nilai diskon sebesar 10000 (tidak berlaku kelipatannya) dan otomatis field jumlah bayar akan berkurang. Dengan ini kita memberikan event handler onChange di field-field Pesan, dan pada perhitungan Jumlah Bayar kita beri pernyataan bersyarat if-else.

Berikut adalah source code untuk java script-nya:
---------start here--------

----------end here--------

Sedangkan untuk source HTML-nya seperti berikut:
---------start here--------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html><br /><head><br /><title>Warung Bu Asri</title><br /></head><br /><body><br /><h3>Form Pemesanan Makanan</h3><br /><form name="form2" action="#"><br /><table border="1px"><br /><tr><br />    <th>No</th><br />    <th>Makanan/Minuman</th><br />    <th>Harga</th><br />    <th>Pesan</th><br /></tr><br /><tr><br />   <td width="15px">1</td><br />    <td width="200px">Bakso Istimewa</td><br />    <td width="85px" bgcolor="#85f500">@ <input type="text" name="bakso" value="12000" size="6" disabled="true"></td><br />    <td width="150px"><input type="text" name="qBakso" value="0" onchange="hitungPesan()"></td><br /></tr><br /><tr><br />    <td>2</td><br />    <td>Soto Spesial</td><br />    <td bgcolor="#85f500">@ <input type="text" name="soto" value="10000" size="6" disabled="true"></td><br />    <td><input type="text" name="qSoto" value="0" onchange="hitungPesan()"></td><br /></tr><br /><tr><br />    <td>3</td><br />    <td>Mie Ayam Super</td><br />    <td bgcolor="#85f500">@ <input type="text" name="mie" value="15000" size="6" disabled="true"></td><br />    <td><input type="text" name="qMie" value="0" onchange="hitungPesan()"></td><br /></tr><br /><tr><br />    <td>4</td><br />    <td>Es Degan</td><br />    <td bgcolor="#ee2f30">@ <input type="text" name="degan" value="7000" size="6" disabled="true"></td><br />    <td><input type="text" name="qDegan" value="0" onchange="hitungPesan()"></td><br /></tr><br /><tr><br />    <td>5</td><br />    <td>Es Campur</td><br />    <td bgcolor="#ee2f30">@ <input type="text" name="campur" value="7000" size="6" disabled="true"></td><br />    <td><input type="text" name="qCampur" value="0" onchange="hitungPesan()"></td><br /></tr><br /><tr bgcolor="yellow"><br />    <td colspan="3" align="right">Jumlah Total</td><br />    <td><input type="text" name="Total" disabled="true"></td><br /></tr><br /><tr bgcolor="green"><br />    <td colspan="3" align="right">Diskon</td><br />    <td><input type="text" name="Diskon" disabled="true"></td><br /></tr><br /><tr bgcolor="red"><br />   <td colspan="3" align="right">Jumlah Dibayar</td><br />    <td><input type="text" name="Bayar" disabled="true" align="right"></td><br /></tr><br /></table><br/><br /><input type="button" value="BATAL" onclick="resetForm()"><br /></form><br /></body><br /></html>

----------end here--------

Dream's Zone

Senin, Maret 8

Membuat Form Pemesanan Berbasis Java Script

2 comments:

Posting Komentar

Wahyu Penjual Mimpi

Labels

Ping Me!!

Blog Archive

pengunjung

Followers

Translate