Kode Voucher PHPMixBill Sebagai Username Hotspot MikroTik

  |   24/09/2017 |   Tutorial PHPMixBill |   10 Comments

Kode Voucher PHPMixBill Sebagai Username Hotspot MikroTik
Kode Voucher PHPMixBill Sebagai Username Hotspot MikroTik – Seperti judul artikel ini, Kode Voucher PHPMixBill Sebagai Username Hotspot MikroTik, merupakan optimasi lanjutan terhadap PHPMixBill agar bisa berinteraksi lebih baik dengan hotpsot mikrotik, khususnya integrasi dalam hal login page dan autentikasi login.

Pada Artikel sebelumnya saya sudah membahas Tutorial Install dan Setting PHPMixBill sebagai Billing Hotspot MikroTik dan Cara Modifikasi Design Print Voucher PHPMixBill, bagi yang ketinggalan silahkan baca-baca dulu tutorial sebelumnya agar lebih mudah memahami tujuan dan maksud dari artikel ini. Karena pada artikel kali ini saya mencoba berbagi beberapa script PHPMixBill yang sudah dimodifikasi agar terintegrasi ke login page hotspot mikrotik serta menjadikan kode voucher PHPMixBill sebagai media autentikasi login ke server hotspot mikrotik.



Baca Juga :

Download PHPMixBill Voucher Generator Terbaru



Sebelum saya menjelaskan lebih lanjut , ada baiknya saya jelaskan dulu pola dan cara kerja integrasi PHPMixBill dengan login page hotspot mikrotik setelah menerapkan isi dari artikel ini :

  1. Saat user hotspot terhubung ke SSID Hotspot, user hotspot akan diarahkan ke file login.html yang ada pada folder_template_hotspot_anda/
  2. Lalu user akan di redirect ke login page PHPMixBill yang sudah di modifikasi untuk melakukan aktivasi kode voucher
  3. Setelah user melakukan aktivasi kode voucher, secara otomatis user diarahkan ke login page hotspot, yaitu pada file folder_template_hotspot_anda/hotspot/login.html
  4. Selanjutnya user hotspot bisa login ke hotspot dengan menggunakan kode voucher yang telah diaktivasi sebagai media autentikasi, karena saat user melakukan aktivasi kode voucher, secara otomatis kode voucher tersebut di input oleh PHPMixBill menggunakan protokol API ke router hotspot sebagai username untuk login hotspot, dan password yang digunakan disini adalah password global, perhatikan gambar berikut :

    list-user-hotspot
  5. Jika user hotspot sudah pernah melakukan aktivasi dan kode vouchernya masih valid, user hotspot tinggal klik tombol HOTSPOT pada login page PHPMixBill yang akan mengarahkan ke login page hotspot mikrotik (lihat gambar diakhir artikel ini)
  6. Alur akses ke file folder_template_hotspot_anda/login.html dan file folder_template_hotspot_anda/hotspot/login.html sama persis dengan pola dan cara kerja eksternal login page hotspot mikrotik

Untuk langkah awal kita akan melakukan sedikit modifikasi pada template login hotspot mikrotik, silahkan anda sesuaikan dengan template yang anda gunakan.

Modifikasi Template Login Hotspot MikroTik

  • Buat sebuah folder dengan nama hotspot dalam folder template login hotspot mikrotik anda dan copykan file login.html,error.txt dan semua file atau folder CSS,IMG/IMAGE,JS anda kedalam folder hotspot yang sudah dibuat. Berikut contoh pada tempat saya :

    contoh-1
  • Lalu anda edit file login.html yang sudah berada pada folder_template_hotspot_anda/hotspot/, cari element input dengan type="username" dan type="password", perhatikan contoh pada file login.html milik saya :
    <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" />
 <br/>
 <input name="username" style="font-size:15px;padding-bottom:3px;" type="text" placeholder="Kode Voucher atau Username" required/>
 <input name="password" style="font-size:15px;margin-top:20px;padding-bottom:3px;" type="password" placeholder="Password" required/>
 <br/>
 <br/>
 <table>
 <input align="center" style="font-size:16px;padding-bottom:10px;margin-top:-1%;" type="submit" value="MASUK"/>
 </table>
 </form>

    Yang akan kita rubah hanya kode yang ada pada line 6 dan line 7, sebelumnya silahkan sesuaikan dengan file yang anda gunakan. Perhatikan pada line 6 :

    , anda rubah type="text" menjadi type="password"

    Lalu pada line 7, anda perhatikan element :

    , anda rubah type="password" menjadi type="hidden" value="%kb^&_#!H5-04s15%"

    %kb^&_#!H5-04s15% adalah string acak yang akan menjadi global password sesuai dengan yang dideklarasikan pada file prepaid.php dan register.php, jika anda ingin merubah ini maka anda juga harus merubah value variabel $global_password yang ada pada file prepaid.php dan register.php

    Berhubung dengan banyaknya macam template login hotspot mikrotik, mungkin dibeberapa template akan ada perubahan-perubahan lain yang harus disesuaikan juga pada file template_login_hotspot_anda/hotspot/login.html, seperti penyesuaian lokasi link-link optional. Berikut contoh potongan isi file login.html saya sesudah disesuaikan sebagai patokan buat anda, anda perhatikan pada line 2 :

    <div class="main-menu" align="center">
 <a class="login" href="hotspot/login.html"><b>Login</b></a>
 <a class="service" href="https://oasis-net.online/">Isi Paket</a>
 <a class="hotspot" href="hotspot.html">Hotspot</a>
 <a class="contact" href="contact.html">Support</a>  
 </div>

    Ingat ya, jika ada link pada file-file lain seperti file status.html, logout.html, dan file lainnya yang link tersebut mengarah ke file login.html, harus diarahkan ke file login.html yang berada dalam folder template_login_hotspot_anda/hotspot/.

    Selanjutnya edit file logout.html dan cari variabel $(link-login) lalu rubah sehingga menjadi hotspot/login.html

  • Langkah selanjutnya anda mundur satu folder dari folder_template_hotspot_anda/hotspot/ sehingga posisi anda berada pada folder_template_hotspot_anda/, dan anda buat sebuah file login.html baru, yang mana file ini yang akan meredirect user-user hotspot ke login page PHPMixBill untuk aktivasi voucher, kemudian PHPMixBill mengembalikan lagi ke template hotspot mikrotik untuk login dengan kode voucher yang sudah diaktivasi, berikut scriptnya dan anda sesuaikan bagian ip_server_phpmixbill pada line 6 dengan alamat server PHPMixBill milik anda :
    <!DOCTYPE html>
 <html lang="id-ID" prefix="og: http://ogp.me/ns#">
 <head>
 <title>INTERNET HOTSPOT ::: Redirect</title>
 </head>
 <form name="redirect" action="http://ip_server_phpmixbill/" method="post">
 </form>
 <script language="JavaScript">
 document.redirect.submit();
 </script></center>
 </body>
 </html>

    Kemudian anda tambahkan domain atau ip_server_phpmixbill anda ke Wallet Garden IP List hotspot mikrotik anda, atau tambahkan melalui perintah dibawah ini dan sesuaikan dst-address atau dst-host dengan domain atau ip server PHPMixBill anda :

    /ip hotspot wallet-garden ip add action=accept disabled=no dst-address=ip_server_phpmixbill
    atau
    /ip hotspot wallet-garden ip add action=accept disabled=no dst-host=domain_server_phpmixbill

Selanjutnya kita lakukan modifikasi pada PHPMixBill nya, silahkan anda siapkan alat tempurnya seperti WinSCP dan Notepad++, silahkanDownload WinSCP dari Website Resmi dan Download Notepad++ dari Website Resmi. Selanjutnya silahkan anda ikuti langkah-langkah berikut.

Baca Juga :

Cara Mengaktifkan Schedule User Expire pada PHPMixBill

Modifikasi Template Login Klien PHPMixBill

  • Terlebih dahulu anda anda download sebuah file melalui url ini : Download Style CSS PHPMixBill, setelah selesai didownload anda extrak dan upload folder “styles” hasil ekstrak ke server PHPMixBill anda, tepatnya ada di root_folder_phpmixbill/ui/theme/default/, anda replace folder styles bawaan PHPMixBill
  • Selanjutnya buat sebuah file bernama hotspot.php pada folder root_folder_phpmixbill/system/controllers/, sebelum anda copy paste script dibawah ini ke file hotspot.php, anda sesuaikan nama domain_hotspot_anda yang ada pada line nomor 6 dengan kondisi di tempat anda
    <!DOCTYPE html>
 <html lang="id-ID" prefix="og: http://ogp.me/ns#">
 <head>
 <title>{$_c['CompanyName']} ::: Redirect</title>
 </head>
 <form name="redirect" action="http://domain_hotspot_anda/hotspot/login.html" method="post">
 </form>
 <script language="JavaScript">
 document.redirect.submit();
 </script></center>
 </body>
 </html>
  • Selanjutnya anda replace semua isi file register.php yang ada pada root_folder_phpmixbill/system/controllers/
    dengan script yang ada pada link dibawah ini yang tujuannya untuk menjadikan kode voucher PHPMixBill sebagai autentikasi login hotspot mikrotik, dan auto input ke router hotspot saat kode voucher di-aktivasi :

    FILE REGISTER.PHP
    Download File register.php

  • Selesai langkah diatas lanjutkan dengan me-replace semua isi file prepaid.php dengan script yang ada pada link berikut ini yang memiliki tujuan yang sama dengan langkah diatas, hanya saja ini khusus buat user yang di tambahkan secara manual pada PHPMixBill.

    FILE PREPAID.PHP
    Download File prepaid.php



  • Masih dalam folder root_folder_phpmixbill/system/controllers/, anda lanjutkan dengan membuat sebuah file dengan nama bantuan.php dan copy paste script berikut sebagai isi dari file bantuan.php
    <?php
 /**
 **/
 
 if (isset($routes['1'])) {
 $do = $routes['1'];
 } else {
 $do ='login-display';
 }
 
 switch($do){
 
 case 'login-display':
 $ui->display('bantuan.tpl');
 break;
 
 default:
 $ui->display('bantuan.tpl');
 break;
 }
  • Lalu anda lanjutkan dengan membuat sebuah file dengan nama hotspot.php dan copy paste script berikut, dan jangan lupa anda sesuaikan pada bagian domain_hotspot_anda :
    <!DOCTYPE html>
 <html lang="id-ID" prefix="og: http://ogp.me/ns#">
 <head>
 <title>{$_c['CompanyName']} ::: Redirect</title>
 </head>
 <form name="redirect" action="http://domain_hotspot_anda/hotspot/login.html" method="post">
 </form>
 <script language="JavaScript">
 document.redirect.submit();
 </script></center>
 </body>
 </html>
  • Langkah selanjutnya anda masuk ke root_folder_phpmixbill/ui/theme/default/ dan buka file login.tpl lalu replace semua isinya dengan script dibawah ini, lalu anda replace domain_hotspot_anda yang ada pada line 60, sesuaikan dengan nama domain hotspot anda :
    <!DOCTYPE html>
 <html>
 <head>
 <meta name="robots" content="noindex, nofollow" />
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <title>{$_title} - LOGIN</title>
 <link rel="shortcut icon" href="{$_theme}/images/logo.png" type="image/x-icon" />
 
 <!-- Css/Less Stylesheets -->
 <link rel="stylesheet" href="{$_theme}/styles/font-awesome/css/font-awesome.min.css">
 <link rel="stylesheet" href="{$_theme}/styles/bootstrap.min.css">
 <link rel="stylesheet" href="{$_theme}/styles/main.min.css">
 
  <!-- <link href='http://fonts.googleapis.com/css?family=Roboto:400,500,700,300' rel='stylesheet' type='text/css'> -->
 <!-- Match Media polyfill for IE9 -->
 <!--[if IE 9]> <script src="{$_theme}/scripts/ie/matchMedia.js"></script> <![endif]-->
 
 </head>
 <body class="client-login">
 <div class="container">
  
  <div class="form-head mb20">
 
  </div>
 <h1 style="text-align:center;color:#CCC;">{$_c['CompanyName']}</h1>
 <center>
   <div style="max-width:400px;margin-top:2%;">
    <div class="panel panel-default">
    
  
    
     <div class="panel-heading">{$_c['CompanyName']}<br>Panel Aktivasi Voucher Sekali Pakai</div>
     <div class="panel-body" style="min-height:100px;margin:0 auto;">
      <div class="form-container">
       <form class="form-horizontal" action="{$_url}register/post" method="post">
       <br/>
       
       <div style="margin-top:-20px;margin-bottom:5px;">
       {if isset($notify)}
        {$notify}
       {/if}
       </div>
       
       <div style="margin-top:20px;" class="input-group margin-bottom-sm">
        <span class="input-group-addon"><i class="fa fa-user-circle-o fa-fw"></i></span>
        <input class="form-control" type="text" required placeholder="Masukkan Nama" id="fullname" name="fullname">
       </div>
       
       <div style="margin-top:10px;" class="input-group">
        <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
        <input class="form-control" type="text" required placeholder="Masukkan Kode Voucher" id="kodevoucher" name="kodevoucher">
       </div>
       
        <div style="margin-top:30px;" class="btn-group btn-group-justified mb15">
         <div class="btn-group">
          <button class="btn btn-primary waves-effect waves-light" type="submit"><i class="fa fa-unlock" aria-hidden="true"></i> AKTIVASI</button>
         </div>
         <div class="btn-group">
          <a href="http://domain_hotspot_anda/hotspot/login.html" class="btn btn-success"><i class="fa fa-sign-in" aria-hidden="true"></i> HOTSPOT</a>
         </div>
        </div>
       
        <div style="margin-top:-5px;" class="btn-group btn-group-justified mb15">
         <div class="btn-group">
          <a href="{$_url}bantuan" style="background-color: #008B8B ;border:1px solid #008B8B;" class="btn btn-success"><i class="fa fa-info-circle" aria-hidden="true"></i> BANTUAN</a>
         </div>
        </div>
       
       </form>
      </div>
     </div>
    </div>
   </div> </center>
 </div>
 <div class="copyright">
 <center><strong><span style="font-size:11px;color:#bbb;">2017 &copy; Modified by <a href="https://www.facebook.com/ef.doank" title="Profil Facebook EF.DOANK" target="_blank">EF.DOANK</a> | </span><span class="link-footer"><a href="#" title="" style="font-size:11px;">{$_c['CompanyName']}</a></strong></span></center></div>
 <script src="scripts/vendors.js"></script>
 </body>
 </html>
  • Selanjutnya masih dalam folder root_folder_phpmixbill/ui/theme/default/, anda buat sebuah file dengan nama bantuan.tpl yang isinya copy pastekan script dibawah ini dan ubah domain_hotspot_anda yang ada pada line 51 dengan nama domain hotspot anda :
    <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <title>{$_title} - LOGIN</title>
 <link rel="shortcut icon" href="{$_theme}/images/logo.png" type="image/x-icon" />
 
 <!-- Css/Less Stylesheets -->
 <link rel="stylesheet" href="{$_theme}/styles/font-awesome/css/font-awesome.min.css">
 <link rel="stylesheet" href="{$_theme}/styles/bootstrap.min.css">
 <link rel="stylesheet" href="{$_theme}/styles/main.min.css">
 
  <!-- <link href='http://fonts.googleapis.com/css?family=Roboto:400,500,700,300' rel='stylesheet' type='text/css'> -->
 <!-- Match Media polyfill for IE9 -->
 <!--[if IE 9]> <script src="{$_theme}/scripts/ie/matchMedia.js"></script> <![endif]--> 
 
 </head>
 <body class="client-login">
 <div class="container">
  
  <div class="form-head mb20">
 
  </div>
 <h1 style="text-align:center;color:#CCC;">{$_c['CompanyName']}</h1>
 <center>
   <div style="max-width:400px;margin-top:2%;">
    <div class="panel panel-default">
    
  {if isset($notify)}
   <div class="row">
    <div class="col-md-6 col-md-offset-3">
     {$notify}
    </div>
   </div>
  {/if}
    
     <div class="panel-heading">Panel Member - BANTUAN</div>
     <div class="panel-body" style="min-height:100px;margin:0 auto;">
      <div class="form-container">
       <form class="form-horizontal" action="{$_url}login/post" method="post">
       
       <ul style="font-size:14px;font-family:'Century Gothic', tahoma, verdana;text-align:justify;margin-left:-15px;margin-right:15px;">
        <li>Tombol <span style="font-weight:bold;">AKTIVASI</span> untuk mengaktivasikan Kode Voucher agar terintegrasi ke Server Hotspot, terlebih dahulu harus membeli Kode Voucher</li><br/>
        <li>Tombol <span style="font-weight:bold;">HOTSPOT</span> untuk login ke {$_c['CompanyName']} jika sudah mempunyai Kode Voucher atau Username yang masih valid</li>
       </ul>
       <br/>
    
        <div style="margin-top:8px;" class="btn-group btn-group-justified mb15">
         <div class="btn-group">
          <a href="http://domain_hotspot_anda/hotspot/login.html" class="btn btn-primary">HOTSPOT</a>
         </div>
         
         <div class="btn-group">
          <a href="{$_url}login" class="btn btn-success">KEMBALI</a>
         </div>
                
        </div>
       
       </form>
      </div>
     </div>
    </div>
   </div> </center>
 </div>
 <div class="copyright">
 <center><strong><span style="font-size:11px;color:#bbb;">2017 &copy; Modified by <a href="https://www.facebook.com/ef.doank" title="Profil Facebook EF.DOANK" target="_blank">EF.DOANK</a> | </span><span class="link-footer"><a href="#" title="" style="font-size:11px;">{$_c['CompanyName']}</a></strong></span></center></div>
 <script src="scripts/vendors.js"></script>
 </body>
 </html>
  • Langkah terakhir, buka file admin.tpl yang ada pada root_folder_phpmixbill/ui/theme/default/, kemudian replace semua isinya dengan script dibawah ini :
    <!DOCTYPE html>
 <html>
 <head>
 <meta name="robots" content="noindex, nofollow" />
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <title>{$_title} - {$_L['Login']}</title>
 <link rel="shortcut icon" href="{$_theme}/images/logo.png" type="image/x-icon" />
 
 <!-- Icons -->
 <link rel="stylesheet" href="{$_theme}/fonts/ionicons/css/ionicons.min.css">
 <link rel="stylesheet" href="{$_theme}/styles/font-awesome/css/font-awesome.min.css">
 
 <!-- Plugins -->
 <link rel="stylesheet" href="{$_theme}/styles/plugins/waves.css">
 <link rel="stylesheet" href="{$_theme}/styles/plugins/perfect-scrollbar.css">
 
 <!-- Css/Less Stylesheets -->
 <link rel="stylesheet" href="{$_theme}/styles/bootstrap.min.css">
 <link rel="stylesheet" href="{$_theme}/styles/main.min.css">
 
  <!-- <link href='http://fonts.googleapis.com/css?family=Roboto:400,500,700,300' rel='stylesheet' type='text/css'> -->
 <!-- Match Media polyfill for IE9 -->
 <!--[if IE 9]> <script src="{$_theme}/scripts/ie/matchMedia.js"></script> <![endif]--> 
 
 
 </head>
 <body style="background: url({$_theme}/styles/img/bg.jpg) no-repeat fixed;
 -webkit-background-size: 100% 100%;
 -moz-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 background-size: 100% 100%; " id="app" class="app off-canvas body-full">
 
 <div>
  <div style="font-family:Century Gothic;" class="content-container" id="content"><br/>
  
 <h1 style="text-align:center;color:#CCC;">BiLLiNG HOTSPOT<br>{$_c['CompanyName']}</h1>
 
   <div class="page page-auth">
    <div class="auth-container">
     <div style="text-align:center;" class="form-head mb20">
      <h4>BILLING HOTSPOT LOGIN</h4>
     <!-- <h5 class="text-normal h5 text-center">{$_L['Sign_In_Admin']}</h5> -->
     </div>
     
    {if isset($notify)}
     {$notify}
    {/if}
     <div class="form-container">
      <form class="form-horizontal" action="{$_url}admin/post" method="post">
       <div style="margin-top:20px;" class="input-group margin-bottom-sm">
        <span class="input-group-addon"><i class="fa fa-user-circle-o fa-fw"></i></span>
        <input class="form-control" type="text" required placeholder="Username" id="username" name="username">
       </div>
       
       <div style="margin-top:10px;" class="input-group">
        <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
        <input class="form-control" type="password" required placeholder="Password" id="password" name="password">
       </div>
 <br/>
       <div class="clearfix">
        <div class="ui-checkbox ui-checkbox-primary right">
         <label>
          <input type="checkbox"> 
          <span>Ingat Saya</span>
         </label>
        </div>
       </div>
       <div class="btn-group btn-group-justified mb15">
        <div class="btn-group">
         <button type="submit" class="btn btn-primary"><i class="fa fa-sign-in" aria-hidden="true"></i>LOGIN</button>
        </div>
       </div> 
      </form>
     </div>
 
    </div>
   </div>
  </div> 
 </div>
 <script src="scripts/vendors.js"></script>
 </body>
 </html>

Setelah selesai semua langkah-langkah diatas silah dicoba akses ulang login klien PHPMixBill anda, http://ip_server_phpmixbill/phpmixbill/index.php?_route=login, silahkan sesuaikan format urlnya dengan kondisi ditempat anda. Berikut contoh penampakan setelah menggunakan script diatas
Kode Voucher PHPMixBill Sebagai Username Hotspot MikroTik

Harus saya akui optimasi PHPMixBill ini untuk Integrasi Kode Voucher PHPMixBill Sebagai Username Hotspot MikroTik memanglah ribet, tapi dengan sedikit ketabahan dan kegigihan, bisa saya pastikan hasilnya penggunaan PHPMixBill sebagai Billing Hotspot MikroTik jadi lebih efisien seperti yang saya terapkan pada jaringan hotspot saya.



Pada artikel selanjutnya saya akan berbagi script cronjob untuk auto delete user expire dan auto delete voucher yang sudah digunakan serta cara mengaktifkan schedulenya pada router mikrotik. Mudah-mudah artikel kali ini bisa memberi manfaat buat para pengguna PHPMixBill, Selamat Mencoba dan Selamat Bereksperimen.

00votes
Article Rating
   

Related Posts

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

10 Comments
Newest
OldestMost Voted
Inline Feedbacks
View all comments
juna
juna
6 years ago

gan tolong buat dalam bentuk video bang soalnya bingung..mksh ya mas

0
Reply
juna
juna
6 years ago

gan tolong buat dalam bentuk video soalx bingung bang?

0
Reply
Ghofur
Ghofur
7 years ago

ada ga tutorial membuat form pendaftaran client hotspot yg terintegrasi dengan raspi+phpmixbill? kalau ada tolong di share dong !

0
Reply
EF Doank
Author
EF Doank
7 years ago
Reply to  Ghofur

insyaallah jika ada kesempatan gan

0
Reply
danu
danu
7 years ago

gan klo generatenya gmna ???

0
Reply
EF Doank
Author
EF Doank
7 years ago
Reply to  danu

coba agan ikuti videonya, divideo tutorial ada saya berikan contoh. cek juga artikel “download phpmixbill voucher generator” gan

0
Reply
M Ade TS
M Ade TS
7 years ago

saya ganteng

0
Reply
EF Doank
Author
EF Doank
7 years ago
Reply to  M Ade TS

spammer 😛

0
Reply
Revi Ganteng
Revi Ganteng
7 years ago
Reply to  M Ade TS

Saya Lebih GAnteng :p

0
Reply
EF Doank
Author
EF Doank
7 years ago
Reply to  Revi Ganteng

disini juga banyak genteng :v

0
Reply
10
0
Would love your thoughts, please comment.x
()
x