2:11 PM
Unknown
DHTML (Dynamic HTML) merupakan suatu teknik untuk menciptakan halaman web yang interaktif dengan cara mengkombinasikan elemen-elemen seperti HTML, style sheet, dan scripting. Pada pembuatan DHTML kali ini akan dilakukan dengan memanfaatkan JavaScript.
JavaScript adalah bahasa script (bahasa pemrogaman yang dapat memegang kontrol aplikasi) yang berbasis pada bahasa pemrograman Java, namun JavaScript bukanlah bagian teknologi Java dari SUN (sekarang diakusisi ORACLE). Java merupakan bahasa berorientasi objek murni , sedangkan JavaScript digunakan secara prosedural. Cara kerja JavaScript adalah mengakses elemen pada HTML dan membuat aksi jika elemen-elemen HTML itu mengalami perubahan, misalnya berubanya warna halaman web begitu sebuah tombol diklik
Sekarang mencoba untuk membuat form pemesanan makanan/Minuman berbasis JavaScript, dengan spesifikasi:
- Field Harga, Jumlah Total, Diskon, dan Jumlah Dibayar bersifat read-only
- Jika pesan diisi, maka field jumlah total secara otomatis akan menghitung totalnya, termasuk juga field jumlah dibayar.
- Jika Pembelian lebih dari Rp 50.000, maka field diskson secara otomatis akan berisi nilai diskon sebesar Rp 10.000 (tidak berlaku kelipatannya) dan otomatis pula field jumlah dibayar akan berkurang
- Jika tombol 'Batal' diklik, maka semua field Pesan akan dibersihkan
Form Pemesanan MaMin Berbasis JavaScript:
Script HTML: formpesan.html
<!--
Roisatul Azizah
109533414524
Form Pemesanan Berbasis JScript
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Warung Jan Sip</title>
</head>
<body>
<!--Letakkan Listing Code JavaScript disini-->
<h3>Form Pemesanan Berbasis JavaScript</h3>
<form name="form2" action="#">
<table border="1px">
<tr>
<th>No</th>
<th>Makanan/Minuman</th>
<th>Harga</th>
<th>Pesan</th>
</tr>
<tr>
<td width="15px">1</td>
<td width="200px">Bakso Istimewa</td>
<td width="85px">@ <input type="text" name="bakso" value="12000" size="6" disabled="true"/></td>
<td width="150px"><input type="text" name="qBakso" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>2</td>
<td>Soto Spesial</td>
<td>@ <input type="text" name="soto" value="10000" size="6" disabled="true"/></td>
<td><input type="text" name="qSoto" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>3</td>
<td>Mie Ayam Super</td>
<td>@ <input type="text" name="mie" value="15000" size="6" disabled="true"/></td>
<td><input type="text" name="qMie" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>4</td>
<td>Es Degan</td>
<td>@ <input type="text" name="degan" value="7000" size="6" disabled="true"/></td>
<td><input type="text" name="qDegan" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>5</td>
<td>Es Campur</td>
<td>@ <input type="text" name="campur" value="7000" size="6" disabled="true"/></td>
<td><input type="text" name="qCampur" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr bgcolor="lime">
<td colspan="3" align="right">Jumlah Total</td>
<td><input type="text" name="Total" disabled="true" /></td>
</tr>
<tr bgcolor="lime">
<td colspan="3" align="right">Diskon</td>
<td><input type="text" name="Diskon" disabled="true" /></td>
</tr>
<tr bgcolor="lime">
<td colspan="3" align="right">Jumlah Dibayar</td>
<td><input type="text" name="Bayar" disabled="true" align="right"/></td>
</tr>
</table><br/>
<input type="button" value="BATAL" onClick="resetForm()" />
</form>
</body>
</html>
<script language="JavaScript" type="text/javascript">
<!--
function hitungPesan(){
var nota = document.form2;
var hargaBakso = 12000 * eval(nota.qBakso.value);
var hargaSoto = 10000 * eval(nota.qSoto.value);
var hargaMie = 15000 * eval(nota.qMie.value);
var hargaDegan = 5000 * eval(nota.qDegan.value);
var hargaCampur = 7000 * eval(nota.qCampur.value);
var jumlahTotal = hargaBakso + hargaSoto + hargaMie + hargaDegan + hargaCampur;
if (jumlahTotal > 50000){
nota.Total.value = jumlahTotal;
nota.Diskon.value = 10000;
nota.Bayar.value = jumlahTotal - eval(nota.Diskon.value);
} else {
nota.Total.value = jumlahTotal;
nota.Diskon.value = 0;
nota.Bayar.value = jumlahTotal - eval(nota.Diskon.value);
}
}
function resetForm(){
document.form2.reset();
}
//-->
</script>
1 comment:
assalamualaikum
ini kunjungan kesekian kali ke blog sahabat :)
dan menyimak terus update postingan yang semakin menarik
sekaligus memberi info bahwa kangmusa telah membuat ebook baru
"Blog Monetization Options" yang bisa diunduh disini
terima kasih, saya tunggu kunjungan Anda di kangmusa.com
salam hangat
kangmusa
Posting Komentar
Informasi Pilihan Identitas:
Google/Blogger : Account special blogger
Another : Jika tidak punya account blogger namun punya alamat Blog atau Website.
Anonim : Jika tidak ingin mempublikasikan profile anda (tidak disarankan). salam hangat, Roisa :)