<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Pemesanan Menu Pujasera</title>
<script language="JavaScript" type="text/javascript" src="cantin.js"></script>
<link rel="stylesheet" href="cantin.css" type="text/css" />
</head>
<body>
<header>
<h1 align="center">MENU MAKANAN<br/>PUJASERA UM</h1>
</header>
<section>
<form name="form_menu" action="#">
<table border=1 cellpadding=3>
<tr>
<th><div class="baris_satu">No.<div></th>
<th width = 350px ><div class="baris_satu">Makanan / Minuman </div></th>
<th width = 120px ><div class="baris_satu">Harga</div></th>
<th width = 100px><div class="baris_satu">Jumlah</div></th>
</tr>
<tr>
<td><div class="huruf_isi">1</div></td>
<td><div class="huruf_isi">Tahu Telor</div></td>
<td><div class="huruf_isi">@ Rp <input type="text" name="harga1" value="5000" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_isi"><input type="text" name="pesan1" value="0" size="3" onChange ="proses()"/> porsi</div></td>
</tr>
<tr>
<td><div class="huruf_isi">2</div></td>
<td><div class="huruf_isi">Bakso </td>
<td><div class="huruf_isi">@ Rp <input type="text" name="harga2" value="5000" size="6" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_isi"><input type="text" name="pesan2" value="0" size="3" onChange ="proses()" /> porsi</div></td>
</tr>
<tr>
<td><div class="huruf_isi">3</div></td>
<td><div class="huruf_isi">Nasi Goreng </div></td>
<td><div class="huruf_isi">@ Rp <input type="text" name="harga3" value="5000" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_isi"><input type="text" name="pesan3" value="0" size="3" onChange ="proses()" /> porsi</div></td>
</tr>
<tr>
<td><div class="huruf_isi">4</div></td>
<td><div class="huruf_isi">Teh Racek</div></td>
<td><div class="huruf_isi">@ Rp <input type="text" name="harga4" value="2500" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_isi"><input type="text" name="pesan4" value="0" size="3" onChange ="proses()" /> gelas</div></td>
</tr>
<tr>
<td><div class="huruf_isi">5</div></td>
<td><div class="huruf_isi">Jus Jambu</div></td>
<td><div class="huruf_isi">@ Rp <input type="text" name="harga5" value="3000" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_isi"><input type="text" name="pesan5" value="0" size="3" onChange ="proses()" /> gelas</div></td>
</tr>
<tr>
<td colspan=3><div class="huruf_bawah">Jumlah</div></td>
<td><div class="huruf_bawah">Rp <input type="text" size="6" style="text-align:right" name="JumTotal" readonly /></div></td>
<tr>
<tr>
<td colspan=3><div class="huruf_bawah">Diskon</div></td>
<td><div class="huruf_bawah">Rp <input type="text" size="6" style="text-align:right" name="Diskon" readonly /></div></td>
<tr>
<tr>
<td colspan=3><div class="huruf_bawah">Jumlah Dibayar</div></td>
<td><div class="huruf_bawah">Rp <input type="text" size="6" style="text-align:right" name="JumBayar" readonly /></div></td>
<tr>
</table>
<br>
<input type="button" name="batal" value="Batal" onclick="reset()"/>
<input type="submit" value="Pesan" onclick="pesan()" />
</form>
</section>
<footer>
© vertika 2011
</footer>
</body>
</html>
Kode CSS:
body {
margin: 10px auto;
width: 580px;
}
header,section,footer{
display:block;
border:1px solid green;
}
header{
font-family: Tahoma;
font-size: 15px;
font-weight:bold;
text-align: center;
color: white;
float:center;
height:100px;
background : #00CC00;
}
section{
padding: 10px;
height:350px;
}
footer{
clear:both;
height:20px;
background : #00CC00;
font-family: Tahoma;
font-size: 15px;
font-weight:bold;
color: white;
}
.baris_satu{
font-family: Tahoma;
font-size: 15px;
font-weight:bold;
text-align: center;
color: #00CC00;
float:center;
}
.huruf_isi{
font-family: Tahoma;
font-size: 15px;
text-align: center;
color: #33CC00;
float:left;
}
.huruf_bawah{
font-family: Tahoma;
font-size: 15px;
font-weight:bold;
text-align: center;
color: #33CC00;
float:right;
}
Kode Java Script:
function JumlahTotal(){
var myForm=document.form_menu;
var total1;
var total2;
var total3;
var total4;
var total5;
total1 =parseInt(myForm.harga1.value) * parseInt(myForm.pesan1.value);
total2 =parseInt(myForm.harga2.value) * parseInt(myForm.pesan2.value);
total3 =parseInt(myForm.harga3.value) * parseInt(myForm.pesan3.value);
total4 =parseInt(myForm.harga4.value) * parseInt(myForm.pesan4.value);
total5 =parseInt(myForm.harga5.value) * parseInt(myForm.pesan5.value);
myForm.JumTotal.value=total1+total2+total3+total4+total5;
}
function potongan(){
var myForm=document.form_menu;
if (myForm.JumTotal.value < value =" 0;" value =" 2000;" myform="document.form_menu;" value =" myForm.JumTotal.value" elemen =" document.pemesanan;" value = "" value = "" value = "" value = "" value = "" value = "" value = "" value = "" myform =" document.form_menu;" value="=" value="=">
Hasil:
Tidak ada komentar:
Posting Komentar