Membuat Form Booking Hotel dengan HTML, CSS, Javascript dan redirect ke Booking Enggine

Membuat Form Booking Hotel dengan HTML, CSS, Javascript dan redirect ke Booking Enggine

Membuat Form Booking Hotel dengan html, css, javascript menjadi tantangan tersendiri, Setiap Developer Website tentunya sesekali pernah mendapat tawaran pembuatan website. Sama seperti halnya Devata Pixel sering mendapat tawaran untuk membuat website Hotel. salah satu hotel yang sukses diterapkan sampai saat ini (2019) adalah www.grandliviohotel.com.

Pembuatan website Grand Livio menggunakan HTML dengan bantuan code dari beberapa forum untuk mendapatkan fitur yang di inginkan. alasan kami menggunakan HTML, CSS dan Java adalah dikarenakan Grand Livio hanya menggunakan Hosting sebagai tempat Website, bukan untuk email. Jadi pihak management hanya menggunakan sedikit diskspace untuk website.

Oke segitu dulu sejarahnya, kembali ke point utama yaitu bagaimana membuat form book dengan benar pada website berbasis HTML.

Membuat Form Booking Hotel

Pertama silahkan pelajari source code berikut ini, seterusnya tinggal di implementasikan sesuai dengan Booking Enggine yang digunakan.

Membuat HTML

<div class=" bg-primary">
<div class="title" align="center">BOOK NOW</div>
									<div class="body">
<form  action="https://booking.grandliviohotel.com/bookcore/v1/search-dispo.htm?lang=en" method="POST">
<input name="csrfmiddlewaretoken" value="OTZgZZ872juGPcS93WJu0fK6RUcxvbYPC28JT4C3fjTQVDXqVVmOVwTQLaqJnWm5" type="hidden">
<div align="center">
<input name="entrada" style="background-color: #080707cc;margin-left: 10px;max-width: 20%;" class=" clickable input-md" placeholder="Check In" id="id_entrada" type="text">
<input name="salida" style="margin-left: 10px;background-color: #080707cc;max-width: 20%;" class=" clickable input-md" placeholder="Check Out" id="id_salida" type="text">
<input name="codpromo" style="margin-left: 10px;background-color: #080707cc;max-width: 20%;" placeholder="Promo Code" id="id_codpromo" type="text">
<button type="submit" style="margin-left: 10px;max-width: 20%;" class=" btn btn-primary" >Check Availability</button>
</div>
</form>
</div>
</div>

dari code diatas dapat dilihat terdapat form untuk melakukan input dengan name entrada untuk tanggal check in dan salida untuk tanggal check out, sedangkan codpromo name adalah nama untuk inputan promo.

Name disetiap hotel pasti berbeda-beda atau bahkan sama apabila Booking enggine yang digunakan sama. Form pasti sama saja, namun name dan id pasti berbeda-beda.

Selanjutnya pastikan mengisi javascript pada bagian bawah setelah footer. berikut source code nya bisa anda pelajari.

Membuat JavaScript

<script>
    $( function() {
        
        var nowTemp = new Date();
        var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

        var checkin = $('#id_entrada').datepicker({
        dateFormat: 'dd-mm-yyyy',
        beforeShowDay: function(date) {
            return date.valueOf() >= now.valueOf();
        },
        autoclose: true

        }).on('changeDate', function(ev) {
            if (ev.date.valueOf() > checkout.datepicker("getDate").valueOf() || !checkout.datepicker("getDate").valueOf()) {

            var newDate = new Date(ev.date);
            newDate.setDate(newDate.getDate() + 1);
            checkout.datepicker("update", newDate);

        }
        $('#id_salida')[0].focus();
        });


        var checkout = $('#id_salida').datepicker({
            dateFormat: 'dd-mm-yyyy',
            beforeShowDay: function(date) {
            if (!checkin.datepicker("getDate").valueOf()) {
            return date.valueOf() >= new Date().valueOf();
            } else {
            return date.valueOf() > checkin.datepicker("getDate").valueOf();
            }
        },
        autoclose: true

        }).on('changeDate', function(ev) {});
    } );
    </script>

Silahkan ganti ID yang terdapat pada javascript tersebut, sesuai dengan id yang anda gunakan pada form. sedikit kelebihan dari javascript ini adalah apabila anda check in tanggal 10 maka tanggal sebelumnya akan terblock dan tidak bisa dipilih pada input check out. Paham bukan ? jadi tidak akan terjadi eror inputan user atau client dapat memilih tanggal check in 10 dan check out tgl 8 dibulan yang sama. Ini biasanya sering terjadi saat booking website hotel.

Simple sekali fitur ini namun berarti dikarenakan akan menambah secure dan tidak memperlihatkan website hotel murahan.

<script src="js/bootstrap-datepicker.min.js"></script>

ingat juga untuk menambahkan fitur javascript datepicker seperti diatas untuk memperlancar tampilan datepicker saat memilih tanggal.