RSS

Membuat Form Pemesanan Dengan JavaScript

11 Mar

Banyak program aplikasi yang dapat dibuat menggunakan Javascript. Salah satunya adalah  program aplikasi form pemesanan makanan/minuman. Program alikasi ini dapat dimanfaatkan oleh berbagai warung atau rumah makan untuk memudahkan pelayanan terhadap customer

Adapun program aplikasi pemesanan makanan/minuman yang dibuat memiliki spesifikasi antara lain:

  • Field Harga, Jumlah Total, Diskon, dan Jumlah Dibayar bersifat read-only
  • Jika  pesan  disi,  maka  field  jumlah  total  secara  otomatis  akan menghitung totalnya, termasuk juga field jumlah dibayar.
  • Rumus:

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 tombol Batal diklik, maka semua field Pesan akan dibersihkan

Tampilan program aplikasi pemesanan makanan/minuman tampak seperti gambar dibawah ini

Untuk Source Code dan JavaScriptnya, kurang lebih seperti ini:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

<html>

<head>

<title>Rumah Makan Spesial</title>

</head>

<body>

<script language=”JavaScript”>

<!–

function hitungPesan(){

var nota = document.form2;

var hargaBakso = 12000 * eval(nota.qBakso.value);

var hargaSoto = 10000 * eval(nota.qSoto.value);

var hargaMie = 15000 * eval(nota.qMie.value);

var hargaDegan = 5000 * eval(nota.qDegan.value);

var hargaCampur = 7000 * eval(nota.qCampur.value);

var jumlahTotal = hargaBakso + hargaSoto + hargaMie + hargaDegan + hargaCampur;

if (jumlahTotal > 50000){

nota.Total.value = jumlahTotal;

nota.Diskon.value = 10000;

nota.Bayar.value = jumlahTotal – eval(nota.Diskon.value);

} else {

nota.Total.value = jumlahTotal;

nota.Diskon.value = 0;

nota.Bayar.value = jumlahTotal – eval(nota.Diskon.value);

}

}

function resetForm(){

document.form2.reset();

}

//–>

</script>

<h4>FORM PEMESANAN BERBASIS JAVASCRIPT</h4>

<form action=”#”>

<table border=”1px”>

<tr bgcolor=”#298F00″>

<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” value=”12000″ size=”6″ disabled=”true”/></td>

<td><input name=”qBakso” value=”0″ onChange=”hitungPesan()”/></td>

</tr>

<tr>

<td>2</td>

<td>Soto Spesial</td>

<td>@ <input type=”text” value=”10000″ size=”6″ disabled=”true”/></td>

<td><input name=”qSoto” value=”0″ onChange=”hitungPesan()”/></td>

</tr>

<tr>

<td>3</td>

<td>Mie Ayam Super</td>

<td>@ <input name=”mie” value=”15000″ size=”6″ disabled=”true”/></td>

<td><input name=”qMie” value=”0″ onChange=”hitungPesan()”/></td>

</tr>

<tr>

<td>4</td>

<td>Es Degan</td>

<td>@ <input type=”text” value=”7000″ size=”6″ disabled=”true”/></td>

<td><input name=”qDegan” value=”0″ onChange=”hitungPesan()”/></td>

</tr>

<tr>

<td>5</td>

<td>Es Campur</td>

<td>@ <input type=”text” value=”7000″ size=”6″ disabled=”true”/></td>

<td><input name=”qCampur” value=”0″ onChange=”hitungPesan()”/></td>

</tr>

<tr bgcolor=”#298F00″>

<td colspan=”3″ align=”right”>Jumlah Total</td>

<td><input name=”Total” disabled=”true” /></td>

</tr>

<tr bgcolor=”#298F00″>

<td colspan=”3″ align=”right”>Diskon</td>

<td><input name=”Diskon” disabled=”true” /></td>

</tr>

<tr bgcolor=”#298F00″>

<td colspan=”3″ align=”right”>Jumlah Dibayar</td>

<td><input name=”Bayar” disabled=”true” align=”right”/></td>

</tr>

</table><br/>

<input type=”button” value=”BATAL” />

</form>

</body>

</html>

Advertisements
 
Leave a comment

Posted by on March 11, 2010 in PTI478

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
The Way I Am

Live everyday as if it was your last

Some Good Eats

Eat and don't worry about it

Anggriani

Bacalah! Tulislah !

Padepokan Budi Rahardjo

belajar untuk menjadi manusia ...

Catatanku

Ini adalah album yang berisi catatan yang saya tulis dalam perjalanan waktu hidup. Catatan yang terinspirasi dari apa yang saya lihat, saya baca, saya dengar, dan saya rasakan.

Catatan Bang Akrie

Simplicity.Humble.Joyfull

%d bloggers like this: