6 Mar 2011

Tugas Praktikum Modul 5 - Aplikasi Form Pemesanan Makanan

Diposting oleh Rista Rusdianawati di 7:05 AM
Label:
Kalau yang ini adalah aplikasi Pemesanan Makanan/Minuman Berbasis Java Script.
Spesifikasinya adalah :
  • Field Harga,Jumlah Total, Diskon, dan Jumlah Dibayar bersifat read-only
  • Jika pesan diisi, maka field jumlah total secara otomatis akan menghitung totalnya, termasuk juga field jumlah bayar.
  • Rumus : Jumlah Total=jumlah total(harga*pesan)
  • Jumlah Dibayar=Jumlah Total - Diskon
  • Jika pembelian lebih dari 50000, maka field Diskon secara otomatis akan berisi nilai diskon sebesar 10000 (tidak berlaku kelipatannya) dan otomatis pula field Jumlah Dibayar akan berkurang.
  • Jika button RESET diklik, maka semua field Pesan akan dibersihkan.



Berikut adalah kode Java Script-nya :

function hitung()
{
var pesan = document.pemesanan;
var jmlBakso = 12000 * parseInt(pesan.hrgBakso.value);
var jmlSoto = 10000 * parseInt(pesan.hrgSoto.value);
var jmlMie = 15000 * parseInt(pesan.hrgMie.value);
var jmlDegan = 5000 * parseInt(pesan.hrgDegan.value);
var jmlCampur = 7000 * parseInt(pesan.hrgCampur.value);
var jmlTotal = jmlBakso + jmlSoto + jmlMie + jmlDegan + jmlCampur;

if (jmlTotal > 50000)
{
pesan.Diskon.value = 10000;
pesan.Total.value = jmlTotal;
pesan.Bayar.value = jmlTotal - 10000;
}
else{
pesan.Diskon.value = 0;
pesan.Total.value = jmlTotal;
pesan.Bayar.value = jmlTotal;
}
}

function resetForm(){
document.pemesanan.reset();
}

Ini adalah kode html-nya :


<!DOCTYPE html>
<html lang="en">


<head>
<title>Form pemesanan</title>
</head>


<body bgcolor="orange">
<h2>::Form Pemesanan Makanan Berbasis Java Script::</h2>
<script language="JavaScript" type="text/javascript" src="pesanri.js"></script>
<form name="pemesanan" action="#">


<table border = "1px">
<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="bakso" value="12000" size="8" readonly></td>
<td><input type="text" name="hrgBakso" value="0" onchange="hitung()">
</td>
</tr>


<tr>
<td>2</td>
<td>Soto Spesial</td>
<td>@<input type="text" name="soto" value="10000" size="8" readonly></td>
<td><input type="text" name="hrgSoto" value="0" onchange="hitung()">
</td>
</tr>


<tr>
<td>3</td>
<td>Mie Ayam Super</td>
<td>@<input type="text" name="mie" value="15000" size="8" readonly></td>
<td><input type="text" name="hrgMie" value="0" onchange="hitung()">
</td>
</tr>


<tr>
<td>4</td>
<td>Es Degan</td>
<td>@<input type="text" name="degan" value="5000" size="8" readonly></td>
<td><input type="text" name="hrgDegan" value="0" onchange="hitung()">
</td>
</tr>


<tr>
<td>5</td>
<td>Es Campur</td>
<td>@<input type="text" name="campur" value="7000" size="8" readonly></td>
<td><input type="text" name="hrgCampur" value="0" onchange="hitung()">
</td>
</tr>


<tr>
<td colspan="3" align="right">Jumlah Total</td>
<td><input type="text" name="Total" readonly="true">
</td>
</tr>


<tr>
<td colspan="3" align="right">Diskon</td>
<td><input type="text" name="Diskon" readonly="true">
</td>
</tr>


<tr>
<td colspan="3" align="right">Jumlah Dibayar</td>
<td><input type="text" name="Bayar" readonly="true">
</td>
</tr>
</table>


<br>
<input type="button" value="RESET" onclick="resetForm()">
</form>




</script>
<br>
<br><font align="center" face="Tahoma" size="2" >---- &copy rista rusdianawati - 2011 ----</font>
</body>
</html>

Dan inilah hasil tampilannya :

Jika button RESET diklik, maka tampilannya sebagai berikut :

SELAMAT MENCOBA, SEMOGA BERMANFAAT.... :)

0 komentar:

Posting Komentar

silakan komen......

Langganan: Posting Komentar (Atom)