{"id":642,"date":"2015-09-19T08:34:13","date_gmt":"2015-09-19T08:34:13","guid":{"rendered":"http:\/\/zaf.web.id\/blog\/?p=642"},"modified":"2015-09-22T16:44:19","modified_gmt":"2015-09-22T16:44:19","slug":"membuat-booking-form-widget-di-wordpress","status":"publish","type":"post","link":"https:\/\/zaf.web.id\/blog\/membuat-booking-form-widget-di-wordpress\/","title":{"rendered":"Membuat Booking Form Widget di WordPress"},"content":{"rendered":"

\"Fastboat<\/a><\/p>\n

Kali ini saya akan coba membuat\u00a0Booking Form Widget<\/em> untuk Fastboat<\/em> di WordPress,<\/em> secara konsep sebetulnya hampir sama untuk penggunaan pada\u00a0booking platform<\/em> yang lain. Hanya saja untuk Fastboat<\/em> kali ini menggunakan API dari Fastboat System<\/em> yang sudah ada.<\/p>\n

Pertama-tama adalah\u00a0membuat class<\/em> untuk Widget<\/em> yang akan dibuat didalam file functions.php<\/code> theme yang akan digunakan, format penulisan nama class<\/em> sebaiknya menggunakan Camel Case<\/em>. Class<\/em> ini merupakan turunan (Extend<\/em>) dari class WP_Widget<\/code> yang sudah disediakan\u00a0WordPress<\/em> untuk memudahkan kita dalam membuat\u00a0dan mengelola Widget<\/em> di WorPress<\/em>.<\/p>\n

class Fastboat_Booking_Form extends WP_Widget {\r\n\r\n   function __construct() {\r\n      parent::__construct(\r\n         'fastboat_booking_form',\r\n         'Fastboat Booking Form',\r\n         array(\r\n            'description' => 'Fastboat Booking form'\r\n         )\r\n      );\r\n   }\r\n}<\/pre>\n
Inisialisasi dilakukan pada\u00a0konstruktor<\/a>, dimana parameter pertama merupakan ID<\/em> dari widget<\/em> yang akan dibuat (harus unique<\/em>), parameter kedua merupakan title<\/em> dari widget<\/em>, dan parameter ketiga merupakan\u00a0opsi pendukung lainnya dalam bentuk array<\/code>.<\/p>\n
\"Instance<\/a>
Instance dari Class Fastboat_Booking_Form hasil extend dari WP_Widget<\/figcaption><\/figure>\n
Pada tahapan ini widget sementara sudah tersimpan, selanjutnya menentukan isi dari widget<\/em> tersebut. Untuk Widget Booking Form<\/em> isinya yakni beberapa field<\/em> isian untuk keperluan pemesanan, styling<\/em> dapat dilakukan menggunakan HTML dan CSS (baik external file maupun inline styling<\/em>).<\/p>\n
Backend<\/h2>\n
Beberapa orang sering merasa tidak puas dengan script<\/em> yang telah dibuatnya, misalnya dikemudian hari ingin mengganti Title-nya,<\/em> warna latar belakang nya, dan lain sebagainya. Dalam kasus Booking Form<\/em> mungkin yang cenderung sering diganti yakni URI untuk API nya, untuk itu kita perlu membuatnya dinamis agar dikemudian hari mudah untuk melakukan perubahan.<\/p>\n
Untuk\u00a0melakukan hal ini kita perlu membuat pengaturan Widget<\/em> Data di wp-admin<\/code> dengan menambahkan fungsi form()<\/code> di dalam class<\/em> Fastboat_Booking_Form<\/code> tersebut.<\/p>\n
public function form( $instance ) {\r\n\r\n   $title = isset( $instance[ 'title' ] ) ? $instance[ 'title' ] : 'Fastboat Tickets';\r\n   $bank_data_url = isset( $instance[ 'bank_data_url' ] ) ? $instance[ 'bank_data_url' ] : 'https:\/\/bank-data.indotravelonline.com';\r\n   $fast_boat_book_url = isset( $instance[ 'fast_boat_book_url' ] ) ? $instance[ 'bank_data_url' ] : 'https:\/\/book.giliislandfastboats.com\/fastboat'; ?>\r\n   <p>\r\n      <label for="<?php echo $this->get_field_id( 'title' ); ?>">Title<\/label>\r\n      <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 ); ?>" \/>\r\n   <\/p>\r\n   <p>\r\n      <label for="<?php echo $this->get_field_id( 'bank_data_url' ); ?>">Bank Data URL<\/label>\r\n      <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 ); ?>" \/>\r\n   <\/p>\r\n   <p>\r\n      <label for="<?php echo $this->get_field_id( 'fast_boat_book_url' ); ?>">Fastboat Book URL<\/label>\r\n      <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 ); ?>" \/>\r\n   <\/p>\r\n   <?php\r\n}<\/pre>\n
Yang perlu diperhatikan adalah parameter $instance<\/code> pada fungsi diatas, parameter tersebut mengacu pada data set yang ditujukan khusus untuk widget<\/em> yang baru kita buat dan disimpan dengan ID sesuai ID yang telah kita tentukan pada saat instance<\/em> sebelumnya (fastboat_booking_form<\/code>).\u00a0Parameter ini akan sangat membantuk dalam mengelola data pada fungsi-fungsi selanjutnya, selama masih berada dalam lingkup wp-admin<\/code>\u00a0WordPress<\/em>.<\/p>\n
 <\/p>\n
Script<\/em> diatas hanya membuat form<\/em> isian untuk menyimpan variabel bank_data_url<\/code> dan fast_boat_book_url<\/code>. Kedua data tersebut merupakan API yang kebetulan saya gunakan untuk membuat Fastboat Booking Form<\/em> di beberapa\u00a0website<\/em>.<\/p>\n
\"Widget<\/a>
Widget data Fastboat Booking Form<\/figcaption><\/figure>\n
Form<\/em> itu masih sebatas form<\/em> biasa, bisa diisi dengan suatu variable<\/em> namun tidak dapat\u00a0menyimpannya. Untuk itu kita perlu membuat fungsi update()<\/code> didalam class<\/em> Fastboat_Booking_Form<\/code> untuk meng-handle<\/em> kebutuhan penyimpanan data widget<\/em> tersebut kedalam sistem WordPress<\/em>.<\/p>\n
public function update( $new_instance, $old_instance ) {\r\n   return array(\r\n      'title' => !empty( $new_instance[ 'title' ] ) ? strip_tags( $new_instance[ 'title' ] ) : 'Fastboat Tickets',\r\n      'bank_data_url' => !empty( $new_instance[ 'bank_data_url' ] ) ? strip_tags( $new_instance[ 'bank_data_url' ] ) : 'https:\/\/bank-data.indotravelonline.com',\r\n      'fast_boat_book_url' => !empty( $new_instance[ 'fast_boat_book_url' ] ) ? strip_tags( $new_instance[ 'fast_boat_book_url' ] ) : 'https:\/\/book.giliislandfastboats.com\/fastboat'\r\n   );\r\n}<\/pre>\n
Hampir sama dengan parameter $instance<\/code> sebelumnya, fungsi update()<\/code> memiliki 2 parameter yang memang diperlukan untuk proses update data, yakni $new_instance<\/code> dan $old_instance<\/code>. Parameter $new_instance<\/code> berisi data baru yang ter-submit<\/em> oleh form<\/em> tersebut sedangkan $old_instance<\/code> masih menyimpan data sebelumnya sebelum dilakukan perubahan. Penggunaan parameter $old_instance<\/code> biasanya pada verifikasi apakah data tersebut telah dilakukan perubahan atau tidak dengan mencocokan data pada $new_instance<\/code> dan $old_instance<\/code>.<\/p>\n
Frontend<\/h2>\n
Terakhir adalah\u00a0kita perlu membuat tampilan yang muncul ketika widget<\/em> yang kita buat tersebut diaktifkan. Tambahkan fungsi widget()<\/code>\u00a0didalam class<\/em> Fastboat_Booking_Form<\/code>.<\/p>\n
public function widget( $args, $instance ) {\r\n\r\n   wp_enqueue_script('jquery');\r\n   wp_enqueue_script('jquery-ui-core');\r\n   wp_enqueue_script('jquery-ui-datepicker');\r\n\r\n   wp_enqueue_style('jquery-ui', get_stylesheet_directory_uri() . '\/stylesheet\/jquery-ui.min.css','style');\r\n   wp_enqueue_style('jquery-ui-theme', get_stylesheet_directory_uri() . '\/stylesheet\/jquery-ui.theme.css','style');\r\n\r\n   $title = $instance[ 'title' ];\r\n   $bank_data_url = $instance[ 'bank_data_url' ];\r\n   $fast_boat_api_url = $bank_data_url . '\/api\/xxx'; \/\/ censored, sorry!\r\n   $currency_api_url = $bank_data_url . '\/api\/xxx'; \/\/ censored, sorry!\r\n\r\n   $fast_boat_book_url = $instance[ 'fast_boat_book_url' ];\r\n\r\n   $max_number_of_adults = 25;\r\n   $max_number_of_childs = 10;\r\n   $max_number_of_infants = 5;\r\n\r\n   \/** ambil daftar regions *\/\r\n   $region_lists = json_decode( file_get_contents( $fast_boat_api_url . '\/regions' ) );\r\n   $default_depart_region_id = 3;\r\n   $default_arrival_region_id = 1;\r\n\r\n   \/** ambil daftar currency *\/\r\n   $currency_lists = json_decode( file_get_contents( $currency_api_url . '\/rates' ) ); ?>\r\n\r\n   <div class="row">\r\n      <div id="fastboat" class="twelve columns">\r\n         <div class="row">\r\n            <h3 class="fb-title"><?php echo $title; ?><\/h3>\r\n         <\/div>\r\n         <div class="fb-container">\r\n            <form action="<?php echo $fast_boat_book_url; ?>\/select-boat\/record-session" method="post">\r\n               <div class="left-side">\r\n                  <div class="fb-routes">\r\n                     <div class="row">\r\n                        <div class="six columns">\r\n                           <div class="fb-departure">\r\n                              <p><label for="departure_region_id">From<\/label><\/p>\r\n                              <select id="departure_region_id" name="departure_region_id">\r\n                                 <?php foreach ($region_lists as $region) : ?>\r\n                                    <option value="<?php echo $region->region_id; ?>"\r\n                                          <?php if ($region->region_id == $default_depart_region_id) : ?>selected<?php endif; ?> ><?php echo $region->region_name; ?><\/option>\r\n                                 <?php endforeach; ?>\r\n                              <\/select>\r\n                           <\/div>\r\n                        <\/div>\r\n                        <div class="six columns">\r\n                           <div class="fb-arrival">\r\n                              <p><label for="arrival_region_id">To<\/label><\/p>\r\n                              <select id="arrival_region_id" name="arrival_region_id">\r\n                                 <?php foreach ($region_lists as $region) : ?>\r\n                                    <option value="<?php echo $region->region_id; ?>"\r\n                                          <?php if ($region->region_id == $default_arrival_region_id) : ?>selected<?php endif; ?> ><?php echo $region->region_name; ?><\/option>\r\n                                 <?php endforeach; ?>\r\n                              <\/select>\r\n                           <\/div>\r\n                        <\/div>\r\n                     <\/div>\r\n                  <\/div>\r\n                  <div class="fb-dates">\r\n                     <div class="row">\r\n                        <div class="six columns">\r\n                           <div class="fb-depart-date">\r\n                              <p><label for="departure_date">Departure<\/label><\/p>\r\n                              <input type="text" id="departure_date" name="departure_transfer_date"\r\n                                    value="<?php echo date('Y-m-d', mktime(0, 0, 0, date("m"), date("d") + 1, date("Y"))); ?>"\/>\r\n                           <\/div>\r\n                        <\/div>\r\n                        <div class="six columns">\r\n                           <div class="fb-arrival-date">\r\n                              <p>\r\n                                 <label for="return_date">Return? &nbsp;&nbsp;<\/label>\r\n                                 <input type="checkbox" id="route_type" checked \/>\r\n                                 <input type="hidden" name="route_type" id="route_type_value" value="return" \/>\r\n                              <\/p>\r\n\r\n                              <div id="return_date_container">\r\n                                 <input type="text" id="return_date" name="return_transfer_date"\r\n                                       value="<?php echo date('Y-m-d', mktime(0, 0, 0, date("m"), date("d") + 2, date("Y"))); ?>"\/>\r\n                              <\/div>\r\n                           <\/div>\r\n                        <\/div>\r\n                     <\/div>\r\n                  <\/div>\r\n               <\/div>\r\n               <div class="right-side">\r\n                  <div class="fb-passengers">\r\n                     <div class="row">\r\n                        <div class="four columns">\r\n                           <div class="fb-adult">\r\n                              <label for="number_of_adult">Adult\r\n                                 <small>(>10 yrs)<\/small>\r\n                              <\/label>\r\n                              <select id="number_of_adult" name="number_of_adult">\r\n                                 <?php foreach (range(1, $max_number_of_adults) as $i) : ?>\r\n                                    <option value="<?php echo $i; ?>"><?php echo $i; ?><\/option>\r\n                                 <?php endforeach; ?>\r\n                              <\/select>\r\n                           <\/div>\r\n                        <\/div>\r\n                        <div class="four columns">\r\n                           <div class="fb-child">\r\n                              <label for="number_of_child">Child\r\n                                 <small>(2-10 yrs)<\/small>\r\n                              <\/label>\r\n                              <select id="number_of_child" name="number_of_child">\r\n                                 <?php foreach (range(0, $max_number_of_childs) as $i) : ?>\r\n                                    <option value="<?php echo $i; ?>"><?php echo $i; ?><\/option>\r\n                                 <?php endforeach; ?>\r\n                              <\/select>\r\n                           <\/div>\r\n                        <\/div>\r\n                        <div class="four columns">\r\n                           <div class="fb-infant">\r\n                              <label for="number_of_infant">Infant\r\n                                 <small>(<2 yrs)<\/small>\r\n                              <\/label>\r\n                              <select id="number_of_infant" name="number_of_infant">\r\n                                 <?php foreach (range(0, $max_number_of_infants) as $i) : ?>\r\n                                    <option value="<?php echo $i; ?>"><?php echo $i; ?><\/option>\r\n                                 <?php endforeach; ?>\r\n                              <\/select>\r\n                           <\/div>\r\n                        <\/div>\r\n                     <\/div>\r\n                  <\/div>\r\n                  <div class="fb-currency-button">\r\n                     <div class="fb-currencies">\r\n                        <p><label for="currency_id">Preferred Currency<\/label><\/p>\r\n                        <select id="currency_id" name="currency_id">\r\n                           <?php foreach ($currency_lists as $currency) : ?>\r\n                              <option\r\n                                 value="<?php echo $currency->currency_id; ?>"><?php echo $currency->currency_name; ?>\r\n                                 (<?php echo $currency->currency_code; ?>)\r\n                              <\/option>\r\n                           <?php endforeach; ?>\r\n                        <\/select>\r\n                     <\/div>\r\n                     <div class="fb-buttons">\r\n                        <button class="button tiny radius">Book Now<\/button>\r\n               <span class="fb-lost-eticket">\r\n                  &nbsp;&mdash;&nbsp;\r\n                  <a href="<?php echo $fast_boat_book_url; ?>\/e-ticket"><strong>Lost your e-Ticket?<\/strong><\/a>\r\n               <\/span>\r\n                     <\/div>\r\n                  <\/div>\r\n               <\/div>\r\n            <\/form>\r\n            <div class="clear"><\/div>\r\n         <\/div>\r\n\r\n         <script type="text\/javascript">\r\n            \/*----------------------------------------------------\r\n             \/* Datepicker untuk booking form\r\n             \/*--------------------------------------------------*\/\r\n            jQuery(document).ready(function($){\r\n               $(function() {\r\n                  $( ".fb-depart-date #departure_date" ).datepicker({\r\n                     dateFormat: "yy-mm-dd",\r\n                     minDate: 0,\r\n                     onClose: function( selectedDate ) {\r\n                        var x = selectedDate === '' ? 0 : selectedDate;\r\n                        $( ".fb-arrival-date #return_date" ).datepicker( "option", "minDate", x );\r\n                     }\r\n                  });\r\n                  $( ".fb-arrival-date #return_date" ).datepicker({\r\n                     dateFormat: "yy-mm-dd",\r\n                     minDate: 0,\r\n                     onClose: function( selectedDate ) {\r\n                        $( ".fb-depart-date #departure_date" ).datepicker( "option", "maxDate", selectedDate );\r\n                     }\r\n                  });\r\n               });\r\n\r\n               $('.fb-arrival-date #route_type').change(function(){\r\n                  if( $(this).is(':checked') ) {\r\n                     $('.fb-arrival-date #return_date_container input').attr('disabled',false);\r\n                     $( "#departure_date" ).datepicker( "option", "maxDate", $( "#return_date").val() );\r\n                     $('#route_type_value').val('return');\r\n                  } else {\r\n                     $('.fb-arrival-date #return_date_container input').attr('disabled',true);\r\n                     $( "#departure_date" ).datepicker( "option", "maxDate", null );\r\n                     $('#route_type_value').val('oneway');\r\n                  }\r\n               });\r\n\r\n            });\r\n         <\/script>\r\n      <\/div>\r\n   <\/div>\r\n\r\n   <?php\r\n}<\/pre>\n
 <\/p>\n
Sama halnya seperti membuat halaman HTML biasa, dapat juga dikombinasikan dengan CSS dan JavaScript.\u00a0Semua script<\/em> dan screenshot<\/em> pada tulisan ini saya kutip langsung dari resource<\/em> giliislandfastboats.com<\/a>.<\/p>\n
Note:<\/strong> Untuk Fastboat System API tidak disediakan untuk publik, informasi lebih lanjut dapat menghubungi LRsoft<\/a> via email<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Kali ini saya akan coba membuat\u00a0Booking Form Widget untuk Fastboat di WordPress, secara konsep sebetulnya…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[57,7],"tags":[143,144],"class_list":["post-642","post","type-post","status-publish","format-standard","hentry","category-programming","category-wordpress","tag-booking-form-widget","tag-fastboat-booking-form"],"yoast_head":"\nMembuat Booking Form Widget di WordPress - Ahmad Zafrullah<\/title>\n<meta name=\"description\" content=\"Bagaimana membuat Fastboat Booking Widget pada WordPress untuk digunakan pada Theme menggunakan Fastboat System API.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/zaf.web.id\/blog\/membuat-booking-form-widget-di-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Membuat Booking Form Widget di WordPress - Ahmad Zafrullah\" \/>\n<meta property=\"og:description\" content=\"Bagaimana membuat Fastboat Booking Widget pada WordPress untuk digunakan pada Theme menggunakan Fastboat System API.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/zaf.web.id\/blog\/membuat-booking-form-widget-di-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Ahmad Zafrullah\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/www.facebook.com\/23Pstars\" \/>\n<meta property=\"article:author\" content=\"http:\/\/www.facebook.com\/23Pstars\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-19T08:34:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-09-22T16:44:19+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/zaf.web.id\/blog\/wp-content\/uploads\/2015\/09\/Screen-Shot-2015-09-17-at-3.19.46-PM1.png\" \/>\n<meta name=\"author\" content=\"Zaf\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@23Pstars\" \/>\n<meta name=\"twitter:site\" content=\"@23Pstars\" \/>\n<meta name=\"twitter:label1\" content=\"Ditulis oleh\" \/>\n\t<meta name=\"twitter:data1\" content=\"Zaf\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/zaf.web.id\\\/blog\\\/membuat-booking-form-widget-di-wordpress\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/zaf.web.id\\\/blog\\\/membuat-booking-form-widget-di-wordpress\\\/\"},\"author\":{\"name\":\"Zaf\",\"@id\":\"https:\\\/\\\/zaf.web.id\\\/blog\\\/#\\\/schema\\\/person\\\/ba4e955d59a1e6a8284857e74b14e5ed\"},\"headline\":\"Membuat Booking Form Widget di WordPress\",\"datePublished\":\"2015-09-19T08:34:13+00:00\",\"dateModified\":\"2015-09-22T16:44:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/zaf.web.id\\\/blog\\\/membuat-booking-form-widget-di-wordpress\\\/\"},\"wordCount\":2217,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/zaf.web.id\\\/blog\\\/#\\\/schema\\\/person\\\/ba4e955d59a1e6a8284857e74b14e5ed\"},\"image\":{\"@id\":\"https:\\\/\\\/zaf.web.id\\\/blog\\\/membuat-booking-form-widget-di-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/zaf.web.id\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/09\\\/Screen-Shot-2015-09-17-at-3.19.46-PM1.png\",\"keywords\":[\"booking form widget\",\"fastboat booking form\"],\"articleSection\":[\"Programming\",\"WordPress\"],\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/zaf.web.id\\\/blog\\\/membuat-booking-form-widget-di-wordpress\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/zaf.web.id\\\/blog\\\/membuat-booking-form-widget-di-wordpress\\\/\",\"url\":\"https:\\\/\\\/zaf.web.id\\\/blog\\\/membuat-booking-form-widget-di-wordpress\\\/\",\"name\":\"Membuat Booking Form Widget di WordPress - Ahmad Zafrullah\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/zaf.web.id\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/zaf.web.id\\\/blog\\\/membuat-booking-form-widget-di-wordpress\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/zaf.web.id\\\/blog\\\/membuat-booking-form-widget-di-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/zaf.web.id\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/09\\\/Screen-Shot-2015-09-17-at-3.19.46-PM1.png\",\"datePublished\":\"2015-09-19T08:34:13+00:00\",\"dateModified\":\"2015-09-22T16:44:19+00:00\",\"description\":\"Bagaimana membuat Fastboat Booking Widget pada WordPress untuk digunakan pada Theme menggunakan Fastboat System API.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/zaf.web.id\\\/blog\\\/membuat-booking-form-widget-di-wordpress\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/zaf.web.id\\\/blog\\\/membuat-booking-form-widget-di-wordpress\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/zaf.web.id\\\/blog\\\/membuat-booking-form-widget-di-wordpress\\\/#primaryimage\",\"url\":\"http:\\\/\\\/zaf.web.id\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/09\\\/Screen-Shot-2015-09-17-at-3.19.46-PM1.png\",\"contentUrl\":\"http:\\\/\\\/zaf.web.id\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/09\\\/Screen-Shot-2015-09-17-at-3.19.46-PM1.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/zaf.web.id\\\/blog\\\/membuat-booking-form-widget-di-wordpress\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/zaf.web.id\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Membuat Booking Form Widget di WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/zaf.web.id\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/zaf.web.id\\\/blog\\\/\",\"name\":\"Ahmad Zafrullah\",\"description\":\"Work to Learn is better than Learn how to Work\",\"publisher\":{\"@id\":\"https:\\\/\\\/zaf.web.id\\\/blog\\\/#\\\/schema\\\/person\\\/ba4e955d59a1e6a8284857e74b14e5ed\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/zaf.web.id\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/zaf.web.id\\\/blog\\\/#\\\/schema\\\/person\\\/ba4e955d59a1e6a8284857e74b14e5ed\",\"name\":\"Zaf\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/i0.wp.com\\\/zaf.web.id\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/zaf_auto_x2.jpeg?fit=300%2C300&ssl=1\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/zaf.web.id\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/zaf_auto_x2.jpeg?fit=300%2C300&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/zaf.web.id\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/zaf_auto_x2.jpeg?fit=300%2C300&ssl=1\",\"width\":300,\"height\":300,\"caption\":\"Zaf\"},\"logo\":{\"@id\":\"https:\\\/\\\/i0.wp.com\\\/zaf.web.id\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/zaf_auto_x2.jpeg?fit=300%2C300&ssl=1\"},\"sameAs\":[\"http:\\\/\\\/zaf.web.id\",\"http:\\\/\\\/www.facebook.com\\\/23Pstars\",\"https:\\\/\\\/x.com\\\/23Pstars\"],\"url\":\"https:\\\/\\\/zaf.web.id\\\/blog\\\/author\\\/zaf\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Membuat Booking Form Widget di WordPress - Ahmad Zafrullah","description":"Bagaimana membuat Fastboat Booking Widget pada WordPress untuk digunakan pada Theme menggunakan Fastboat System API.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/zaf.web.id\/blog\/membuat-booking-form-widget-di-wordpress\/","og_locale":"id_ID","og_type":"article","og_title":"Membuat Booking Form Widget di WordPress - Ahmad Zafrullah","og_description":"Bagaimana membuat Fastboat Booking Widget pada WordPress untuk digunakan pada Theme menggunakan Fastboat System API.","og_url":"https:\/\/zaf.web.id\/blog\/membuat-booking-form-widget-di-wordpress\/","og_site_name":"Ahmad Zafrullah","article_publisher":"http:\/\/www.facebook.com\/23Pstars","article_author":"http:\/\/www.facebook.com\/23Pstars","article_published_time":"2015-09-19T08:34:13+00:00","article_modified_time":"2015-09-22T16:44:19+00:00","og_image":[{"url":"http:\/\/zaf.web.id\/blog\/wp-content\/uploads\/2015\/09\/Screen-Shot-2015-09-17-at-3.19.46-PM1.png","type":"","width":"","height":""}],"author":"Zaf","twitter_card":"summary_large_image","twitter_creator":"@23Pstars","twitter_site":"@23Pstars","twitter_misc":{"Ditulis oleh":"Zaf","Estimasi waktu membaca":"11 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/zaf.web.id\/blog\/membuat-booking-form-widget-di-wordpress\/#article","isPartOf":{"@id":"https:\/\/zaf.web.id\/blog\/membuat-booking-form-widget-di-wordpress\/"},"author":{"name":"Zaf","@id":"https:\/\/zaf.web.id\/blog\/#\/schema\/person\/ba4e955d59a1e6a8284857e74b14e5ed"},"headline":"Membuat Booking Form Widget di WordPress","datePublished":"2015-09-19T08:34:13+00:00","dateModified":"2015-09-22T16:44:19+00:00","mainEntityOfPage":{"@id":"https:\/\/zaf.web.id\/blog\/membuat-booking-form-widget-di-wordpress\/"},"wordCount":2217,"commentCount":0,"publisher":{"@id":"https:\/\/zaf.web.id\/blog\/#\/schema\/person\/ba4e955d59a1e6a8284857e74b14e5ed"},"image":{"@id":"https:\/\/zaf.web.id\/blog\/membuat-booking-form-widget-di-wordpress\/#primaryimage"},"thumbnailUrl":"http:\/\/zaf.web.id\/blog\/wp-content\/uploads\/2015\/09\/Screen-Shot-2015-09-17-at-3.19.46-PM1.png","keywords":["booking form widget","fastboat booking form"],"articleSection":["Programming","WordPress"],"inLanguage":"id","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/zaf.web.id\/blog\/membuat-booking-form-widget-di-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/zaf.web.id\/blog\/membuat-booking-form-widget-di-wordpress\/","url":"https:\/\/zaf.web.id\/blog\/membuat-booking-form-widget-di-wordpress\/","name":"Membuat Booking Form Widget di WordPress - Ahmad Zafrullah","isPartOf":{"@id":"https:\/\/zaf.web.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/zaf.web.id\/blog\/membuat-booking-form-widget-di-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/zaf.web.id\/blog\/membuat-booking-form-widget-di-wordpress\/#primaryimage"},"thumbnailUrl":"http:\/\/zaf.web.id\/blog\/wp-content\/uploads\/2015\/09\/Screen-Shot-2015-09-17-at-3.19.46-PM1.png","datePublished":"2015-09-19T08:34:13+00:00","dateModified":"2015-09-22T16:44:19+00:00","description":"Bagaimana membuat Fastboat Booking Widget pada WordPress untuk digunakan pada Theme menggunakan Fastboat System API.","breadcrumb":{"@id":"https:\/\/zaf.web.id\/blog\/membuat-booking-form-widget-di-wordpress\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/zaf.web.id\/blog\/membuat-booking-form-widget-di-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/zaf.web.id\/blog\/membuat-booking-form-widget-di-wordpress\/#primaryimage","url":"http:\/\/zaf.web.id\/blog\/wp-content\/uploads\/2015\/09\/Screen-Shot-2015-09-17-at-3.19.46-PM1.png","contentUrl":"http:\/\/zaf.web.id\/blog\/wp-content\/uploads\/2015\/09\/Screen-Shot-2015-09-17-at-3.19.46-PM1.png"},{"@type":"BreadcrumbList","@id":"https:\/\/zaf.web.id\/blog\/membuat-booking-form-widget-di-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/zaf.web.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Membuat Booking Form Widget di WordPress"}]},{"@type":"WebSite","@id":"https:\/\/zaf.web.id\/blog\/#website","url":"https:\/\/zaf.web.id\/blog\/","name":"Ahmad Zafrullah","description":"Work to Learn is better than Learn how to Work","publisher":{"@id":"https:\/\/zaf.web.id\/blog\/#\/schema\/person\/ba4e955d59a1e6a8284857e74b14e5ed"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/zaf.web.id\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":["Person","Organization"],"@id":"https:\/\/zaf.web.id\/blog\/#\/schema\/person\/ba4e955d59a1e6a8284857e74b14e5ed","name":"Zaf","image":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/i0.wp.com\/zaf.web.id\/blog\/wp-content\/uploads\/2024\/09\/zaf_auto_x2.jpeg?fit=300%2C300&ssl=1","url":"https:\/\/i0.wp.com\/zaf.web.id\/blog\/wp-content\/uploads\/2024\/09\/zaf_auto_x2.jpeg?fit=300%2C300&ssl=1","contentUrl":"https:\/\/i0.wp.com\/zaf.web.id\/blog\/wp-content\/uploads\/2024\/09\/zaf_auto_x2.jpeg?fit=300%2C300&ssl=1","width":300,"height":300,"caption":"Zaf"},"logo":{"@id":"https:\/\/i0.wp.com\/zaf.web.id\/blog\/wp-content\/uploads\/2024\/09\/zaf_auto_x2.jpeg?fit=300%2C300&ssl=1"},"sameAs":["http:\/\/zaf.web.id","http:\/\/www.facebook.com\/23Pstars","https:\/\/x.com\/23Pstars"],"url":"https:\/\/zaf.web.id\/blog\/author\/zaf\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":374,"url":"https:\/\/zaf.web.id\/blog\/happy-birthday-1st-lrsoft\/","url_meta":{"origin":642,"position":0},"title":"Happy Birthday 1st LRsoft","author":"Zaf","date":"September 11, 2014","format":false,"excerpt":"Sebenarnya saya sangat buruk dalam berkata-kata, memberi sambutan, mengucapkan selamat, berpidato, dan lain-lain semuanya hal yang saya coba hindari. Tapi kali ini saya akan mencoba merangkai beberapa batang kalimat untuk mengucapkan Selamat dan Terima Kasih kepada LRsoft. Loh itu kan perusahaan sendiri? Kok bilang terima kasih? Oh iya hari ini\u2026","rel":"","context":"dalam "Coretan"","block_context":{"text":"Coretan","link":"https:\/\/zaf.web.id\/blog\/category\/coretan\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.lrsoft.org\/images\/lrsoft.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":127,"url":"https:\/\/zaf.web.id\/blog\/menelusuri-template-dan-plugin-yang-digunakan-pada-mesin-wordpress\/","url_meta":{"origin":642,"position":1},"title":"Menelusuri Template dan Plugin yang Digunakan pada Mesin WordPress","author":"Zaf","date":"Desember 28, 2020","format":false,"excerpt":"Hampir sebagian besar website yang online di internet saat ini adalah menggunakan mesin WordPress (WP), termasuk blog saya ini. Ketika kita mengetahui bahwa engine yang digunakan dalam suatu web adalah WP dan menurut kita tampilan atau fitur-fiturnya cukup menarik, tidak jarang kita menjadi penasaran. Template atau plugin apa saja yang\u2026","rel":"","context":"dalam "WordPress"","block_context":{"text":"WordPress","link":"https:\/\/zaf.web.id\/blog\/category\/wordpress\/"},"img":{"alt_text":"View source fkip.unram.ac.id","src":"https:\/\/i0.wp.com\/zaf.web.id\/blog\/wp-content\/uploads\/2020\/12\/Screenshot-from-2021-09-20-14-41-11.png?fit=1028%2C509&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/zaf.web.id\/blog\/wp-content\/uploads\/2020\/12\/Screenshot-from-2021-09-20-14-41-11.png?fit=1028%2C509&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/zaf.web.id\/blog\/wp-content\/uploads\/2020\/12\/Screenshot-from-2021-09-20-14-41-11.png?fit=1028%2C509&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/zaf.web.id\/blog\/wp-content\/uploads\/2020\/12\/Screenshot-from-2021-09-20-14-41-11.png?fit=1028%2C509&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1885,"url":"https:\/\/zaf.web.id\/blog\/code-inception-kemudahan-upgrade-versi-php-di-phpstorm\/","url_meta":{"origin":642,"position":2},"title":"Code Inception: Kemudahan Upgrade Versi PHP di PhpStorm","author":"Zaf","date":"September 26, 2022","format":false,"excerpt":"Upgrade selalu menjadi mimpi buruk bagi seorang developer, tidak lepas juga bagi seorang web engineer. Performance dan security menjadi dua aspek yang sangat dipertimbangkan. Perubahan antar versi di PHP secara teknis dapat diketahui, apa saja fitur-fitur baru dan apa saja fitur-fitur yang sudah deprecated. Namun jika harus memeriksa satu persatu\u2026","rel":"","context":"dalam "Programming"","block_context":{"text":"Programming","link":"https:\/\/zaf.web.id\/blog\/category\/programming\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/zaf.web.id\/blog\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-26-at-18.54.35.png?fit=1200%2C725&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/zaf.web.id\/blog\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-26-at-18.54.35.png?fit=1200%2C725&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/zaf.web.id\/blog\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-26-at-18.54.35.png?fit=1200%2C725&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/zaf.web.id\/blog\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-26-at-18.54.35.png?fit=1200%2C725&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/zaf.web.id\/blog\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-26-at-18.54.35.png?fit=1200%2C725&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":117,"url":"https:\/\/zaf.web.id\/blog\/jebakan-halaman-admin-php\/","url_meta":{"origin":642,"position":3},"title":"Jebakan halaman admin PHP","author":"Zaf","date":"April 14, 2011","format":false,"excerpt":"Mungkin kalo diperhatikan judul diatas memang agak membingungkan, tapi yang saya maksudkan disini adalah membuat sebuah konsep halaman admin untuk menjebak seorang hacker mencoba untuk menyerang site kita melalui halaman admin. Terinspirasi dari teman di sebuah forum yang memasang backdoor disebuah situs dan memproteksi backdoor tersebut menggunakan cara ini ^_^\u2026","rel":"","context":"dalam "Inspirasi"","block_context":{"text":"Inspirasi","link":"https:\/\/zaf.web.id\/blog\/category\/inspirasi\/"},"img":{"alt_text":"Screenshot from 2014-11-24 14:31:42","src":"https:\/\/i0.wp.com\/zaf.web.id\/blog\/wp-content\/uploads\/2011\/04\/Screenshot-from-2014-11-24-143142.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1825,"url":"https:\/\/zaf.web.id\/blog\/domain-local-apache-di-windows-environment\/","url_meta":{"origin":642,"position":4},"title":"Domain Local Apache di Windows Environment","author":"Zaf","date":"Juli 7, 2021","format":false,"excerpt":"Sebelumnya saya pernah menulis tentang bagaimana membuat custom local domain untuk apache pada macOS, kali ini saya akan share konfigurasi yang sama namun pada OS berbasis Windows. Secara umum alurnya tidak jauh berbeda, bahkan software-software yang digunakan pun masih tetap sama. Kembali mengingatkan bahwa dalam konfigurasi ini kita ingin membuat\u2026","rel":"","context":"dalam "Coretan"","block_context":{"text":"Coretan","link":"https:\/\/zaf.web.id\/blog\/category\/coretan\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/zaf.web.id\/blog\/wp-content\/uploads\/2021\/10\/Screenshot-2021-10-06-191701.png?fit=491%2C221&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":84,"url":"https:\/\/zaf.web.id\/blog\/oop-dan-terstruktur\/","url_meta":{"origin":642,"position":5},"title":"OOP dan Terstruktur","author":"Zaf","date":"April 13, 2011","format":false,"excerpt":"Berhubung lagi praktikum pemrograman berorientasi objek, yah sekalian aja post tentang OOP dan terstruktur. :yell: Apa sih bedanya pemrograman yang berorientasi objek dengan pemrograman struktur? Sesuai dengan namanya, pemrograman berorientasi objek (OOP) merupakan pemrograman yang berorientasi kepada objek-objek. Semua data dan fungsi (method) dibungkus menjadi satu kedalam class dan objek.\u2026","rel":"","context":"dalam "Programming"","block_context":{"text":"Programming","link":"https:\/\/zaf.web.id\/blog\/category\/programming\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p4zLnS-am","_links":{"self":[{"href":"https:\/\/zaf.web.id\/blog\/wp-json\/wp\/v2\/posts\/642","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zaf.web.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zaf.web.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zaf.web.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zaf.web.id\/blog\/wp-json\/wp\/v2\/comments?post=642"}],"version-history":[{"count":20,"href":"https:\/\/zaf.web.id\/blog\/wp-json\/wp\/v2\/posts\/642\/revisions"}],"predecessor-version":[{"id":669,"href":"https:\/\/zaf.web.id\/blog\/wp-json\/wp\/v2\/posts\/642\/revisions\/669"}],"wp:attachment":[{"href":"https:\/\/zaf.web.id\/blog\/wp-json\/wp\/v2\/media?parent=642"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zaf.web.id\/blog\/wp-json\/wp\/v2\/categories?post=642"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zaf.web.id\/blog\/wp-json\/wp\/v2\/tags?post=642"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}