Cara mudah membuat tampilan Hotspot MikroTik versi sendiri

Illustrasi Login Hotspot (Source Image)

Assalamu'alaikum Wr. Wb.
Halo teman-teman! Kali ini saya ingin menulis tutorial cara memodifikasi tampilan Hotspot MikroTik kalian dari yang biasa-biasa menjadi luar biasa hehe.

a. Pengertian
Hotspot MikroTik merupakan salah satu fitur yang ada di perangkat lunak RouterOS dari MikroTik yang memiliki fungsi sebagai Pintu Gerbang dan Autentikasi bagi User sebelum akhirnya User tersebut mendapatkan akses kedalam Jaringan.

b. Latar Belakang
Mempelajari cara mengganti tampilan standar Hotspot MikroTik menjadi lebih menarik.

c. Maksud & Tujuan
Dapat mengganti, mengkustomisasi, dan membuat sendiri tampilan Hotspot MikroTik.

d. Jangka Waktu
Waktu yang digunakan untuk melakukan praktek pembuatan ini kurang lebih 2 Jam apabila membuat tampilan sendiri. Dan kurang lebih 5 Menit apabila hanya mengganti tampilannya saja.

e. Hal yang dibutuhkan
1. Mengetahui dasar HTML + CSS
2. Perangkat MikroTik yang sudah disetting menjadi Hotspot
3. Text Editor / Code (IDE) Editor kesayangan. (cth Atom, Brackets, Lime Text, Sublime Text)
4. Template Basic Hotspot MikroTik. Download Disini [Opsional]
5. Sedikit Kesabaran dan Ketelitian

Sedikit Info, ketika teman-teman mengedit tampilan Hotspot MikroTik, teman-teman akan menemukan kode-kode pendek yang jika dilihat akan terlihat sama seperti kalian menggunakan Kode Pemrograman Khusus yang diberikan oleh Framework-framework bahasa pemrograman seperti di PHP (Laravel, CodeIgniter, Symphony, dll). Nah kode-kode itu hanya bekerja ketika File HTML diload oleh MikroTik, apabila kalian membukanya melalui Webserver biasa maka yang terjadi adalah kode-kode tersebut tidak akan ter-eksekusi melainkan akan ditampilkan dan dianggap seperti String (Text) biasa.

Oleh karena itu, tipsnya adalah jangan bingung atau takut apabila tampilan Hotspot kalian akan berantakan apabila kalian buka melalui Webserver diluar perangkat MikroTik.

f.  Langkah Kerja
1. Yang pertama, kalian bisa Download Template Standar Hotspot MikroTik yang dapat kalian Download langsung dari Winbox ketika kalian mengakses perangkat MikroTik kalian. Filenya bertempat di Menu Files -> [Folder] Hotspot. Atau kalian dapat mendownload dari Link yang sudah saya sediakan diatas yang sudah saya pangkas kode-kode yang tidak dibutuhkan (Termasuk Kode Iklan, jadi Template link diatas tidak menyertakan Advertising Code dari Perangkat MikroTik).
2. Folder tersebut dapat didownload dengan cara Klik Kanan pada Folder Hotspot kemudian Klik Download. Atau cara mudahnya kalian dapat men-drag Folder Hotspot keluar Winbox dan menuju Folder di PC teman-teman.
3. Dari file-file yang ada, di Tutorial ini kita hanya akan mengedit 3 file ini, antara lain:

a. login.html
Ini adalah Halaman Login utama ketika teman-teman melakukan koneksi ke Hotspot MikroTik.
b. status.html
Ini adalah Halaman Pasca Login setelah teman-teman memasukkan Username dan Password, yaitu Halaman Status
c. logout.html
Ini adalah Halaman Logout ketika teman-teman mengklik Tombol Logout saat berada di Status Page Hotspot.

4. Teman-teman dapat membuka file-file diatas menggunakan Code Editor kesayangan teman-teman dan mulai berkreasi membuat Tampilan Login Hotspotnnya :)
5. Jika sudah, teman-teman dapat mensave dan menguploadnya ke Perangkat MikroTik melalui Winbox -> Files. atau menggunakan Protocol FTP (Port: 21) dan diletakkan di dalam folder hotspot

g. Referensi
MikroTik Wiki - Manual:IP/Hotspot
MikroTik Indonesia - Memodifikasi Tampilan Hotspot MikroTik

h. Kesimpulan
Dengan mengetahui cara mengganti tampilan hotspot dan mengenal pemrograman dasar HTML dan CSS maka kita dapat mengubah dan bahkan membuat sendiri tampilan Hotspot MikroTik menjadi lebih menarik.

Mungkin cukup sekian yang dapat saya tulis, semoga bermanfaat bagi teman-teman semua :)
Wassalamu'alaikum Wr. Wb.