Professional Documents
Culture Documents
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 :
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 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.
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 :
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 :
Kode yang barusan kita paste adalah kode untuk mengganti navigation menu.
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> Username
<input name="username" type="text" size="24" maxlength="25" style="text-align:
center" /></td>
<td> Password
<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=" 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)
<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.
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.
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.