Edit Login Page Hotspot Mikrotik

Posted on 11. Feb, 2011 by in mikrotik

Karena banyaknya client Kang nadoel yang setelah membli design login page mikrotik dan Voucher hotspot mikrotik dari nadasumbang.com yang tidak tahu cara melakukan edit login page hotspot mikrotik, maka akhirnya kang nadoel memutuskan untuk membuat tutorialnya. Pembuatan tutorial edit login page ini didasari oleh keinginan yang luhur dan rasa untuk saling berbagi antar sesama penghuni dunia maya.

Sebagaimana kita ketahui, di dalam folder hotspot mikrotik terdapat 3 folder yaitu img, lv dan xml dan beberapa file HTML. Sebelum melakukan edit login page, pastikan anda sudah mendownload folder hotspot yang ada di dalam router mikrotik anda ke komputer lokal.

Bagi anda yang belum tahu cara mendownload folder hotspot dari mikrotik ke dalam komputer, silahkan tonton video berikut yang sengaja kang nadoel persembahkan khusus untuk anda

Sebenarnya yang perlu kita edit hanya login.html karena file tersebut merupakan tampilan utama (homepage) ketika user pertama kali konek ke hotspot. Untuk tampilan logout dan status akan kita bahas pada episode selanjutnya.

Persiapan :
Sebelum memulai pengeditan kita terlebih dahulu harus mempersiapkan beberapa aplikasi agar proses edit login page menjadi lebih mudah dan gampang. Silahkan install terlebih dahulu aplikasi berikut :

1. Notepad++ (Code Editor)
2. Mozilla Firefox (Browser )
3. Adobe Photoshop (Graphic Editor)

Langkah pertama adalah mencari tampilan yang kita inginkan, karena jika anda ingin membuat sendiri saya yakin jika anda belum mengerti HTML dan CSS dijamin lieur. Oleh karena itu, pada tutorial ini kita akan mencoba membuat tampilan login page seperti website mig33 (www.mig33.com)

1. Buatlah satu direktori hotspot-modif sejajar dengan direktori hotspot asli yang sudah di download dari router mikrotik.
2. Selanjutnya buka www.mig33.com menggunakan firefox, kemudian klik menu file pilih save page as dan simpan halaman website mig33 ke direktori hotspot-modif yang tadi telah dibuat.
3. Buka direktori hotspot-modif, disana ada 1 file Mobile IM & SMS Text Messaging from mig33 – mig33.htm dan 1 direktori Mobile IM & SMS Text Messaging from mig33 – mig33_files yang barusan kita simpan.
4. Klik 2x pada file Mobile IM & SMS Text Messaging from mig33 – mig33.htm untuk menampilkan pada mozilla firefox. Perhatikan perbedaan tampilan mig33 asli dengan halaman mig33 yang barusan kita download.

4. Rename file Mobile IM & SMS Text Messaging from mig33 – mig33.htm menjadi login.html .
4. Rename folder Mobile IM & SMS Text Messaging from mig33 – mig33_files menjadi img .

6. Pada tahap ini kita perbaiki dulu link dan layoutnya dimana masih ada beberapa gambar yang belum muncul karena tidak terdownload ketika kita melakukan save page as tadi, setelah itu baru kita edit sesuai dengan selera kita. Silahkan download gambar berikut dan masukan ke direktori img :

http://www.mig33.com/assets/images/homepage_promo_bg.jpg

http://www.mig33.com/assets/images/home_panel1.png

http://www.mig33.com/assets/images/button_getmig33.png

http://www.mig33.com/assets/images/page_footer_bg.png

http://www.mig33.com/assets/images/button_login.png

http://www.mig33.com/assets/images/button_getmig33_small.png

Selanjutnya silahkan buka login.html menggunakan code editor Notepad++.
- Tekan CTRL+F, setelah keluar kotak dialog klik tab Replace
- Masukan Mobile%20IM%20&%20SMS%20Text%20Messaging%20from%20mig33%20-%20mig33_files ke kolom Find what dan kolom Replace with diisi dengan img. Setelah itu klik Replace All. kemudian tekan Save. (ada 17 files yang di replace)

- Selanjutnya buka style.css yang ada di dalam folder img menggunakan Notepadd++
- Hapus semua tulisan “../images/” , caranya tekan CTRL+F kemduan klik tab Replace, pada kolom Find what masukan “../images/” dan pada kolom Replace with di kosongkan sajah. keludian klik tombol Replace All, setelah itu tekan save. (ada 42 kata yang di replace)

Jangan lupa simpan hasil perubahan pada login.html dan style.css, jika sudah, silahkan klik 2x pada file login.html dan lihat perubahannya. Sekarang tampilan login.html dengan tampilan www.mig33.com sudah sama persis.

Jika tampilan website mig33.com dengan tampilan login.html anda belum sama, berarti ada langkah-langkah yang terlewatkan oleh anda.

Merubah tampilan untuk dijadikan login page hotspot mikrotik
Setelah tampilan login.html mirip persis dengan website aslinya, sekarang saatnya kita menjadikan halaman tersebut halaman login hotspot mikrotik.

Bagian-bagian yang akan kita rubah :
- Menu akan kita rubah hanya menjadi 3
- Tombol login dan sign up yang ada di pojok kanan atas akan kita ganti icon yang lain.
- 3 buah gambar yg ada di bagian bawah akan kita jadikan untuk menampilkan paket hotspot.
- Background akan kita ganti dengan background yang lebih manis.

Langkah-langkahnya :
1. Buka kembali login.html menggunakan Notepad++, cari pada baris ke 71.

2. Hapus semua baris yang ada diantara tag UL pembuka dan UL penutup mainNav. sehingga tampak seperti gambar berikut :

<div id="mig33Logo"><a href="http://www.mig33.com/"><img src="img/mig33_logo.png" alt="mig33" height="80" width="126"></a></div>
</div>
<div>
<ul id="mainNav">
<li><a style="position: relative; background: none repeat scroll 0% 0% transparent;" href="http://www.mig33.com/">

Hapus mulai dari yang saya beri warna merah sampai dengan tag </ul> penutup.

3.Paste kode berikut ke posisi kode yang tadi dihapus diantara UL pembuka <ul id=”mainNav”> dan UL penutup :

<li><a style="position: relative; background: none repeat scroll 0% 0% transparent;" href="#">
<div style="position: absolute; left: 0pt; bottom: 0pt; width: 100%; height: 4px; overflow: hidden; margin: 0pt; padding: 0pt;"><div style="position: relative; height: 4px; margin: 0pt 4px; overflow: hidden; padding: 0pt;"><div style="overflow: hidden; position: absolute; margin: 0pt; padding: 0pt; width: 100%; left: 0px; bottom: 0px; height: 1px;"></div><div style="overflow: hidden; position: absolute; margin: 0pt; padding: 0pt; width: 100%; left: 0px; background-image: none; bottom: 1px; height: 3px;"></div></div></div><span>Home</span></a>
</li>
<li><a style="position: relative; background: none repeat scroll 0% 0% transparent;" href="#">
<div style="position: absolute; left: 0pt; bottom: 0pt; width: 100%; height: 4px; overflow: hidden; margin: 0pt; padding: 0pt;"><div style="position: relative; height: 4px; margin: 0pt 4px; overflow: hidden; padding: 0pt;"><div style="overflow: hidden; position: absolute; margin: 0pt; padding: 0pt; width: 100%; left: 0px; bottom: 0px; height: 1px;"></div><div style="overflow: hidden; position: absolute; margin: 0pt; padding: 0pt; width: 100%; left: 0px; background-image: none; bottom: 1px; height: 3px;"></div></div></div><span>Product</span></a>
</li>
<li><a style="position: relative; background: none repeat scroll 0% 0% transparent;" href="#">
<div style="position: absolute; left: 0pt; bottom: 0pt; width: 100%; height: 4px; overflow: hidden; margin: 0pt; padding: 0pt;"><div style="position: relative; height: 4px; margin: 0pt 4px; overflow: hidden; padding: 0pt;"><div style="overflow: hidden; position: absolute; margin: 0pt; padding: 0pt; width: 100%; left: 0px; bottom: 0px; height: 1px;"></div><div style="overflow: hidden; position: absolute; margin: 0pt; padding: 0pt; width: 100%; left: 0px; background-image: none; bottom: 1px; height: 3px;"></div></div></div><span>Coverage</span></a>
</li>

Lengkapnya seperti ini :

<ul id="mainNav"> <!--tag pembuka-->
<li><a style="position: relative; background: none repeat scroll 0% 0% transparent;" href="#">
<div style="position: absolute; left: 0pt; bottom: 0pt; width: 100%; height: 4px; overflow: hidden; margin: 0pt; padding: 0pt;"><div style="position: relative; height: 4px; margin: 0pt 4px; overflow: hidden; padding: 0pt;"><div style="overflow: hidden; position: absolute; margin: 0pt; padding: 0pt; width: 100%; left: 0px; bottom: 0px; height: 1px;"></div><div style="overflow: hidden; position: absolute; margin: 0pt; padding: 0pt; width: 100%; left: 0px; background-image: none; bottom: 1px; height: 3px;"></div></div></div><span>Home</span></a>
</li>
<li><a style="position: relative; background: none repeat scroll 0% 0% transparent;" href="#">
<div style="position: absolute; left: 0pt; bottom: 0pt; width: 100%; height: 4px; overflow: hidden; margin: 0pt; padding: 0pt;"><div style="position: relative; height: 4px; margin: 0pt 4px; overflow: hidden; padding: 0pt;"><div style="overflow: hidden; position: absolute; margin: 0pt; padding: 0pt; width: 100%; left: 0px; bottom: 0px; height: 1px;"></div><div style="overflow: hidden; position: absolute; margin: 0pt; padding: 0pt; width: 100%; left: 0px; background-image: none; bottom: 1px; height: 3px;"></div></div></div><span>Product</span></a>
</li>
<li><a style="position: relative; background: none repeat scroll 0% 0% transparent;" href="#">
<div style="position: absolute; left: 0pt; bottom: 0pt; width: 100%; height: 4px; overflow: hidden; margin: 0pt; padding: 0pt;"><div style="position: relative; height: 4px; margin: 0pt 4px; overflow: hidden; padding: 0pt;"><div style="overflow: hidden; position: absolute; margin: 0pt; padding: 0pt; width: 100%; left: 0px; bottom: 0px; height: 1px;"></div><div style="overflow: hidden; position: absolute; margin: 0pt; padding: 0pt; width: 100%; left: 0px; background-image: none; bottom: 1px; height: 3px;"></div></div></div><span>Coverage</span></a>
</li>
</ul><!--tag penutup-->

Kode yang barusan kita paste adalah kode untuk mengganti navigation menu.

Memasukan Kolom Login.

Langkah selanjutnya adalah memasukan kolom login ke dalam halaman login.html buatan kita. Silahkan kopikan kode berikut diantara tag


<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>&nbsp;&nbsp;&nbsp;Username
<input name="username" type="text" size="24" maxlength="25" style="text-align: center" /></td>
<td>&nbsp;&nbsp;&nbsp;Password
<input name="password" type="password" size="24" maxlength="25" style="text-align: center"/></td>
<td width="20px" valign="bottom" align="center">&nbsp;&nbsp;&nbsp; <input type="hidden" name="login" value="login">
<input type="submit" value=" OK" width="32" height="32"></td>
</tr>
</table>
</form>
<!--akhir kotak login-->
</div>

kopi kode diatas kemudian masukan diantara tag callToAction seperti contoh diatas.

Selanjutnya memasukan parameter login, silahkan kopi kode yang berwarna hijau dan letakan persis di bawah tag <body> pembuka.

</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)

selanjutnya masukan kode berikut diatas tag </body> penutup.

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

Sampai disini kita sudah berhasil membuat halaman login, untuk halaman-halaman yang lainnya silahkan copy dari direktori hotspot asli bawaan mikrotik.

File-file yang harus di copy dari hotspot asli ke hotspot-modif :

  1. logout.html
  2. status.html
  3. alogin.html
  4. error.html
  5. radvert.html
  6. redirect.html
  7. rlogin.html
  8. errors.txt
  9. md5.js
  10. folder xml

Setelah semuanya lengkap, selanjutnya silahkan upload folder hotspot-modif ke dalam router mikrotik anda. Bagi yang belum tahu cara upload hotspot dan cara setting hotspot mikrotik ke dalam winbox silahkan nonton filmnya disini.

Hasil akhir edit login page hotspot mikrotik

login page mikrotik

Buat yang sudah berusaha edit login page hotspot tapi masih belum ngerti juga bahkan malah tambah LIEUR, silahkan download login page hasil edit Kang nadoel.

Download Login Page

Jika ada yang mau redesign hasil tampilan login page tersebut agar sesuai dengan keinginan anda, silahkan PM Kang Nadoel.

Tags: , , , , , , , ,

Untuk berlangganan artikel dan tutorial menarik
Silahkan masukan email pada kolom dibawah ini GRATIS..!

Dijajapkeun ku FeedBurner

13 Responses to “Edit Login Page Hotspot Mikrotik”

  1. betmen 13 February 2011 at 10:40 pm #

    makasih gan dah mo share ilmu + tipsnya :) mudah2an rejekinya nambah terus … :) slm dr mks gan …

  2. Kang Nadoel 14 February 2011 at 7:52 am #

    @betmen
    Amiiinnn….

  3. mikriting09 25 March 2011 at 4:39 pm #

    hatur nuhun pisan kang, atos berbagi elmu
    mudah-mudahan dipasihan balasan ku gusti anu leuwih gede..amin

  4. Kang Nadoel 28 March 2011 at 8:06 am #

    Amiiiinnnnn

  5. Edy susilo 12 April 2011 at 8:16 am #

    Mantab mas broo…..

  6. Kang Nadoel 18 April 2011 at 12:08 pm #

    @Edi susilo

    Mantabs juga heuheu

  7. smart 6 May 2011 at 4:43 pm #

    makasih, langsung ke TKP

  8. sepuluhjariku 12 December 2011 at 7:49 pm #

    salam kenal kang..
    Kayanya,… Mig33 dah ganti tampilan deh, jadi rada lieur..
    Kalo point2 yang penting aja dijelasan bisa nggk kang?
    Saya penasaran bgt nih pengen lulus edit login mikrotik
    Tolong ke email saya aja ya kang
    Mkasih

  9. imoel 4 January 2012 at 9:07 pm #

    makasih banyak kang atas ilmunya

  10. yudhi perdana putra 2 February 2012 at 2:36 pm #

    numpang sedot gan…

  11. novinet 30 April 2012 at 4:28 pm #

    mantap gan tutornya, mungkin masukan dikit or request kale
    gimana caranya nambah link stelah login( 2 link bisa gk ya?)

  12. Kang Nadoel 4 May 2012 at 7:55 pm #

    @novinet

    Untuk nambah link tinggal copy aja code link yang ada di TAG navigasi pada login.html

    Thx

  13. Labisana Dea 27 February 2014 at 12:20 pm #

    Gan mintak maaf sblmnya ni, saya cobak download login pagenya tapi gk bisa ke download, ada link lain gk gan, n tenks atas share ilmunya ini sangat berguna.


Leave a Reply

*