Tuesday, 8 March 2011

Tugas Praktikum 5 (DHTML & JavaScript) - Pemesanan Makanan dan Minuman

3/08/2011 12:15:00 pm  Ignored Zone  No comments

Tugas Praktikum 5 (DHTML & JavaScript) - Pemesanan Makanan dan Minuman + Input Validation
Eko Fahrudi Silviawan
100533406929
S1 PTI Off F


Dalam Tugas kali ini saya tambahkan fungsi validasi input field 'Pesan' untuk mengecek hasil input user tersebut benar atau tidak.

Download full source code + required file

Source Code

<!DOCTYPE html>
<html lang="id">
<head>
<title>Tugas Praktikum 5 (DHTML &amp; JavaScript) - Pemesanan Makanan dan Minuman</title>

<!-- Nih script buat validasi textbox di dalam input pesan -->
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />

<style type="text/css">
<!--
body{
    font-family:Arial;
    font-size:12px;
}
.stTextbox{
    border:1px solid #6B89C7;
    height: 25px;
    width: 100px;
    font-weight: bold;
}.stTextboxDisabled{
    border:1px solid #6B89C7;
    background-color:#CCCCCC;
    height: 25px;
    font-weight: bolder;
    width: 100px;
}
.stBtn{
    border:1px solid #6B89C7;
    font-weight:bolder;
    height:30px;
    background-image:url(images/bgnav.png);
    color:#FFFFFF;
}
-->
</style>
</head>

<body>
<p>
<strong>Tugas Praktikum 5 (DHTML & JavaScript) - Pemesanan Makanan dan Minuman</strong><br>
Eko Fahrudi Silviawan<br>100533406929<br>S1 PTI Off F
</p>
  <!-- Mulai koding form -->
<form id="formpesan" name="formpesan" action="#">
<table width="519" border="0" cellpadding="5" cellspacing="0" style="width:519">
<tr style="background:url(images/bgnav.png)">
    <td width="25" height="37"><strong>NO</strong></td>
    <td width="135"><strong>Makanan/Minuman</strong></td>
    <td width="102"><strong>Harga</strong></td>
    <td width="217"><strong>Pesan</strong></td>
</tr>
<tr bgcolor="#ACBDDF">
    <td>1</td>
    <td>Bakso Istimewa</td>
    <td>
    <input name="harga1" type="text" disabled="disabled" class="stTextboxDisabled" id="harga1" value="12000" readonly="true" /></td>
    <td><span id="validator1">
    <input name="pesan1" type="text" id="pesan1" value="0" class="stTextbox" onChange="hitung()" />
    <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></td>
</tr>
<tr bgcolor="#C5D0E9">
    <td>2</td>
    <td>Soto Spesial </td>
    <td>
    <input name="harga2" type="text" disabled="disabled" class="stTextboxDisabled" id="harga2" value="10000" readonly="true" /></td>
    <td><span id="validator2">
    <input name="pesan2" type="text" class="stTextbox" id="pesan2" onChange="hitung()" value="0" />
    <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></td>
</tr>
<tr bgcolor="#ACBDDF">
    <td>3</td>
    <td>Mie Ayam Super</td>
    <td>
    <input name="harga3" type="text" disabled="disabled" class="stTextboxDisabled" id="harga3" value="15000" readonly="true" /></td>
    <td><span id="validator3">
    <input name="pesan3" type="text" class="stTextbox" id="pesan3" onChange="hitung()" value="0" />
    <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></td>
</tr>
<tr bgcolor="#C5D0E9">
    <td>4</td>
    <td>Es Degan</td>
    <td>
    <input name="harga4" type="text" disabled="disabled" class="stTextboxDisabled" id="harga4" value="5000" readonly="true" /></td>
    <td><span id="validator4">
    <input name="pesan4" type="text" class="stTextbox" id="pesan4" onChange="hitung()" value="0" />
    <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></td>
</tr>
<tr bgcolor="#ACBDDF">
    <td>5</td>
    <td>Es Campur</td>
    <td>
    <input name="harga5" type="text" disabled="disabled" class="stTextboxDisabled" id="harga5" value="7000" readonly="true" /></td>
    <td><span id="validator5">
    <input name="pesan5" type="text" class="stTextbox" id="pesan5" onChange="hitung()" value="0" />
    <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></td>
</tr>
<tr bgcolor="#C5D0E9">
    <td colspan="3"><div align="right"><strong>Jumlah Total</strong></div></td>
    <td>
    <input name="JumlahTotal" type="text" disabled="disabled" class="stTextboxDisabled" id="JumlahTotal" value="0" />
    </td>
</tr>
<tr bgcolor="#ACBDDF">
    <td colspan="3"><div align="right"><strong>Diskon</strong></div></td>
    <td>
    <input name="Diskon" type="text" disabled="disabled" class="stTextboxDisabled" id="Diskon" value="0" />
    </td>
</tr>
<tr bgcolor="#C5D0E9">
    <td colspan="3"><div align="right"><strong>Jumlah Dibayar</strong></div></td>
    <td>
    <input name="JumlahDibayar" type="text" disabled="disabled" class="stTextboxDisabled" id="JumlahDibayar" value="0" />
    </td>
</tr>
<tr bgcolor="#ACBDDF">
    <td colspan="3">&nbsp;</td>
    <td><input name="Batal" type="reset" class="stBtn" id="Batal" value="    Batal    " /></td>
</tr>
</table>
</form>
<!-- Akhir kode form -->

<!--
So, let's the magic begin..
Script buat tipe validasi untuk input 'Pesan' + penghitungan harga
-->
<script type="text/javascript">
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("validator1", "integer", {validateOn:["change"]});
var sprytextfield2 = new Spry.Widget.ValidationTextField("validator2", "integer", {validateOn:["change"]});
var sprytextfield3 = new Spry.Widget.ValidationTextField("validator3", "integer", {validateOn:["change"]});
var sprytextfield4 = new Spry.Widget.ValidationTextField("validator4", "integer", {validateOn:["change"]});
var sprytextfield5 = new Spry.Widget.ValidationTextField("validator5", "integer", {validateOn:["change"]});

function hitung() {
    var myform = document.formpesan;
    var h1 = parseInt(myform.harga1.value)*parseInt(myform.pesan1.value);
    var h2 = parseInt(myform.harga2.value)*parseInt(myform.pesan2.value);
    var h3 = parseInt(myform.harga3.value)*parseInt(myform.pesan3.value);
    var h4 = parseInt(myform.harga4.value)*parseInt(myform.pesan4.value);
    var h5 = parseInt(myform.harga5.value)*parseInt(myform.pesan5.value);
    var total = h1+h2+h3+h4+h5;
    myform.JumlahTotal.value = total;
    if (total>50000) { myform.Diskon.value = 10000 } else { myform.Diskon.value = 0 }
    myform.JumlahDibayar.value = total-parseInt(myform.Diskon.value);
}
//-->
</script>

</body>
</html>

Posted in:

0 comments:

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More