Saturday, March 6, 2010

Pengaplikasian Form Penjualan/Pembelian Menggunakan JavaScript

JavaScript adalah nama implementasi Netscape Communications Corporation untuk ECMAScript standar, suatu bahasa skrip yang didasarkan pada konsep pemrograman berbasis prototipe. Bahasa ini terutama terkenal karena penggunaannya di situs web (sebagai JavaScript sisi klien) dan juga digunakan untuk menyediakan akses skrip untuk objek yang dibenamkan (embedded) di aplikasi lain. Selain itu biasa juga sering dipakai untuk memberi efek animasi pada halaman web kita.
JavaScript hanya sedikit berhubungan dengan bahasa pemrograman Java, dengan kesamaan utamanya adalah penggunaan sintaks C. Secara semantik, JavaScript memiliki lebih banyak kesamaan dengan bahasa pemrograman Self.
biasanya javascript di tulis dalam tag yang bisa di taruh dalam tag Head, atau body dari suatu halaman web page. Desain yang tampak diatas merupakan rancangan pembuatan dari contoh yang akan saya paparkan.


**Adapun source code dalam pengaplikasian Form Penjualan dan Pembelian yang Memanfaatkan JavaScript seperti yang akan saya jelaskan dibawah ini :**

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
<title>Warung Informatika_By : Dwipriyatmoko</title>
 

**Ini merupakan Code CSS dari HTML yang saya buat untuk memudahkan dalam penggunaan Style Dalam pengkodean saya...Adapun pembahasan yang lebih jelas dari postingankali ini saya yang membahas tentang CSS dapat anda pelajari di sini**

 
<style type="text/css">
<!--
.style1 {color: #0099FF}
.style3 {color: #0000FF}
.style4 {color: #FF9900}
.style5 {color: #FF0000}
.style7 {
    color: #FF0000;
    font-size: 18px;
    font-weight: bold;
}
.style9 {color: #0000FF; font-weight: bold; }
-->
</style>

**Selanjutnya, Ini merpakan pengkodean JavaScript yang telah saya buat untuk menghasilkan web seperti pada tampilan yang telah saya lampirkan, yang isinya mencakup tentang fungsi-fungsi yang saya butuhkan untuk menghasilkan HTML seperti pada gambar yang saya telah mengusahakan sebaik mungkin. Untuk cara peletakkan pengkodean dari JavaScript dapat seperti saya ini, ataupun anda letakkan setelah code <body>**

 
<script language = "JavaScript" type="text/JavaScript">
<!--
function warung()
{
    var catat = document.formwarung;
    var hargasatujam = parseInt(catat.satu.value) * parseInt(catat.satujamaa.value);
    var hargalimajam = parseInt(catat.lima.value) * parseInt(catat.limajamaa.value);
    var hargaroti= parseInt(catat.roti.value) * parseInt(catat.rotiaa.value);
    var hargajus = parseInt(catat.jus.value) * parseInt(catat.jusaa.value);
    var hargagoreng= parseInt(catat.goreng.value) * parseInt(catat.gorengaa.value);
    var hargasemua = hargasatujam + hargalimajam + hargaroti+ hargajus + hargagoreng;
    if (hargasemua > 50000)
    {
        catat.TotalBayar.value = hargasemua;
        catat.Diskon.value = 10000;
        catat.JumlahBayar.value = hargasemua - parseInt(catat.Diskon.value);
     }
     else
     {
        catat.TotalBayar.value = hargasemua;
        catat.Diskon.value = 0;
        catat.JumlahBayar.value = hargasemua;
    }   
}
function awal(){
document.formwarung.reset();
}
//-->
</script>

</head>

**Ini merupakan code HTMLnya,yang penggunaannya kali ini menggunakan form yang berupa 'textfield' yang peletakannya terdapat pada tabel, yang digunakan untuk mengambil nilai value dari input yang diisikan oleh user**


<body>
<h2 align="center" class="style1">DAFTAR MENU-HARGA WARUNG TIK</h2>
<form name="formwarung" action="#">
<table border="1" align="center" style="width:589">
<tr bgcolor="#FFCC00">   
<th style="width:27" scope="col">No</th>
<th style="width:181" scope="col">Daftar Menu</th>
<th style="width:185" scope="col">Harga</th>
<th style="width:166" scope="col">Order</th>
</tr>
<tr>
<td style="text-align:center"><strong>1.</strong></td>
<td><strong>Hotspot 1 Jam </strong></td>
<td><strong>@
<input type="text" name="satu" value="4500" size="20" disabled="disabled"/>
</strong></td>
<td><input name="satujamaa" type="text" onkeyup="warung()" value="0" size="20"/></td>
</tr>
<tr style="background-color:#CCFF99">
<td style="text-align:center"><strong>2.</strong></td>
<td><strong>Hotspot 5 Jam </strong></td>
<td><strong>@
<input type="text" name="lima" value="18000" size="20" disabled="disabled"/>
</strong></td>
<td><input name="limajamaa" type="text" onkeyup="warung()" value="0" size="20"/></td>
</tr>
<tr>
<td style="text-align:center"><strong>3.</strong></td>
<td><strong>Roti Bakar <span class="style5">&quot;Opera&quot;</span> </strong></td>
<td><strong>@
<input type="text" name="roti" value="10000" size="20" disabled="disabled"/>
</strong></td>
<td><input name="rotiaa" type="text" onkeyup="warung()" value="0" size="20"/></td>
</tr>
<tr style="background-color:#CCFF99">
<td style="text-align:center"><strong>4.</strong></td>
<td><strong>Juice <span class="style3">&quot;Internet Explorer&quot;</span> </strong></td>
<td><strong>@
<input type="text" name="jus" value="12500" size="20" disabled="disabled"/>
</strong></td>
<td><input name="jusaa" type="text" onkeyup="warung()" value="0" size="20"/></td>
</tr>
<tr>
<td style="text-align:center"><strong>5.</strong></td>
<td><strong>Gorengan <span class="style4">&quot;Mozilla&quot;</span> </strong></td>
<td><strong>@
<input type="text" name="goreng" value="1500" size="20" disabled="disabled"/>
</strong></td>
<td><input name="gorengaa" type="text" onkeyup="warung()" value="0" size="20"/></td>
</tr>
<tr style="background-color:#FF99FF">
<td colspan="3" style="text-align:center"><strong>Jumlah Total</strong></td>
<td><input name="TotalBayar" type="text" style="text-align:center" disabled="disabled" value="-" size="20"/></td>
</tr>
<tr>
<td colspan="3" style="text-align:center"><strong>Diskon )*</strong></td>
<td><input name="Diskon" type="text" style="text-align:center" disabled="disabled" value="-" size="20"/></td>
</tr>
<tr style="background-color:#FF99FF">
<td colspan="3" style="text-align:center"><strong>Jumlah Bayar</strong></td>
<td><input name="JumlahBayar" type="text" style="text-align:center" disabled="disabled" value="-" size="20"/></td>
</tr>
</table>
<p align="center"><span class="style7">)* </span><span class="style9">: Menunjukkan Jumlah potongan dikarenakan Pemesanan telah melebihi Rp. 50.000,00. Potongan tidak berlaku kelipatan</span> <br/>
</p>
<div id="Layer1" style="position:absolute; width:166px; height:40px; z-index:1; left: 644px; top: 368px;">
<input type="button" value="B a t a l" onclick="awal()"/>
</div>
</form>
</body>
</html>

** Setelah dilakukan pengisian pada input pada form warung yang telah disediakan, fungsi dapat berjalan dengan baik sehingga tampak pada gambar dibawah ini **




**Demikian akhir pembahasan materi untuk postingan kali ini, untuk kali ini saya tidak menyediakan file downloadnya...Apabila dalam pencobaan code ini anda menemukan kesalahan, kekeliruan, kesulitan, atau apapun anda bisa menghubungi saya...terimakasih, Semoga bermanfaat. Jangan Lupa Komentarnya ya...**

4 comments:

khassifa on March 7, 2010 at 5:13 PM said...

wha..ha.ha.....

dwipriyatmoko on March 8, 2010 at 2:09 PM said...

akhirnya selesai juga...

noe on June 2, 2010 at 4:26 PM said...

lagi coba mau buatkan blog istri. dari kemarin cari, tapi tutorila ini yg paling enak, saya coba dulu,mudah2an berhasil terima kasih ya

Kames Wara on March 16, 2014 at 5:58 PM said...

Fungsi apa kak?

Post a Comment

 

Hyato_Mahasiswa Malang