Juanda Airport Free WiFi & Dynamic CMS

Konteks & Masalah

Infrastruktur captive portal di bandara internasional berkapasitas jutaan penumpang menghadapi batasan teknis dan sistem operasi yang sangat ketat:

Pembaruan Statis Manual: Halaman login captive portal tradisional tersimpan langsung di flash storage MikroTik RouterOS. Setiap perubahan pengumuman operasional penerbangan, greeting hari raya, atau materi iklan tenant komersial mengharuskan teknisi jaringan melakukan upload ulang file HTML secara manual via Winbox atau FTP.
Kerapuhan CNA (Captive Network Assistant) Browser: Browser bawaan pendeteksi captive portal di iOS (Apple CNA) dan Android sangat sensitif. Penggunaan metode 1-tap trial URL sederhana (username=T-$(mac-esc)) sering kali memicu captive refresh loop atau session timeout saat batas trial terlewati, menyebabkan penumpang terjebak tanpa koneksi internet.
Penurunan Rasio Impresi Pasca-Login (Post-Auth Drop-off): Pada mayoritas perangkat seluler modern, sistem operasi otomatis langsung menutup jendela CNA seketika setelah mendeteksi respons 204 No Content ke server verifikasi internet (seperti captive.apple.com atau connectivitycheck.gstatic.com). Akibatnya, materi promosi tenant yang dipasang di halaman sukses (connected) tidak pernah sempat dilihat oleh penumpang.
Restriksi Bandwidth Walled Garden: Sebelum penumpang berhasil terotentikasi, seluruh lalu lintas data berada dalam batasan Walled Garden yang dibatasi kecepatannya. Aset grafis beresolusi tinggi mentah (2.6MB+) menyebabkan halaman captive portal lambat termuat atau gagal sebelum tombol login sempat ditekan.

Solusi UX & Arsitektur Sistem

Untuk menyelesaikan kendala-kendala tersebut tanpa mengorbankan reliabilitas jaringan bandara, kami merancang arsitektur terintegrasi yang menjembatani CMS cloud modern dengan controller RouterOS di lapangan:

1. Dual-Tier Hybrid Architecture (Edge RouterOS + Cloud Laravel 13)

Arsitektur dirancang dengan prinsip desentralisasi yang tangguh:

Central Campaign Engine: Aplikasi Laravel 13 bertindak sebagai single source of truth untuk seluruh aset kampanye, relasi media multi-slot (campaign_media), dan parameter lokasi bandara melalui endpoint ringan GET /api/portal/campaign?loc=airport-demo.
Edge Fetch-First Script: Portal di MikroTik (campaign.js) mengeksekusi pemanggilan API asinkron dengan batas waktu ketat menggunakan AbortController (1500ms). Bila CMS merespons, hero banner dan slider promosi termuat secara dinamis. Jika CMS mengalami gangguan atau timeout, sistem secara otomatis dan mulus beralih ke pre-bundled static campaign tanpa memunculkan error bagi penumpang.

2. Seamless HTTP-CHAP Authentication with Client-Side MD5 (CNA Loop Bypass)

Kami mengganti mekanisme GET trial link konvensional dengan implementasi formulir otentikasi HTTP-CHAP berbasis POST langsung ke kernel MikroTik:

<form method="post" action="$(link-login-only)" data-hotspot-login onsubmit="return prepareLogin(this)">
    <input type="hidden" name="username" value="portal-access">
    <input type="hidden" name="password" value="y0miOQPankXDIM5Y48PPekPp">
    <input type="hidden" name="dst" value="$(link-orig)">
    <button class="cta" type="submit">Hubungkan ke WiFi</button>
</form>

Saat penumpang menekan tombol “Hubungkan ke WiFi”, skrip md5.js secara otomatis menghitung hash otentikasi di sisi klien: $$\text{Response} = \text{hexMD5}(\text{$(chap-id)} + \text{password} + \text{$(chap-challenge)})$$

Pola ini mengeliminasi ketergantungan pada mode trial RouterOS yang rawan loop, mencegah error race condition pada browser CNA, sekaligus mempertahankan pengalaman satu klik tanpa mengharuskan penumpang mengetikkan kredensial secara manual.

3. Dual Standard Compliance: WISPr 1.0 XML Gateway & RFC 8908 Captive API

Untuk mendukung ekosistem perangkat global yang heterogen:

WISPr 1.0 XML Gateway: Mengintegrasikan skema XML resmi (WISPAccessGatewayParam.xsd, xml/alogin.html, xml/login.html) untuk memfasilitasi integrasi seamless dengan mitra roaming seluler dan asisten konektivitas internasional.
RFC 8908 / RFC 8910 Captive Portal API: Menyediakan endpoint deklaratif api.json di RouterOS yang mengembalikan metadata status sesi secara terstruktur:

{
   "captive": false,
   "user-portal-url": "http://10.5.50.1/login",
   "seconds-remaining": 1800,
   "can-extend-session": true
}

Standar ini memungkinkan perangkat modern (iOS 14+, Android 11+) membaca sisa waktu kuota penumpang secara native tanpa membebani router dengan polling berulang.

4. Strategi “Portal-First” & Multi-Media Carousel Slider UX

Menjawab kendala penutupan otomatis jendela CNA oleh sistem operasi, kami memindahkan penayangan kampanye pemasaran dari halaman akhir ke Portal-First Overlay:

Materi promosi tenant, diskon lounge, dan greeting hari raya disajikan langsung saat portal terbuka sebelum atau saat penumpang melakukan proses koneksi.
Dilengkapi dengan multi-media carousel slider cerdas yang mendukung gambar banner resolusi tinggi maupun auto-looping video, navigasi swipe touch, indikator dot, dan penempatan bottom-sheet adaptif untuk layar smartphone.
Dengan reposisi ini, tingkat keterlihatan promosi (impression rate) tenant bandara melonjak mendekati 100%.

5. Optimasi Aset Pre-Authentication WebP (>90% Weight Reduction)

Untuk menjamin kecepatan render di dalam bandwidth Walled Garden yang terbatas:

Seluruh aset grafis latar belakang terminal dan banner promosi dikonversi ke format modern WebP dengan optimasi lossy-lossless hybrid.
Berat aset utama berhasil dipangkas dari 2.63 MB (PNG) menjadi hanya 137 KB (WebP)—reduksi lebih dari 90%.
Time-to-Interactive (TTI) portal di access point yang padat penumpang turun drastis dari ~3.8 detik menjadi <400 ms.

6. Paket Rilis Pilot Terminal 2 (T2) & Hotspot Preview Server

Dedicated T2 Pilot Package (hotspot-cmsv2): Seluruh arsitektur dikompilasi menjadi satu paket rilis terisolasi khusus area concourse domestik dan internasional Terminal 2 Bandara Juanda.
Offline Hotspot Preview Server: Lingkungan preview lokal yang mensimulasikan penggantian token variabel MikroTik ($(link-login-only), $(chap-id), $(link-orig)), memungkinkan tim pengembang dan desainer menguji seluruh alur interaksi secara deterministik sebelum didistribusikan ke router fisik.

Hasil & Dampak Bisnis

Ketersediaan Login 100%: Zero-downtime onboarding dengan eliminasi total terhadap masalah loop CNA yang sebelumnya sering dikeluhkan penumpang.
Peningkatan Impresi Kampanye: Format portal-first memastikan seluruh penumpang melihat penawaran komersial tenant bandara sebelum sesi internet aktif.
Efisiensi Bandwidth Pra-Otentikasi: Penghematan payload >90% mempercepat proses onboarding penumpang di terminal yang padat.
Kesiapan Standar Global: Kompatibel penuh dengan standar industri telekomunikasi (WISPr 1.0 & IETF RFC 8908).
Teruji di Lapangan: Sukses diuji coba dan diverifikasi pada infrastruktur aktif MikroTik RouterOS Terminal 2 Bandara Internasional Juanda.