Saya sudah pernah share halaman login hotspot yang sudah jadi,mungkin sobat ingin mendesain page login hotspot dan ingin mencobanya tapi bingung mau mulai dari mana,saya coba bantu sedikit berbagi pengalaman.coba copy beberapa code dibawah ini lalu diedit untuk menambah kan background sesuai selera agan bisa warna ataupun gambar.tapi agan harus mengerti sedikit HTML,saya sendiri juga tidak mengerti HTML tapi saya menggunakan [tool web page maker],anda juga bisa mencoba tool satu ini,di coba aja pasti asik.
code login :
<div id="callToAction">
<!--kotak login-->
<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 border="0" cellpadding="0" cellspacing="0" width="375px">
<tr>
<td><span style="color: #FF1493"> Username</sppan>
<input name="username" type="text" size="24" maxlength="25" style="text-align: center" /></td>
<td><span style="color: #FF1493"> Password</span>
<input name="password" type="password" size="24" maxlength="25" style="text-align: center"/></td>
<td width="20px" valign="bottom" align="center"> <input type="hidden" name="login" value="login">
<input type="submit" value=" LOGIN" width="32" height="32"></td>
</tr>
</table>
</form>
<!--akhir kotak login-->
</div>
</head><body>
$(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)
<script type="text/javascript">
<!--
document.login.username.focus();
//-->
</script>
</body>
</html>
<!--kotak login-->
<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 border="0" cellpadding="0" cellspacing="0" width="375px">
<tr>
<td><span style="color: #FF1493"> Username</sppan>
<input name="username" type="text" size="24" maxlength="25" style="text-align: center" /></td>
<td><span style="color: #FF1493"> Password</span>
<input name="password" type="password" size="24" maxlength="25" style="text-align: center"/></td>
<td width="20px" valign="bottom" align="center"> <input type="hidden" name="login" value="login">
<input type="submit" value=" LOGIN" width="32" height="32"></td>
</tr>
</table>
</form>
<!--akhir kotak login-->
</div>
</head><body>
$(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)
<script type="text/javascript">
<!--
document.login.username.focus();
//-->
</script>
</body>
</html>
code trial kalau mau ditambah trial login :
<td colspan="2" class="style-login"><div class="style-login">
<span style="color: #9400D3"><blink>FREE LOGIN</blink></span> $(if trial == 'yes')<a style="color: #FF1493"href="$(link-login-only)?dst=$(link-orig-esc)&username=T-$(mac-esc)"><blink>CLICK
HERE!</blink></a>$(endif)</div></td>
<span style="color: #9400D3"><blink>FREE LOGIN</blink></span> $(if trial == 'yes')<a style="color: #FF1493"href="$(link-login-only)?dst=$(link-orig-esc)&username=T-$(mac-esc)"><blink>CLICK
HERE!</blink></a>$(endif)</div></td>
code status :
<html>
<head>
<title>nama hotspot > status</title>
$(if refresh-timeout)
<meta http-equiv="refresh" content="$(refresh-timeout-secs)">
$(endif)
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="-1">
<style type="text/css">
<!--
textarea,input,select {
font-size: 16px;
color: #FF0000;
font-weight: Bold;
}
.tabula{
border-width: 2px;
border-collapse: collapse;
border-color: #c1c1c1;
background-color: transparent;
font-family: Tahoma;
font-size: 16px;
}
body{ color: #FFFFFF; font-size: 16px; font-family: verdana; }
a, a:link, a:visited, a:active { color: #FFFFFF; text-decoration: none; font-size: 16px; }
a:hover { border-bottom: 1px dotted #c1c1c1; color: #AAAAAA; }
img {border: none;}
td { font-size: 16px; padding: 4px; font-weight: Bold;}
-->
</style>
<script language="JavaScript">
<!--
$(if advert-pending == 'yes')
var popup = '';
function focusAdvert() {
if (window.focus) popup.focus();
}
function openAdvert() {
popup = open('$(link-advert)', 'hotspot_advert', '');
setTimeout("focusAdvert()", 1000);
}
$(endif)
function openLogout() {
if (window.name != 'hotspot_status') return true;
open('$(link-logout)', 'hotspot_logout', 'toolbar=0,location=0,directories=0,status=0,menubars=0,resizable=1,width=280,height=250');
window.close();
return false;
}
//-->
</script>
</head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="generator" content="Web Page Maker">
</head>
<body background="images/20080606_1c0f1f2143bd19add293zb2QvoXa4Hzi.jpg">
</body>
</html>
<body bgcolor="#FFFFFF" bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0"
$(if advert-pending == 'yes')
onLoad="openAdvert()"
$(endif)
>
<table width="100%" height="100%" >
<tr>
<td align="center" valign="middle">
<form action="$(link-logout)" name="logout" onSubmit="return openLogout()">
<table border="1" class="tabula">
$(if login-by == 'trial')
<br><div style="color:red" "text-align: center;">Welcome trial user!</div><br>
$(elif login-by != 'mac')
<br><div style="color:blue" "text-align: center;">Status Anda ...!</div><br>
$(endif)
<tr bgcolor="red"><td align="right" width="50%">Identitas:</td><td width="50%">$(username)</td></tr>
$(if session-time-left)
<tr bgcolor="green"><td align="right">Pemakaian:</td><td>$(uptime)</td></tr>
<tr bgcolor="orange"><td align="right">Sisa waktu:</td><td> $(session-time-left)</td></tr>
$(else)
<tr bgcolor="orange"><td align="right">connected:</td><td>$(uptime)</td></tr>
$(endif)
$(if blocked == 'yes')
<tr bgcolor="gray"><td align="right">status:</td><td><div style="color: #FF8080">
<a href="$(link-advert)" target="hotspot_advert">advertisement</a> required</div>
</td>
$(elif refresh-timeout)
$(endif)
<TABLE BORDER=0><tr><td>
$(if login-by-mac != 'yes')
<input type="submit" value=" Keluar ">
$(endif)<td>
</form>
$(if login-by-mac != 'yes')
<form action="$(link-alogin)" name="logout" onSubmit="return openLogout()">
<input type="submit" value=" Kembali ">
$(endif)
</form></tr></td></table>
</td>
</table>
</body>
</html>
<head>
<title>nama hotspot > status</title>
$(if refresh-timeout)
<meta http-equiv="refresh" content="$(refresh-timeout-secs)">
$(endif)
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="-1">
<style type="text/css">
<!--
textarea,input,select {
font-size: 16px;
color: #FF0000;
font-weight: Bold;
}
.tabula{
border-width: 2px;
border-collapse: collapse;
border-color: #c1c1c1;
background-color: transparent;
font-family: Tahoma;
font-size: 16px;
}
body{ color: #FFFFFF; font-size: 16px; font-family: verdana; }
a, a:link, a:visited, a:active { color: #FFFFFF; text-decoration: none; font-size: 16px; }
a:hover { border-bottom: 1px dotted #c1c1c1; color: #AAAAAA; }
img {border: none;}
td { font-size: 16px; padding: 4px; font-weight: Bold;}
-->
</style>
<script language="JavaScript">
<!--
$(if advert-pending == 'yes')
var popup = '';
function focusAdvert() {
if (window.focus) popup.focus();
}
function openAdvert() {
popup = open('$(link-advert)', 'hotspot_advert', '');
setTimeout("focusAdvert()", 1000);
}
$(endif)
function openLogout() {
if (window.name != 'hotspot_status') return true;
open('$(link-logout)', 'hotspot_logout', 'toolbar=0,location=0,directories=0,status=0,menubars=0,resizable=1,width=280,height=250');
window.close();
return false;
}
//-->
</script>
</head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="generator" content="Web Page Maker">
</head>
<body background="images/20080606_1c0f1f2143bd19add293zb2QvoXa4Hzi.jpg">
</body>
</html>
<body bgcolor="#FFFFFF" bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0"
$(if advert-pending == 'yes')
onLoad="openAdvert()"
$(endif)
>
<table width="100%" height="100%" >
<tr>
<td align="center" valign="middle">
<form action="$(link-logout)" name="logout" onSubmit="return openLogout()">
<table border="1" class="tabula">
$(if login-by == 'trial')
<br><div style="color:red" "text-align: center;">Welcome trial user!</div><br>
$(elif login-by != 'mac')
<br><div style="color:blue" "text-align: center;">Status Anda ...!</div><br>
$(endif)
<tr bgcolor="red"><td align="right" width="50%">Identitas:</td><td width="50%">$(username)</td></tr>
$(if session-time-left)
<tr bgcolor="green"><td align="right">Pemakaian:</td><td>$(uptime)</td></tr>
<tr bgcolor="orange"><td align="right">Sisa waktu:</td><td> $(session-time-left)</td></tr>
$(else)
<tr bgcolor="orange"><td align="right">connected:</td><td>$(uptime)</td></tr>
$(endif)
$(if blocked == 'yes')
<tr bgcolor="gray"><td align="right">status:</td><td><div style="color: #FF8080">
<a href="$(link-advert)" target="hotspot_advert">advertisement</a> required</div>
</td>
$(elif refresh-timeout)
$(endif)
<TABLE BORDER=0><tr><td>
$(if login-by-mac != 'yes')
<input type="submit" value=" Keluar ">
$(endif)<td>
</form>
$(if login-by-mac != 'yes')
<form action="$(link-alogin)" name="logout" onSubmit="return openLogout()">
<input type="submit" value=" Kembali ">
$(endif)
</form></tr></td></table>
</td>
</table>
</body>
</html>
code status logout :
<table width="100%">
<tr>
<td height="237" align="center" valign="middle">
<b class="style1">Terimakasih sudah login</b> <br><br>
<table class="tabula" border="0">
<tr><td align="right">user name</td><td>$(username)</td></tr>
<tr><td align="right">IP address</td><td>$(ip)</td></tr>
<tr><td align="right">MAC address</td><td>$(mac)</td></tr>
<tr><td align="right">session time</td><td>$(uptime)</td></tr>
$(if session-time-left)
<tr><td align="right">time left</td><td>$(session-time-left)</td></tr>
$(endif)
<tr><td align="right">bytes up/down:</td><td>$(bytes-in-nice) / $(bytes-out-nice)</td></tr>
</table>
<br>
</td>
</table>
kalau sudah selesai copy semua file yang baru sobat buat dan copy paste di folder hotspot usermanager replace semua file asli dengan file yang baru di buat (biasakan melakukan backup sebelum mengedit file).
Selamat mencoba.
(update)
Download dulu ini http://www.webpage-maker.com/download.html
Download disini contoh penempatan script page login hotspot dengan tool webpage maker http://www.mediafire.com/?an6dyyp7iwf1k5v
0 komentar: