Modul Bab 4: Desain Captive Portal Responsive & Branding ISP - Manajemen Hotspot & Billing ISP Cloud RouterOS

Halaman login captive portal MikroTik default sangat sederhana dan tidak mobile-friendly. Di bab ini, kita memodifikasi file template hotspot RouterOS (login.html, alogin.html, status.html, logout.html) dengan CSS Tailwind responsive, form interaktif QRIS modal, banner promo sponsor, dan status koneksi real-time.

graph TD CP[Captive Portal Directory: /hotspot] CP --> L[login.html: Form Login + Pilihan Beli QRIS] CP --> S[status.html: Timer Sisa Kuota & Bandwidth Real-Time] CP --> A[alogin.html: Redirect Otomatis Pasca Autentikasi] CP --> E[errors.txt: Pesan Kesalahan Terjemahan Bahasa Indonesia]

4.1 Variabel Bawaan RouterOS Hotspot #

Template captive portal MikroTik menggunakan sintaks variabel khusus yang digantikan oleh router saat halaman disajikan ke browser:

$(link-login-only): URL POST form login router.
$(username): Nilai username input.
$(error): Pesan error login (misal "user not found" atau "simultaneous session limit reached").
$(uptime): Durasi waktu pemakaian session aktif.
$(bytes-in-nice) / $(bytes-out-nice): Total kuota yang telah dikonsumsi user.

4.2 Walled Garden untuk Pembayaran QRIS #

Agar browser pelanggan yang belum login dapat membuka gambar QRIS dari server payment gateway (misal api.midtrans.com atau app.tripay.co.id), domain gateway wajib didaftarkan di Walled Garden:

ROUTEROS

/ip hotspot walled-garden
add dst-host=*.midtrans.com action=allow comment="Midtrans Gateway"
add dst-host=*.tripay.co.id action=allow comment="Tripay Gateway"
add dst-host=*.whatsapp.net action=allow comment="WhatsApp Notif"