Diposting   8 menit membaca (Sekitar 1193 kata)

Membuat Form Pemesanan Tiket

Tampilan Program

Bismillahirrahmanirrahim

Bagaimana kabarnya teman-teman semua?, semoga dalam keadaan sehat selalu ya. Sudah lama saya tidak menulis di blog karena ada beberapa urusan, sekarang ini saya akan membagikan cara membuat form pemesanan tiket destinasi yang sederhana, dimana ide ini saya dapat dari seseorang yang bertanya di grup Telegram mengenai tugas yang diberikan oleh dosen nya dan saya meminta tentang tugas itu untuk membuat nya sendiri sekaligus melatih pembelajaran saya tentang Javascript. Baiklah, tak perlu panjang lebar mari kita buat program tersebut.

Pertama yang kita siapkan file html nya terlebih dahulu dan kita isikan struktur membuat form, jangan lupa juga untuk menghubungkan file html kita dengan file css dan file javascript nya. Jika kamu ingin membuat sendiri struktur form kamu, silahkan dibuat terlebih dahulu yang paling terpenting adalah memberikan id pada tiap input, karena sangat berguna saat kita sudah masuk ke file javascript nanti. Jika kamu ingin mengikuti struktur saya, kamu bisa salin kode dibawah ini:

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ticket Payment</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <form>
        <label for="nama">Nama:</label>
        <input type="text" id="nama" autofocus autocomplete="off" />
        <label for="destinasi">Destinasi:</label>
        <input type="text" id="destinasi" list="pilihanDestinasi" autocomplete="off" />
        <datalist id="pilihanDestinasi">
          <option value="Bandung">Bandung</option>
          <option value="Jakarta">Jakarta</option>
          <option value="Surabaya">Surabaya</option>
        </datalist>
        <label for="status">Status:</label>
        <input type="text" id="status" list="pilihanStatus" autocomplete="off" />
        <datalist id="pilihanStatus">
          <option value="Dewasa">Dewasa</option>
          <option value="Anak-anak">Anak-anak</option>
        </datalist>
        <label for="jumlah">Jumlah Tiket:</label>
        <input type="number" id="jumlah" />
        <label for="subtotal">Subtotal:</label>
        <input type="number" id="subtotal" disabled />
        <label for="diskon">Diskon:</label>
        <input type="number" id="diskon" disabled />
        <label for="total">Total:</label>
        <input type="number" id="total" disabled />

        <div class="tombol">
          <input type="submit" value="Pesan" id="pesan" />
          <input type="button" value="Hapus" id="hapus" />
        </div>
      </form>

      <!-- Jika berhasil pesan akan menampilkan berkas output nya -->
      <div class="output">
        <h2>TICKET PAYMENT</h2>
        <p>Nama: <span id="namaOutput"></span></p>
        <p>Destinasi: <span id="destinasiOutput"></span></p>
        <p>Status: <span id="statusOutput"></span></p>
        <p>Jumlah Tiket: <span id="jumlahOutput"></span></p>
        <p>Subtotal: <span id="subtotalOutput"></span></p>
        <p>Diskon: <span id="diskonOutput"></span></p>
        <p>Total: <span id="totalOutput"></span></p>
        <p><sup>*</sup>Harga 1 tiket: <span id="hargaTiket"></span></p>
      </div>
    </div>

    <div class="informasi">
      <span>Catatan:</span>
      <span><sup>*</sup>Destinasi hanya terdapat 3 kota: Bandung, Jakarta dan Surabaya <span class="">(Perhatikan huruf kecil dan besar nya)</span></span>
      <span><sup>*</sup>Status hanya terdapat 2: Dewasa dan Anak-anak <span>(Perhatikan huruf kecil dan besar nya)</span></span>
      <span><sup>*</sup>Jika membeli Jumlah Tiket lebih dari 5 bisa mendapat diskon 15% <span>(Tidak lebih dari 5 maka tidak dapat diskon)</span></span>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Maka jika kita buka di browser, tampilan jika kamu menyalin kode diatas hasilnya akan seperti ini:

Tampilan dengan HTML

Terlihat aneh bukan?, maka dari itu saatnya kita membuat file css dan kita mencoba mempercantiknya. Jika kamu ingin mempercantik tampilan dengan cara sendiri silahkan atau jika ingin mengikuti tampilan saya, silahkan salin kode dibawah ini:

style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
/* Men-disabled spinners pada input number */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

body {
  margin: 0;
  padding: 10px;
}

.container {
  margin: 20px auto;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  gap: 30px;
}

form {
  background-color: rgb(236, 236, 236);
  border-radius: 4px;
  padding: 15px 25px;
  width: 400px;
  border: 1px solid #333;
  box-sizing: border-box;
}

label {
  display: block;
}

input:not(#pesan, #hapus) {
  margin-bottom: 8px;
  width: 100%;
  border: 1px solid #333;
  padding: 3px 5px;
  outline: none;
}

input[disabled] {
  cursor: not-allowed;
  background-color: rgb(218, 218, 218);
}

.tombol {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.tombol :is(#pesan, #hapus) {
  cursor: pointer;
}

.output {
  display: none;
  padding: 15px 25px;
  box-sizing: border-box;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  width: 400px;
}

.output h2 {
  text-align: center;
}

.output.tampil {
  display: block;
  animation: fade 300ms;
}

.output p:last-child {
  color: rgb(32, 204, 55);
  font-weight: bold;
  margin-top: 30px;
}

@keyframes fade {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.informasi {
  margin-top: 20px;
  color: red;
  display: flex;
  flex-direction: column;
}

.informasi span:first-child {
  margin-bottom: 10px;
  font-size: inherit;
}

.informasi span {
  font-size: 0.95em;
}

.informasi span > span {
  color: rgb(13, 182, 36);
  font-weight: bold;
}

Maka tampilan sekarang akan jadi seperti ini:

Tampilan dengan CSS

Sekarang sudah mendingan untuk dilihat bukan tampilannya hahaha, sekarang lanjut ke bagian terpenting nya yaitu bagian javascript. Silahkan buat file javascript nya terlebih dahulu. Lalu kalian bisa salin kode dibawah ini, dengan catatan perhatikan id yang pada pada html kalian.

script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
// Menyeleksi beberapa inputan textfield
const nama = document.getElementById("nama");
const destinasi = document.getElementById("destinasi");
const status = document.getElementById("status");
const jumlah = document.getElementById("jumlah");
const subtotal = document.getElementById("subtotal");
const diskon = document.getElementById("diskon");
const total = document.getElementById("total");
const cetakPesanan = document.querySelector(".output");

// Menyeleksi bagian tombol dan menjalnkan apabila tombol pesan di klik
const tombolPesan = document.getElementById("pesan");
tombolPesan.addEventListener("click", function (e) {
  e.preventDefault();

  // Pengecekan jika inputan-nya kosong atau tidak diisi
  if (nama.value == "" || destinasi.value == "" || status.value == "" || jumlah.value == "") {
    alert("Inputan nilai harus diisi terlebih dahulu!");
  } else {
    // Mengecek jika inputan nama nya sudah tidak kosong
    if (nama.value != "") {
      document.getElementById("namaOutput").innerText = nama.value;
    }

    // Mengecek inputan destinasi sesuai 3 Pilihan: Bandung, Jakarta dan Surabaya
    if (destinasi.value == "Bandung") {
      document.getElementById("destinasiOutput").innerText = destinasi.value;
    } else if (destinasi.value == "Jakarta") {
      document.getElementById("destinasiOutput").innerText = destinasi.value;
    } else if (destinasi.value == "Surabaya") {
      document.getElementById("destinasiOutput").innerText = destinasi.value;
    } else {
      alert("Pilihan Destinasi hanya Bandung, Jakarta dan Surabaya");
    }

    // Mengecek inputan status sesuai 2 pilihan: Dewasa dan Anak-anak
    if (status.value == "Dewasa") {
      document.getElementById("statusOutput").innerText = status.value;
    } else if (status.value == "Anak-anak") {
      document.getElementById("statusOutput").innerText = status.value;
    } else {
      alert("Pilihan status hanya untuk Dewasa dan Anak-anak saja!");
    }

    let harga = 0;
    let hargaPerTiket = document.getElementById("hargaTiket");

    // Mengecek antara status dan destinasi
    if (destinasi.value == "Bandung" && status.value == "Dewasa") {
      harga = 200000;
      hargaPerTiket.innerText = harga + " (Dua Ratus Ribu)";
    } else if (destinasi.value == "Bandung" && status.value == "Anak-anak") {
      harga = 100000;
      hargaPerTiket.innerText = harga + " (Seratus Ribu)";
    } else if (destinasi.value == "Jakarta" && status.value == "Dewasa") {
      harga = 300000;
      hargaPerTiket.innerText = harga + " (Tiga Ratus Ribu)";
    } else if (destinasi.value == "Jakarta" && status.value == "Anak-anak") {
      harga = 200000;
      hargaPerTiket.innerText = harga + " (Dua Ratus Ribu)";
    } else if (destinasi.value == "Surabaya" && status.value == "Dewasa") {
      harga = 400000;
      hargaPerTiket.innerText = harga + " (Empat Ratus Ribu)";
    } else if (destinasi.value == "Surabaya" && status.value == "Anak-anak") {
      harga = 300000;
      hargaPerTiket.innerText = harga + " (Tiga Ratus Ribu)";
    }

    // Mengecek inputan jumlah / tiket jika lebih dari 5 maka akan dikasih diskon, jika dibawah 5 tidak dapat diskon
    // Ubah dulu yang tipe data nya string menjadi number
    const convertToNumber = Number(jumlah.value);
    subtotal.value = harga * convertToNumber;
    document.getElementById("subtotalOutput").innerText = harga * convertToNumber;

    let discount = 0;
    if (convertToNumber >= 6) {
      discount = (subtotal.value / 100) * 15;
    } else if (convertToNumber <= 6) {
      discount = 0;
    }

    document.getElementById("jumlahOutput").innerText = convertToNumber;
    diskon.value = discount;
    document.getElementById("diskonOutput").innerText = discount;

    let totalPaid = subtotal.value - discount;
    total.value = totalPaid;
    document.getElementById("totalOutput").innerText = totalPaid;

    if (nama.value != "" || destinasi.value != "" || status.value != "" || jumlah.value != "") {
      // Mengecek jika user memasukkan nilai 0 pada inputan jumlah tiket
      if (jumlah.value == 0) {
        alert("Jumlah tiket tidak boleh 0");
        cetakPesanan.classList.remove("tampil");
      } else {
        cetakPesanan.classList.add("tampil");
      }
    }
  }
});

// Menyeleksi bagian tombol dan menjalankan apabila tombol hapus di klik
const hapus = document.getElementById("hapus");
hapus.addEventListener("click", function () {
  // Menghapus bagian output pada html
  if (nama.value == "" && destinasi.value == "" && status.value == "" && jumlah.value == "") {
    alert("Data masih kosong, apa yang mau dihapus?");
  } else if (nama.value != "" || destinasi.value != "" || status.value != "" || jumlah.value != "") {
    nama.value = "";
    destinasi.value = "";
    status.value = "";
    jumlah.value = "";
    subtotal.value = "";
    diskon.value = "";
    total.value = "";
    cetakPesanan.classList.remove("tampil");
  }
});

Maka tampilan sekarang lebih menarik dimana kita bisa berinteraksi dengan pengguna

Tampilan akhir program

Maka program form pemesanan tiket kita sudah berhasil dibuat dan berjalan dengan seharusnya, apabila ada kendala kamu bisa chat saya melalui Telegram Rian.

Cukup sekian pembahasan dari saya mengenai pembuatan program pemesanan tiket yang sangat sederhana ini, saya yakin pasti ada cara yang lebih ringkas dan lebih baik lagi. Apabila ada pertanyaan silahkan ditanyakan lewat kolom komentar atau chat saya di Telegram.

Jika ingin melihat demo program kamu bisa lihat di Demo-Program. Terima kasih semua, semoga dapat bermanfaat :D

Membuat Form Pemesanan Tiket

https://mfebriann.github.io/tutorial/membuat-form-pemesanan-tiket/

Author

Muhammad Febrian

Posted on

2021-06-01

Updated on

2022-07-25

Licensed under

#

Suka dengan artikel ini? Bantu penulis dengan donasi melalui

Komentar

IKUTI

Tautan

Arsip

Berlangganan untuk pembaruan

Berlangganan untuk mendapatkan pembaruan terbaru!

Kategori

Terbaru

Tag

Git1
Web1
captcha1
css7
curhatan1
emmet1
feature1
form2
gambar1
ganjil-genap1
hexo1
hosting1
html7
ikon1
ilustrasi1
info1
inward1
javascript1
js5
layout1
lingkaran1
netlify1
outward1
perkenalan1
plugin1
program5
tiket2
tips1
vercel1
vscode1
web2
website3

Iklan

Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×

×