a. Untuk file css
body
{
margin :10px auto;
width : 750px;
}
header,nav,article,aside,section,footer
{
display:block;
border:1px solid green
}
header
{
text-align: center;
height:60px;
border:1px solid green;
background : orange;
}
nav
{
float:left;
width:747px;
height:30px;
border:1px solid grey;
}
article
{
clear:both;
margin-top:10px;
margin-left:30px;
float:left;
width:450px;
height:370px;
border:1px solid grey;
}
aside
{
margin-top:10px;
margin-left:530px;
margin-right:50x;
width:200px;
height:370px;
border:1px solid black;
text-align: left;
}
section
{
clear:both;
margin=left:400px;
width:748px;
height:400px;
border:1px solid grey;
}
footer
{
clear:both;
height:90px;
border:1px solid grey;
background : orange;
}
b. Untuk file.js
function pengeluaran()
{
var jumlah = parseInt(document.pemesanan.jumlah.value);
var pot = parseInt(document.pemesanan.pot.value);
var uang = parseInt(document.pemesanan.jumlah.value)-parseInt(document.pemesanan.pot.value);
document.pemesanan.uang.value = uang;
}
function label()
{
var harga;
var menu;
var jumlah = 0;
for(x = 0; x < 10; x += 2){ harga = parseInt(document.pemesanan[x].value); menu = parseInt(document.pemesanan[x + 1].value); if(pesanan > 0){
jumlah = jumlah + (parseInt(document.pemesanan[x].value)*parseInt(document.pemesanan[x + 1].value));
}
document.pemesanan.jumlah.value = jumlah;
}
}
function potongan()
{
var jumlah = parseInt(document.pemesanan.jumlah.value);
var pot = 0;
if(jumlah >= 100000){
pot = 20 / 100 * jumlah;
}
else if(jumlah >= 50000){
pot = 10 / 100 * jumlah;
}
else if(jumlah >= 25000){
pot = 5 / 100 * jumlah;
}
document.pemesanan.pot.value = pot;
}
function data()
{
potongan();
label();
perngeluaran();
}
function reset(){
var komponen = document.pemesanan;
komponen.pesan1.value = "";
komponen.pesan2.value = "";
komponen.pesan3.value = "";
komponen.pesan4.value = "";
komponen.pesan5.value = "";
komponen.jumlah.value = "";
komponen.pot.value = "";
komponen.uangvalue = "";
}
c. Untuk file.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>TUGAS PRAKTIKUM MODUL 5</title>
</head>
<body>
<header>
<font face="Calibri" size="5" color="black" align="center">WARUNG MAKAN SEJAHTERA</font></font>
<script language="JavaScript" type="text/javascript" src="rumahmakan.js"></script>
<link rel="stylesheet" href="cobastyle.css" type="text/css"/>
</header>
<body>
<link type="image/x-icon" rel="icon" href="2.jpg">
<center>
<nav>
<font face="Calibri" size="5" color="black" align="center">SELAMAT DATANG DI KANTIN KAMI</font></font>
</nav>
<section>
<article>
<form name="pemesanan" action="#">
<table border="1">
<tr>
<th>No</th>
<th>Makanan / Minuman</th>
<th>Harga</th>
<th>Pesan</th>
</tr>
<tr>
<td>1</td>
<td>Bakso Istimewa</td>
<td>@<input type="text" name="harga1" value="12000" onchange="data()"/></td>
<td><input type="text" name="pesan1" onchange="data()"/></td>
</tr>
<tr>
<td>2</td>
<td>Soto Spesial</td>
<td>@<input type="text" name="harga2" value="10000" onchange="data()"/></td>
<td><input type="text" name="pesan2" onchange="data()"/></td>
</tr>
<tr>
<td>3</td>
<td>Mie Ayam Super</td>
<td>@<input type="text" name="harga3" value="15000" onchange="data()"/></td>
<td><input type="text" name="pesan3" onchange="data()"/></td>
</tr>
<tr>
<td>4</td>
<td>Es Degan</td>
<td>@<input type="text" name="harga4" value="5000" onchange="data()"/></td>
<td><input type="text" name="pesan4" onchange="data()"/></td>
</tr>
<tr>
<td>5</td>
<td>Es Campur</td>
<td>@<input type="text" name="harga5" value="7000" onchange="data()"/></td>
<td><input type="text" name="pesan5" onchange="data()"/></td>
</tr>
<tr>
<td colspan="3" align="right">Jumlah Total</td>
<td><input type="text" name="label" readonly /></td>
</tr>
<tr>
<td colspan="3" align="right">Diskon</td>
<td><input type="text" name="potongan" readonly /></td>
</tr>
<tr>
<td colspan="3" align="right">Jumlah Dibayar</td>
<td><input type="text" name="pengeluaran" readonly /></td>
</tr>
</table>
<br>
</form>
</article>
<aside>
<font face="Calibri" size="3" color="black">NOTA PEMBAYARAN</font></font>
<br><font face="Calibri" size="2" color="black" >1. Makanan :</font></font></br>
<br><font face="Calibri" size="2" color="black">2. Harga :</font></font></br>
<br><font face="Calibri" size="2" color="black">3. Pesan :</font></font></br>
</aside>
</section>
<footer>
<input type="button" name="batal" value="Batal" onclick="reset()"/>
</footer>
</center>
</body>
</html>
d. Hasil printscreen sintaks diatas :
Tidak ada komentar:
Posting Komentar