aku dan mikrotik » edit kode HTML hotspot mikrotik http://galuharya.com mikrotik merubah dunia Sun, 27 Jun 2010 04:59:26 +0000 http://wordpress.org/?v=2.8.5 en hourly 1 Edit login page hotspot mikrotik http://galuharya.com/2010/01/09/edit-login-page-hotspot-mikrotik/ http://galuharya.com/2010/01/09/edit-login-page-hotspot-mikrotik/#comments Sat, 09 Jan 2010 04:41:07 +0000 pakne galuh http://galuharya.com/?p=156 Berawal dari banyaknya pertanyaan di blog sebelah tentang bagaimana mengedit tampilan login page hotspot mikrotik, maka pada kesempatan ini saya akan memberi sedikit tips untuk mengedit tampilan hotspot tersebut.

Langkah awal yang harus dilakukan adalah copy/download dulu file login.html pada mikrotik anda. Untuk melakukan ini bisa langsung masuk ke winbox mikrotik anda atau juga bisa via FTP. langkah ini untuk mengantisipasi jika terjadi kegagalan dalam editing html kodenya. Jadi tinggal dibalikin lagi default kode HTML nya.

Setelah langkah diatas dilakukan maka langsung saja rubah kode HTML default menjadi kode HTML dibawah ini.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<!–hack-by-sujianto-sp—>
<!–script-login-ini-berjalan-pada-MikroTik-versi-2.9.27–>
<!–copy-paste-script-login-ini-pada-file-login.html–>
<head>
<title>Internet WiFi Hotspot > login</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<meta http-equiv=”pragma” content=”no-cache” />
<meta http-equiv=”expires” content=”-1″ />

<style type=”text/css”>
a, a:link, a:visited, a:active { color: #AAAAAA; text-decoration: none; font-size: 10px; }
a:hover { border-bottom: 1px dotted #c1c1c1; color: #FF0000; font-weight: bold;}
img {border: none;}
td { font-size: 14px; color: #7A7A7A; }

#layer-utama {
position:absolute;
width:500px;
height:374px;
z-index:0;
left: 150px;
top: 0;
}
#layer-login {
position:absolute;
width:100px;
height:100px;
z-index:1;
left: 180px;
top: 185px;
}
.style-login {
font-size: 12px;
font-family: Verdana;
}
.style-text-1 {
font-family: Tahoma;
font-size: 10px;
}
.style-text-2 {
font-family: Tahoma;
font-size: 10px;
}

–>
</style>
</head>
<body>

&nbsp;<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>$(if chap-id)</p>
<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)
<div id=”layer-utama” style=”position: absolute; left: 62px; top: -1px; width: 600px; height: 279px”><img src=”/img/free-wifi1.jpg” width=”194″ height=”222″ /><img src=”/img/wifi_hotspot1.jpg” width=”208″ height=”222″ /><img src=”/img/hotspot1.gif” width=”193″ height=”222″ /><img src=”/img/background_sunshine3.jpg” width=”628″ height=”558″ /><br>
<table border=”0″ width=”100%” id=”table1″ cellspacing=”1″>
<tr>
<td height=”18″ bgcolor=”#FFFFCC” style=”border-left-width: 1px; border-right-width: 1px; border-top-style: dotted; border-top-width: 1px; border-bottom-width: 1px”><span></span><span></span></td>
<td width=”363″ height=”18″ bgcolor=”#FFFFCC” style=”border-left-width: 1px; border-right-width: 1px; border-top-style: dotted; border-top-width: 1px; border-bottom-width: 1px”>
<div align=”right”><a href=terms-conditions.html ><span style=”text-decoration: none”>Terms and Conditions</span></a> | <a href=”registrasi-notebook.html”>Internet Vvip Akses</a> | <a href=”antivirus-update.html”>Antivirus Update</a></font> | 571 </div></td>
</tr>
</table>
</div>
<div id=”layer-login” style=”position: absolute; left: 248px; top: 378px”>
<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” />

<table width=”100″ style=”background-color: #ffffff”>
<tr>
<td align=”left”><span>USERNAME  </span></td>
<td><input style=”width: 80px” name=”username” type=”text” value=”$(username)”/></td>
</tr>
<tr><td align=”left”><span>PASSWORD </span></td>
<td><input style=”width: 80px” name=”password” type=”password”/></td>
</tr>
<tr><td><span></span></td>
<td><input type=”submit” value=”LOGIN” /></td>
</tr>
<tr>
<td colspan=”2″><div>
FREE LOGIN $(if trial == ‘yes’)<a style=”color: #FF8080″href=”$(link-login-only)?dst=$(link-orig-esc)&amp;username=T-$(mac-esc)”>CLICK
HERE!</a>$(endif)</div></td>
</tr>
</table>
</form>
</div>
$(if error)<br /><div style=”color: #FF8080; font-size: 9px”>$(error)</div>$(endif)

<script type=”text/javascript”>
<!–
document.login.username.focus();
//–>
</script>
</body>
</html>

Setelah selesai merubah kode html tersebut maka upload kembali file login.html menuju folder hotspot di mikrotik anda.

Maka tampilan login page hotspot mikrotik anda akan berubah menjadi seperti ini.

ScreenShot005

Untuk langkah awal setting hotspot mikrotik silahkan menuju halaman ini.

]]> http://galuharya.com/2010/01/09/edit-login-page-hotspot-mikrotik/feed/ 15