Membuat Booking Form Widget di WordPress
Kali ini saya akan coba membuat Booking Form Widget untuk Fastboat di WordPress, secara konsep sebetulnya hampir sama untuk penggunaan pada booking platform yang lain. Hanya saja untuk Fastboat kali ini menggunakan API dari Fastboat System yang sudah ada.
Pertama-tama adalah membuat class untuk Widget yang akan dibuat didalam file functions.php theme yang akan digunakan, format penulisan nama class sebaiknya menggunakan Camel Case. Class ini merupakan turunan (Extend) dari class WP_Widget yang sudah disediakan WordPress untuk memudahkan kita dalam membuat dan mengelola Widget di WorPress.
class Fastboat_Booking_Form extends WP_Widget {
function __construct() {
parent::__construct(
'fastboat_booking_form',
'Fastboat Booking Form',
array(
'description' => 'Fastboat Booking form'
)
);
}
}
Inisialisasi dilakukan pada konstruktor, dimana parameter pertama merupakan ID dari widget yang akan dibuat (harus unique), parameter kedua merupakan title dari widget, dan parameter ketiga merupakan opsi pendukung lainnya dalam bentuk array.
Pada tahapan ini widget sementara sudah tersimpan, selanjutnya menentukan isi dari widget tersebut. Untuk Widget Booking Form isinya yakni beberapa field isian untuk keperluan pemesanan, styling dapat dilakukan menggunakan HTML dan CSS (baik external file maupun inline styling).
Backend
Beberapa orang sering merasa tidak puas dengan script yang telah dibuatnya, misalnya dikemudian hari ingin mengganti Title-nya, warna latar belakang nya, dan lain sebagainya. Dalam kasus Booking Form mungkin yang cenderung sering diganti yakni URI untuk API nya, untuk itu kita perlu membuatnya dinamis agar dikemudian hari mudah untuk melakukan perubahan.
Untuk melakukan hal ini kita perlu membuat pengaturan Widget Data di wp-admin dengan menambahkan fungsi form() di dalam class Fastboat_Booking_Form tersebut.
public function form( $instance ) {
$title = isset( $instance[ 'title' ] ) ? $instance[ 'title' ] : 'Fastboat Tickets';
$bank_data_url = isset( $instance[ 'bank_data_url' ] ) ? $instance[ 'bank_data_url' ] : 'https://bank-data.indotravelonline.com';
$fast_boat_book_url = isset( $instance[ 'fast_boat_book_url' ] ) ? $instance[ 'bank_data_url' ] : 'https://book.giliislandfastboats.com/fastboat'; ?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>">Title</label>
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id( 'bank_data_url' ); ?>">Bank Data URL</label>
<input class="widefat" id="<?php echo $this->get_field_id( 'bank_data_url' ); ?>" name="<?php echo $this->get_field_name( 'bank_data_url' ); ?>" type="text" value="<?php echo esc_attr( $bank_data_url ); ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id( 'fast_boat_book_url' ); ?>">Fastboat Book URL</label>
<input class="widefat" id="<?php echo $this->get_field_id( 'fast_boat_book_url' ); ?>" name="<?php echo $this->get_field_name( 'fast_boat_book_url' ); ?>" type="text" value="<?php echo esc_attr( $fast_boat_book_url ); ?>" />
</p>
<?php
}
Yang perlu diperhatikan adalah parameter $instance pada fungsi diatas, parameter tersebut mengacu pada data set yang ditujukan khusus untuk widget yang baru kita buat dan disimpan dengan ID sesuai ID yang telah kita tentukan pada saat instance sebelumnya (fastboat_booking_form). Parameter ini akan sangat membantuk dalam mengelola data pada fungsi-fungsi selanjutnya, selama masih berada dalam lingkup wp-admin WordPress.
Script diatas hanya membuat form isian untuk menyimpan variabel bank_data_url dan fast_boat_book_url. Kedua data tersebut merupakan API yang kebetulan saya gunakan untuk membuat Fastboat Booking Form di beberapa website.
Form itu masih sebatas form biasa, bisa diisi dengan suatu variable namun tidak dapat menyimpannya. Untuk itu kita perlu membuat fungsi update() didalam class Fastboat_Booking_Form untuk meng-handle kebutuhan penyimpanan data widget tersebut kedalam sistem WordPress.
public function update( $new_instance, $old_instance ) {
return array(
'title' => !empty( $new_instance[ 'title' ] ) ? strip_tags( $new_instance[ 'title' ] ) : 'Fastboat Tickets',
'bank_data_url' => !empty( $new_instance[ 'bank_data_url' ] ) ? strip_tags( $new_instance[ 'bank_data_url' ] ) : 'https://bank-data.indotravelonline.com',
'fast_boat_book_url' => !empty( $new_instance[ 'fast_boat_book_url' ] ) ? strip_tags( $new_instance[ 'fast_boat_book_url' ] ) : 'https://book.giliislandfastboats.com/fastboat'
);
}
Hampir sama dengan parameter $instance sebelumnya, fungsi update() memiliki 2 parameter yang memang diperlukan untuk proses update data, yakni $new_instance dan $old_instance. Parameter $new_instance berisi data baru yang ter-submit oleh form tersebut sedangkan $old_instance masih menyimpan data sebelumnya sebelum dilakukan perubahan. Penggunaan parameter $old_instance biasanya pada verifikasi apakah data tersebut telah dilakukan perubahan atau tidak dengan mencocokan data pada $new_instance dan $old_instance.
Frontend
Terakhir adalah kita perlu membuat tampilan yang muncul ketika widget yang kita buat tersebut diaktifkan. Tambahkan fungsi widget() didalam class Fastboat_Booking_Form.
public function widget( $args, $instance ) {
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-datepicker');
wp_enqueue_style('jquery-ui', get_stylesheet_directory_uri() . '/stylesheet/jquery-ui.min.css','style');
wp_enqueue_style('jquery-ui-theme', get_stylesheet_directory_uri() . '/stylesheet/jquery-ui.theme.css','style');
$title = $instance[ 'title' ];
$bank_data_url = $instance[ 'bank_data_url' ];
$fast_boat_api_url = $bank_data_url . '/api/xxx'; // censored, sorry!
$currency_api_url = $bank_data_url . '/api/xxx'; // censored, sorry!
$fast_boat_book_url = $instance[ 'fast_boat_book_url' ];
$max_number_of_adults = 25;
$max_number_of_childs = 10;
$max_number_of_infants = 5;
/** ambil daftar regions */
$region_lists = json_decode( file_get_contents( $fast_boat_api_url . '/regions' ) );
$default_depart_region_id = 3;
$default_arrival_region_id = 1;
/** ambil daftar currency */
$currency_lists = json_decode( file_get_contents( $currency_api_url . '/rates' ) ); ?>
<div class="row">
<div id="fastboat" class="twelve columns">
<div class="row">
<h3 class="fb-title"><?php echo $title; ?></h3>
</div>
<div class="fb-container">
<form action="<?php echo $fast_boat_book_url; ?>/select-boat/record-session" method="post">
<div class="left-side">
<div class="fb-routes">
<div class="row">
<div class="six columns">
<div class="fb-departure">
<p><label for="departure_region_id">From</label></p>
<select id="departure_region_id" name="departure_region_id">
<?php foreach ($region_lists as $region) : ?>
<option value="<?php echo $region->region_id; ?>"
<?php if ($region->region_id == $default_depart_region_id) : ?>selected<?php endif; ?> ><?php echo $region->region_name; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="six columns">
<div class="fb-arrival">
<p><label for="arrival_region_id">To</label></p>
<select id="arrival_region_id" name="arrival_region_id">
<?php foreach ($region_lists as $region) : ?>
<option value="<?php echo $region->region_id; ?>"
<?php if ($region->region_id == $default_arrival_region_id) : ?>selected<?php endif; ?> ><?php echo $region->region_name; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>
</div>
<div class="fb-dates">
<div class="row">
<div class="six columns">
<div class="fb-depart-date">
<p><label for="departure_date">Departure</label></p>
<input type="text" id="departure_date" name="departure_transfer_date"
value="<?php echo date('Y-m-d', mktime(0, 0, 0, date("m"), date("d") + 1, date("Y"))); ?>"/>
</div>
</div>
<div class="six columns">
<div class="fb-arrival-date">
<p>
<label for="return_date">Return? </label>
<input type="checkbox" id="route_type" checked />
<input type="hidden" name="route_type" id="route_type_value" value="return" />
</p>
<div id="return_date_container">
<input type="text" id="return_date" name="return_transfer_date"
value="<?php echo date('Y-m-d', mktime(0, 0, 0, date("m"), date("d") + 2, date("Y"))); ?>"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right-side">
<div class="fb-passengers">
<div class="row">
<div class="four columns">
<div class="fb-adult">
<label for="number_of_adult">Adult
<small>(>10 yrs)</small>
</label>
<select id="number_of_adult" name="number_of_adult">
<?php foreach (range(1, $max_number_of_adults) as $i) : ?>
<option value="<?php echo $i; ?>"><?php echo $i; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="four columns">
<div class="fb-child">
<label for="number_of_child">Child
<small>(2-10 yrs)</small>
</label>
<select id="number_of_child" name="number_of_child">
<?php foreach (range(0, $max_number_of_childs) as $i) : ?>
<option value="<?php echo $i; ?>"><?php echo $i; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="four columns">
<div class="fb-infant">
<label for="number_of_infant">Infant
<small>(<2 yrs)</small>
</label>
<select id="number_of_infant" name="number_of_infant">
<?php foreach (range(0, $max_number_of_infants) as $i) : ?>
<option value="<?php echo $i; ?>"><?php echo $i; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>
</div>
<div class="fb-currency-button">
<div class="fb-currencies">
<p><label for="currency_id">Preferred Currency</label></p>
<select id="currency_id" name="currency_id">
<?php foreach ($currency_lists as $currency) : ?>
<option
value="<?php echo $currency->currency_id; ?>"><?php echo $currency->currency_name; ?>
(<?php echo $currency->currency_code; ?>)
</option>
<?php endforeach; ?>
</select>
</div>
<div class="fb-buttons">
<button class="button tiny radius">Book Now</button>
<span class="fb-lost-eticket">
—
<a href="<?php echo $fast_boat_book_url; ?>/e-ticket"><strong>Lost your e-Ticket?</strong></a>
</span>
</div>
</div>
</div>
</form>
<div class="clear"></div>
</div>
<script type="text/javascript">
/*----------------------------------------------------
/* Datepicker untuk booking form
/*--------------------------------------------------*/
jQuery(document).ready(function($){
$(function() {
$( ".fb-depart-date #departure_date" ).datepicker({
dateFormat: "yy-mm-dd",
minDate: 0,
onClose: function( selectedDate ) {
var x = selectedDate === '' ? 0 : selectedDate;
$( ".fb-arrival-date #return_date" ).datepicker( "option", "minDate", x );
}
});
$( ".fb-arrival-date #return_date" ).datepicker({
dateFormat: "yy-mm-dd",
minDate: 0,
onClose: function( selectedDate ) {
$( ".fb-depart-date #departure_date" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
$('.fb-arrival-date #route_type').change(function(){
if( $(this).is(':checked') ) {
$('.fb-arrival-date #return_date_container input').attr('disabled',false);
$( "#departure_date" ).datepicker( "option", "maxDate", $( "#return_date").val() );
$('#route_type_value').val('return');
} else {
$('.fb-arrival-date #return_date_container input').attr('disabled',true);
$( "#departure_date" ).datepicker( "option", "maxDate", null );
$('#route_type_value').val('oneway');
}
});
});
</script>
</div>
</div>
<?php
}
Sama halnya seperti membuat halaman HTML biasa, dapat juga dikombinasikan dengan CSS dan JavaScript. Semua script dan screenshot pada tulisan ini saya kutip langsung dari resource giliislandfastboats.com.
Note: Untuk Fastboat System API tidak disediakan untuk publik, informasi lebih lanjut dapat menghubungi LRsoft via email.