Halo semuanya, sudah lama sekali saya tidak aktif lagi menulis di blog ini dikarenakan ada beberapa urusan yang harus dikerjakan terlebih dahulu. Oke kita langsung ke pembahasan intinya, jadi disini saya akan membagikan tutorial revisi dari form pemesanan tiket yang sebelumnya pernah kita bahas.
Jika kamu belum melihat form pemesanan tiket yang awal, kamu bisa lihat nya Membuat Form Pemesanan Tiket. Bagi yang belum lihat bisa di cek dulu ya, oke langsung kita revisi form nya. Let’s go.
Jadi untuk demo dari revisi website form pemesanan tiket kita akan menjadi seperti ini.
Keren bukan? Untuk membuat tampilan seperti itu kita harus merubah (Jika kalian sudah membuat form pemesanan tiket sebelumnya) atau membuat file html, lalu tuliskan kode berikut.
<divclass="popup-confirmation popup"> <divclass="subpopup-confirmation subpopup"> <pclass="description-popup-confirmation">Apakah data pembelian tiket sudah benar?</p> <divclass="wrap-btn"> <buttonclass="btn btn--no"type="button">Belum</button> <buttonclass="btn btn--yes"type="button">Sudah</button> </div> </div> </div>
<divclass="popup-check-detail-data popup"> <divclass="check-detail-data subpopup"> <!-- Isi konten detail data ini dinamis dari javascript --> </div> </div> </main> <!-- Lokasi file javascript --> <scriptsrc="script.js"></script> </body> </html>
Dari kode diatas nanti akan menghasilkan tampilan seperti ini.
Baris 9 pada kode diatas, itu merupakan icon yang bisa kamu sesuaikan dengan icon di folder project kamu ya dan abaikan saja untuk tampilannya yang masih kurang menarik, dikarenakan kita belum menambahkan CSS nya.
Agar tampilan terlihat lebih cantik dan menarik, kita bisa menambahkan CSS. Dan kamu bisa tuliskan kode css nya seperti ini.
const main = document.querySelector('main'); const formInput = document.querySelector('.item-content--form form');
// Ambil data-data yang telah diinputkan ketika user sudah submit formInput.addEventListener('submit', function (e) { e.preventDefault(); sendDataUser(); });
// Untuk melakukan validasi pada kota dituju dan jumlah orang const totalPeople = document.getElementById('total-people'); const city = document.getElementById('city');
// Data semua kota yang dituju const listCities = [...document.querySelectorAll('#list-city option')];
// Mengirim data-data yang telah diinputkan sekaligus memvalidasi nya functionsendDataUser() { const listCityToLowerCase = listCities.map((city) => { return city.value.toLowerCase(); }); const cityValueToLowerCase = city.value.toLowerCase();
// Kembali ke bagian form pembelian tiket, ketika user menekan bagian ubah const btnEditPaymentTicket = document.querySelector('.btn--edit'); btnEditPaymentTicket.addEventListener('click', function () { main.classList.remove('active'); });
// Menerapkan kota-kota yang tersedia pada kota yang dituju const discount = document.getElementById('discount');
for (const listCity of listCities) { city.addEventListener('change', function () { const cityValueToLowerCase = city.value.toLowerCase(); const listCityToLowerCase = listCity.value.toLowerCase();
// Mengambil data-data dari kolom input yang telah diisi oleh user functiongetInputValueUser() { const name = document.getElementById('name').value; const status = document.getElementById('status').value; const paymentMethod = document.getElementById('payment-method').value;
// Menampilkan nama user outputName.textContent = name;
// Menampilkan kota yang dituju outputCity.textContent = city;
// Menampilkan status apakah Dewasa atau Anak-anak outputStatus.textContent = status;
// Menampilkan jumlah orang atau beli berapa tiket outputTotalPeople.textContent = totalPeople;
// Menampilkan harga tiket sesuai dengan status yang diplih outputPriceTicket.textContent = `Rp ${outputStatus.textContent === 'Dewasa' ? '150.000' : '80.000'}`;
// Melakukan perkalian pada subtotal const sumSubtotal = parseInt(outputPriceTicket.textContent.replace('Rp', '').split('.').join('') * outputTotalPeople.textContent);
// Mengubah tanda koma menjadi titik outputSubtotal.textContent = `Rp ${sumSubtotal.toLocaleString().replaceAll(',', '.')}`;
// Ketika user membayar konfirmasi tiket const btnPay = document.getElementById('btn-pay'); btnPay.addEventListener('click', function () { popupConfirmation.classList.add('show'); });
// Ketika user memilih tombol belum saat konfirmasi popup const btnNoConfirmation = document.querySelector('.btn--no'); btnNoConfirmation.addEventListener('click', function () { popupConfirmation.classList.remove('show'); });
// Ketika user mengkonfirmasi bahwa detail data formulir tiket sudah benar dibagian popup konfirmasi const btnConfirmation = document.querySelector('.btn--yes'); btnConfirmation.addEventListener('click', function () { // Mengubah text konfirmasi tiket data pembelian, menjadi mohon menunggu sebentar... const descriptionPopupConfirmation = document.querySelector('.description-popup-confirmation'); descriptionPopupConfirmation.textContent = 'Mohon menunggu sebentar...';
// Mengubah dari text sudah menjadi icon loading this.innerHTML = ` <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="loader"> <path fill="none" d="M0 0h24v24H0z" /> <path d="M18.364 5.636L16.95 7.05A7 7 0 1 0 19 12h2a9 9 0 1 1-2.636-6.364z" fill="rgba(255,255,255,1)" /> </svg> `;
// Menghilangkan tombol belum btnNoConfirmation.style.display = 'none';
// Mengubah tampilan ketika semua transaksi sudah selesai
// Memberikan sedikit efek loading sekitar 3detik setTimeout(() => { popupConfirmation.classList.remove('show'); main.classList.replace('active', 'success'); }, 3000); });
// Menambahkan popup check detail data ketika text lihat detail data pembelian tiket di klik const popupCheckDetailData = document.querySelector('.popup-check-detail-data');
const detailDataPayment = document.querySelector('.detail-data-payment'); detailDataPayment.addEventListener('click', function () { // Menambahkan popup check detail data popupCheckDetailData.classList.add('show');
// Mengambil isi dari bagian konfirmasi data-data detail const confirmationDetail = document.querySelector('.item-content--output-payment .confirmation-detail');
// Isi dari check detail data const checkDetailData = popupCheckDetailData.querySelector('.check-detail-data');
// Mengubah bagian isi dari check detail data, menjadi data-data saat proses konfirmasi data pembelian tiket checkDetailData.innerHTML = `<h2 class="title-check-detail-data">Detail data:</h2> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="36" height="36" class="close-detail-data"> <path fill="none" d="M0 0h24v24H0z" /> <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z" fill="rgba(255,61,61,1)" /> </svg> ${confirmationDetail.innerHTML}`;
closePopupDetail(); });
// Function untuk menghapus popup check detail data functionclosePopupDetail() { const closePopupCheckDetail = document.querySelector('.close-detail-data'); closePopupCheckDetail.addEventListener('click', function () { popupCheckDetailData.classList.remove('show'); }); }
Dan tadaaaa 🥳 website form pemesanan tiket kita sudah jadi. Kamu bisa uji coba buatan kamu, form pemesanan tiket ini hanya statis aja ya. Belum bisa menyimpan data-data ataupun benar-benar melakukan transaksi.
Jadi gimana? Apakah di kamu berjalan lancar sesuai dengan demo. Atau malah terjadi beberapa error atau bug. Jika ada kendala kamu bisa komentar atau chat saya di telegram ya.
Jadi cukup sekian aja tutorial mengenai revisi sederhana pada form pemesanan tiket kita. Demo nya kamu bisa cek di Demo Revisi Form Pemesanan Tiket.
