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:

10 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

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel