Thursday 11 March 2010

Aplikasi Nota Berbasis Web Dengan Javascript

Aplikasi web seringkali harus mampu menangani action yang berhubungan dengan input dari user dan mampu memproses permintaan tersebut. Dalam pemrograman HTML untuk dapat melakukan itu diperlukan javascript sebagai actionhandler untuk kegiatan input output.
Berikut ini kita akan belajar contoh aplikasi javascript sederhana, yakni nota pemesanan. Dibawah ini adalah contoh aplikasinya :





NOTA WARUNG ANDA
NO Makanan/Minuman Harga Jumlah Pesan
1 Bakso Istimewa @
2 Soto Spesial @
3 Mie Ayam Super @
4 Es Degan @
5 Es Campur @
JUMLAH TOTAL
DISKON
JUMLAH DIBAYAR




Source code program secara lengkap adalah sebagai berikut:


<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org//TR//xhtml/DTD/xhtml-transitional.dtd">
<html xmlns= "http ://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title> Nota Digital </title>
</head>

<body>
    <script language="Javascript" type="text/javascript">
<!--

    function calculate() {
        var nota = document.form1;
        var hargabakso = 12000 * eval(nota.pesan1.value);
        var hargasoto = 10000 * eval(nota.pesan2.value);
        var hargamie = 15000 * eval(nota.pesan3.value);
        var hargadegan = 5000 * eval(nota.pesan4.value);
        var hargacampur = 7000 * eval(nota.pesan5.value);
        var hargatotal = hargabakso + hargasoto + hargamie + hargadegan + hargacampur ;
       
        if (hargatotal > 50000){
        nota.total.value = hargatotal;
        nota.diskon.value = 10000;
        nota.bayar.value = hargatotal- eval(nota.diskon.value);
        }
        else{
        nota.total.value = hargatotal;
        nota.diskon.value = 0;
        nota.bayar.value = hargatotal;
        }
    }
   
//-->
</script>
<h2 align="left">NOTA WARUNG ANDA</h2>
<form name="form1" action="#">
<table border="1px">
<tr bgcolor="blue">
    <th>NO</th>
    <th>Makanan/Minuman</th>
    <th>Harga</th>
    <th>Jumlah Pesan</th
</tr>
<tr>
    <td width="10">1</td>
    <td width="250">Bakso Istimewa</td>
    <td width="90" bgcolor="yellow">@<input type="text" name="price1" value="12000" size="7" disabled="true"/></td>
    <td width="200"><input type="text" name="pesan1" value="0" size="30" Onchange="calculate()"/></td>
</tr>
<tr>
    <td width="10">2</td>
    <td width="250">Soto Spesial</td>
    <td width="90" bgcolor="yellow">@<input type="text" name="price2" value="10000" size="7" disabled="true"/></td>
    <td width="200"><input type="text" name="pesan2" value="0" size="30" Onchange="calculate()"/></td>
</tr>
<tr>
    <td width="10">3</td>
    <td width="250">Mie Ayam Super</td>
    <td width="90" bgcolor="yellow">@<input type="text" name="price3" value="15000" size="7" disabled="true"/></td>
    <td width="200"><input type="text" name="pesan3" value="0" size="30" Onchange="calculate()"/></td>
</tr>
<tr>
    <td width="10">4</td>
    <td width="250">Es Degan</td>
    <td width="90" bgcolor="yellow">@<input type="text" name="price4" value="5000" size="7" disabled="true"/></td>
    <td width="200"><input type="text" name="pesan4" value="0" size="30" Onchange="calculate()"/></td>
</tr>
<tr>
    <td width="10">5</td>
    <td width="250">Es Campur</td>
    <td width="90" bgcolor="yellow">@<input type="text" name="price5" value="7000" size="7" disabled="true"/></td>
    <td width="200"><input type="text" name="pesan5" value="0" size="30" Onchange="calculate()"/></td>
</tr>
<tr bgcolor="red">
    <td colspan="3" align="right">JUMLAH TOTAL</td>
    <td><input type="text" name="total" value="0" size="30" disabled="true"/></td>
</tr>
<tr bgcolor="orange">
    <td colspan="3" align="right">DISKON</td>
    <td><input type="text" name="diskon" value="0"  size="30" disabled="true"/></td>
</tr>
<tr bgcolor="pink">
    <td colspan="3" align="right">JUMLAH DIBAYAR</td>
    <td><input type="text" name="bayar" value="0" size="30" disabled="true"/></td>
</tr>

</table>
<input type="submit" name="clear" value="clear" size="5" Onclick="reset()"/>
</form>
</body>
</html

Ok, sekian dulu postinga kali ini. Selamat mencoba... Bila ada yang kurang jelas, silahkan tinggalkan komentar.


.
=================================================
kurangin tidur banyakin ngopi

3 comments:

  1. kalo diinput nilai minus jadinya kita malah dibayar..

    perlu sedikit security check

    ReplyDelete
  2. ya akan segera saya perbaiki... Makasih... :-)

    ReplyDelete