Membuat Program pemesanan tiket dengan Javascript
Lalare IT - Hari ini saya akan memberikan contoh program javascript sederhana yaitu membuat sebuah program pemesanan tiket. Program sederhana ini sebenarnya merupakan tugas saya di perkuliahan akan tetapi saya berinisiatif untuk membagikanya kepada teman-teman.
Program yang saya buat ini menggunakan sebuah array dan select dinamis, ketika anda menambahka sebuah data dalam array, otomatis program yang di tampilkan juga akan bertambah dengan menggunakan konsep DOM pada javascript. Untuk programnya langsung saja dibawah Ini.
1. Silahkan kamu buat Index.html dalam text editor kamu. Bebas menggunakan text editor apa saja sesuai dengan favorit kamu.
2. Jika sudah silahkan copy Code Index.html di bawah ini.
3. Setelah itu silahkan buat sebuah folder baru dengan nama assets.
4. Silahkan buat file main.js dan main.css dengan text editor kamu kemudian simpan didalam folder assets.
5. Jika sudah silahkan copy main.js berikut
6. Kemudian silahkan copy main.css berikut. Fungsi dari main.css ini untuk mengatur tampilan depan program ini.
Untuk hasil dari Code diatas bisa lihat dibawah ini.
Sekian artikel saya tentang membuat program pemesanan tiket kereta dengan javascript. jika anda memiliki pertanyaan seputar artikel saya silahkan kirimkan komentar dibawah artikel ini. Terima kasih telah berkunjung dan semoga bermanfaat.
Program yang saya buat ini menggunakan sebuah array dan select dinamis, ketika anda menambahka sebuah data dalam array, otomatis program yang di tampilkan juga akan bertambah dengan menggunakan konsep DOM pada javascript. Untuk programnya langsung saja dibawah Ini.
PROGRAM PEMESANAN TIKET JAVASCRIPT
Program yang saya buat menggunakan sebuah css dan js external jadi siapkan 3 file berbeda dalam folder.1. Silahkan kamu buat Index.html dalam text editor kamu. Bebas menggunakan text editor apa saja sesuai dengan favorit kamu.
2. Jika sudah silahkan copy Code Index.html di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>INDEX</title>
<link rel="stylesheet" type="text/css" href="assets/main.css">
</head>
<body>
<form>
<h4>PEMESANAN TIKET KERETA</h4>
<table>
<tr>
<td><label>NAMA</label></td>
<td>: <input type="text" id="inp_nama" name=""></td>
</tr>
<tr>
<td><label>NO KTP</label></td>
<td>: <input type="text" id="inp_ktp" name=""></td>
</tr>
<tr>
<td><label>TUJUAN</label></td>
<td>
: <select onchange="Tujuan()" id="inp_tujuan">
<option>--PILIH TUJUAN--</option><br>
<option value="jmbr">JEMBER</option>
<option value="sby">SURABAYA</option>
</select>
</td>
</tr>
<tr>
<td><label>KERETA</label></td>
<td>
: <select onchange="harganya()" id="kereta2">
<option>--PILIH KERETA--</option>
</select>
</td>
</tr>
<tr>
<td><label>HARGA TIKET</label></td>
<td>: <input type="text" id="tampil" disabled="true" name=""></td>
<tr>
<td><label>JUMLAH</label></td>
<td>: <input onkeyup="Total()" type="number" id="inp_jumlah" name=""></td>
</tr>
<tr>
<td><label>TOTAL</label></td>
<td>: <input type="text" id="total2" disabled="true" name=""></td>
</tr>
</table>
<center><input type="button" value="PESAN" onclick="pesan()" name=""></center>
</form>
<script type="text/javascript" src="assets/main.js"></script>
</body>
</html>
3. Setelah itu silahkan buat sebuah folder baru dengan nama assets.
4. Silahkan buat file main.js dan main.css dengan text editor kamu kemudian simpan didalam folder assets.
5. Jika sudah silahkan copy main.js berikut
var harga = ['25000','100000','50000','75000'];
var kereta = ['PANDANWANGI','MUTIARA TIMUR','LOGAWA','PROBOWANGI'];
function Tujuan() {
// body...
var tujuan = document.getElementById('inp_tujuan').value;
var kereta2 = document.getElementById('kereta2');
kereta2.innerHTML="<option>--PILIH KERETA--</option>"
if (tujuan=='jmbr') {
for (var i = 0; i < 2; i++) {
result="<option value="+i+">"+kereta[i]+"</option>";
kereta2.innerHTML+=result;
}
}
else if (tujuan=='sby') {
for (var i = 2; i < 4; i++) {
result="<option value="+i+">"+kereta[i]+"</option>";
kereta2.innerHTML+=result;
}
}
}
function harganya(){
var harga2 = document.getElementById('kereta2').value;
tampil.value="Rp. "+harga[parseInt(harga2)];
}
function Total() {
// body...
var harga2 = document.getElementById('kereta2').value;
var jumlah;
jumlah=parseInt(document.getElementById('inp_jumlah').value);
total= jumlah*parseInt(harga[parseInt(harga2)]);
total2.value="Rp. "+total;
}
function pesan() {
// body...
var nama=document.getElementById('inp_nama').value;
var ktp=document.getElementById('inp_ktp').value;
alert('HAI !! ' + nama +" Pesanan Tiket Kamu Sudah Berhasil Dengan No KTP " +ktp);
alert('Silahkan Lakukan Pembayaran Dengan Total ' + total );
}
6. Kemudian silahkan copy main.css berikut. Fungsi dari main.css ini untuk mengatur tampilan depan program ini.
*{
margin: 0;
padding: 0;
font-family: "Times New Roman", "Times", sans-serif;
}
body{
background-color: black;
}
form{
margin: 120px auto;
width: 500px;
background: gray;
border-radius: 5px;
}
fieldset{
padding: 10px;
}
label{
padding: 10px;
font-weight: bold;
color: white;
margin-bottom: 10px;
}
fieldset{
font-weight: bold;
}
input[type='number'],input[type='text']{
padding: 4px;
width: 20em;
margin-bottom: 10px;
background-color: #efefef;
border:none;
border-radius: 2px;
}
select{
padding: 2px;
margin-bottom: 10px;
}
h4{
padding: 10px;
text-align: center;
color: white;
background-color: blue;
margin-bottom: 10px;
border-radius: 7px;
width: 102%;
margin-left: -10px;
}
input[type='button']{
margin-bottom: 20px;
background-color: blue;
border:none;
padding: 10px;
color: white;
border-radius: 3px;
}
Untuk hasil dari Code diatas bisa lihat dibawah ini.
Sekian artikel saya tentang membuat program pemesanan tiket kereta dengan javascript. jika anda memiliki pertanyaan seputar artikel saya silahkan kirimkan komentar dibawah artikel ini. Terima kasih telah berkunjung dan semoga bermanfaat.
Post a Comment for "Membuat Program pemesanan tiket dengan Javascript"