Dynamic HTML(DHTML) merupakan suatu teknik untuk menciptakan halaman web yang interaktif dengan cara mengkombinasi elemen-elemen seperti HTML, style sheet, dan scripting. Jadi DHTML bukanlah suatu jenis bahasa pemrograman melainkan hanya sekedar istilah saja. Pada bagian ini, pembuatan DHTML akan dilakukan dengan pemanfaatatn JavaScript. Berikut adalah contoh pengaplikasian DHTML dengan JavaScript dalam pembuatan daftar harga makanan.
bBerikut adalah script untuk membuat aplikasi seperti di atas
<html>
<head>
<title>Waroeng makan</title>
</head>
<center><h1><font color="blue" face="monotype corsiva">Pilihan Makanan dan Minuman</font></h1></center>
<table border="0" cellpadding="2">
<tr>
<td align="center" colspan="2" width="15%" bgcolor="green">
<font color="#FFFFFF"><strong>Menu</strong></font></td>
<td align="center" colspan="3" bgcolor="green">
<font color="#FFFFFF"><strong>pilihan menu</strong></font></td>
<td align="center" bgcolor="green">
<font color="#FFFFFF"><strong>Total</strong></font></td>
</font> </tr>
<tr>
<form>
<td colspan="2" width="15%" bgcolor="purple"><font color="yellow">Makanan : </font></td>
<td width="25%" bgcolor="red"><input type="radio"
name="Bakso Spesial" value="Bakso Spesial" onClick="form.Makanan_value.value= 12000">
<strong>Bakso Spesial</strong> <br><font size="2">Rp 12,000</font></td>
<td width="25%" bgcolor="red"><input type="radio"
name="Pangsit Spesial" value="Pangsit" onClick="form.Makanan_value.value= 11000">
<strong>Pangsit Spesial</strong> <br><font size="2">Rp 11,000 </font></td>
<td width="25%" bgcolor="red"><input type="radio"
name="Soto Babat" value="Soto Babat" onClick="form.Makanan_value.value= 9000">
<strong>Soto Babat</strong> <font size="2"><br>Rp 9,000 </font></td>
<td width="15%" bgcolor="red"><input type="text" size="13"
name="Makanan_value" value="0"> </td>
</form>
</tr>
<tr>
<form>
<td colspan="2" width="15%" bgcolor="purple"><font color="yellow">Minuman : </font></td>
<td width="15%" bgcolor="Blue">
<p><input type="radio" checked name="BAkso Spesial" value="Jus Apukat"
onclick="form.Minuman_value.value= 6000"><strong><font color="orange">Jus Apukat</font></strong>
<font color="red" size="2">Rp 6,000</font></p></td>
<td width="15%" bgcolor="blue">
<p><input type="radio" name="Bakso Spesial" value="softdrink"
onclick="form.Minuman_value.value= 4000"><strong><font color="orange">softdrink</font></strong>
<br><font color="red" size="2">Rp 4,000</font></p> </td>
<td width="15%" bgcolor="blue">
<p><input type="radio" name="Bakso Spesial" value="Es Dawet"
onclick="form.Minuman_value.value= 3000"><strong><font color="orange">Es Dawet</font></strong>
<font color="red" size="2"><br>Rp 3,000 </font></p> </td>
<td width="15%" bgcolor="blue"><input type="text" size="13"
name="Minuman_value" value="0"> </td>
</form>
</tr>
<tr>
<form>
<td colspan="2" width="15%" bgcolor="purple"><font color="yellow"> Makanan Ringan : </font></td>
<td width="15%" bgcolor="yellow">
<input type="radio" name="Bakso Spesial" value="Bakwan"
onclick="form.camilan_value.value= 500"><strong><font color="red">Bakwan</font></strong>
<br><font size="2">Rp 500</font></td>
<td width="15%" bgcolor="yellow">
<input type="radio" name="Bakso Spesial" value="pisang goreng"
onclick="form.camilan_value.value= 600"><strong><font color="red">pisang goreng</font></strong>
<br><font size="2">Rp 600</font></td>
<td width="15%" bgcolor="yellow"><font color="">
<input type="radio" name="Bakso Spesial" value="Tempe Menjes"
onclick="form.camilan_value.value= 500"><strong><font color="red">Tempe menjes </font></strong></font>
<br><font size="2">Rp 500</font></td>
<td width="15%" bgcolor="yellow"><font color=""><input
type="text" size="13" name="camilan_value" value="0"> </font></td>
</form>
</tr>
<tr>
<td colspan="4"></td>
<form>
<td colspan="1" valign="top" align="center" bgcolor="purple">
<input type=button value="Total Harga" name="total" onClick='
var total=eval(parseInt(document.forms[0].Makanan_value.value) + parseInt(document.forms[1].Minuman_value.value) + parseInt(document.forms[2].camilan_value.value));
var diskon=5000;
form.total_value.value="Rp " + total;
if(total>20000)
{
totDis=eval(total- diskon);form.diskon.value="Rp "+diskon;
}
else
{
totDis=total;form.diskon.value=0;
}
form.total_diskon.value="Rp " + totDis;
'>
</td>
<td bgcolor="purple">
<label><font color="yellow"><b>TOTAL HARGA</b></font></label>
<input type="text" size=12 name="total_value">
<label><font color="yellow"><b>DISKON</b></font></label>
<input type="text" name="diskon" size=12 >
<label><font color="yellow"><b>jumlah dibayar</b></font></label>
<input type="text" size=12 name="total_diskon">
</td>
</form>
</tr>
</table>
</body>
</html>
0 komentar:
Posting Komentar