P. 1
Edit Login Page Hotspot Mikrotik

Edit Login Page Hotspot Mikrotik

|Views: 1,462|Likes:

More info:

Published by: Raden Ajeng Chartiny on Mar 11, 2011
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as DOC, PDF, TXT or read online from Scribd
See more
See less

08/19/2013

pdf

text

original

Edit Login Page Hotspot Mikrotik

Posted on 11. Feb, 2011 by Kang Nadoel 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.

setelah itu baru kita edit sesuai dengan selera kita.4.com/assets/images/home_panel1.jpg http://www.html .mig33. Rename folder Mobile IM & SMS Text Messaging from mig33 – mig33_files menjadi img .mig33.png http://www.htm menjadi login. Silahkan download gambar berikut dan masukan ke direktori img : http://www. 4.com/assets/images/button_getmig33.png .png http://www.com/assets/images/page_footer_bg.mig33. Rename file Mobile IM & SMS Text Messaging from mig33 – mig33. 6.com/assets/images/homepage_promo_bg. 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.mig33.

html mirip persis dengan website aslinya.mig33. sehingga tampak seperti gambar berikut : <div id="mig33Logo"><a href="http://www. cari pada baris ke 71.com/assets/images/button_login. setelah itu tekan save.html menggunakan code editor Notepad++. keludian klik tombol Replace All. Bagian-bagian yang akan kita rubah : .Menu akan kita rubah hanya menjadi 3 .com/assets/images/button_getmig33_small. pada kolom Find what masukan “. setelah keluar kotak dialog klik tab Replace . 2. kemudian tekan Save.png" alt="mig33" height="80" width="126"></a></div> </div> <div> .com dengan tampilan login.html dan lihat perubahannya. Setelah itu klik Replace All.Selanjutnya buka style.html dan style.png http://www. Langkah-langkahnya : 1. Buka kembali login.3 buah gambar yg ada di bagian bawah akan kita jadikan untuk menampilkan paket hotspot.com sudah sama persis..mig33./images/” dan pada kolom Replace with di kosongkan sajah. Sekarang tampilan login.png Selanjutnya silahkan buka login. . jika sudah. caranya tekan CTRL+F kemduan klik tab Replace..com/"><img src="img/mig33_logo.mig33.Background akan kita ganti dengan background yang lebih manis. (ada 17 files yang di replace) .Tombol login dan sign up yang ada di pojok kanan atas akan kita ganti icon yang lain. Jika tampilan website mig33. berarti ada langkah-langkah yang terlewatkan oleh anda. sekarang saatnya kita menjadikan halaman tersebut halaman login hotspot mikrotik./images/” . .Hapus semua tulisan “.css yang ada di dalam folder img menggunakan Notepadd++ . (ada 42 kata yang di replace) Jangan lupa simpan hasil perubahan pada login. silahkan klik 2x pada file login.Masukan Mobile%20IM%20&%20SMS%20Text%20Messaging%20from %20mig33%20-%20mig33_files ke kolom Find what dan kolom Replace with diisi dengan img. .html dengan tampilan www.html anda belum sama. Hapus semua baris yang ada diantara tag UL pembuka dan UL penutup mainNav.css.html menggunakan Notepad++.mig33.Tekan CTRL+F. Merubah tampilan untuk dijadikan login page hotspot mikrotik Setelah tampilan login.http://www.

position: absolute. width: 100%. margin: 0pt. height: 4px. position: absolute. left: 0pt. margin: 0pt. width: 100%. height: 1px. overflow: hidden. height: 4px. background-image: none. height: 3px. bottom: 0pt. left: 0px. left: 0px." href="#"> <div style="position: absolute. height: 3px. background: none repeat scroll 0% 0% transparent. height: 4px."></div></div></div><span>Home</span></a> </li> <li><a style="position: relative. margin: 0pt. padding: 0pt. padding: 0pt. margin: 0pt. height: 4px. background-image: none.mig33. position: absolute. left: 0pt."><div style="overflow: hidden. height: 1px."></div></div></div><span>Product</span></a> </li> <li><a style="position: relative. margin: 0pt 4px. height: 1px."><div style="position: relative. margin: 0pt 4px. width: 100%. overflow: hidden. padding: 0pt. background-image: none."><div style="position: relative. width: 100%. overflow: hidden. overflow: hidden. height: 3px. background: none repeat scroll 0% 0% transparent. width: 100%. background: none repeat scroll 0% 0% transparent. padding: 0pt."></div></div></div><span>Home</span></a> </li> <li><a style="position: relative. background: none repeat scroll 0% 0% transparent. padding: 0pt. position: absolute. bottom: 1px. left: 0px. position: absolute. height: 4px. background-image: none. width: 100%. left: 0px. margin: 0pt. height: 4px." href="#"> <div style="position: absolute. padding: 0pt. left: 0px."><div style="position: relative. height: 4px.<ul id="mainNav"> <li><a style="position: relative. padding: 0pt."></div><div style="overflow: hidden. margin: 0pt."><div style="overflow: hidden. height: 4px. left: 0pt. margin: 0pt. position: absolute. bottom: 1px."></div><div style="overflow: hidden. padding: 0pt. margin: 0pt. left: 0pt."></div></div></div><span>Coverage</span></a> </li> Lengkapnya seperti ini : <ul id="mainNav"> <!--tag pembuka--> <li><a style="position: relative. margin: 0pt. height: 3px. 3. width: 100%. padding: 0pt. overflow: hidden. height: 4px. bottom: 0px. margin: 0pt. width: 100%.Paste kode berikut ke posisi kode yang tadi dihapus diantara UL pembuka <ul id=”mainNav”> dan UL penutup : <li><a style="position: relative. overflow: hidden. padding: 0pt. padding: 0pt."></div><div style="overflow: hidden. margin: 0pt." href="#"> <div style="position: absolute. padding: 0pt."></div></div></div><span>Product</span></a> . margin: 0pt."><div style="overflow: hidden. overflow: hidden. position: absolute. overflow: hidden. left: 0px." href="#"> <div style="position: absolute. width: 100%.com/"> Hapus mulai dari yang saya beri warna merah sampai dengan tag </ul> penutup. left: 0px. width: 100%. bottom: 0pt."><div style="position: relative. position: absolute. width: 100%. margin: 0pt."><div style="position: relative. padding: 0pt. padding: 0pt. padding: 0pt."><div style="overflow: hidden. width: 100%. height: 1px. margin: 0pt 4px. position: absolute. left: 0px."></div><div style="overflow: hidden."><div style="overflow: hidden. bottom: 0pt. bottom: 0pt. padding: 0pt. padding: 0pt. margin: 0pt." href="http://www. width: 100%. bottom: 0pt. margin: 0pt 4px. background: none repeat scroll 0% 0% transparent. bottom: 0px. height: 1px. height: 3px. padding: 0pt. overflow: hidden. bottom: 0px. margin: 0pt 4px. width: 100%. bottom: 1px. bottom: 1px. left: 0px. position: absolute. left: 0px. padding: 0pt."></div><div style="overflow: hidden. left: 0pt. overflow: hidden. width: 100%. height: 4px. bottom: 0px. bottom: 0px. padding: 0pt. background: none repeat scroll 0% 0% transparent. background-image: none. margin: 0pt. bottom: 1px." href="#"> <div style="position: absolute.

padding: 0pt."></div></div></div><span>Coverage</span></a> </li> </ul><!--tag penutup--> Kode yang barusan kita paste adalah kode untuk mengganti navigation menu."><div style="position: relative.password.password. height: 3px.Username <input name="username" type="text" size="24" maxlength="25" style="textalign: center" /></td> <td>&nbsp.</li> <li><a style="position: relative. left: 0pt. position: absolute. overflow: hidden. height: 4px. return false. height: 1px. margin: 0pt 4px. document. margin: 0pt.js"></script> <script type="text/javascript"> <!-function doLogin() { document. width: 100%. left: 0px.sendin. Selanjutnya memasukan parameter login. padding: 0pt. height: 4px.login. bottom: 1px."></div><div style="overflow: hidden.&nbsp." href="#"> <div style="position: absolute.&nbsp.&nbsp.sendin.sendin. padding: 0pt.username."><div style="overflow: hidden. margin: 0pt.&nbsp.login. margin: 0pt.Password <input name="password" type="password" size="24" maxlength="25" style="textalign: center"/></td> <td width="20px" valign="bottom" align="center">&nbsp. background-image: none. width: 100%.value = hexMD5('$(chap-id)' + document. 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. Langkah selanjutnya adalah memasukan kolom login ke dalam halaman login. bottom: 0px.&nbsp. width: 100%.&nbsp.username. padding: 0pt. . silahkan kopi kode yang berwarna hijau dan letakan persis di bawah tag <body> pembuka. Memasukan Kolom Login.value + '$(chap-challenge)'). overflow: hidden. document. <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. left: 0px. bottom: 0pt. background: none repeat scroll 0% 0% transparent.value.value = document.submit(). position: absolute.html buatan kita. </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.

html 8. rlogin.html 2. md5. Bagi yang belum tahu cara upload hotspot dan cara setting hotspot mikrotik ke dalam winbox silahkan nonton filmnya disini.focus(). selanjutnya silahkan upload folder hotspot-modif ke dalam router mikrotik anda. alogin. error.username. errors. logout. .html 7. radvert.login.} //--> </script> $(endif) selanjutnya masukan kode berikut diatas tag </body> penutup.html 3. File-file yang harus di copy dari hotspot asli ke hotspot-modif : 1. status. redirect. //--> </script> </body> </html> Sampai disini kita sudah berhasil membuat halaman login. silahkan download login page hasil edit Kang nadoel. untuk halaman-halaman yang lainnya silahkan copy dari direktori hotspot asli bawaan mikrotik.html 5.txt 9. folder xml Setelah semuanya lengkap.html 4. Hasil akhir edit login page hotspot mikrotik Buat yang sudah berusaha edit login page hotspot tapi masih belum ngerti juga bahkan malah tambah LIEUR.js 10.html 6. <script type="text/javascript"> <!-document.

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->