Selasa, 01 Maret 2011

Praktikum Pemrograman Berbasis Web - Modul 5

STUDI KASUS
1. Seperti di modul

javascript
function rumus(){
    var proses = document.form;
    var a = parseInt(proses.a.value);
    var b = parseInt(proses.b.value);
    pilih = (proses.option.value);

    if(pilih == "tambah"){
        c = a + b;
        proses.hasil.value = c;
        }
    else if(pilih == "kurang"){
        c = a - b;
        proses.hasil.value = c;
        }
    else if(pilih == "kali"){
        c = a * b;
        proses.hasil.value = c;
        }
    else if(pilih == "bagi"){
        c = a / b;
        proses.hasil.value = c;
        }
    else if(pilih == "pangkat"){
        c = Math.pow(a, b);
        proses.hasil.value = c;
        }
}

function kosong(){
        form.a.focus()
        form.a.value=""
        form.b.value=""
        form.hasil.value=""
}


html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Studi Kasus Modul 5</title>
    <script type="text/javascript" src="sk.js"></script>
</head>

<body>
<form name="form">
    <input type="text" name="a"/>
    <select name="option">
        <option value="tambah">+</option>
        <option value="kurang">-</option>
        <option value="kali">*</option>
        <option value="bagi">/</option>
        <option value="pangkat">^</option>
    </select>
    <input type="text" name="b"/>
    <input type="button" value="=" onClick="rumus()"/>
    <input type="text" name="hasil"/>
    <input type="button" value="Clear" onClick="kosong()">
</form>
</body>
</html>


Screenshot
2. Seperti gambar
html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Kalkulator Sederhana</title>
</head>

<body>
<script language="JavaScript" type="text/javascript">
    function kurang(){
        a=eval(form.a.value)
        b=eval(form.b.value)
        c=a-b
        form.hasil.value=c
    }
       
    function tambah(){
        a=eval(form.a.value)
        b=eval(form.b.value)
        c=a+b
        form.hasil.value = c
    }

    function kali(){
        a=eval(form.a.value)
        b=eval(form.b.value)
        c=a*b
        form.hasil.value=c
    }

    function bagi(){
        a=eval(form.a.value)
        b=eval(form.b.value)
        c=a/b
        form.hasil.value = c
    }

    function pangkat(){
        a=eval(form.a.value)
        b=eval(form.b.value)
        c=Math.pow(a, b)
        form.hasil.value = c
    }

    function kosong(){
        form.a.focus()
        form.a.value=""
        form.b.value=""
        form.hasil.value=""
    }
</script>

<body onload=kosong()>
<form name="form">
    <hr width="350" size="8" color="yellow" align="left">
    <h3>Kalkulator Sederhana Dengan Java Script</h3></hr>
    <hr width="350" size="8" color="yellow" align="left"/>
    Masukkan nilai pertama :<br>
    <input type="text" name="a"><br>
    Masukkan nilai kedua :<br>
    <input type="text" name="b"><br>
    Pilih operasi :<br>
    <input type="button" value="  +  " onClick="tambah()">
    <input type="button" value="  -  " onClick="kurang()">
    <input type="button" value="  x  " onClick="kali()">
    <input type="button" value="  /  " onClick="bagi()">
    <input type="button" value="  ^  " onClick="pangkat()"><br>
    Hasil :<br>
    <input type "text" name="hasil" disabled="true"><br>
    <input type="button" value="Clear" onClick="kosong()">
    <hr width="350" size="8" color="yellow" align="left"/>
    bang_hendri Production &copy 2011
</form>
</body>
</html>


Screenshot


TUGAS PRAKTIKUM
javascript
function hitung(){
    var proses = document.form1;
    var sate = 12000 * parseInt(proses.menu1.value);
    var soto = 10000 * parseInt(proses.menu2.value);
    var rujak = 15000 * parseInt(proses.menu3.value);
    var degan = 5000 * parseInt(proses.menu4.value);
    var campur = 7000 * parseInt(proses.menu5.value);
    var hasil = sate + soto + rujak + degan + campur;
   
    if (hasil > 50000){
        proses.total.value = hasil;
        proses.diskon.value = 10000;
        proses.bayar.value = hasil - 10000;
    }
    else{
        proses.total.value = hasil;
        proses.diskon.value = 0;
        proses.bayar.value = hasil - 0;
    }
    proses.bayar1.value=sate;
    proses.bayar2.value=soto;
    proses.bayar3.value=rujak;
    proses.bayar4.value=degan;
    proses.bayar5.value=campur;
}

html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tugas Praktikum Modul 5</title>
    <script type="text/javascript" src="tp.js"></script>
</head>

<body>
<h1 align="center">WARUNG PA' SAKERA</h1>
<form name="form1" action="#">
<table border="2" align="center">
<tr bgcolor="#999999">
    <th>No</th>
    <th>Makanan/Minuman</th>
    <th>Harga</th>
    <th>Pesan</th>
    <th>Total</th>
</tr>
<tr>
    <td width="20"><div align="center">1</div></td>
    <td width="153">Sate Madura</td>
    <td width="136">@<input type="text" name="sate" value="12000" size="15" disabled="true"/></td>
    <td width="150"><input type="text" name="menu1" value="0" onChange="hitung()"/></td>
    <td width="148" align="right"><input type="text" name="bayar1" disabled="true"/></td>
</tr>
<tr>
    <td><div align="center">2</div></td>
    <td>Soto Madura</td>
    <td>@<input type="text" name="soto" value="10000" size="15" disabled="true"/></td>
    <td><input type="text" name="menu2" value="0" onChange="hitung()"/></td>
    <td><input type="text" name="bayar2" disabled="true"/></td>
</tr>
<tr>
    <td><div align="center">3</div></td>
    <td>Rujak Madura</td>
    <td>@<input type="text" name="rujak" value="15000" size="15" disabled="true"/></td>
    <td><input type="text" name="menu3" value="0" onChange="hitung()"/></td>
    <td><input type="text" name="bayar3" disabled="true"/></td>
</tr>
<tr>
    <td><div align="center">4</div></td>
    <td>Es Degan Ijo</td>
    <td>@<input type="text" name="degan" value="5000" size="15" disabled="true"/></td>
    <td><input type="text" name="menu4" value="0" onChange="hitung()"/></td>
    <td><input type="text" name="bayar4" disabled="true"/></td>
</tr>
<tr>
    <td><div align="center">5</div></td>
    <td>Es Campur</td>
    <td>@<input type="text" name="campur" value="7000" size="15" disabled="true"/></td>
    <td><input type="text" name="menu5" value="0" onChange="hitung()"/></td>
    <td><input type="text" name="bayar5" disabled="true"/></td>
</tr>
<tr bgcolor="#FF0000">
    <td colspan="4" align="right"><strong>Jumlah Total</strong></td>
    <td><input type="text" name="total" disabled="true" /></td>
</tr>
<tr bgcolor="#FFFF00">
    <td colspan="4" align="right"><strong>Diskon</strong></td>
    <td><input type="text" name="diskon" disabled="true" /></td>
</tr>
<tr bgcolor="#00FF00">
    <td colspan="4" align="right"><strong>Jumlah Dibayar</strong></td>
    <td><input type="text" name="bayar" disabled="true" align="right"/></td>
</tr>
</table>
<input type="reset" value="Batal"/>
</form>
</body>
</html>


Screenshot
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)