haloo GuySss,,
ketemu lagi ini sama aq, kali ini kita akan membahas pembelajaran html dengan penggunaan konsep diskon, jadi ntar kalu kalian melakukan pembelian di atas harga tertentu maka secara otomatis billing pay akan memberikan potongan harga diskon bagi pembelinya. naHh, asyikk kaNn...
tentunya semua tetep pake html doonk, hehe, moga kalian nggak bosen dalam belajar menggunakan script html, kan enak tu seandainya kallian bisa membuat halaman website yg bisa di akses banyak orang, ya kaNn???? ( mimpi kali ) bukan suatu hal yang nggak mungikin guyss, semua serba bisa di capai..
kali ini ini script saya di dukung oleh developt javaScript tetep, kan kita pake combine dengan javascript juga ini ntar...
langsung aja ya, ayok kita liat script nya, pertama jelas kita buat script javascriptnya dahulu, kita buat dah itu semua function nya. untuk file saya ini bernama " pemesanan.js " inini guYys sciptnya :
function totalHarga(){
var harga;
var pesanan;
var total = 0;
for(i = 0; i < 12; i += 2){
harga = parseInt(document.pemesanan[i].value);
pesanan = parseInt(document.pemesanan[i + 1].value);
if(pesanan > 0){
total = total + (harga * pesanan);
}
document.pemesanan.total.value = total;
}
}
function diskon(){
var total = parseInt(document.pemesanan.total.value);
var diskon;
if (total > 50000){
diskon = 10000;
}else{
diskon = 0;
}
document.pemesanan.diskon.value = diskon;
}
function jumlahBayar(){
var total = parseInt(document.pemesanan.total.value);
var diskon = parseInt(document.pemesanan.diskon.value);
var bayar = total - diskon;
document.pemesanan.bayar.value = bayar;
}
function proses(){
totalHarga();
diskon();
jumlahBayar();
}
function reset(){
var elemen = document.pemesanan;
elemen.pesan1.value = "";
elemen.pesan2.value = "";
elemen.pesan3.value = "";
elemen.pesan4.value = "";
elemen.pesan5.value = "";
elemen.pesan6.value = "";
elemen.total.value = "";
elemen.diskon.value = "";
elemen.bayar.value = "";
}
var harga;
var pesanan;
var total = 0;
for(i = 0; i < 12; i += 2){
harga = parseInt(document.pemesanan[i].value);
pesanan = parseInt(document.pemesanan[i + 1].value);
if(pesanan > 0){
total = total + (harga * pesanan);
}
document.pemesanan.total.value = total;
}
}
function diskon(){
var total = parseInt(document.pemesanan.total.value);
var diskon;
if (total > 50000){
diskon = 10000;
}else{
diskon = 0;
}
document.pemesanan.diskon.value = diskon;
}
function jumlahBayar(){
var total = parseInt(document.pemesanan.total.value);
var diskon = parseInt(document.pemesanan.diskon.value);
var bayar = total - diskon;
document.pemesanan.bayar.value = bayar;
}
function proses(){
totalHarga();
diskon();
jumlahBayar();
}
function reset(){
var elemen = document.pemesanan;
elemen.pesan1.value = "";
elemen.pesan2.value = "";
elemen.pesan3.value = "";
elemen.pesan4.value = "";
elemen.pesan5.value = "";
elemen.pesan6.value = "";
elemen.total.value = "";
elemen.diskon.value = "";
elemen.bayar.value = "";
}
Nahh lanjutnya kita panggil dan permak dah semua scipt javascript yg udah kita buat sebelumnya, dan kita buat model tampilannya sekalian, hehHeee
inini file html buat manggil semua script .js yg udah kita buat,
untuk kali ini file html saya bernama " form_pemesanan.html
<!DOCTYPEhtml>
<html lang="en">
<head>
<title>Form Pemesanan</title>
<script language="JavaScript" type="text/javascript" src="pemesanan.js"></script>
</head>
<body>
<hr width="505px" size="7" color="maroon" align="left">
<h2>*** <blink> Form Pemesanan Buku: Andi House </blink> ***</h2>
<hr width="505px" size="7" color="maroon" align="left">
<form name="pemesanan" action="#">
<table border="3">
<tr bgcolor="pink">
<th>No</th>
<th>Nama Buku</th>
<th>Harga</th>
<th> Jumlah Pemesanan</th>
</tr>
<tr>
<td align="center">1</td>
<td>Bola News - Sport</td>
<td>@<input type="text" name="harga1" value="12000" onchange="proses()" /></td>
<td><input type="text" name="pesan1" onchange="proses()" /></td>
</tr>
<tr>
<td align="center">2</td>
<td>InfoKom - IT.Center</td>
<td>@<input type="text" name="harga2" value="10000" onchange="proses()" /></td>
<td><input type="text" name="pesan2" onchange="proses()" /></td>
</tr>
<tr>
<td align="center">3</td>
<td>PhotoShop - TipsNgetricks</td>
<td>@<input type="text" name="harga3" value="15000" onchange="proses()" /></td>
<td><input type="text" name="pesan3" onchange="proses()" /></td>
</tr>
<tr>
<td align="center">4</td>
<td>WebDesign - WebCom</td>
<td>@<input type="text" name="harga4" value="5000" onchange="proses()" /></td>
<td><input type="text" name="pesan4" onchange="proses()" /></td>
</tr>
<tr>
<td align="center">5</td>
<td>html ceria - voice Html</td>
<td>@<input type="text" name="harga5" value="7000" onchange="proses()" /></td>
<td><input type="text" name="pesan5" onchange="proses()" /></td>
</tr>
<tr>
<td align="center">6</td>
<td>VisualBasic.2008 - VB.NET comp</td>
<td>@<input type="text" name="harga6" value="500" onchange="proses()" /></td>
<td><input type="text" name="pesan6" onchange="proses()" /></td>
</tr>
<tr>
<td colspan="3" align="right" bgcolor=#f0f0f0>Jumlah Total</td>
<td><input type="text" name="total" readonly /></td>
</tr>
<tr>
<td colspan="3" align="right" bgcolor=#f0f0f0>Diskon</td>
<td><input type="text" name="diskon" readonly /></td>
</tr>
<tr>
<td colspan="3" align="right" bgcolor=#f0f0f0>Jumlah Dibayar</td>
<td><input type="text" name="bayar" readonly /></td>
</tr>
</table>
<br>
<input type="button" name="batal" value="Batal" onclick="reset()" />
</form><br>
<font size="2px">
<b>Ketentuan Diskon :</b><br>
- Diskon Rp. 10.000,00 untuk Pemebelian diatas Rp 50.000,00<br>
<br>
<font size="3" color="blue">© 2011, CopyRight by andibayu - 2009533420400</font>
<hr color="maroon" width="300px" size="5px" align="left"></hr>
</body>
<hr width="505px" size="7" color="maroon" align="left">
</body>
</html>
<html lang="en">
<head>
<title>Form Pemesanan</title>
<script language="JavaScript" type="text/javascript" src="pemesanan.js"></script>
</head>
<body>
<hr width="505px" size="7" color="maroon" align="left">
<h2>*** <blink> Form Pemesanan Buku: Andi House </blink> ***</h2>
<hr width="505px" size="7" color="maroon" align="left">
<form name="pemesanan" action="#">
<table border="3">
<tr bgcolor="pink">
<th>No</th>
<th>Nama Buku</th>
<th>Harga</th>
<th> Jumlah Pemesanan</th>
</tr>
<tr>
<td align="center">1</td>
<td>Bola News - Sport</td>
<td>@<input type="text" name="harga1" value="12000" onchange="proses()" /></td>
<td><input type="text" name="pesan1" onchange="proses()" /></td>
</tr>
<tr>
<td align="center">2</td>
<td>InfoKom - IT.Center</td>
<td>@<input type="text" name="harga2" value="10000" onchange="proses()" /></td>
<td><input type="text" name="pesan2" onchange="proses()" /></td>
</tr>
<tr>
<td align="center">3</td>
<td>PhotoShop - TipsNgetricks</td>
<td>@<input type="text" name="harga3" value="15000" onchange="proses()" /></td>
<td><input type="text" name="pesan3" onchange="proses()" /></td>
</tr>
<tr>
<td align="center">4</td>
<td>WebDesign - WebCom</td>
<td>@<input type="text" name="harga4" value="5000" onchange="proses()" /></td>
<td><input type="text" name="pesan4" onchange="proses()" /></td>
</tr>
<tr>
<td align="center">5</td>
<td>html ceria - voice Html</td>
<td>@<input type="text" name="harga5" value="7000" onchange="proses()" /></td>
<td><input type="text" name="pesan5" onchange="proses()" /></td>
</tr>
<tr>
<td align="center">6</td>
<td>VisualBasic.2008 - VB.NET comp</td>
<td>@<input type="text" name="harga6" value="500" onchange="proses()" /></td>
<td><input type="text" name="pesan6" onchange="proses()" /></td>
</tr>
<tr>
<td colspan="3" align="right" bgcolor=#f0f0f0>Jumlah Total</td>
<td><input type="text" name="total" readonly /></td>
</tr>
<tr>
<td colspan="3" align="right" bgcolor=#f0f0f0>Diskon</td>
<td><input type="text" name="diskon" readonly /></td>
</tr>
<tr>
<td colspan="3" align="right" bgcolor=#f0f0f0>Jumlah Dibayar</td>
<td><input type="text" name="bayar" readonly /></td>
</tr>
</table>
<br>
<input type="button" name="batal" value="Batal" onclick="reset()" />
</form><br>
<font size="2px">
<b>Ketentuan Diskon :</b><br>
- Diskon Rp. 10.000,00 untuk Pemebelian diatas Rp 50.000,00<br>
<br>
<font size="3" color="blue">© 2011, CopyRight by andibayu - 2009533420400</font>
<hr color="maroon" width="300px" size="5px" align="left"></hr>
</body>
<hr width="505px" size="7" color="maroon" align="left">
</body>
</html>
NaHh, selesai dah coding kita sekarang, so kalian tinggal liat hasilnya aja kaNn..
kayak gini tampilan dari script yg udah aq share sama kalian guySs :
NaHh, siipp kaNnn...
selamat mencoba ya Guyss kalian, moga ilmu yg saya share bermanfaat bagi kalian semuaa,, amiiiNnn... hIhiiii
Gud LuccKkkk guyysss....
0 komentar:
Posting Komentar
Jangan Pernah Kita Usul Jika Asal, Dan Jika Mau Usul Lebih Baik Jangan Pernah Asal...