Membuat Program Pemesanan Tiket kereta Javascript Dengan Array

B-KREATIF - 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. 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;
}


Jika anda merasa kesulitan Anda bisa mendownload file lengkap dari program diatas dilink dibawah ini.



AKHIR KATA,

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.

0 Response to "Membuat Program Pemesanan Tiket kereta Javascript Dengan Array"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel