Membuat tabel pemesanan menggunakan JavaScript
JavaScript adalah nama implementasi Netscape Communications Corporation untuk ECMAScript standar, suatu bahasa skrip yang didasarkan pada konsep pemrograman berbasis prototipe. Script sangat diperlukan dalam pembuatan HTML agar terlihat lebih dinamis, script juga dapat disisipkan dalam sebuah kode HTML.
pengen tau cara pembuatannya??
liat ne program HTMLnya....
<em><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>AVIE's cafe</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.style1 {color: #0099FF}
.style3 {color: #0000FF}
.style4 {color: #FF9900}
.style5 {color: #FF0000}
.style7 {
color: #FF0000;
font-size: 9px;
font-weight: bold;
}
.style9 {
color: #A4C931;
font-weight: bold;
font-style: italic;
font-size: 9px;
}
.style10 {
color: #CCCCCC;
font-weight: bold;
}
.style11 {color: #0C0082}
-->
</style>
<!fungsi matematis tabel>
<script language = "JavaScript" type="text/JavaScript">
<!--
function cafe()
{
var catat = document.formcafe;
var harganasigoreng = parseInt(catat.nasi.value) * parseInt(catat.gorengaa.value);
var hargaayambakar = parseInt(catat.ayam.value) * parseInt(catat.bakaraa.value);
var hargajuice= parseInt(catat.ju.value) * parseInt(catat.ceaa.value);
var hargasoftdrink = parseInt(catat.so.value) * parseInt(catat.riaa.value);
var hargasalad= parseInt(catat.sa.value) * parseInt(catat.ladaa.value);
var total = harganasigoreng + hargaayambakar + hargajuice+ hargasoftdrink + hargasalad;
if (total > 50000)
{
catat.TotalBayar.value = total;
catat.Diskon.value = 10000;
catat.JumlahBayar.value = total - parseInt(catat.Diskon.value);
}
else
{
catat.TotalBayar.value = total;
catat.Diskon.value = 0;
catat.JumlahBayar.value = total;
}
}
function start(){
document.formcafe.reset();
}
//-->
</script>
</head>
<body>
<h2 style="text-align:center; color: #FF0000;" class="style1" >ARDyAVIE's cafe </h2>
<form name="formcafe" action="#">
<table width="480" border="2" align="center" style="border-">
<tr bgcolor="#000000">
<th><span class="style10">No</span></th>
<th><span class="style10">Daftar Menu </span></th>
<th><span class="style10">Harga</span></th>
<th><span class="style10">Order</span></th>
</tr>
<tr bgcolor="pink">
<td width="27"><div style="text-align:center"><strong>1.</strong></div></td>
<td width="181"><strong>Nasi Goreng</strong></td>
<td width="118" ><strong>@
<input type="text" name="nasi" value="5000" size="10" disabled="disabled">
</strong></td>
<td width="124" ><input name="gorengaa" type="text" onkeyup="cafe()" value="0" size="20"></td>
</tr>
<tr style="background-color:pink">
<td><div style="text-align:center"><strong>2.</strong></div></td>
<td><strong>Ayam Bakar</strong></td>
<td><strong>@
<input type="text" name="ayam" value="10000" size="10" disabled="disabled">
</strong></td>
<td><input name="bakaraa" type="text" onkeyup="cafe()" value="0" size="20"></td>
</tr>
<tr bgcolor="pink">
<td><div style="text-align:center"><strong>3.</strong></div></td>
<td><strong>Juice </strong></td>
<td><strong>@
<input type="text" name="ju" value="5000" size="10" disabled="disabled">
</strong></td>
<td><input name="ceaa" type="text" onkeyup="cafe()" value="0" size="20"></td>
</tr>
<tr style="background-color:pink">
<td><div style="text-align:center"><strong>4.</strong></div></td>
<td><strong>Softdrink</strong></td>
<td><strong>@
<input type="text" name="so" value="2500" size="10" disabled="disabled">
</strong></td>
<td><input name="riaa" type="text" onkeyup="cafe()" value="0" size="20"></td>
</tr>
<tr bgcolor="pink">
<td><div style="text-align:center"><strong>5.</strong></div></td>
<td><strong>Salad</strong></td>
<td><strong>@
<input type="text" name="sa" value="6000" size="10" disabled="disabled">
</strong></td>
<td><input name="ladaa" type="text" onkeyup="cafe()" value="0" size="20"></td>
</tr>
<tr style="background-color:RED">
<td colspan="3"><div style="text-align:center">
<div align="center"><strong>Total </strong></div>
</div></td>
<td><input name="TotalBayar" type="text" style="text-align:center" disabled="disabled" value="-" size="20"></td>
</tr>
<tr style="background-color:yellow">
<td colspan="3"><div style="text-align:center">
<div align="center"><strong>Diskon )*</strong></div>
</div></td>
<td><input name="Diskon" type="text" style="text-align:center" disabled="disabled" value="-" size="20"></td>
</tr>
<tr style="background-color:green">
<td colspan="3"><div style="text-align:center">
<div align="center"><strong>Jumlah Pembayaran </strong></div>
</div></td>
<td><input name="JumlahBayar" type="text" style="text-align:center" disabled="disabled" value="-" size="20"></td>
</tr>
</table>
<p style="text-align:center"> </p>
<p style="text-align:center"><span class="style14">)* </span><span class="style15">:<span class="style16"> <span class="style17">Menunjukkan Jumlah potongan dikarenakan Pemesanan telah melebihi Rp. 50.000,00. Potongan tidak berlaku kelipata</span>n</span></span> <br/>
</p>
<div id="Layer1" style="position:absolute; width:63px; height:23px; z-index:1; left: 600px; top: 326px;">
<input name="button" type="button" onclick="start()" value="PESANAN BARU" size="15">
</div>
</form>
</body>
</html>
</em>
selamat mencoba.......
0 komentar:
Posting Komentar