Cara Membuat Website Booking Hotel dengan HTML dan CSS
Cara Membuat Website Booking Hotel dengan HTML dan CSS - Pada kesempatan ini saya akan membuat website booking hotel dengan HTML dan CSS. Untuk tampilan situs booking hotelnya cukup sederhana dan tetap terlihat menarik. Jadi, langsung saja kita simak script dan proses pembuatannya.
Sebelum membuat, berikut alat yang perlu anda siapkan:
- Komputer/Laptop/Android – jika tidak punya silakan pinjam ke teman anda.
- Aplikasi Text Editor – anda bisa menggunakan notepad, notepad++, VSC, sublime text, dll
- Browser – untuk membuka file website hasil codingan kita nanti.
- Niat yang Tulus – tanpa niat, usaha anda akan sia-sia.
Membuat Website Booking Hotel dengan HTML dan CSS
Bagaimana cara termudah untuk membuat web booking hotel?, berikut ini script kode anda tinggal copy dan paste.
1. Buat file index.html
Langkah pertama buat file index.html dan copy paste kode berikut ini.
<!DOCTYPE html><html lang="id"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Booking Hotel</title><script src="https://cdn.tailwindcss.com"></script></head><body class="bg-gray-100 font-sans"><!-- Header --><header class="bg-blue-900 text-white text-center py-6"><h1 class="text-3xl font-bold">Booking Hotel Sederhana</h1><p class="text-lg mt-2">Pemesanan kamar hotel secara online</p></header><!-- Form Booking --><section class="max-w-md mx-auto bg-white p-6 mt-10 rounded-2xl shadow-lg"><h2 class="text-2xl font-semibold text-center mb-6">Form Booking</h2><form action="success.html" method="get" class="space-y-4"><div><label class="block font-medium">Nama Lengkap</label><input name="nama" type="text" placeholder="Masukkan nama anda" requiredclass="w-full p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></div><div><label class="block font-medium">Email</label><input name="email" type="email" placeholder="Masukkan email anda" requiredclass="w-full p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></div><div class="grid grid-cols-2 gap-4"><div><label class="block font-medium">Check-in</label><input name="checkin" type="date" requiredclass="w-full p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></div><div><label class="block font-medium">Check-out</label><input name="checkout" type="date" requiredclass="w-full p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></div></div><div><label class="block font-medium">Jumlah Kamar</label><input name="kamar" type="number" min="1" max="5" value="1"class="w-full p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></div><button type="submit"class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition">Pesan Sekarang</button></form></section><!-- Footer --><footer class="bg-blue-900 text-white text-center py-4 mt-10"><p>© 2025 Booking Hotel Sederhana</p></footer></body></html
2. Buat file success.html
Kemudian buat file seccess.html untuk tampilan apabila berhasil booking.
<!DOCTYPE html><html lang="id"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Sukses Booking</title><script src="https://cdn.tailwindcss.com"></script></head><body class="bg-gray-100 font-sans flex items-center justify-center h-screen"><div class="bg-white p-8 rounded-2xl shadow-lg text-center max-w-md"><h1 class="text-3xl font-bold text-green-600 mb-4">Booking Berhasil!</h1><p class="text-lg mb-6">Terima kasih telah memesan kamar hotel.Kami akan mengirimkan detail pesanan ke email anda.</p><a href="index.html"class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition">Kembali ke Halaman Utama</a></div></body></html>
3. Simpan dan Lihat Hasilnya
Setelah anda selesai membuat web booking sederhana ini, anda bisa menarik file "index.html" ke browser yang sudah anda sediakan. Jika terjadi error atau bermasalah anda bisa teliti dengan baik dan benar.
Kesimpulan
Itulah langkah sederhana Cara Membuat Website Booking Hotel dengan HTML dan CSS. Dengan dua file saja, yaitu index.html dan success.html, kita sudah bisa membuat form booking yang menampilkan detail pesanan setelah disubmit.
Meskipun masih sederhana dan belum terhubung ke database, contoh ini sudah cukup untuk dipelajari sebagai dasar pembuatan sistem booking online. Selanjutnya, anda bisa mengembangkan lebih lanjut dengan menambahkan fitur seperti pilihan jenis kamar, harga per malam, hingga integrasi pembayaran agar lebih nyata digunakan.
Semoga tutorial ini bermanfaat, dan selamat mencoba membuat website booking hotel versi anda sendiri! 🚀