Karena di rumah pasang Internet, juga untuk pasang Internet harus tarik kabel sekitar 700 meter, dimana itu cukup mahal, maka akhirnya saya bikin Hotspot di komplek rumah, ditambah saya jadi Ketua RT pula laughing

Target saya memang warga komplek terdekat maksimal 500meter saja. juga saya kasih Internet gratis untuk warga selama 5jam per hari, sisanya gratis Facebook, Twitter dan BBMan.

Karena tampilan Login Mikrotik boring, akhirnya ibnux membuat tampilan login sendiri menggunakan Twitter Bootstrap, Jadi ga perlu banyak design big grin
apalagi ada Themes nya dari Bootswatch, dan bisa responsive di smartphone.

Berikut tampilan yang digunakan:

Login Hotspot Mikrotik

CSS yang digunakan hanya Grid dan panels + ListGroup.

Perlu diperhatikan, saya tidak menggunakan modul user manager di mikrotik, semua pengguna berbayar saya tambahkan di IP-Hotspot-Users, karena target user berbayar saya memang sedikit, semoga scriptnya bisa jalan juga di modul user manager, lagian hanya design yang diubah big grin

File yang dibutuhkan bisa diunduh disini.
Saya tidak bisa menjelaskan semua isi file nya, terutama masalah edit HTMLnya, silahkan belajar html+javascript+css dulu di w3schools.
Buka semua file html, cek text mana aja yang perlu anda ubah.
login.html dan status.html berisi text informasi yang harus anda ubah. di getboostrap.com bisa anda lihat pemilihan warna yang ingin digunakan (Default,Primary,Success,Info,Warning,Danger).

Upload dan timpa semua file ke folder hotspot

Screen Shot 2015-03-24 at 12.51.35

untuk script pengguna online tambahkan di System-Scripts
namanya: updateUser

Screen Shot 2015-03-23 at 23.27.28

:global gratis;
:global bayar;
: set gratis [/ip hotspot active print count-only where login-by="trial"];
: set bayar ([/ip hotspot active print count-only where login-by="http-chap"]+[/ip hotspot active print count-only where login-by="mac"]);
:log info "$gratis gratisan & $bayar berbayar";
/file set hotspot/online.txt contents="$bayar orang yg bayar & $gratis orang yg gratis";

hilangkan spasi di : set, karena di WP malah jadi emoticon straight face
lalu di IP-Hotspot-UserProfiles di setiap profile saya tambahkan updateUser

Screen Shot 2015-03-23 at 23.30.08

gambar bg.jpg adalah background dari loginnya, bisa anda ganti sesuka hati.
begitupun gambar internetmati.jpg.

agar pemberitahuan internet mati lebih efektif, silahkan ikuti petunjuk di blog Adamonline. karena saya juga dapat ilmunya dari situ big grin

script internet offline ada di login.html
<center><img class="img-responsive" id="gambarLogin" src="https://www.facebook.com/images/spacer.gif" onError="gaKonek()" /></center>

Website yang dituju adalah facebook, jika gagal mengambil gambar, maka akan dianggap internet mati. untuk itu facebook.com harus masuk walled garden.
bisa anda ubah ke website lain yang anda inginkan, lebih baik spacer.gif nya anda copy dan upload juga.

Semoga berguna happy

Satu tanggapan untuk “Template Tampilan Login Hotspot Mikrotik”

  1. Avatar arri
    arri

    mau unduh filenya broken link kang, help. ane suka artikelnya…
    kepengin bikin tapi sayang broken link…

    ada solusinya kang?

Tinggalkan Balasan

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

iBNuX

Full Stack Engineer