Setelah kita bisa membuat kalkulator sederhana dengan JavaScript, berarti kita sudah bisa mengoperasikan suatu bilangan dengan menggunakan bahasa JavaScript. Untuk lebih memahami operasi bilangan, kita coba untuk mengaplikasikannya pada sebuah form pemesanan makanan.
Seperti kalkulator sederhana, pada form pemesanan ini juga mengkombinasikan tiga bahasa yaitu HTML5, CSS dan JavaScript. Contoh tampilan form pemesanan dapat dilihat dibawah ini :
Form pemesanan sebelum diisi
Form Setelah diisi
Form setelah di"batal"kan
Keterangan:
- field harga, jumlah total, diskon, dan jumlah bayar bersifat readonly.
- jika jumlah pesan diisi, maka field jumlah total secara otomatis akan menghitung totalnya, termasuk juga field jumlah bayar. Rumusnya :
Jumlah total = sum(harga*jumlah pesan)
Jumlah bayar = jumlah total - diskon
- Jika pembelian lebih dari 50.000, maka field diskon secara otomatis akan berisi 10.000 (tidak berlaku kelipatannya) dan otomatis field jumlah bayar akan berkurang 10.000.
- Jika tombol "batal" di klik, maka semua field jumlah pesan, jumlah total, diskon dan jumlah bayar dibersihkan.
Kode JavaScript untuk form pemesanan dapat dilihat di bawah ini :
function HargaTotal() {
var myForm = document.pemesanan;
var total1;
var total2;
var total3;
var total4;
var total5;
var jumlah1 = parseInt(myForm.jumlah1.value);
var jumlah2 = parseInt(myForm.jumlah2.value);
var jumlah3 = parseInt(myForm.jumlah3.value);
var jumlah4 = parseInt(myForm.jumlah4.value);
var jumlah5 = parseInt(myForm.jumlah5.value);
if(myForm.jumlah1.value == "") jumlah1=0;
if(myForm.jumlah2.value == "") jumlah2=0;
if(myForm.jumlah3.value == "") jumlah3=0;
if(myForm.jumlah4.value == "") jumlah4=0;
if(myForm.jumlah5.value == "") jumlah5=0;
total1 = parseInt(myForm.harga1.value)*jumlah1;
total2 = parseInt(myForm.harga2.value)*jumlah2;
total3 = parseInt(myForm.harga3.value)*jumlah3;
total4 = parseInt(myForm.harga4.value)*jumlah4;
total5 = parseInt(myForm.harga5.value)*jumlah5;
myForm.total.value = total1 + total2 + total3 + total4 + total5;
}
function diskon() {
var myForm = document.pemesanan;
if(myForm.total.value < 50000) {
myForm.potongan.value = 0;
}
else {
myForm.potongan.value = 10000;
}
}
function TotalBayar() {
var myForm = document.pemesanan;
myForm.bayar.value = parseInt(myForm.total.value) - parseInt(myForm.potongan.value);
}
function proses() {
HargaTotal();
diskon();
TotalBayar();
}
function batal() {
var element = document.pemesanan;
element.jumlah1.value = "";
element.jumlah2.value = "";
element.jumlah3.value = "";
element.jumlah4.value = "";
element.jumlah5.value = "";
element.total.value = "";
element.potongan.value = "";
element.bayar.value = "";
}
body {
margin: 50px auto;
width: 700px;
height: 500px;
background-image: url(bg.jpg);
}
header,section,footer,logo {
display: block;
}
header {
height: 100px;
background-color: #6d6c6c;
text-align: center;
}
logo{
float: left;
height: 80px;
width: 80px;
margin: 10px 10px 10px 50px;
border: 1px solid black;
}
judul {
font-family: crackman;
font-size: 20px;
color: white;
font-weight: bold;
float: left;
margin: 50px 10px 10px 10px;
}
section {
height: 350px;
background-color: #d6d3d3;
padding: 10px;
}
footer {
clear: both;
height: 20px;
background-color: #6d6c6c;
text-align: center;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Pemesanan Makanan</title>
<link rel="stylesheet" href="pemesanan.css" type="text/css" />
<link rel="shortcut icon" href="DossierNoir.png" />
<script type="text/javascript" src="pemesanan.js"></script>
</head>
<body>
<header>
<logo><img src="Gourmet-Food.png" height=80px width=80px></logo>
<judul>Form Pemesanan Berbasis JavaScript</judul>
</header>
<section>
<form name="pemesanan" action="#">
<table cellpadding=3 border=1>
<tr>
<th width=30>No.</th>
<th width=280>Makanan/Minuman</th>
<th width=120>Harga</th>
<th width=200>Jumlah Pesan</th>
</tr>
<tr>
<td> 1.</td>
<td>Bakso Istimewa</td>
<td>@ Rp. <input type="text" name="harga1" value="12000" size=5 readonly></td>
<td><center><input type="text" name="jumlah1" onchange="proses()" size=12 style="text-align:center"></center></td>
</tr>
<tr>
<td> 2.</td>
<td>Soto Spesial</td>
<td>@ Rp. <input type="text" name="harga2" value="10000" size=5 readonly></td>
<td><center><input type="text" name="jumlah2" onchange="proses()" size=12 style="text-align:center"></center></td>
</tr>
<tr>
<td> 3.</td>
<td>Mie Ayam Super</td>
<td>@ Rp. <input type="text" name="harga3" value="15000" size=5 readonly></td>
<td><center><input type="text" name="jumlah3" onchange="proses()" size=12 style="text-align:center"></center></td>
</tr>
<tr>
<td> 4.</td>
<td>Es Degan</td>
<td>@ Rp. <input type="text" name="harga4" value="5000" size=5 readonly></td>
<td><center><input type="text" name="jumlah4" onchange="proses()" size=12 style="text-align:center"></center></td>
</tr>
<tr>
<td> 5.</td>
<td>Es Campur</td>
<td>@ Rp. <input type="text" name="harga5" value="7000" size=5 readonly></td>
<td><center><input type="text" name="jumlah5" onchange="proses()" size=12 style="text-align:center"></center></td>
</tr>
<tr>
<td colspan=3 align="right">JUMLAH TOTAL</td>
<td><center>Rp. <input type="text" name="total" size=8 style="text-align:center" readonly></center></td>
</td>
<tr>
<td colspan=3 align="right">DISKON</td>
<td><center>Rp. <input type="text" name="potongan" size=8 style="text-align:center" readonly></center></td>
</td>
<tr>
<td colspan=3 align="right">JUMLAH BAYAR</td>
<td><center>Rp. <input type="text" name="bayar" size=8 style="text-align:center" readonly></center></td>
</td>
</table>
<br />
<center><input type="button" value="BATAL" onclick="batal()" /></center>
</form>
</section>
<footer>© Alivi Nur Rosida</footer>
</body>
</html>
Selamat mencobaaaaa...
semoga bermanfaat !!!
Baca Selengkapnya...
5 komentar:
keren bro blognya, thx ya atas infonya, tp sy masih bingung meletakkan scriptnya, lg bljr, maklum masih newbie, perlu banyak bljr dari master seperti blognya Liphoe ini,salam kenal
makasiiih...
senang bisa bagi2 ilmu sama yang lain..semoga bermanfaat..
terus belajaar!!
master?? aq masi newbie juga kq..hhe..
salam kenal jugaa :)
makasih mba..
saya jadi mau tanya. saya buat perhitungan kalo di javascript '+' kan juga untuk mennyambung string. nah saya coba jumlahkan nilai yang di form. itu ga jadi jumlahnya tapi variable tersebut terceak menyambung.
sepertine variable kebaca string, nah biar kebaca integer gimana ya ?
makasih..
string biar bisa kebaca integer itu caranya dikonversi menggunakan perintah "ParseInt()".
seperti yg terlihat pada kode,,semua variabel yang akan di operasikan (ditambah,,dikurang,,dikali,,dibagi) semuanya di konversi dulu ke integer.
apakah begitu maksud Anda?
atau mungkin maksudnya lain dri itu?
wow Thanks your Information and visit my blog
tutorial bloggertrik
Stafa music mp3
Posting Komentar