DuniaKu Berbagi dengan DuniaMu...: PTI478

Setelah sebelumnya kita belajar tentang membuat aplikasi kalkulator sederhana dengan javascript. sekarang kita akan Membuat Aplikasi Form Pemesanan Makanan dan Minuman dengan JavaScript. Pertama kita harus mengopykan kode-kode dibawah ini pada worksheet yang kita pakai, seperti notepad.exe. dibawah ini adalah kode yang harus dicopykan :

pada kode diatas merupakan kode javascript yang harus disimpan dengan tipe .js, pada kode ini harus dipisahkan dengan kode yang bertipe .html

selanjutnya copykan kode yang bertipe .html pada worksheet yang sedang kita gunakan. adapun kode dapat dicopy dibawah ini

<!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>

setelah semua berhasil docpykan, jalankan file javascript yang telah dikerjakan tadi. dan hasilnya adalah seperti pada gambar dibawah ini

Adapun spesifikasi pemesanan adalah sebagai berikut :

Field Harga, jumlah total, diskon, dan jumlah bayar bersifat read only atau hanya bisa dibaca . Karena itu kita perlu mendisable properti elemen-elemen field-field tersebut.
Jika pesan diisi, maka field Jumlah Total, Diskon, Jumlah Bayar secara otomatis akan menghitung totalnya. dengan ini kita memberikan even handler onChange pada field-field pesan, dimana fungsi dipanggil ketika teks dalam elemen berubah.
Jumlah Total = Σ(Harga * Pesan)
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.

Selamat Mencoba dan Semoga Bermanfaat!!!