Membuat Form Penjualan Tiket Dengan Javascript
Seiring perkembangan zaman penjual tiket tidak hanya menjual tiketnya di kios dan di tempat umum, kini sedang marak maraknya jualan online cuy... jangan ketinggalan teknologi dong. Lagipula jualan tiket online punya banyak kelebihan, salah satunya gak bakalan ada calo lagi! dan kelebihan lainnya maaf saya belum bisa sebutin :D but wait... postingan macam apa ini?! Isi gak sesuai sama judul! wkwk sabar cuy, mimin baru semangat buat artikel soalnya.
Form yang akan kita buat lebih mirip dengan kalkulator, fungsinya menghitung harga tiket yang harus dibayar. Langsung saja ikuti langkah-langkah dibawah.
1. Buat struktur HTML, Copy kode berikut lalu save dengan format (.html)
<html>
<title>Penjualan Tiket Dengan Javascript - Bedeez.blogspot.com</title>
<body>
</body>
</html>
2. Copy kode HTML dibawah ini tepat dibawah kode <body>.
<h1>Form Penjualan Tiket - bedeez.blogspot.com</h1>
<form name="form">
<label>Nama</label>
<input type="text" name="input_nama" size=10>
<br/>
<label>Tujuan</label>
<select name="input_tujuan" onchange="munculhargatiket()">
<option value="Amerika">--Pilih--</option>
<option value="Amerika">Amerika</option>
<option value="Afrika">Afrika</option>
<option value="Eropa">Eropa</option>
</select>
<label>Harga</label>
<input type="text" name="output_hargatujuan" size=10>
<br/>
<label>Tipe Tiket</label>
<select name="input_tipetiket" onchange="munculhargatipetiket()">
<option value="Amerika">--Pilih--</option>
<option value="VVIP">VVIP</option>
<option value="VIP">VIP</option>
<option value="Ekonomi">Ekonomi</option>
</select>
<label>Biaya Tambahan</label>
<input type="text" name="output_tambahanbiaya" size=10>
<br/>
<label>Member?</label>
<input type="checkbox" name="memberbukan" onchange="apakahmember()"/>
<label>Diskon</label>
<input type="text" name="output_diskon" size=10/>
<br/>
<label>Jumlah Tiket</label>
<input type="text" name="input_jumlahtiket" size=10>
<br/>
<input type="button" Onclick="totalharga()" value='Hitung'>
<input type="reset" value='Clear'>
<br/>
<label>Total Harga</label>
<input type="text" name="output_totalharga" size=10>
</form>
3. Copy kode Javascript dibawah ini tepat dibawah kode <body> lagi.
<script type='text/javascript'>
function munculhargatiket(){
<!-- Deklarasi Variabel -->
var tujuan = (document.form.input_tujuan.value); <!-- Nilai Variabel (tujuan) diambil dari Form input yang bernama (input_tujuan) -->
<!-- Selesai Deklarasi Variabel -->
if (tujuan == "Amerika"){hargatiket = 1000000;} <!-- Jika (tujuan) yang dipilih "Amerika" maka Nilai (hargatiket) adalah 1000000 -->
else if(tujuan == "Afrika"){hargatiket = 500000;}
else if(tujuan == "Eropa"){hargatiket = 250000;}
document.form.output_hargatujuan.value=eval(hargatiket); <!-- Nilai Form (output_hargatujuan) akan ber nilai variabel (hargatiket) -->
}
function munculhargatipetiket(){
var tipetiket = (document.form.input_tipetiket.value);
if (tipetiket == "VVIP"){tambahanbiaya = 0.50;}
else if (tipetiket == "VIP"){tambahanbiaya = 0.10;}
else if (tipetiket == "Ekonomi"){tambahanbiaya = 0;}
document.form.output_tambahanbiaya.value=eval(tambahanbiaya)*eval(document.form.output_hargatujuan.value);
}
function apakahmember(){
if (document.form.memberbukan.checked == true){diskon = 0.10;}
else{diskon=0;}
document.form.output_diskon.value=eval(diskon)*(eval(document.form.output_tambahanbiaya.value) + eval(document.form.output_hargatujuan.value));
}
function totalharga(){
var jumlahtiket = (document.form.input_jumlahtiket.value);
document.form.output_totalharga.value=eval(jumlahtiket)*(eval(document.form.output_tambahanbiaya.value)+eval(document.form.output_hargatujuan.value))-eval(document.form.output_diskon.value)
}
</script>
4. Agar tampilan lebih menarik, Copy kode dibawah ini tepat diatas kode </head>.
<style>
form{line-height:2em}
label, select,input{margin-left: 5px;width: 120px;display: block;float: left;line-height: 15px}
</style>
<html>
<head>
<title>
Penjualan Tiket Dengan Javascript - Bedeez.blogspot.com
</title>
<style>
form{line-height:2em} label, select,input{ margin-left: 5px; width: 120px; display: block; float: left; line-height: 15px } </style>
</head>
<body>
<script type='text/javascript'>
function munculhargatiket(){ <!-- Deklarasi Variabel --> var tujuan = (document.form.input_tujuan.value); <!-- Nilai Variabel (tujuan) diambil dari Form input yang bernama (input_tujuan) --> <!-- Selesai Deklarasi Variabel --> if (tujuan == "Amerika"){hargatiket = 1000000;} <!-- Jika (tujuan) yang dipilih "Amerika" maka Nilai (hargatiket) adalah 1000000 --> else if(tujuan == "Afrika"){hargatiket = 500000;} else if(tujuan == "Eropa"){hargatiket = 250000;} document.form.output_hargatujuan.value=eval(hargatiket); <!-- Nilai Form (output_hargatujuan) akan berubah seperti nilai variabel (hargatiket) --> } function munculhargatipetiket(){ var tipetiket = (document.form.input_tipetiket.value); if (tipetiket == "VVIP"){tambahanbiaya = 0.50;} else if (tipetiket == "VIP"){tambahanbiaya = 0.10;} else if (tipetiket == "Ekonomi"){tambahanbiaya = 0;} document.form.output_tambahanbiaya.value=eval(tambahanbiaya)*eval(document.form.output_hargatujuan.value); } function apakahmember(){ if (document.form.memberbukan.checked == true){diskon = 0.10;} else{diskon=0;} document.form.output_diskon.value=eval(diskon)*(eval(document.form.output_tambahanbiaya.value) + eval(document.form.output_hargatujuan.value)); } function totalharga(){ <!-- Deklarasi Variabel --> var jumlahtiket = (document.form.input_jumlahtiket.value); <!-- Selesai Deklarasi Variabel --> document.form.output_totalharga.value=eval(jumlahtiket)*(eval(document.form.output_tambahanbiaya.value)+eval(document.form.output_hargatujuan.value))-eval(document.form.output_diskon.value) } </script>
<h1>
Form Penjualan Tiket - bedeez.blogspot.com
</h1>
<form name="form">
<label>
Nama
</label>
<input type="text" name="input_nama" size=10>
<br/>
<label>
Tujuan
</label>
<select name="input_tujuan" onchange="munculhargatiket()">
<option value="Amerika">
--Pilih--
</option>
<option value="Amerika">
Amerika
</option>
<option value="Afrika">
Afrika
</option>
<option value="Eropa">
Eropa
</option>
</select>
<label>
Harga
</label>
<input type="text" name="output_hargatujuan" size=10>
<br/>
<label>
Tipe Tiket
</label>
<select name="input_tipetiket" onchange="munculhargatipetiket()">
<option value="Amerika">
--Pilih--
</option>
<option value="VVIP">
VVIP
</option>
<option value="VIP">
VIP
</option>
<option value="Ekonomi">
Ekonomi
</option>
</select>
<label>
Biaya Tambahan
</label>
<input type="text" name="output_tambahanbiaya" size=10>
<br/>
<label>
Member?
</label>
<input type="checkbox" name="memberbukan" onchange="apakahmember()"/>
<label>
Diskon
</label>
<input type="text" name="output_diskon" size=10/>
<br/>
<label>
Jumlah Tiket
</label>
<input type="text" name="input_jumlahtiket" size=10>
<br/>
<input type="button" Onclick="totalharga()" value='Hitung'>
<input type="reset" value='Clear'>
<br/>
<label>
Total Harga
</label>
<input type="text" name="output_totalharga" size=10>
</form>
</body>
</html>
Gimana? gampang kan? iyalah gampang lah cuman copas hihihi. Ingin lebih gampang? buka Kode Form Penjualan Tiket, tinggal copy semua, save, beres. Saran dari saya, jangan cuman copas tapi juga di pelajari kode-kodenya. Selamat Belajar...
1 komentar :
Blackjack in Florida - 7 ways to win - jtmhub.com
Blackjack in Florida. Blackjack table and blackjack casino games 군산 출장샵 are becoming 진주 출장마사지 popular in Florida. Here is 성남 출장안마 a guide 강릉 출장샵 to playing 정읍 출장샵 this game.
Posting Komentar
Orang bijak pasti nigggalin jejak.