halaman web yang interaktif dengan cara mengombinasikan elemen-elemen
seperti HTML, style sheet, dan scripting. Jadi, DHTML bukanlah suatu jenis
bahasa pemrograman melainkan hanya sekadar istilah saja. Pada bagian ini,
pembuatan DHTML akan dilakukan dengan memanfaatkan JavaScript.
Contohnya kita bisa membuat aplikasi form pemesanan makanan atau minuman menggunakan Java Script, dan hasilnya sebagai berikut:
Untuk code-nya bisa dilihat di bawah ini:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FORM PEMBAYARAN RESTORAN</title>
<script language = "JavaScript" type="text/JavaScript">
<!--
function Restaurant()
{
var tulis = document.formRestaurant;
var hargapesto = parseInt(tulis.pesto.value) * parseInt(tulis.pesto1.value);
var hargacannelloni = parseInt(tulis.cannelloni.value) * parseInt(tulis.cannelloni1.value);
var hargatortellini= parseInt(tulis.tortellini.value) * parseInt(tulis.tortellini1.value);
var hargaespresso = parseInt(tulis.espresso.value) * parseInt(tulis.espresso1.value);
var hargalatte= parseInt(tulis.latte.value) * parseInt(tulis.latte1.value);
var hargatiramisu= parseInt(tulis.tiramisu.value) * parseInt(tulis.tiramisu1.value);
var totalharga = hargapesto + hargacannelloni + hargatortellini+ hargaespresso + hargalatte + hargatiramisu;
if (totalharga > 50000)
{
tulis.Bayar.value = totalharga;
tulis.Diskon.value = 10000;
tulis.Jumlah.value = totalharga - parseInt(tulis.Diskon.value);
}
else
{
tulis.Bayar.value = totalharga;
tulis.Diskon.value = 0;
tulis.Jumlah.value = totalharga;
}
}
function awal(){
document.formRestaurant.reset();
}
//-->
</script>
</head>
<body>
<h2 align="center"><font color="#000099"><strong>DAFTAR HARGA DI NI'MAH'S ITALIAN RESTAURANT</strong></font></h2>
<form name="formRestaurant" action="#">
<table width="644" border="1" align="center">
<tr bgcolor="#00FF00">
<th width="30" height="24" scope="col">No</th>
<th width="211" scope="col">Makanan atau Minuman</th>
<th width="180" scope="col">Harga</th>
<th width="195" scope="col">Pesan</th>
</tr>
<tr bgcolor="#0000CC">
<td style="text-align:center"><font color="#FFFFFF">1.</font></td>
<td><font color="#FFFFFF">Pesto Chiken</font></td>
<td><font color="#FFFFFF">@</font> <input type="text" name="pesto" value="15000" size="20" disabled="disabled"/></td>
<td><input name="pesto1" type="text" onKeyUp="Restaurant()" value="0" size="23"/></td>
</tr>
<tr bgcolor="#6600CC">
<td style="text-align:center"><font color="#FFFFFF">2.</font></td>
<td><font color="#FFFFFF">Cannelloni</font></td>
<td><font color="#FFFFFF">@</font>
<input type="text" name="cannelloni" value="12000" size="20" disabled="disabled"/></td>
<td><input name="cannelloni1" type="text" onKeyUp="Restaurant()" value="0" size="23"/></td>
</tr>
<tr bgcolor="#FF00FF">
<td style="text-align:center"><font color="#FFFFFF">3.</font></td>
<td><font color="#FFFFFF">Tortellini</font></td>
<td><font color="#FFFFFF">@</font>
<input type="text" name="tortellini" value="17000" size="20" disabled="disabled"/></td>
<td><input name="tortellini1" type="text" onKeyUp="Restaurant()" value="0" size="23"/></td>
</tr>
<tr bgcolor="#0000CC">
<td style="text-align:center"><font color="#FFFFFF">4.</font></td>
<td><font color="#FFFFFF">Espresso</font></td>
<td><font color="#FFFFFF">@</font>
<input type="text" name="espresso" value="10000" size="20" disabled="disabled"/></td>
<td><input name="espresso1" type="text" onKeyUp="Restaurant()" value="0" size="23"/></td>
</tr>
<tr bgcolor="#6600CC">
<td style="text-align:center"><font color="#FFFFFF">5.</font></td>
<td><font color="#FFFFFF">Ice Latte</font></td>
<td><font color="#FFFFFF">@</font>
<input type="text" name="latte" value="8000" size="20" disabled="disabled"/></td>
<td><input name="latte1" type="text" onKeyUp="Restaurant()" value="0" size="23"/></td>
</tr>
<tr bgcolor="#FF00FF">
<td><div style="text-align:center"><font color="#FFFFFF">6.</font></td>
<td><font color="#FFFFFF">Tiramisu</font></td>
<td><font color="#FFFFFF">@</font>
<input type="text" name="tiramisu" value="16000" size="20" disabled="disabled"/></td>
<td><input name="tiramisu1" type="text" onKeyUp="Restaurant()" value="0" size="23"/></td>
</tr>
<tr bgcolor="#00FF00">
<td colspan="3" style="text-align:center"><strong>Total Harga </strong></td>
<td><input name="Bayar" type="text" disabled="disabled" value="-" size="23"/></td>
</tr>
<tr bgcolor="#00FF00">
<td colspan="3" style="text-align:center"><strong>Diskon * </strong></td>
<td><input name="Diskon" type="text" disabled="disabled" value="-" size="23"/></td>
</tr>
<tr bgcolor="#00FF00">
<td colspan="3" style="text-align:center"><strong>Jumlah Dibayar </strong></td>
<td><input name="Jumlah" type="text" disabled="disabled" value="-" size="23"/></td>
</tr>
</table>
<p align="center"> *: Pelanggan mendapatkan Diskon Rp.10.000 untuk pembelian di atas Rp.50.000, tidak berlaku untuk kelipatan.</p>
<div id="Layer1" style="position:absolute; width:169px; height:39px; z-index:1; left: 938px; top: 442px;">
<input type="button" value="R e s e t" onClick="awal()"/>
</div>
</form>
</body>
</html>
0 komentar:
Posting Komentar