UTS WEB

coba.java


function cekSubmit(form)
{

if (form.elements[0].value == "" || form.elements[1].value == "" ||form.elements[2].value == "" || form.elements[3].value == "" ||form.elements[4].value == "" )

{alert("Isi semua data telebih dahulu");
} else {
alert("terima kasih " );
}
return(true);
}


sign up . html


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Sign Up Session</title>
       <script language="JavaScript"type="text/javascript" src="coba.js"></script>
    </head>
    <body>
               <h2>::Sign Up Form::</h2>
            <form name="calc" action="#">
                Nama :
                <br>
                <input type="text" size="25" name="input1">
                <br>
                Email:
                <br>
                <input type="text" size="25" name="input2">
                <br>
                Alamat:
                <br>
                <input type="text" size="25" name="input3">
                <br>
                Kota:
                <br>
                <input type="text" size="25" name="input4">
                <br>
                Kode Pos:
                <br>
                <input type="text" size="25" name="input5">
                <br><br>
                <input type="submit" value="Process" onClick = "cekSubmit(this.form)"><br>
            </form>
          </body>
</html>

Sign Up Session

Hasil
















































Tugas rumah modul 5

Style.css


body, header, section, footer{
    width : 500px;
}

header{
    padding-top : 10px;
    height : 75px;
}

.title{
    width : 450px;
    font-style : italic;
    background-color : rgba(255, 255, 255, 0.4);
    border-bottom-right-radius : 30px;
    border-top-left-radius : 30px;
}

section{
    text-align : left;
}
footer{
    color : white;
    font-size : small;
    height : 20px;
    padding-top : 5px;
    padding-bottom : 5px;
}




Pesan.Js

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

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

function jumlah(){
    var total = parseInt(document.pesan.total.value);
    var diskon = parseInt(document.pesan.diskon.value);
    var bayar = total - diskon;
  
    document.pesan.bayar.value = bayar;
}

function Hitung(){
    Harto();
    diskon();
    jumlah();
}

function kosong(){
    var elemen = document.pesan;
  
    elemen.pesan1.value = "";
    elemen.pesan2.value = "";
    elemen.pesan3.value = "";
    elemen.pesan4.value = "";
    elemen.pesan5.value = "";
    elemen.total.value = "";
    elemen.diskon.value = "";
    elemen.bayar.value = "";
}




Form Pemsanan.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tugas Praktikum Mod.5</title>
        <script language="JavaScript" type="text/javascript" src="pesan.js"></script>
        <link rel="stylesheet" type="text/css" href="STYLE.css"/>
    </head>
    <body>
    <center>
        <header>
            <div class="title"><h3>Form Pemesanan</h3></div>
        </header>
        <section>
            <form name="pesan" action="#">
                <table border="1">
                    <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="harga1" value="12000" onchange="Hitung()"/></td>
                        <td><input type="text" name="pesan1" onchange="Hitung()"/></td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Soto Spesial</td>
                        <td>@<input type="text" name="harga2" value="10000" onchange="Hitung()"/></td>
                        <td><input type="text" name="pesan2" onchange="Hitung()"/></td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Mie Ayam Super</td>
                        <td>@<input type="text" name="harga3" value="15000" onchange="Hitung()"/></td>
                        <td><input type="text" name="pesan3" onchange="Hitung()"/></td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>Es Degan</td>
                        <td>@<input type="text" name="harga4" value="5000" onchange="Hitung()"/></td>
                        <td><input type="text" name="pesan4" onchange="Hitung()"/></td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>Es Campur</td>
                        <td>@<input type="text" name="harga5" value="7000" onchange="proses()"/></td>
                        <td><input type="text" name="pesan5" onchange="proses()"/></td>
                    </tr>
                    <tr>
                        <td colspan="3" align="right">Jumlah Total</td>
                        <td><input type="text" name="total" readonly /></td>
                    </tr>
                    <tr>
                        <td colspan="3" align="right">Diskon</td>
                        <td><input type="text" name="diskon" readonly /></td>
                    </tr>
                    <tr>
                        <td colspan="3" align="right">Jumlah Dibayar</td>
                        <td><input type="text" name="bayar" readonly /></td>
                    </tr>
                </table>
                <br>
                <input type="button" name="batal" value="Batal" onclick="kosong()"/>
            </form>
        </section>
    </center>
    </body>
</html>


Hasil 



































saat tombol batal di klik


Tugas Praktikum

 Itung.Js

function itung(){
    var komponen = document.calc;
    var bil1 = parseInt(komponen.bil1.value);
    var bil2 = parseInt(komponen.bil2.value);  
    var op = komponen.op.value;
    var hasil;
  
    if(op == "add"){
        hasil = bil1 + bil2;
    }
    else if(op == "sub"){
        hasil = bil1 - bil2;
    }
    else if(op == "mpy"){
        hasil = bil1 * bil2;
    }
    else{
        hasil = bil1 / bil2;
    }
  
    komponen.hasil.value = hasil;
}

Kalkulator.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Kalkulator</title>
        <script language="JavaScript" type="text/javascript" src="itung.js"></script>
    </head>
    <body bgcolor="gray">
    <center>
    <h3>Tugas Praktikum</h3>
    <form name="calc" action="#">
   <input type="text" size="5" name="bil1">
    <select name="op">
    <option value="add">+</option>
   <option value="sub">-</option>
   <option value="mpy">x</option>
   <option value="div">/</option>
   </select>
   <input type="text" size="5" name="bil2">
   <input type="button" value="=" onclick="itung()"/>
   <input type="text" size="10" name="hasil" readonly>
   </form>
  </center>
  </body>
</html>

Hasil