Kamis, 11 Maret 2010

Aplikasi form pemesanan makanan/minuman menggunakan dhtml dan javascript

Aplikasi form pemesanan makanan/minuman menggunakan DHTML DAN JAVASCRIPT
adapun ketentuan dari sistem pemesanan :

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.


Berikut tampilan layout nya:<em><!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en">



    <head>
    <title>Pondok Tulungagung</title>
    </head>
<body background ="tgs4a.jpg">
 <body>
    <script language="JavaScript" type="text/javascript">

<!--

function hitungPesan(){

var nota = document.form2;

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

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

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

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

var hargaCampur = 8000 * 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>
   

 <h2>Form Pemesanan Berbasis JavaScript</h2>
 <h4><font color ="#FF33FF"><b>PONDOK TULUNGAGUNG<b/><fotn/></h4> <br/>

<form name="form2" action="#">

<table border="1px">

<tr>

    <th>No</th>

    <th>Makanan/Minuman</th>

    <th>Harga</th>

    <th>Pesan</th>

</tr>

<tr>

    <td width="15px">1</td>

    <td width="200px">Bakso Idola</td>

    <td width="85px"&#64; <input type="text" name="bakso" value="Rp.15000" size="10" disabled="true"/></td>

    <td width="150px"><input type="text" name="qBakso" value="0" onKeyUp="hitungPesan()"/></td>

</tr>

<tr>

    <td>2</td>

    <td>Soto Spesial</td>

    <td width="85px"&#64; <input type="text" name="soto" value="Rp.15000" size="10" disabled="true"/></td>

    <td><input type="text" name="qSoto" value="0" onKeyUp="hitungPesan()"/></td>

</tr>

<tr>

    <td>3</td>

    <td>Mie Ayam Super</td>

    <td width="85px"&#64 <input type="text" name="mie" value="Rp.10000" size="10" disabled="true"/></td>

    <td><input type="text" name="qMie" value="0" onKeyUp="hitungPesan()"/></td>

</tr>

<tr>

    <td>4</td>

    <td>Es Degan</td>

    <td width="85px"&#64 <input type="text" name="degan" value="Rp.5000" size="10" disabled="true"/></td>

    <td><input type="text" name="qDegan" value="0" onChange="hitungPesan()"/></td>

</tr>

<tr>

    <td>5</td>

    <td>Es Campur</td>

    <td width="85px"&#64 <input type="text" name="campur" value="Rp.8000" size="10" disabled="true"/></td>

    <td><input type="text" name="qCampur" value="0" onKeyUp="hitungPesan()"/></td>

</tr>

<tr bgcolor="#FF33FF">

    <td colspan="3" align="right">Jumlah Total</td>

    <td><input type="text" name="Total" disabled="true" /></td>

</tr>

<tr bgcolor="#FF33FF">

    <td colspan="3" align="right">Diskon</td>

    <td><input type="text" name="Diskon" disabled="true" /></td>

</tr>

<tr bgcolor="#FF33FF">

    <td colspan="3" align="right">Jumlah Dibayar</td>

    <td><input type="text" name="Bayar" disabled="true" align="right"/></td>


</tr>

</table><br/>

<input type="button" value="BATAL" onClick="resetForm()" />

</form>

</body>

</html></em>


SELAMAT MENCOBA ^_^

0 komentar:

My Picture