Home » » Cara Mendesain Login Hotspot Mikrotik Dengan Music

Cara Mendesain Login Hotspot Mikrotik Dengan Music

Written By Mas-opic on Friday 26 July 2013 | 23:01


  Bagi anda yang baru menggunakan mikrotik sebagai captive portal untuk hotspot, pasti anda sudah tidak asing dengan login page hotspot MikroTik yang hanya berupa tabel isian username dan password dengan logo mikrotik gateway di bagian bawah.
Berikut ini adalah cara bagaimana modifikasi atau mengganti 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 dan template 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″>&nbsp;</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 Saya rubah, bagi anda yang berminat untuk menggunakannya ataupun ingin merubahnya silahkan di download, semoga bermanfaat.

Kode script halaman login diatas bisa diunduh : DEMO ^ DOWNLOAD
Share this article :
Posted by Mas-opic
Labels:

2 comments:

  1. Unknown1 September 2017 at 06:36

    klo dibelakan halaman login,beugroundnya kita ganti file mp4 (videoaudio) bisa nggak boss

    ReplyDelete
  2. wahanaguru30 April 2019 at 17:58

    Bagi newbe Sangat membingungkan blog ini ....mestinya dikasi contoh script
    sebelum dan sesudah ditambah tag music ....jadi masangnya gk akan keliru

    ReplyDelete

Komentar anda sangat berarti untuk perkembangan blog ini :

♦ Komentar sesuai dengan topic pembahasan
♦ No LINK AKTIF, SARA, SPAM
♦ Menjaga silaturahmi sesama blogger
♦ Disarankan menggunakan Open ID

 
Support : Facebook | Indosat | XL Axiata
Copyright © 2013. Ex-perimentku - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger