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.
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 menjadilogin.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> 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)
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 :
- logout.html
- status.html
- alogin.html
- error.html
- radvert.html
- redirect.html
- rlogin.html
- errors.txt
- md5.js
- folder xml
Setelah semuanya
lengkap, selanjutnya silahkan upload folder hotspot-modif ke dalam router
mikrotik anda.
Hasil akhir edit login page hotspot mikrotik
Buat yang sudah
berusaha edit login page hotspot tapi masih belum
ngerti juga bahkan malah tambah LIEUR.
