Rabu, 15 April 2015

Membuat Login Hotspot Mikrotik

Salam sejahtera sobat, kali ini kita akan share cara membuat login Hotspot Mikrotik. Bagi sobat yang hobi atau ingin blajar membuat hotspot dengan mikrotik dan sedang mencari Login Page nya kini saatnya sobat buat sendiri login hotspotnya, sobat tidak perlu mencari, membeli, mendownload lagi, pada dasarnya membuat itu tidak sulit sobat, percayalah tidak ada yang tidak mungkin didunia ini selagi kita berusaha. Dibanding sobat membeli mahal lebih baik sobat luangkan waktu untuk blajar membuatnya.

Kita tidak perlu repot menulis script mikrotik, kita tinggal edit saja loin page bawaan mikrotik kemudian disesuaikan dengan disain yang kita ingin. Pada kasus ini kita perlu memahami Html dan Css, tapi tenang saja, bagi sobat yang baru belajar tidak perlu khawatir, saya pun awalnya tidak bias. Mari kita sama-sama belajar.

Pertama sobat ambil Login Page Default bawaan mikrotik, akses ke Ip wifi mikrotik dengan Filezilla, kemudian masuk ke folder Hotspot lalu ambil file “login.html”. file ini yang akan kita edit.

Langkah awal kita akan membuat desain / tampilan pagenya, pada kasus ini saya hanya memberikan desain yang simple saja dulu. Untuk desain yang advance kita bahas lain waktu. Oke silahkan sobat buka teks editor andalan sobat, dan tulislah script html berikut:

<html>
<head>
<title>simpel login</title>
</head>
<body>

<div id="main"> <!--layar utama -->
<div id="content"> <!--layar Untuk konten-->
<center><h1><span style="color:#fff;">Portal</span> <!--Membuat Judul Ditengah-->
<span style="color:#F63; font-weight:bold;">Nuansa Indah Net</span></h1></center>  <!--End-Membuat Judul Ditengah-->

        <div id="form"><!--Form untuk input user dan pass-->
              <h1 style="font-family: Aharoni; font-size:30px; color:#fff">SILAHKAN LOGIN</h1>
        <article style="margin:5px;">
  

        </article>
        </div> <!--End-Form untuk input user dan pass-->
        
    </div> <!--End-Konten -->
</div> <!--End-layar utama-->

</body>
</html>

Nah itu dia sobat, sedikit kan script nya, hehehe, jangan dibuat bingung, penjelasannya sudah sudah ada disana, jika kurang jelas silahkan tanyakan di komentar yah.

Sekarang kita buat Style nya, tidak lengkap bila Laman kita tidak diberi style maka akan terlihat berantakan. Oke sobat berikut adalah style nya, sobat bias buat file baru dengan extensi .css atau langsung dihalaman login.html juga bisa, tinggal tambahkan kode <style> </ style > diatas kode </head>.

@charset "utf-8";
/*
CSS : madein
by : firman

*/

body {
        margin: 0;
        padding: 20px 0 0 0;
  background: url(../img/twr.jpg) no-repeat;
  background-size: cover;
  background-repeat:repeat-y;
  -webkit-background-size: cover; 
  -moz-background-size: cover; 
  -o-background-size: cover;
}
 
#main { 
 height:auto;
 border-radius:7px;
    width:900px;
    margin:0 auto;
 margin-top:100px;
    font-family: helvetica, arial, sans-serif;
    font-size: 10pt;
        
}
#form{
 
 float:right;}

#content{
 width:870px;
 margin:0 auto;
 border-radius:15px;
 padding:7px;
 height: auto;
/* -moz-box-shadow: #000 4px 4px 20px;
    -webkit-box-shadow: #000 4px 4px 20px;*/
 background-color:transparent;
 }

.input {

 padding:13px;
 background-color:transparent;
 border-radius:9px;
 border:2px solid;
 color:#fff;
 -moz-box-shadow: #000 4px 4px 20px;
 width:100%;}

.input:hover{
 border-collapse:collapse;
 border-color: #FF0;
}

.input:active{
border-color: darkgreen ;
}

.download{
 font-weight:bold; 
 cursor: pointer; 
 width:200px; 
 border:none;
 border-radius:10px;
 padding:15px 40px!important;
 background:#6319AC;
 color:#fff!important;
 font:400 14px/18px 'Ubuntu',sans-serif;
 text-align:center;
 text-shadow:0 0 1px rgba(0,0,0,0.3);
 transition:background-color 1s ease-out 0s;
 letter-spacing:1px}

.download:hover{background:#454242;text-shadow:0 0 1px #222;text-decoration:none}

.play:hover{background:#66FF33;text-shadow:0 0 1px #222;text-decoration:none}

@media only screen and (max-width: 1024px) {
    /* Desktop, Tablet &amp; Mobile. */
 #main{}
 #content{}
 #form{}
}

@media only screen and (max-width: 767px) {
    /* Tablet (Portrait) */
 #main{width:100%;}
 #content{ margin:auto; width:70%;}
 #form{}
}

@media only screen and (max-width: 479px) {
    /* Mobile */

 #main{margin-top:0px; width:70%;
  }
 #content{ width:100%;}
 #form{width:100%;}
}

Diatas terdapat @media only screen, nah ini gunannya untuk membuat page menjadi responsive ketika dibuka dilayar kecil. 

Lalu pada bagian body{  terdapat “background: url(../img/twr.jpg) no-repeat;” ,ini gunanya memerikan background sebuah gambar, gambar bisa sobat sesuaikan mau gambar apa saja silahkan. Supaya tidak terlalu repot nanti saya akan berikan file Jadinnya.


Kode diatas belum lengkap, Selanjutnya kita perlu memberikan/meletakkan script bawaan Mikrotik, letakan script mikrotik ini bibawah kode <article style="margin:5px;">

<!--starmik-->
 $(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)

<div align="center">
<a href="$(link-login-only)?target=lv&amp;dst=$(link-orig-esc)">Latviski</a>
</div>

  <div align="center" class="notice" style="color: #c1c1c1; font-size: 9px"><br />$(if trial == 'yes')Gratis Untuk Demo, <a style="color: #FF8080"href="$(link-login-only)?dst=$(link-orig-esc)&amp;username=T-$(mac-esc)">Klik Disini</a>.$(endif)</div><br /> 

     <form name="login" action="$(link-login-only)" method="post" $(if chap-id) onSubmit="return doLogin()" $(endif)>
                    <input type="hidden" name="dst" value="$(link-orig)" />
<h2 style="color:#FFF">Silahkan Login</h2>
     <input type="hidden" name="popup" value="true" />
     <div id="form-login">
     <div id="form-field-wrap">
     <div id="form-field" >

     <input type="text" class="input" id="username-login" name="username" placeholder="Username"><br /><br />
          <!--<input type="hidden" class="username" id="username_hidden" name="username" value="$(username)">-->
     </div>
     <div id="form-field" class="password-login">
     <input type="text" class="input"  id="pass-login" name="password" placeholder="Password"><br /><br />
     <input type="hidden" id="tsel" name="tsel" value="8">
     </div>
     </div>
     <div id="login-btn" >
     <input type="submit" class="download" value="LOGIN"  />
     </div>
     </div>
<!--end mik-->                    
<div style="color: #c1c1c1; font-size: 9px"></div>
 <center>$(if error)<br /><div style="color: #FF8080; font-size: 6px">$(error)</div>$(endif)</center>


<script type="text/javascript">
<!--
  document.login.username.focus();
//-->
</script>
<!--end mik--></form>



Jika sudah maka hasil akhirnya akan seperti ini sobat:
<html>
<head>
<title>simpel login</title>
<link href="css/madein.css" rel="stylesheet" type="text/css" />

<style type="text/css">
@charset "utf-8";
/*
CSS : madein
by : firman

*/

body {
        margin: 0;
        padding: 20px 0 0 0;
  background: url(../img/twr.jpg) no-repeat;
  background-size: cover;
  background-repeat:repeat-y;
  -webkit-background-size: cover; 
  -moz-background-size: cover; 
  -o-background-size: cover;
}
 
#main { 
 height:auto;
 border-radius:7px;
    width:900px;
    margin:0 auto;
 margin-top:100px;
    font-family: helvetica, arial, sans-serif;
    font-size: 10pt;
        
}
#form{
 
 float:right;}

#content{
 width:870px;
 margin:0 auto;
 border-radius:15px;
 padding:7px;
 height: auto;
/* -moz-box-shadow: #000 4px 4px 20px;
    -webkit-box-shadow: #000 4px 4px 20px;*/
 background-color:transparent;
 }
.input {

 padding:13px;
 background-color:transparent;
 border-radius:9px;
 border:2px solid;
 color:#fff;
 -moz-box-shadow: #000 4px 4px 20px;
 width:100%;}
.input:hover{
 border-collapse:collapse;
 border-color: #FF0;
}
.input:active{
border-color: darkgreen ;
}
.download{
 font-weight:bold; 
 cursor: pointer; 
 width:200px; 
 border:none;
 border-radius:10px;
 padding:15px 40px!important;
 background:#6319AC;
 color:#fff!important;
 font:400 14px/18px &#39;Ubuntu&#39;,sans-serif;
 text-align:center;
 text-shadow:0 0 1px rgba(0,0,0,0.3);
 transition:background-color 1s ease-out 0s;
 letter-spacing:1px}

.download:hover{background:#454242;text-shadow:0 0 1px #222;text-decoration:none}

.play:hover{background:#66FF33;text-shadow:0 0 1px #222;text-decoration:none}
@media only screen and (max-width: 1024px) {
    /* Desktop, Tablet & Mobile. */
 #main{}
 #content{}
 #form{}
}
@media only screen and (max-width: 767px) {
    /* Tablet (Portrait) */
 #main{width:100%;}
 #content{ margin:auto; width:70%;}
 #form{}
}
@media only screen and (max-width: 479px) {
    /* Mobile */

 #main{margin-top:0px; width:70%;
  }
 #content{ width:100%;}
 #form{width:100%;}
}

</style>
</head>

<body>

<div id="main"><!--layar utama-->

 <div id="content"><!--layar untuk konten-->
    <center><h1><span style="color:#fff;">Portal</span><!--Membuat Judul Ditengah-->
<span style="color:#F63; font-weight:bold;">Nuansa Indah Net</span></h1></center>     
  <div id="form">
        <h1 style="font-family: Aharoni; font-size:30px; color:#fff">SILAHKAN LOGIN</h1>
        <article style="margin:5px;">
        

        <!--starmik-->
 $(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)

<div align="center">
<a href="$(link-login-only)?target=lv&amp;dst=$(link-orig-esc)">Latviski</a>
</div>

  <div align="center" class="notice" style="color: #c1c1c1; font-size: 9px"><br />$(if trial == 'yes')Gratis Untuk Demo, <a style="color: #FF8080"href="$(link-login-only)?dst=$(link-orig-esc)&amp;username=T-$(mac-esc)">Klik Disini</a>.$(endif)</div><br /> 

     <form name="login" action="$(link-login-only)" method="post" $(if chap-id) onSubmit="return doLogin()" $(endif)>
                    <input type="hidden" name="dst" value="$(link-orig)" />
<h2 style="color:#FFF">Silahkan Login</h2>
     <input type="hidden" name="popup" value="true" />
     <div id="form-login">
     <div id="form-field-wrap">
     <div id="form-field" >

     <input type="text" class="input" id="username-login" name="username" placeholder="Username"><br /><br />
          <!--<input type="hidden" class="username" id="username_hidden" name="username" value="$(username)">-->
     </div>
     <div id="form-field" class="password-login">
     <input type="text" class="input"  id="pass-login" name="password" placeholder="Password"><br /><br />
     <input type="hidden" id="tsel" name="tsel" value="8">
     </div>
     </div>
     <div id="login-btn" >
     <input type="submit" class="download" value="LOGIN"  />
     </div>
     </div>
<!--end mik-->                    
<div style="color: #c1c1c1; font-size: 9px"></div>
 <center>$(if error)<br /><div style="color: #FF8080; font-size: 6px">$(error)</div>$(endif)</center>


<script type="text/javascript">
<!--
  document.login.username.focus();
//-->
</script>

<!--end mik--></form>
         
        </article>
        </div>
        
    </div><!--End-div-Content-->
</div><!--End-div-Main-->
</body>
</html>


Setelah itu silahkan simpan proyek sobat, dan coba sobat running, maka hasilnya akan seperti berikut jika benar: Lihat Hasil 
Link download sudah tersedia disana.
Selesai.

Semoga Membantu.

Previous Post
Next Post

post written by:

1 komentar:

  1. terimakasih, ilmunya sangat bermanfaat khususnya buatku, jika ada luang buatkan lagi yg lebih pariatif, trim's.

    BalasHapus

Gunakan kolom komentar dengan baik dan bijak.