Senin, 07 Maret 2011

Membuat Form Pemesanan makanan dan minuman ( Tugas Praktikum Modul 5 )

yang pertama membuat file javascriptnya
function jumlah(){
    var total = parseInt(document.warung.total.value);
    var diskonwarung = parseInt(document.warung.diskonwarung.value);
    var bayar = total - diskonwarung;
  
    document.warung.bayar.value = bayar;
}



function diskonwarung(){
    var total = parseInt(document.warung.total.value);
    var diskonwarung = 0;
  
    if(total >= 100000){
        diskonwarung = 20 / 100 * total;
    }
    else if(total >= 50000){
        diskonwarung = 10 / 100 * total;
    }
    else if(total >= 25000){
        diskonwarung = 5 / 100 * total;
    }
  
    document.warung.diskonwarung.value = diskonwarung;
}

function totalharga(){
    var harga;
    var makanan;
    var total = 0;
  
    for(i = 0; i < 10; i += 2){
        harga = parseInt(document.warung[i].value);
        makanan = parseInt(document.warung[i + 1].value);
      
        if(makanan > 0){
            total = total + (harga * makanan);
        }
      
        document.warung.total.value = total;
    }
}

function reset(){
    var elemen = document.warung;
    elemen.bakso.value.clear()
    elemen.soto.value.clear()
    elemen.mieayam.value.clear()
    elemen.esdegan.value.clear()
    elemen.escampur.value.clear()
    elemen.total.value.clear()
    elemen.diskonwarung.value.clear()
    elemen.jumlah.value.clear()
}
function operasi(){
    totalharga();
    diskonwarung();
    jumlah();
}
Simpan dengan nama warung.js

Yang kedua adalah script dari file HTMLnya ...................................................................

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>program warung</title>
        <script language="JavaScript" type="text/javascript" src="warung.js"></script>
        <link rel="stylesheet" type="text/css" href="style warung.css"/>
    </head>
    <body background="http://localhost/modul%205%20new/gfbceekpjcc.jpg">
            <font size="12" face="monotype corsiva" color="yellow">Form Pemesanan Berbasis JavaScript</font>
            <form name="warung" action="#">
            <br>
            <br>
                <table border="4" bgcolor="white">
                    <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="hrg1" value="12000" onchange="operasi()"/></td>
                        <td><input type="text" name="bakso" onchange="operasi()"/></td>
                    </tr>
                    <tr>
                        <td>2</td><td>Soto Spesial</td>
                        <td>@<input type="text" name="hrg2" value="10000" onchange="operasi()"/></td>
                        <td><input type="text" name="soto" onchange="operasi()"/></td>
                    </tr>
                    <tr>
                        <td>3</td><td>Mie Ayam Super</td>
                        <td>@<input type="text" name="hrg3" value="15000" onchange="operasi()"/></td>
                        <td><input type="text" name="mieayam" onchange="operasi()"/></td>
                    </tr>
                    <tr>
                        <td>4</td><td>Es Degan</td>
                        <td>@<input type="text" name="hrg4" value="5000" onchange="operasi()"/></td>
                        <td><input type="text" name="esdegan" onchange="operasi()"/></td>
                    </tr>
                    <tr>
                        <td>5</td><td>Es Campur</td>
                        <td>@<input type="text" name="hrg5" value="7000" onchange="operasi()"/></td>
                        <td><input type="text" name="escampur" onchange="operasi()"/></td>
                    </tr>
                    <tr>
                        <td colspan="3" align="center">Jumlah Harga</td>
                        <td><input type="text" name="total" readonly /></td>
                    </tr>
                    <tr>
                        <td colspan="3" align="center">Diskon</td>
                        <td><input type="text" name="diskonwarung" readonly /></td>
                    </tr>
                    <tr>
                        <td colspan="3" align="center">Jumlah bayar</td>
                        <td><input type="text" name="bayar" readonly /></td>
                    </tr>
                </table>
                <br>
                <input type="button" name="RESET" value="RESET" onclick="reset()"/>
            </form>
    </body>
</html>
Simpan dengan Nama programwarung.html


Hasilnya adalaah ...

Tidak ada komentar: