Panduan Penggunaan Plugin Flight Schedules Connector (FSC)

โœˆ๏ธ Apa itu FSC?

FSC adalah plugin WordPress untuk menampilkan jadwal penerbangan real-time (kedatangan & keberangkatan).
Cocok untuk:

  • Website bandara
  • Travel agent
  • Website informasi kota/pariwisata

๐Ÿ› ๏ธ Cara Instalasi

  1. Login ke WordPress Admin
  2. Masuk ke menu Plugins > Add New > Upload Plugin
  3. Pilih file flight-schedules-connector.zip
  4. Klik Install Now โ†’ lalu Activate
  5. Setelah aktif, muncul menu Flight Schedules di sidebar admin

Dependencies

  • PHP โ‰ฅ 7.4
  • WordPress โ‰ฅ 5.8
  • API key dari provider (jika menggunakan data live)

โš™๏ธ Pengaturan Awal

  1. Masuk ke menu Flight Schedules > Settings
  2. Pilih Provider Data (misalnya: OpenSky, AviationStack, dll)
  3. Masukkan API Key jika provider membutuhkannya
  4. Atur opsi lain:
    • Cache Time โ†’ untuk mempercepat loading
    • Theme โ†’ pilih Light/Dark
    • Fullscreen Mode โ†’ aktifkan bila ingin tampilan seperti layar FIDS di bandara
  5. Klik Save Changes

๐Ÿ’ก Jika tidak punya API key, aktifkan opsi Demo Mode untuk melihat contoh data.


๐Ÿ–ฅ๏ธ Menampilkan Jadwal di Website

Ada 2 cara:

Cara 1: Dengan Shortcode

  • Tambahkan shortcode ke halaman/post:
    • [fsc_board airport="CGK" type="arrivals" theme="dark"]
  • Sesuaikan:
    • airport="CGK" โ†’ kode bandara (misal: CGK = Soekarno-Hatta)
    • type="arrivals" โ†’ arrivals (kedatangan), departures (keberangkatan), atau both
    • theme="dark" โ†’ bisa diganti light

Cara 2: Dengan Generator

  1. Masuk ke menu Flight Schedules > Shortcodes & Generator
  2. Pilih Bandara, Jenis Jadwal, Tema
  3. Klik Generate Shortcode
  4. Copy shortcode โ†’ paste ke halaman/post

๐Ÿ“– Penjelasan Tab Settings โ€“ Flight Schedules Connector (FSC)

1. ๐Ÿ›ซ General

Tab untuk pengaturan dasar jadwal penerbangan.

  • Default Airport โ†’ kode bandara utama yang akan dipakai jika shortcode tidak menyebutkan airport. (misalnya CGK = Soekarno-Hatta Jakarta)

  • Default Direction โ†’ arah jadwal default:

    • Arrivals (kedatangan)
    • Departures (keberangkatan)
    • Both (keduanya)
  • Timezone Mode โ†’ mode zona waktu yang dipakai untuk menampilkan jam penerbangan:

    • Airport timezone โ†’ ikuti zona waktu bandara
    • Site timezone โ†’ ikuti pengaturan WordPress
  • Cache TTL (seconds) โ†’ lama waktu data API disimpan (detik). Misalnya 60 berarti data disimpan 1 menit sebelum di-refresh lagi.


2. ๐Ÿ”Œ Connector

Tab untuk memilih sumber data (API provider).

  • Provider โ†’ pilih sumber data: None, OpenSky, AviationStack, AeroDataBox, FlightAware, atau Custom.
  • API Key โ†’ masukkan kunci API (jika provider memerlukan).
  • API Endpoint โ†’ isi jika menggunakan Custom API.

๐Ÿ‘‰ Jika tidak punya API, pilih None lalu aktifkan Demo Mode.


3. ๐Ÿ“Š Data

Tab ini biasanya dipakai untuk data tambahan & seed airports.

  • Seed Airports โ†’ daftar bandara bawaan (plugin sudah include file seed-airports.json).
  • Bisa dipakai untuk memilih airport favorit atau default list saat generate shortcode.
  • Admin bisa menambahkan custom airport bila perlu.

4. ๐ŸŽจ Themes

Tab untuk mengatur tampilan board.

  • Theme Style โ†’ pilih Light atau Dark.
  • Fullscreen Mode โ†’ aktifkan agar tampil memenuhi layar (seperti FIDS di bandara).
  • Font & Layout Options โ†’ beberapa versi plugin juga memberi opsi ukuran font, jarak baris, dsb.

5. ๐Ÿงฉ Modules

Tab ini berisi fitur tambahan yang bisa diaktifkan/nonaktifkan.

Contoh modul (sesuai roadmap plugin):

  • Auto Refresh โ†’ board update otomatis tiap X detik.
  • Search & Filter โ†’ menambahkan kolom pencarian (mis. filter maskapai atau nomor penerbangan).
  • Infinite Scroll / Paging โ†’ load data lebih banyak.
  • Demo Data โ†’ tampilkan contoh jadwal.

6. ๐ŸŽจ Status Colors

Tab untuk mengatur warna status penerbangan.

  • On Time โ†’ misalnya hijau
  • Delayed โ†’ kuning/oranye
  • Canceled โ†’ merah
  • Boarding / Landed โ†’ bisa custom sesuai kebutuhan

๐Ÿ‘‰ Tujuannya agar lebih jelas secara visual bagi pengunjung.


7. ๐Ÿ”‘ License

Tab untuk aktivasi lisensi Envato/CodeCanyon (jika plugin dijual resmi).

  • Purchase Code โ†’ masukkan kode pembelian
  • Check License โ†’ validasi ke server Envato
  • Auto Update โ†’ jika lisensi valid, plugin bisa update otomatis

๐Ÿ“ Ringkasan Sederhana untuk User Non-Teknis

  • General โ†’ atur default airport, arah, timezone, cache
  • Connector โ†’ pilih provider API & masukkan API key
  • Data โ†’ kelola daftar bandara bawaan
  • Themes โ†’ pilih tema tampilan (light/dark/fullscreen)
  • Modules โ†’ aktifkan fitur tambahan (auto refresh, search, dll)
  • Status Colors โ†’ ubah warna status penerbangan
  • License โ†’ aktivasi kode pembelian & update otomatis

๐Ÿ‘€ Contoh Tampilan

  • Light Theme
    (Latar putih, teks gelap, cocok untuk website biasa)

  • Dark Theme (Fullscreen)
    (Latar hitam seperti papan FIDS di bandara)


๐Ÿ“– Panduan Shortcodes & Generator โ€“ Flight Schedules Connector (FSC)

Halaman ini dipakai untuk membuat shortcode otomatis tanpa harus menulis manual.
User hanya perlu memilih opsi โ†’ lihat hasil di Live Preview โ†’ copy shortcode ke halaman/post.


๐Ÿ› ๏ธ Bagian Generator (kiri)

1. Airport

Masukkan kode bandara (IATA/ICAO).
Contoh:

  • CGK = Soekarno-Hatta Jakarta
  • DPS = Ngurah Rai Bali

๐Ÿ‘‰ Jika kosong, akan pakai Default Airport dari tab Settings.


2. Template

Pilih gaya tampilan jadwal:

  • Table โ†’ bentuk tabel klasik (seperti papan FIDS)
  • List โ†’ daftar vertikal
  • Cards โ†’ setiap penerbangan tampil dalam kartu
  • Compact โ†’ tampilan ringkas, hemat ruang
  • Mobile Card / Panel โ†’ khusus untuk tampilan ponsel

3. Display From/To As

Pilih bagaimana rute bandara ditampilkan:

  • Code (IATA/ICAO) โ†’ contoh: CGK โ€“ SIN
  • Full Name โ†’ contoh: Soekarno-Hatta โ†’ Changi
  • City Name โ†’ contoh: Jakarta โ†’ Singapore

4. Direction

Tentukan jenis jadwal:

  • Arrivals โ†’ kedatangan
  • Departures โ†’ keberangkatan
  • Both โ†’ tampilkan keduanya

5. Theme

Pilih tema tampilan:

  • Light โ†’ latar putih (cocok untuk website biasa)
  • Dark โ†’ latar hitam (mirip papan bandara)

6. Timezone Mode

Pilih cara menampilkan waktu penerbangan:

  • Airport timezone โ†’ sesuai zona waktu bandara
  • Site timezone โ†’ sesuai pengaturan WordPress

7. Auto refresh (s)

Berapa detik sekali data otomatis diperbarui.

  • 0 = tidak auto-refresh
  • 30 = refresh setiap 30 detik

๐Ÿ‘‰ Berguna untuk layar TV/monitor publik.


8. Page size

Jumlah baris penerbangan yang ditampilkan per halaman.
Contoh:

  • 25 โ†’ tampil 25 flight per halaman
  • Bisa kombinasikan dengan infinite scroll/pagination

9. Options

Beberapa fitur tambahan:

  • Show Fullscreen button โ†’ tampilkan tombol fullscreen di board
  • Start in Fullscreen โ†’ board langsung terbuka fullscreen
  • Show search โ†’ tampilkan kolom pencarian/filter

10. Custom CSS class

Untuk user/developer yang ingin menambahkan class CSS sendiri agar bisa custom styling.
Contoh: fsc-custom-blue


๐Ÿ‘€ Bagian Live Preview (kanan)

  • Menampilkan hasil jadwal sesuai setting di kiri.
  • Bisa dilihat langsung tanpa perlu reload halaman WordPress.
  • Jika cocok, tinggal klik tombol Generate Shortcode (biasanya di bawah form).
  • Copy hasil shortcode โ†’ paste ke halaman/post.

๐Ÿš€ Cara Menggunakan Shortcodes & Generator

  1. Buka menu Flight Schedules > Shortcodes & Generator
  2. Pilih Airport, Template, Direction, Theme, dll.
  3. Lihat hasil di Live Preview
  4. Jika sudah sesuai โ†’ klik Generate Shortcode
  5. Copy kode shortcode โ†’ paste ke halaman/post/widget
  6. Klik Update/Publish โ†’ jadwal penerbangan tampil di website

๐Ÿ“Œ Contoh Shortcode yang Dihasilkan

[fsc_board airport="CGK" type="both" theme="dark" template="table" auto_refresh="30" page_size="25" fullscreen="true" search="true"]

๐Ÿ‘‰ Shortcode di atas akan menampilkan:

  • Bandara CGK
  • Kedatangan & keberangkatan
  • Tema Dark
  • Tampilan Table
  • Auto refresh 30 detik
  • 25 flight per halaman
  • Ada tombol fullscreen + kolom search

๐Ÿ“‘ Cheat Sheet โ€“ Shortcodes & Generator (FSC)

Fitur Fungsi Contoh Pengaturan
Airport Tentukan bandara asal data jadwal. CGK = Soekarno-Hatta Jakarta
DPS = Ngurah Rai Bali
Template Pilih gaya tampilan jadwal. Table = tabel klasik
Cards = tampilan kartu
Compact = versi ringkas
Display From/To As Tentukan format rute bandara. Code = CGK โ†’ SIN
Full Name = Soekarno-Hatta โ†’ Changi
City Name = Jakarta โ†’ Singapore
Direction Pilih arah jadwal. Arrivals = kedatangan
Departures = keberangkatan
Both = keduanya
Theme Pilih tema tampilan. Light = latar putih
Dark = latar hitam (FIDS style)
Timezone Mode Tentukan zona waktu yang dipakai. Airport timezone = sesuai bandara
Site timezone = sesuai WordPress
Auto Refresh (s) Atur jeda pembaruan otomatis. 0 = tidak refresh
30 = refresh tiap 30 detik
Page Size Jumlah penerbangan per halaman. 25 flight per halaman
Options Aktifkan fitur tambahan. โœ… Show Fullscreen button
โœ… Start in Fullscreen
โœ… Show Search
Custom CSS class Tambahkan class CSS untuk styling khusus. fsc-custom-blue โ†’ jadwal dengan tema biru custom

โ“ FAQ โ€“ Flight Schedules Connector (FSC)

๐Ÿ”ง Instalasi & Aktivasi

Q: Bagaimana cara menginstal plugin FSC?
๐Ÿ‘‰ Masuk ke WordPress Admin > Plugins > Add New > Upload Plugin โ†’ pilih file .zip plugin โ†’ klik Install Now โ†’ Activate.

Q: Apakah FSC bisa dipakai di semua versi WordPress?
๐Ÿ‘‰ Minimal WordPress 5.8 dan PHP 7.4. Disarankan pakai versi terbaru agar lebih stabil.

Q: Apakah plugin ini mendukung multisite?
๐Ÿ‘‰ Ya, FSC bisa dipakai di WordPress Multisite.


๐Ÿ“ก Data & Provider

Q: Dari mana data jadwal penerbangan diambil?
๐Ÿ‘‰ FSC mendukung beberapa provider:

Q: Apakah saya butuh API Key?
๐Ÿ‘‰ Ya, untuk sebagian besar provider (kecuali Demo Mode atau OpenSky gratis).

Q: Kalau saya tidak punya API Key, apa masih bisa dipakai?
๐Ÿ‘‰ Bisa. Aktifkan Demo Mode (Connector = None + Demo Data ON) โ†’ plugin akan menampilkan jadwal contoh (sample flights).


โš™๏ธ Pengaturan

Q: Apa fungsi tab General di Settings?
๐Ÿ‘‰ Mengatur default bandara, arah jadwal (Arrivals/Departures), timezone, dan cache.

Q: Bagaimana cara mengganti warna status (On Time, Delayed, dll.)?
๐Ÿ‘‰ Masuk ke Settings > Status Colors โ†’ pilih warna sesuai kebutuhan.

Q: Bagaimana cara menampilkan jadwal lebih dari satu bandara?
๐Ÿ‘‰ Gunakan beberapa shortcode dengan airport="XXX" berbeda di halaman yang sama atau berbeda.

Q: Bagaimana agar waktu penerbangan sesuai dengan waktu lokal bandara?
๐Ÿ‘‰ Pilih Timezone Mode = Airport timezone di Settings atau Generator.


๐Ÿ–ฅ๏ธ Shortcode & Generator

Q: Bagaimana cara membuat shortcode dengan mudah?
๐Ÿ‘‰ Masuk ke menu FSC > Shortcodes & Generator โ†’ pilih bandara, arah, tema, dll. โ†’ lihat hasil di Live Preview โ†’ klik Generate Shortcode โ†’ copy ke halaman/post.

Q: Apa perbedaan Template Table, List, Cards, Compact, Panel?
๐Ÿ‘‰ Itu adalah pilihan gaya tampilan jadwal. Table mirip papan bandara klasik, Cards lebih modern, Compact hemat ruang, Panel cocok untuk mobile.

Q: Bagaimana cara menampilkan tombol fullscreen di jadwal?
๐Ÿ‘‰ Centang opsi Show Fullscreen Button di Generator.

Q: Bisa tidak menambahkan kolom pencarian di jadwal?
๐Ÿ‘‰ Ya, aktifkan Show Search di Generator.


โšก Performa

Q: Apa fungsi Cache TTL?
๐Ÿ‘‰ Menentukan berapa lama data API disimpan sebelum di-refresh. Misalnya 60 detik berarti data baru diambil dari API setelah 1 menit.

Q: Bagaimana cara agar jadwal selalu update otomatis?
๐Ÿ‘‰ Atur Auto Refresh (detik) di Generator, misalnya 30 โ†’ board akan refresh tiap 30 detik.

Q: Kenapa data tidak muncul padahal sudah isi API key?
๐Ÿ‘‰ Cek:

  1. API Key valid dan aktif
  2. Kuota API belum habis (beberapa provider ada limit harian)
  3. Pastikan permalink WordPress tidak Plain (harus Post name/Pretty permalink)

๐ŸŽจ Tampilan

Q: Bagaimana cara mengubah tema tampilan?
๐Ÿ‘‰ Masuk ke Settings > Themes atau atur lewat Generator (Light / Dark).

Q: Bisa tampil fullscreen otomatis (misalnya di layar TV bandara)?
๐Ÿ‘‰ Ya, centang opsi Start in Fullscreen di Generator.

Q: Bisa menambahkan style khusus sesuai branding website?
๐Ÿ‘‰ Bisa. Gunakan kolom Custom CSS class di Generator untuk menambahkan class CSS sendiri.


๐Ÿ”‘ Lisensi & Update

Q: Bagaimana cara aktivasi plugin setelah beli?
๐Ÿ‘‰ Masuk ke Settings > License โ†’ masukkan Purchase Code dari Envato/CodeCanyon.

Q: Apakah plugin bisa auto-update?
๐Ÿ‘‰ Ya, jika lisensi sudah valid, update otomatis tersedia dari dashboard WordPress.

Q: Bagaimana kalau lisensi expired?
๐Ÿ‘‰ Plugin tetap jalan, tapi tidak bisa update otomatis & tidak dapat support resmi.


๐Ÿงช Troubleshooting

Q: Jadwal tidak tampil, hanya kosong?
๐Ÿ‘‰ Cek provider & API key. Jika tetap kosong, coba aktifkan Demo Mode untuk memastikan plugin bekerja.

Q: Preview di Generator gagal (No REST/AJAX available)?
๐Ÿ‘‰ Pastikan permalink WordPress tidak Plain dan endpoint /wp-json/ bisa diakses.

Q: Kenapa status penerbangan ada yang tidak sesuai?
๐Ÿ‘‰ Data sepenuhnya berasal dari provider API, plugin hanya menampilkan.

Q: Bisa dipakai untuk jadwal kereta / kapal juga?
๐Ÿ‘‰ Secara default hanya penerbangan. Tapi jika punya Custom API dengan format mirip, bisa diintegrasikan.


๐ŸŽฏ Fitur Utama

โœ… Support banyak provider API
โœ… Pilihan tema (Light/Dark/Fullscreen)
โœ… Auto Refresh & Search Filter
โœ… Generator shortcode tanpa coding
โœ… Demo Mode (untuk test tanpa API)


๐Ÿš€ Siap Dipakai!

Setelah mengikuti langkah di atas, website kamu akan menampilkan jadwal penerbangan langsung dengan tampilan profesional.