ETS PWEB - Dokumentasi Website Booking Hotel
Dokumentasi Minggu 8 (ETS) Pemrograman Web
Pada Minggu 8 Perkuliahan Pemrograman Web yaitu di Masa ETS Saya Membuat NgamarIn: Website Booking Hotel Menggunakan HTML, CSS, JS dan Bootstrap.
Link Website: https://ets-pweb-hotel-booking-kel17.ferriadi.my.id/
Link Source Code: https://github.com/ferriprasetya/ETS_PWEB_Hotel_Kelompok17
Link Video Youtube : https://www.youtube.com/watch?v=T7SbJ0wN1Hs
Link Infografis : https://drive.google.com/file/d/1C6bQiA7V0yjcYCLneIwhC6ZLX5Qxqrqy/view?usp=drive_link
Deskripsi Aplikasi
NgamarIn adalah aplikasi web pemesanan hotel berbasis HTML, CSS, dan JavaScript yang menampilkan daftar hotel di wilayah yang kita inginkan. Data hotel diambil dari file JSON lokal, lalu ditampilkan ke beberapa halaman utama: beranda, pencarian hotel, dan detail hotel. Aplikasi ini fokus pada pengalaman pengguna yang sederhana: pengguna dapat melihat rekomendasi hotel, membandingkan hotel dalam mode tampilan berbeda, menyimpan hotel favorit (bookmark), lalu melanjutkan ke simulasi proses reservasi pada halaman detail.
Dokumentasi Hasil Pembuatan Web
1. Halaman Beranda
Deskripsi Fitur Halaman Beranda:
- Hero section dengan form pencarian awal (check-in, check-out, jumlah tamu, lokasi).
- Kalender tanggal: tersedia pada input check-in dan check-out di form hero.
- Integrasi date picker menggunakan Flatpickr untuk input tanggal.
- Section "Why Travellers Trust NgamarIn" sebagai nilai jual aplikasi.
- Section "Trending Destinations" yang menampilkan 4 hotel teratas dari data.
- Kartu hotel menampilkan gambar, nama hotel, harga mulai per malam, dan deskripsi singkat.
- Navigasi cepat ke halaman detail hotel melalui klik kartu.
2. Halaman Pencarian Hotel
Deskripsi Fitur Halaman Pencarian Hotel:
- Search hotel: halaman utama untuk pencarian/eksplorasi hotel.
- Menampilkan seluruh daftar hotel dari sumber data JSON.
- Menampilkan jumlah hasil hotel secara dinamis.
- Tombol switch tampilan:
- List View
- Grid View
- Sorting hasil hotel berdasarkan:
- Top Reviewed (rating tertinggi)
- Lowest Price (harga kamar termurah)
- Fitur bookmark hotel:
- Simpan/hapus bookmark per hotel.
- Data bookmark disimpan di `localStorage` (`hotel_bookmarks`).
- Toggle "Show Bookmarked" untuk menampilkan hotel yang sudah disimpan saja.
- Setiap kartu hotel menyediakan akses langsung ke halaman detail hotel.
3. Halaman Detail Hotel
Deskripsi Fitur Halaman Pencarian Hotel:
- Detail: informasi hotel lengkap ditampilkan di halaman ini (nama, lokasi, rating, deskripsi, galeri).
- Membaca parameter `id` dari URL untuk memuat hotel yang dipilih.
- Menampilkan galeri gambar hotel dalam bentuk carousel.
- Menampilkan informasi utama hotel:
- Nama, lokasi, rating bintang, dan deskripsi.
- List kamar: ditampilkan pada section Rooms.
- Menampilkan daftar kamar lengkap dengan:
- Tipe kamar
- Kapasitas tamu
- Harga per malam
- Estimasi total harga
- Fitur bookmark hotel langsung dari halaman detail.
4. Halaman Booking
Deskripsi Fitur Halaman Pencarian Hotel:
- Booking form: muncul saat tombol `Reserve` pada list kamar diklik.
- Trigger booking berasal dari tombol `Reserve` pada setiap kartu kamar.
- Form booking mencakup:
- Full Name
- Email address
- Check-In date
- Check-Out date
- Kalender tanggal: digunakan kembali pada input tanggal check-in/check-out di form booking.
- Validasi tanggal:
- Check-In minimal hari ini.
- Check-Out minimal 1 hari setelah Check-In.
- Saat submit, sistem menampilkan state `Processing...` (simulasi request).
- Setelah berhasil, modal ditutup otomatis dan muncul toast sukses booking.
INFOGRAFIS NGAMARIN: WEBSITE
BOOKING HOTEL
Komentar
Posting Komentar