Template Login Hotspot Mikrotik: Cara Pasang & Edit

Template login hotspot Mikrotik adalah kumpulan file HTML yang menentukan tampilan halaman login — layar yang muncul begitu pengguna terhubung ke WiFi Anda dan mencoba membuka situs. Halaman ini satu-satunya tampilan yang pasti dilihat setiap pengguna hotspot, entah di kafe, kos, sekolah, masjid, atau RT/RW Net. Tampilan bawaan RouterOS berupa kotak putih polos tanpa logo, jadi wajar kalau banyak admin ingin menggantinya.

Ringkasnya: unggah folder template ke menu Files di Winbox, lalu arahkan IP → Hotspot → Server Profiles → tab General → HTML Directory ke folder tersebut. Halaman login langsung berganti tanpa perlu me-reboot router, dan template bawaan tetap utuh sebagai cadangan.

Apa Itu Template Login Hotspot Mikrotik?

Saat sebuah perangkat terhubung ke hotspot, Mikrotik belum mengizinkannya keluar ke internet. Router menahan lalu lintas itu lalu mengalihkan permintaan HTTP pertama ke halaman login miliknya sendiri — mekanisme yang umum disebut captive portal. Halaman yang tampil itulah login.html, yang di kalangan admin lebih sering disebut login page Mikrotik.

Setelah pengguna mengisi username dan password, form mengirim data kembali ke router. Kalau kredensial cocok dengan data di IP → Hotspot → Users, router membuka akses dan perangkat baru bisa berselancar.

Karena template hanyalah file HTML biasa, Anda bebas mengubah logo, warna, font, dan tata letaknya memakai editor teks. Yang membedakannya dari halaman web biasa: ada variabel khusus RouterOS di dalamnya yang diterjemahkan router saat halaman dikirim ke pengguna.

Panduan ini fokus pada desain dan pemasangan halaman login. Kalau hotspot Anda belum berjalan sama sekali, siapkan dulu lewat panduan cara setting hotspot Mikrotik, baru kembali ke sini.

Isi Folder hotspot: File yang Menyusun Halaman Login

Inilah bagian yang paling sering dilewati: folder hotspot tidak hanya berisi login.html. RouterOS menaruh satu set servlet page di sana, dan sebagian punya tugas yang tidak terlihat sampai terjadi masalah.

Template pihak ketiga umumnya mengganti login.html, alogin.html, dan status.html, lalu menambahkan folder img atau css sendiri. Selama file lain tetap ada, hotspot berjalan normal.

Persiapan Sebelum Mengganti Template

Siapkan tiga hal berikut supaya proses tidak tersendat di tengah jalan:

• Winbox dan akses admin ke RouterOS. Kalau belum terbiasa, baca dulu cara setting Mikrotik dengan Winbox.
• Hotspot yang sudah aktif dan bisa dipakai login memakai template bawaan.
• Editor teks — Notepad++ atau VS Code. Word atau TextEdit berisiko menyisipkan format yang merusak HTML.

Ukuran storage juga perlu dilihat. RouterOS kelas RB941 atau hAP lite hanya punya sisa beberapa MB, sementara template dengan foto latar beresolusi tinggi bisa menghabiskannya. Cek kapasitas di System → Resources, kolom Free HDD Space.

1. Cadangkan Template Bawaan Dulu

Sebelum menyentuh apa pun, amankan yang asli. Buka Files di Winbox, blok seluruh isi folder hotspot, lalu tarik ke desktop komputer Anda. Salinan ini yang menyelamatkan Anda kalau template baru ternyata bermasalah.

Cara yang lebih rapi: buat cadangan konfigurasi lewat Files → Backup. File .backup menyimpan setting hotspot sekaligus, bukan hanya halaman HTML-nya.

2. Siapkan atau Unduh Template

Ada dua jalur. Pertama, mengedit sendiri template bawaan — cocok kalau Anda hanya ingin mengganti logo dan warna. Kedua, memakai template siap pakai yang dibuat orang lain, lalu menyesuaikan identitasnya.

Kalau memilih template siap pakai, perhatikan tiga hal:

• Ukuran file. Template dengan video latar atau foto 2 MB akan lambat dibuka di HP pengguna, padahal saat itu mereka belum punya akses internet — semua aset harus dilayani router.
• Responsif. Mayoritas pengguna hotspot membuka halaman login dari ponsel, bukan laptop.
• Kelengkapan variabel. Buka login.html-nya dengan editor teks dan pastikan masih ada $(link-login-only) di dalam form.

Ekstrak arsip ZIP-nya lebih dulu di komputer. RouterOS tidak mengekstrak file terkompresi dari menu Files.

3. Upload Template ke Menu Files

Buka Files di Winbox, lalu tarik folder template hasil ekstrak ke jendela tersebut. Winbox mengunggahnya lewat FTP, jadi pastikan layanan FTP di IP → Services tidak dinonaktifkan.

Beri nama folder yang jelas, misalnya hotspot-kafe, dan biarkan folder hotspot bawaan apa adanya. Menaruh template di folder terpisah membuat Anda bisa kembali ke tampilan lama hanya dengan mengganti satu isian — tanpa mengunggah ulang apa pun.

Kalau unggahan gagal di tengah jalan, biasanya penyebabnya storage penuh atau koneksi Winbox memakai MAC address — beralihlah ke koneksi IP untuk transfer yang lebih stabil.

4. Arahkan Server Profile ke Folder Template

Ini langkah yang paling sering hilang dari tutorial lain, padahal tanpa langkah ini halaman login tidak akan berubah sedikit pun.

1. Buka IP → Hotspot, pindah ke tab Server Profiles.
2. Klik dua kali profil yang dipakai server hotspot Anda (bawaannya bernama hsprof1).
3. Di tab General, temukan isian HTML Directory.
4. Ganti nilainya dari hotspot menjadi nama folder template Anda, misalnya hotspot-kafe.
5. Klik Apply, lalu OK.

Padanan perintahnya di terminal RouterOS:

/ip hotspot profile set hsprof1 html-directory=hotspot-kafe

Nilai bawaan isian ini memang hotspot — itulah sebabnya mengedit login.html di folder bawaan juga berhasil mengubah tampilan. Namun begitu Anda mengarahkannya ke folder sendiri, template asli tetap tersimpan sebagai jaring pengaman.

5. Edit Logo, Warna, dan Nama di login.html

Buka login.html dengan editor teks. Bagian yang aman diubah adalah teks, gambar, dan CSS:

<img src="img/logo.png" alt="Logo" width="120">
<h1>WiFi Kopi Senja</h1>

Untuk mengganti logo, unggah berkas gambar ke folder template (misalnya hotspot-kafe/img/logo.png), lalu tunjuk lewat path relatif seperti contoh di atas. Path absolut ke internet tidak akan tampil, sebab pengguna belum punya akses keluar saat halaman login dibuka.

Warna diatur lewat CSS di dalam file yang sama atau di berkas .css terpisah. Simpan hasil edit, lalu tarik kembali file tersebut ke folder yang sama di menu Files untuk menimpanya.

6. Uji Halaman Login dari Perangkat Pengguna

Uji dari ponsel yang belum pernah login, bukan dari laptop admin yang sudah di-bypass. Matikan data seluler agar ponsel benar-benar memakai hotspot, sambungkan ke WiFi, lalu buka situs berawalan http:// — bukan HTTPS, karena situs HTTPS sering gagal dialihkan ke halaman login.

Kalau tampilan lama masih muncul, hapus cache browser atau coba mode penyamaran. Setelah tampilan baru muncul, lakukan satu login sungguhan sampai berhasil masuk internet. Tampilan yang cantik tidak berarti apa-apa kalau tombol loginnya tidak berfungsi.

Untuk perangkat yang memang tidak ingin dipaksa login — printer, CCTV, atau laptop kasir — atur pengecualiannya lewat login hotspot tanpa autentikasi.

Variabel Mikrotik yang Tidak Boleh Dihapus

Di dalam login.html ada penanda berbentuk $(nama-variabel). Router mengganti penanda itu dengan nilai sebenarnya sebelum halaman dikirim ke pengguna. Inilah pembeda template hotspot dari halaman HTML biasa — dan penyebab tersering template terlihat normal tapi tidak bisa dipakai login.

Dua variabel CHAP itu berpasangan dengan md5.js. Setelan bawaan hotspot memakai metode HTTP-CHAP, yang berarti password di-hash di sisi browser sebelum dikirim — hasilnya dari MD5 atas gabungan chap-id, password, dan chap-challenge. Fungsi doLogin() yang memanggil md5.js harus dijalankan sebelum form dikirim; kalau tidak, login CHAP gagal.

Metode login diatur di IP → Hotspot → Server Profiles → tab Login. Selain http-chap, tersedia http-pap, cookie, https, mac, mac-cookie, dan trial. Kalau Anda memilih http-pap, password dikirim apa adanya tanpa enkripsi — pilihan yang hanya masuk akal di jaringan uji coba, bukan hotspot publik.

Kesalahan Umum Saat Mengganti Template & Solusinya

Urutan pengecekan yang menghemat waktu: pastikan dulu HTML Directory benar, baru periksa isi file. Mayoritas keluhan "template tidak berubah" berhenti di langkah pertama.

Download Template Login Mikrotik Gratis: Cara Memilih yang Layak

Banyak pencarian bermuara pada kumpulan template siap unduh — "keren", "responsive", "ringan", "gratis". Masalahnya, koleksi semacam itu jarang menjelaskan apa yang sebenarnya Anda unduh. Empat saringan ini memisahkan template yang layak pasang dari yang menyusahkan nanti:

Soal "ringan" sering diremehkan. Semua aset halaman login — gambar, font, CSS — dilayani oleh router, bukan internet, karena pengguna belum diizinkan keluar. Template dengan foto latar 2 MB berarti router kecil seperti RB941 harus mengirim 2 MB ke setiap perangkat yang baru menyambung. Font dari Google Fonts pun gagal termuat dengan alasan yang sama; template yang baik menyertakan fontnya sendiri atau memakai font sistem.

Untuk sumbernya, utamakan yang terbuka isinya — repositori publik seperti template hotspot Mikhmon di GitHub bisa Anda periksa file per file sebelum diunggah. Hindari template dari sumber yang tidak jelas asalnya. Halaman login berisi JavaScript yang dieksekusi di perangkat pengguna, dan Anda memasangnya di router yang menangani seluruh lalu lintas jaringan. Sempatkan membuka file HTML-nya dengan editor teks — kalau ada skrip yang memanggil alamat asing, tinggalkan.

Rujukan paling akurat untuk semua variabel dan nama file tetap dokumentasi Hotspot customisation MikroTik.

Pertanyaan yang Sering Diajukan

Apakah mengganti template login hotspot perlu reboot router?

Tidak. Begitu Anda menekan Apply pada isian HTML Directory, halaman login berikutnya sudah memakai template baru. Kalau tampilan lama masih muncul, itu cache browser di perangkat pengguna, bukan router yang belum menerapkan perubahan.

Kenapa template sudah diunggah tapi tampilan tidak berubah?

Penyebab paling sering adalah HTML Directory di Server Profiles masih menunjuk folder hotspot bawaan, sementara file baru Anda ada di folder lain. Periksa IP → Hotspot → Server Profiles → General.

Kenapa tombol login tidak berfungsi setelah ganti template?

Umumnya variabel $(link-login-only) terhapus dari atribut action pada form, atau md5.js tidak ikut diunggah padahal metode login memakai HTTP-CHAP. Bandingkan form Anda dengan login.html bawaan.

Apakah bisa memakai template login yang berbeda untuk tiap hotspot?

Bisa. Buat Server Profile terpisah untuk setiap server hotspot, lalu arahkan HTML Directory tiap profil ke folder template yang berbeda.

Bagaimana cara mengembalikan tampilan login ke bawaan?

Kembalikan isian HTML Directory ke hotspot, lalu Apply. Itu sebabnya folder bawaan sebaiknya tidak ditimpa — pemulihan cukup satu langkah.

Apakah template login bisa menampilkan info voucher dan sisa kuota?

Bisa, lewat halaman status.html yang memang menampilkan statistik sesi. Tautannya tersedia melalui variabel $(link-status).

Apakah halaman login bisa dibuka lewat HTTPS?

Bisa, tetapi butuh sertifikat yang terpasang di router dan metode login https diaktifkan di Server Profile. Tanpa sertifikat yang tepercaya, browser pengguna justru menampilkan peringatan keamanan.

Di mana download template login Mikrotik gratis yang aman?

Utamakan sumber yang isinya terbuka dan bisa diperiksa sebelum dipasang, seperti repositori publik di GitHub. Apa pun sumbernya, jalankan empat saringan di atas — variabel utuh, md5.js ada, ukuran di bawah ~1 MB, dan tampilan responsive — sebelum mengunggahnya ke router.

Template login mikrotik yang ringan dan responsive itu seperti apa?

Ringan berarti seluruh folder template jauh di bawah 1 MB, tanpa video latar atau foto beresolusi tinggi, dan fontnya disertakan sendiri (bukan memanggil Google Fonts, yang tidak akan termuat karena pengguna belum punya akses internet). Responsive berarti form login tetap rapi saat dibuka di layar ponsel — uji dengan menyempitkan jendela browser di komputer.

Apakah template Mikhmon bisa dipakai di hotspot Mikrotik biasa?

Template halaman login-nya bisa, karena tetap file login.html dengan variabel RouterOS yang sama. Yang perlu diingat, Mikhmon adalah aplikasi terpisah untuk manajemen voucher — fitur khusus voucher pada template semacam itu tidak otomatis berfungsi tanpa Mikhmon-nya.

Kesimpulan

Mengganti template login hotspot Mikrotik intinya dua hal: menaruh file di folder sendiri lewat menu Files, lalu mengarahkan HTML Directory pada Server Profile ke folder itu. Sisanya pekerjaan HTML biasa — ganti logo, atur warna, rapikan tata letak.

Yang membedakan admin yang jarang bermasalah: mereka tidak pernah menimpa folder bawaan, dan selalu menguji satu login sungguhan dari ponsel sebelum menganggap pekerjaan selesai.