Kenapa login page Hotspot Mikrotik tidak muncul?

Biasanya DNS Name tidak diset, atau perangkat menggunakan DNS manual sehingga captive portal tidak redirect.

Bagaimana cara mengubah tampilan login Mikrotik?

Download folder hotspot, edit file login.html beserta CSS, lalu upload kembali ke Mikrotik.

Apakah login page Mikrotik bisa responsive?

Bisa, cukup menambahkan meta viewport dan menggunakan CSS fleksibel seperti max-width dan padding.

Home Mikrotik

Cara Membuat Login Page Hotspot Mikrotik Keren + Responsive

Yosa

November 17, 2025

---

Cara Membuat Login Page Hotspot Mikrotik Keren + Responsive (Panduan Lengkap Berbasis Pengalaman Guru TKJ)

Dalam praktik pembelajaran TKJ, saya sering membimbing siswa membuat login page Hotspot Mikrotik yang tampilannya lebih modern dan responsive. Tujuannya agar portal login yang muncul saat pengguna konek WiFi terlihat lebih profesional dan mudah digunakan. Pada artikel ini, saya membagikan langkah-langkah lengkap berdasarkan pengalaman di lab menggunakan router Mikrotik hAP lite dan RB951Ui.

1. Apa yang Dibutuhkan?

Router Mikrotik (RB951Ui, hAP lite, atau seri lain yang mendukung Hotspot)
Winbox
File HTML/CSS responsive
Browser untuk preview

Catatan pengalaman: Saya selalu minta siswa membuat folder khusus untuk file login page agar tidak tercampur dengan data lab lain.

2. Mengaktifkan Hotspot di Mikrotik

Buka Winbox → Login via MAC Address
Masuk menu IP → Hotspot → Hotspot Setup
Pilih interface (biasanya ether2 atau wlan1)
Isi range IP sesuai kebutuhan lab
Buat user: admin / bebas

Pengalaman di kelas: Bagian paling sering salah adalah pemilihan interface. Banyak siswa tidak sengaja memilih ether1 (WAN) sehingga hotspot tidak muncul.

3. Mendownload Template Login Page Default

Agar kita bisa mengedit tampilan, download dulu file login bawaan Mikrotik:

Files → hotspot → klik kanan → Download

Di dalam folder tersebut ada file seperti login.html, alogin.html, status.html, dan style bawaan Mikrotik.

4. Mengganti Login Page Dengan Versi Modern + Responsive

4.1 Struktur Dasar login.html

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body { font-family: Arial; background:#f3f4f6; }
    .box { max-width:350px; margin:auto; margin-top:90px; background:white; padding:25px; border-radius:10px; }
    input { width:100%; padding:12px; border-radius:8px; border:1px solid #ccc; margin-bottom:12px; }
    button { width:100%; padding:12px; border:none; border-radius:8px; background:#2563eb; color:white; font-size:16px; }
  </style>
</head>

<body>
  <div class="box">
    <h2 style="text-align:center">WiFi Login</h2>
    <form method="post" action="$(link-login-only)">
      <input type="text" name="username" placeholder="Username">
      <input type="password" name="password" placeholder="Password">
      <button type="submit">Login</button>
    </form>
  </div>
</body>
</html>

Template di atas sudah responsive dan rapi di HP.

4.2 Upload ke Mikrotik

Files → hotspot → drag & drop semua file baru login page

Jika muncul popup “overwrite file?”, pilih Yes.

5. Testing Login Page

Hubungkan HP/laptop ke WiFi Mikrotik
Buka browser
Portal login otomatis muncul

Tips guru TKJ: Jika portal tidak muncul, siswa biasanya lupa memberi DNS Name saat Hotspot Setup.

6. Masalah Umum dan Solusinya

✔ Login page tidak muncul otomatis

DNS Name tidak diset saat setup Hotspot.

✔ Tampilan berantakan di HP

Tidak ada meta viewport atau style CSS terlalu besar.

✔ Gambar tidak tampil

File gambar belum diupload ke folder "hotspot".

✔ Tidak bisa login

Karena file form action diubah sehingga tidak memanggil variabel $(link-login-only).

Kesimpulan

Dengan template HTML responsive dan sedikit modifikasi CSS, login page Hotspot Mikrotik bisa terlihat jauh lebih modern dan profesional. Panduan ini cocok untuk pembelajaran TKJ maupun kebutuhan jaringan sekolah, kampus, atau cafe. Setelah memahami konsep dasar ini, siswa bisa membuat tampilan login page yang lebih kreatif.

Artikel Lanjutan

Mikrotik