• Modifikasi Login Page Hotspot MikroTik

    Posted on 20 April 2011 by GmiB26.Net in Downloads, Tips & Trik, Tutorial.
    Modifikasi Login Page Hotspot MikroTik

    Login page default hotspot mikrotik

    Bagi anda yang baru menggunakan mikrotik sebagai captive portal untuk hotspot, pasti anda sudah tidak asing dengan login page hotspot MikroTik yang hanya berupa tabel isian username dan password dengan logo mikrotik gateway di bagian bawah.

    Berikut ini adalah cara bagaimana modifikasi atau mengganti Halaman login default hotspot mikrotik menjadi lebih menarik sehingga selain sebagai halaman login, bisa juga menjadi sarana promosi bagi pengunjung baru yang masuk dalam jaringan hotspot kita.

    Tentukan dulu desain dan template halaman login kita. Anda bisa mencari template-template gratis melalui google yang sesuai dengan selera anda. Setelah anda mendapatkan template tersebut lakukan 3 langkah berikut :

    Buka template anda menggunakan text editor seperti notepad atau notepad++ kemudian sisipkan script dibawah ini pada bagian bawah tag <body> pada file HTML yang anda miliki tadi.

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

    Kemudian pada bagian kolom dimana kita ingin meletakkan isian username dan password sisipkan kode berikut :

    <table>
    <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” />

    <tr><td colspan=”2″>&nbsp;</td></tr>
    <tr><td align=”right”>Username :</td><td><input name=”username” type=”text” value=”$(username)”/></td></tr>
    <tr><td align=”right”>Password :</td><td><input name=”password” type=”password”/></td></tr>
    <tr><td colspan=”2″ align=”center”><input type=”submit” value=”Login” /></td></tr>
    <tr><td colspan=”2″ align=”center”>$(if error)<div style=”color: red; font-size: 10px; text-decoration: blink;”><blink><b>$(error)</b></blink></div>$(endif)</td></tr>

    </form>
    </table>

    Terakhir, pada bagian atas tag </body> sisipkan kode berikut :

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

    Dengan tiga langkah diatas, anda bisa memiliki halaman login sesuai dengan keinginan anda. Anda bisa menggunakan kreatifitas anda untuk mendesain halaman login.

    Berikut adalah halaman login yang telah kami rubah, bagi anda yang berminat untuk menggunakannya ataupun ingin merubahnya silahkan di download, semoga bermanfaat.

    Screenshoot Halaman Login GmiB26.Net Hotspot

    Halaman login yang telah kami ubah seperti pada gambar bukan hanya halaman login, tetapi juga halaman status, halaman logout juga kami tambahkan beberapa halaman seperti halaman harga, benefit, dan contact us. Selain itu, pada halaman login kami juga menyisipkan script jquery yang bisa menampilkan informasi kepada user tentang keuntungan bergabung dengan hotspot kami.

    Kode sumber halaman login diatas bisa diunduh DISINI

     

    (Update :24/01/2013) : Versi terbaru hasil penyempurnaan dari halaman login hotspot mikrotik ini bisa didownload DISINI

    (Update :14/01/2013) : Bagi anda yang ingin memanfaatkan plugin dari Facebook untuk menampilkan update status maupun update news untuk pelanggan hotspot anda, anda bisa mengikuti tutorial berikut : Integrasi Facebook Like Box pada Halaman Status HotSpot MikroTik

     

     

    GmiB26.Net – Your Computer and Network Solution

    GmiB26.Net berlokasi di Perumahan Griya Mangli Indah B.26 kaliwates, Jember – JATIM. Bergerak dibidang Komputer dan Jaringan, Internet Unlimited via HotSpotLayanan Hosting dan Pendaftaran/Registrasi Domain Murah, Penjualan Pulsa All Operator dan Pembayaran Tagihan Online (PPOB)

    Post Tagged with , , ,
Tell Your Friends About This Page!
upon digg

26 Responses so far.

  1. avatar theblackz says:

    saya mau tanya tentang masalah Login Page Mikrotik ini.

    Pertanyaan 1:
    bisa tidak dari login.html default mikrotik kita redirect ke PHP ?

    saya sudah coba menggunakan seperti di bawah ini:

    alhasil tidak terbuka.

    Pertanyaan 2:
    Field yang saya punya:
    1. Full Name
    2. Phone Number
    3. Valid Email

    apakah harus tetap menggunakan Field yang sama dengan Default Mikrotik ? atau bisa dimodifikasi lebih ke arah website secara umumnya ?

    Terima kasih atas tutorialnya. dan mohon masukkannya untuk pertanyaan saya diatas.

    • avatar GmiB26.Net says:

      Pertanyaan 1:
      bisa tidak dari login.html default mikrotik kita redirect ke PHP ?

      maksudnya redirect ke PHP setelah login? sangat bisa.. namun jika login.html diubah jadi login.php anda harus menyiapkan websrevr yang support php.

      apakah harus tetap menggunakan Field yang sama dengan Default Mikrotik ? atau bisa dimodifikasi lebih ke arah website secara umumnya ?

      maksudnya ini field untuk apa ya? kalau untuk login ke mikrotik, system hanya membutuhkan username dan password saja.

  2. […] template halaman login hotspot mikrotik hasil penyempurnaan dari halaman login yang telah kami share sebelumnya. Template ini adalah template kedua yang kami gunakan, sehingga kami sebut dengan “Template […]

  3. […] Bagi anda yang belum mengetahui cara untuk merubah halaman login hotspot mikrotik menjadi lebih menarik dan interaktif, anda bisa mengikuti tutorial kami sekaligus mendownload contoh halaman login yang telah kami rubah dengan berbagai fasilitas tambahan : Memodifikasi Login Page Hotspot MikroTik […]

  4. avatar Edy says:

    Trims gan….. udah ane coba…bagus banget…..trims semoga Allah membalas semua kebaikan agan

  5. avatar Sepuluh says:

    Ijin download mas bro…
    Sekalian ijin edit,.. mo blajar bikin log in page hot spot.
    Makasih banyak… kalo ada kendala boleh curhat dong?

  6. avatar c4p1t4n says:

    minta link download “page login yang terbaru nya mas.. 😀

  7. avatar Pak_Bro says:

    keren gan…ijin sedoottt login page nya…trims banget…

  8. avatar iwan says:

    Ijin dan donlod mas……..makasih banyak,namun untuk status/lodoutnya punya saya koq nggk keluar yaapanya yg salah dengan punya saya,perangkat rb 750 os v 5.14
    trims banyak

  9. avatar yoga says:

    ijin download gan…..

Leave a Reply

Your email address will not be published. Required fields are marked *

Your ip address : 54.82.10.219
Current Time : 12 December 2018 14:32:21 GMT+7