Cara membuat Login Page Hotspot external, Upload Login Page Mikrotik ke Hosting, localhost

Cara membuat Login Page Hotspot external, Upload Login Page Mikrotik ke Hosting, localhost - Salah satu fitur yang ada pada mikrotik yaitu fitur Hotspot, fitur ini sangat berguna untuk melakukan autentikasi pengguna yang ingin mengakses internet kita artinya ketika seorang pengguna mencoba untuk mengakses internet melalui titik hotspot yang kita buat, maka pengguna tersebut akan di alihkan atau di-redirect ke halaman login terlebih dahulu untuk melakukan proses autentikasi usernya. hal ini sangat familiar di rekan-rekan yang memiliki Usaha RT RW Net yang sebagian besar menggunakan fitur Hotspot untuk sistem voucheran.


Pada kesempatan kali ini saya akan berbagi atau mengulas Cara agar Login Page Hotspot bisa di akses melalui internet. pada dasarnya login page mikrotik terletak di dalam file mikrotik yang pada umumnya hanya bisa di akses melalui interface yang sudah di aktifkan fitur hotspotnya agar file tersebut bisa di akses lebih luas maka kita Upload File Login Page Mikrotik kita Ke Hosting milik kita.

sebelum kita upload maka kita persiapkan terlebih dahulu file login pagenya. biar mudah kita gunakan software webserver lokal terlebih dahulu. bisa menggunakan exampp atau yang lainnya. saya kira di sini teman - teman sudah bisa kalau masih belum paham tentang exampp silahkan teman-teman cari di artikel blog ini.

setelah persiapannya sudah yuk kita eksekusi file tersebut seperti di bawah. di sini saya cuma mencontohkan file loginnya saja, yang lain bisa sahabat sesuaikan sendiri.
pada file login yang di Mikrotik kita buat seperti ini.

<html>
<head><title>login</title></head>
<body>
$(if chap-id)
<noscript>
<center><b>JavaScript required. Enable JavaScript to continue.</b></center>
</noscript>
$(endif)
<center>If you are not redirected in a few seconds, click 'continue' below<br>
<form name="redirect" action="http://alamat-website/login.php" method="post">
<input type="hidden" name="mac" value="$(mac)">
<input type="hidden" name="ip" value="$(ip)">
<input type="hidden" name="username" value="$(username)">
<input type="hidden" name="link-login" value="$(link-login)">
<input type="hidden" name="link-orig" value="$(link-orig)">
<input type="hidden" name="error" value="$(error)">
<input type="hidden" name="trial" value="$(trial)">
<input type="hidden" name="chap-id" value="$(chap-id)">
<input type="hidden" name="chap-challenge" value="$(chap-challenge)">
<input type="hidden" name="link-login-only" value="$(link-login-only)">
<input type="hidden" name="link-orig-esc" value="$(link-orig-esc)">
<input type="hidden" name="mac-esc" value="$(mac-esc)">
<input type="hidden" name="identity" value="$(identity)">
<input type="hidden" name="bytes-in-nice" value="$(bytes-in-nice)">
<input type="hidden" name="bytes-out-nice" value="$(bytes-out-nice)">
<input type="hidden" name="session-time-left" value="$(session-time-left)">
<input type="hidden" name="uptime" value="$(uptime)">
<input type="hidden" name="refresh-timeout" value="$(refresh-timeout)">
<input type="hidden" name="link-status" value="$(link-status)">
<input type="submit" value="continue">
</form>
<script language="JavaScript">
   document.redirect.submit();
</script></center>
</body>
</html>

bisa sahabat copy saja teks di atas atau nanti bisa sahabat download di halaman terakhir artikel ini, pada tulisan yang berwarna merah bisa sahabat ganti dengan alamat website tempat sahabat upload file loginnya. atau juga bisa di akses dulu halaman login di website sahabat kemudian copy link nya untuk di taruh di tulisan yang berwarna merah.

kemudian pada sisi file login yang akan kita upload di hosting, kita edit terlebih dahulu seperti berikut

<?php
    $mac=$_POST['mac'];
    $ip=$_POST['ip'];
    $username=$_POST['username'];
    $linklogin=$_POST['link-login'];
    $linkorig=$_POST['link-orig'];
    $error=$_POST['error'];
    $trial=$_POST['trial'];
    $loginby=$_POST['login-by'];
    $chapid=$_POST['chap-id'];
    $chapchallenge=$_POST['chap-challenge'];
    $linkloginonly=$_POST['link-login-only'];
    $linkorigesc=$_POST['link-orig-esc'];
    $macesc=$_POST['mac-esc'];
    $identity=$_POST['identity'];
    $bytesinnice=$_POST['bytes-in-nice'];
    $bytesoutnice=$_POST['bytes-out-nice'];
    $sessiontimeleft=$_POST['session-time-left'];
    $uptime=$_POST['uptime'];
    $refreshtimeout=$_POST['refresh-timeout'];   
    $linkstatus=$_POST['link-status'];  
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Mikrotik Hotspot | Login</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
</head>
<body>

<div id="wrap">
    <div class="navbar navbar-inverse navbar-static-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><?php echo $identity; ?></a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="link login page di web sahabat">Login</a></li>
                    <li><a href="link status page di web sahabat">Status</a></li>
                    <li><a href="link logout page di web sahabat">Logout</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div id="bottom-menu">
        <div class="container">
            <div class="row">
                <div class="col-md-2 mylogo">
                    <a href="link login page di web sahabat" ref="index.html"><img src="img/agratitudesignlogo2.png" alt="logo"></a>
                </div>
                <div class="col-xs-10 textlogo">
                    <h1>Agratitudesign Hotspot</h1>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="col-md-6 col-sm-12">
     
            <div class="row">
                <?php if($error) : ?>
                    <div class="alert alert-danger"><?php echo $error; ?></div>
                <?php endif; ?>

                <div class="alert alert-info">Please log on to use the hotspot service.</div>
                <?php if($trial == 'yes') : ?> 
                    <div class="alert alert-info">
                        Free trial available, <a href="<?php echo $linkloginonly; ?>?dst=<?php echo $linkorigesc; ?>&amp;username=T-<?php echo $macesc; ?>">click here</a>.
                    </div>
                <?php endif; ?>
            </div>

            <div class="row">         
                <div class="panel panel-default">
                 
                    <div class="panel-body">

                        <form id="loginForm" class="form-horizontal" role="form" action="<?php echo $linkloginonly; ?>" method="post">
                            <input type="hidden" name="dst" value="<?php echo $linkorig; ?>"/>
                            <input type="hidden" name="popup" value="true"/>

                            <div class="form-group">
                                <label for="inputLogin" class="col-sm-2 control-label">Login</label>

                                <div class="col-sm-10">
                                    <input type="text" class="form-control input-lg" id="inputLogin" name="username"
                                           placeholder="Login" autofocus required>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputPassword" class="col-sm-2 control-label">Password</label>

                                <div class="col-sm-10">
                                    <input type="password" class="form-control input-lg" id="inputPassword" name="password"
                                           placeholder="Password" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button type="submit" class="btn btn-primary btn-block btn-lg">OK</button>
                                </div>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>

        <div class="col-md-6 col-sm-12">
            <div class="panel panel-default">
                <div class="panel-body">

                    <div class="card hovercard">
                        <div class="cardheader">
                        </div>
                        <div class="avatar">
                        <img alt="" src="img/agratitudesignlogo.png">
                        </div>
                        <div class="info">
                        <div class="title">
                        <a href="https://bocahkomputer.com/">Agratitudesign HighSpeed Hotspot</a>
                        </div>
                        <div class="desc">Website Hotspot Interface For Free</div>
                        <div class="desc">created by <a target="_blank" href="https://bocahkomputer.com/" title="Bocah Komputer">https://bocahkomputer.com/</a></div>
                        <div class="desc">supported by <a target="_blank" href="https://bocahkomputer.com/" title="Agratitudesign Hotspot Templates">https://bocahkomputer.com/</a></div>
                        </div>
                        <div class="bottom">
                        <a class="btn btn-primary btn-twitter btn-sm" href="#"><i class="fa fa-twitter"></i></a>
                        <a class="btn btn-danger btn-sm" rel="publisher" href="#"><i class="fa fa-google-plus"></i></a>
                        <a class="btn btn-primary btn-sm" rel="publisher" href="#"><i class="fa fa-facebook"></i></a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<div id="footer">
    <div class="container">
        <p class="text-muted">Powered by <a href="https://bocahkomputer.com/">Bocah Komputer</a></p>
    </div>
</div>


<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>


<?php if($chapid) : ?>
<script type="text/javascript" src="js/md5.js"></script>
<script type="text/javascript">
<!--
    function doLogin() {
    <?php if(strlen($chapid) < 1) echo "return true;\n"; ?>
    document.sendin.username.value = document.login.username.value;
    document.sendin.password.value = hexMD5('<?php echo $chapid; ?>' + document.login.password.value + '<?php echo $chapchallenge; ?>');
    document.sendin.submit();
    return false;
    }
//-->
</script>
<?php endif; ?>

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

</body>
</html>
perhatikan tulisan yang saya kasih tanda warna merah di situ bisa sahabat sesuaikan sendiri apa bila mau upload login page yang sahabat punya dan pastikan scrip php di atas yang warna biru sahabat copy juga ke file login page sahabat. contoh perbuhan yang warna merah. < ? php echo $linkloginonly; ? > pada perintah ini dasarnya adalah $(link-login-only) karna harus di rubah dalam script php maka harus di ganti menjadi < ? php echo $linkloginonly; ? >. begitupun dengan yang lainnya bisa sahabat bocah komputer sesuaikan sendiri.

ohya karna ini membutuhkan internet maka kita harus mem-bypas nya di router hotspot kita terlebih dahulu dengan cara berikut.

/ip hotspot walled-garden ip
add action=accept disabled=no dst-host=link web sahabat
tinggal sahabat pastekan perintah di atas ke mikrotik sahabat menggunakan terminal.

Demikian cara membuat external login page hotspot yang bisa saya bagi, apa bila ada tutur kata yang kurang berkanan saya mohon maaf. jika masih kebingungan dalam penerapannya bisa menghubungi saya lewat WA ke 088 22 666 44 21. terimakasih atas kunjungannya...

sumber : https://agratitudesign.blogspot.com/2015/04/conversion-internal-to-external-hotspot.html

Link Download

Berlangganan update artikel terbaru via email:

20 Responses to "Cara membuat Login Page Hotspot external, Upload Login Page Mikrotik ke Hosting, localhost"

  1. Beneficial info and excellent design you got here! I want to thank you for sharing your ideas and putting the time into the stuff you publish! Great work! web design company

    ReplyDelete
  2. For that reason times repeatedly pretty much everything, this life definitely is ended up saving a little bit more. The program in fact saves currently the And also carbon actually motivated in to planet during these development activities. dc free mommy blog giveaways family trip home gardening house power wash baby laundry detergent website design

    ReplyDelete
  3. I am lucky that I found this web blog, precisely the right information that I was searching for! design

    ReplyDelete
  4. Great post , I am going to spend more time researching this topic brand identity design

    ReplyDelete
  5. Some truly quality blog posts on this web site , saved to my bookmarks . design

    ReplyDelete
  6. Do people still use these? Personally I love gadgets but I do prefer something a bit more up to date. Still, nicely written piece thanks. iphone template

    ReplyDelete
  7. You made some respectable points there. I looked on the internet for the issue and found most people will go along with with your website. tablet mockup

    ReplyDelete
  8. Hello! I’ve been following your blog for a while now and finally got the courage to go ahead and give you a shout out from Kingwood Texas! Just wanted to mention keep up the good work! macbook template

    ReplyDelete
  9. Thank you for such a fantastic blog. Where else could anyone get that kind of info written in such a perfect way? I have a presentation that I am presently working on, and I have been on the look out for such information android phone template

    ReplyDelete
  10. I really love the theme on your website, I run a web site , and i would adore to use this theme. Is it a free style, or is it custom? webflow designer

    ReplyDelete
  11. An impressive share, I just given this onto a colleague who was doing a little evaluation on this. And he in reality bought me breakfast as a result of I found it for him.. smile. So let me reword that: Thnx for the treat! But yeah Thnkx for spending the time to discuss this, I really feel strongly about it and love studying extra on this topic. If potential, as you develop into expertise, would you mind updating your weblog with extra particulars? It’s extremely useful for me. Huge thumb up for this weblog submit! webflow company

    ReplyDelete
  12. Respect to website author , some good selective information . webflow developer

    ReplyDelete
  13. This design is spectacular! You obviously know how to keep a reader amused. Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Fantastic job. I really enjoyed what you had to say, and more than that, how you presented it. Too cool! website development company

    ReplyDelete
  14. I am not really excellent with English but I line up this really easygoing to understand . web developers

    ReplyDelete
  15. You could certainly see your enthusiasm in the work you write. The world hopes for more passionate writers like you who aren’t afraid to say how they believe. Always go after your heart. ui ux design

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel