Login default hotspot mikrotik
Bagi anda yang baru menggunakan mikrotik sebagai captive portal untuk hotspot anda pasti anda sudah tidak asing dengan halaman loginnya yang hanya berupa tabel isian username dan password dengan logo mikrotik gateway di bagian bawah.
Berikut ini adalah cara bagaimana merubah halaman login default hotspot mikrotik menjadi lebih menarik sehingga selain sebagai halaman login, bisa juga menjadi sarana promosi bagi pengunjung baru yang masuk dalam jaringan hotspot kita.
Tentukan dulu desain halaman login kita. Anda bisa mencari template-template gratis melalui google yang sesuai dengan selera anda. Setelah anda mendapatkan template tersebut lakukan 3 langkah berikut :
Buka template anda menggunakan text editor seperti notepad atau notepad++ kemudian sisipkan script dibawah ini pada bagian bawah tag <body> pada file HTML yang anda miliki tadi.
$(if chap-id)
<form name=”sendin” action=”$(link-login-only)” method=”post”>
<input type=”hidden” name=”username” />
<input type=”hidden” name=”password” />
<input type=”hidden” name=”dst” value=”$(link-orig)” />
<input type=”hidden” name=”popup” value=”true” />
</form><script type=”text/javascript” src=”/md5.js”></script>
<script type=”text/javascript”>
<!–
function doLogin() {
document.sendin.username.value = document.login.username.value;
document.sendin.password.value = hexMD5(‘$(chap-id)’ + document.login.password.value + ‘$(chap-challenge)’);
document.sendin.submit();
return false;
}
//–>
</script>
$(endif)
Kemudian pada bagian kolom dimana kita ingin meletakkan isian username dan password sisipkan kode berikut :
<table>
<form name=”login” action=”$(link-login-only)” method=”post”
$(if chap-id) onSubmit=”return doLogin()” $(endif)>
<input type=”hidden” name=”dst” value=”$(link-orig)” />
<input type=”hidden” name=”popup” value=”true” /><tr><td colspan=”2″> </td></tr>
<tr><td align=”right”>Username :</td><td><input name=”username” type=”text” value=”$(username)”/></td></tr>
<tr><td align=”right”>Password :</td><td><input name=”password” type=”password”/></td></tr>
<tr><td colspan=”2″ align=”center”><input type=”submit” value=”Login” /></td></tr>
<tr><td colspan=”2″ align=”center”>$(if error)<div style=”color: red; font-size: 10px; text-decoration: blink;”><blink><b>$(error)</b></blink></div>$(endif)</td></tr></form>
</table>
Terakhir, pada bagian atas tag </body> sisipkan kode berikut :
<script type=”text/javascript”>
<!–
document.login.username.focus();
//–>
</script>
Dengan tiga langkah diatas, anda bisa memiliki halaman login sesuai dengan keinginan anda. Anda bisa menggunakan kreatifitas anda untuk mendesain halaman login.
Berikut adalah halaman login yang telah kami rubah, bagi anda yang berminat untuk menggunakannya ataupun ingin merubahnya silahkan di download, semoga bermanfaat.
- Screenshoot Halaman Login GmiB26.Net Hotspot
Halaman login yang telah kami ubah seperti pada gambar bukan hanya halaman login, tetapi juga halaman status, halaman logout juga kami tambahkan beberapa halaman seperti halaman harga, benefit, dan contact us. Selain itu, pada halaman login kami juga menyisipkan script jquery yang bisa menampilkan informasi kepada user tentang keuntungan bergabung dengan hotspot kami.
Kode sumber halaman login diatas bisa diunduh disini
Loading ...
makasih gan, tar deh saya cobain caranya. Kebetulan saya pengen banget bikin login yg beda. Ijin sedot skalian ya yg dah jadi..
silahkan gan… makasih dah mampir kesini..
Bagus banget nih tampilan login hotspotnya. Cuman sayang aq gak tau bagaimana cara memodifikasi halaman loginnya sesuai dengan hotspot yg qt punya. Misalnya harga voucher atw logo yang mau diubah. Bagaimana cara editnya?
Tq bang atas izin downloadnya. semoga ilmunya bisa bermanfaat bagi semua ummat.
Wassalam
tq bang, udah dicoba n berjalan sangat bagus. bagaimana cara merubah daftar harganya ya?
nice kk ijin sedot kk buat belajar2 Thank’s
Pingback: Informasi Cakrawala Multimedia » Blog Archive » Memodifikasi Login Page Hotspot di Mikrotik
ilmu yg bermanfaat, nantinya ijin repost ya di blog saya
.
minta halaman login defaultnya dong (yg warna putih) .. dulu lupa backup nih ..
Script $(…) – misal: $(if chap-id), $(if chap-chalenge) apa sih maksudnya??
mohon penjelasannya
Bos bagus login hotspotnya, izin unduh dan edit y
ijin download mas….