1
PERANCANGAN ULANG ANTAR MUKA SISTEM
HOTSPOT
MIKROTIK
Artikel Ilmiah
Peneliti:
Angga Jati Pradipta (672010278) Teguh Indra Bayu, S.Kom., M.Cs.
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
6 1. Pendahuluan
Ketersediaan layanan hotspot telah dimanfaatkan banyak pihak untuk mendapatkan informasi secara praktis tanpa harus menggunakan komputer terbatas yang tersedia di berbagai warnet, hotspot bisa digunakan ketika kita akan mengakses internet pada area publik, seperti hotel, restoran, taman, mall, dan lain-lain. Kekurangan dari kebanyakan penyedia layanan hotspot yaitu hanya memberikan tampilan hotspot standart, bahkan ada pula yang hanya menggunakan tampilan default yang telah disediakan dari mikrotik. Hotspot adalah sistem yang digunakan untuk mengautentikasi user pada jaringan lokal. Autentikasi yang digunakan berdasarkan pada protokol HTTP atau HTTPS dan dapat diakses dengan menggunakan web browser.[1]
Namun sebagian penyedia layanan hotspot hanya memanfaatkan tampilan login standart yang sudah disediakan oleh mikrotik, sehingga kurang menarik jika hanya menampilkan tampilan yang sangat standart dan informasi yang diberikan hanya terbatas. Bagaimana merancang ulang antar muka sebuah sistem hotspot mikrotik untuk mendapatkan layanan hotspot prabayar dengan memberikan tampilan interface sesuai kebutuhan user sehingga memberikan kenyamanan dalam akses hotspot tersebut.
Perancangan program bantu Mikrotik menggunakan bahasa pemrograman HTML (Hyper-Text Markup Language) dengan memanfaatkan fitur Hotspot Mikrotik. Router yang digunakan yaitu Mikrotik RB951series yang sudah memiliki versi OS 4 dan diatasnya. Program bantu yang dirancang lebih menekankan pada interface dan fitur yang sering digunakan pada umumnya. User atau costumer harus mempunyai Account/Login name yang diberikan oleh operator untuk mengakses internet. Proses login berbasis web jadi lebih mudah atau mudah dipahami dan dapat di aplikasikan pada semua System Operasi yang ada saat ini, hanya membutuhkan software Web Browser (Internet Explorer, Mozila Firefox,Opera dll) Aplikasi ini berjalan pada infrastruktur WIFI selama ada koneksi ke server billing.[2]
2. Tinjauan Pustaka
Pada penelitian sebelumnya yang berjudul “Pemanfaatan API pada perangkat hotspot gateway dalam pembuatan sistem akses internet berdasarkan volume based dan time based access berbasis web” membahas tentang penerapan sebuah sistem user warnet akses internet berdasarkan volume based dan time based, manfaat dari program ini adalah dengan diterapkannya sistem user akses internet berdasarkan time based maupun volume based dalam warnet, user dapat memilih akses internet sesuai dengan pilihannya berdasarkan volume dan time based. Aplikasi ini dibangun dengan Mikrotik RouterOS, API, web PHP dan database MySQL[3].
7
diperuntukkan kepada admin jaringan sehingga hanya menampilkan beberapa fitur khusus yang digunakan oleh seorang admin.[4]
Pada penelitian lainnya yang berjudul “Sistem pendaftaran hotspot berbasis web pada hotspotmikrotik STMIK U’BUDIYAH menggunakan mikrotik Aplplication Programmming Interface (API), PHP, dan MySql” membahas tentang penerapan sebuah aplikasi sistem pendaftaran layanan hotspot Mikrotik berbasis web yang memungkinkan pengguna layanan dapat melakukan pendaftaran secara mandiri. Aplikasi tersebut bertujuan sebagai solusi permasalahan tidak adanya fasilitas pendaftaran secara mandiri untuk pengguna layanan hotspotdi STMIK U’Budiyah.[5]
Dalam penelitian ini diimplementasikan dalam bahasa pemrograman HTML untuk merancang dan membangun sebuah aplikasi web antar muka yang bertujuan untuk menyediakan layanan autentikasi dalam ketersediaan layanan hotspot, sehingga user dapat dengan mudah untuk mengakses internet via hotspot. HTML adalah kependekan dari Hypertext Markup Language adalah sebuah markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web internet dan fomating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat mengahasilkan tampilan wujud yang integrasi. Tata penulisan yang digunakan dalam dokumen web. Dokumen ini akan dieksekusi oleh browser, sehingga browser mampu menghaslkan suatu dokumen sesuai dengan keinginanyang mendesign page. Dokumen ini mempunyai kemampuan menampilkan gambar, suara, teks, mau punpenyedia link terhadap halaman web lainnya.[6]
Mikrotik adalah sebuah sistem operasi dan perangkat lunak yang dapat digunakan untuk menjadikan komputer menjadi router network yang handal, mencakup berbagai fitur yang dibuat untuk ip network dan jaringan wireless. Mikrotik dibuat oleh mikrotikls sebuah perusahaan di kota Riga, Latvia. Mikrotik merupakan sistem operasi linux base yang diperuntukkan sebagai network router. Didesain untuk memberikan kemudahan bagi para penggunanya. Administrasinya bisa dilakukan melalui Windows Aplication (Winbox). Selain itu instalasi dapat dilakukan pada pc standart.[7]
3. Metodologi Perancangan Sistem
Penelitian yang dilakukan, diselesaikan melalui tahapan penelitian yang terbagi dalam lima tahapan, yaitu, (1) Tahap Identifikasi Masalah, (2) Analisis Kebutuhan, (3) Perancangan Tampilan, (4) Pembuatan Tampilan, (5) Kesimpulan.
Gambar 1. Tahap Penelitian
Identifikasi masalah Analisis kebutuhan
Pembuatan Tampilan Perancangan Tampilan
8
Tahapan penelitian pada Gambar 1, dijelaskan sebagai berikut: identifikasi masalah adalah tahapan pertama yang dimulai dengan merumuskan masalah yang ada dan kejadian yang dianggap sebagai masalah. Pada tahapan ini dilakukan pengumpulan data sebagaimana di beberapa warnet yang menyediakan sistem hotspot prabayar belum ada sistem registrasi mandiri yang mengatur penjualan berupa voucher internet. Pengumpulan data ini juga bertujuan untuk perancangan aplikasi antar muka sistem penjualan voucher internet agar lebih terarah.
Pada tahapan analisis kebutuhan yakni menganalisa kebutuhan apa saja yang diperlukan untuk menyelesaikan masalah tersebut. Permasalahan yang ada yaitu Mikrotik memiliki program-program dengan konfigurasi yang terlalu kompleks dan membutuhkan berbagai langkah untuk melakukan konfigurasi seperti menyediakan password dan username. Berikut analisa alat yang digunakan untuk menunjang dan memaksimalkan perancangan sistem antar muka penjualan voucher. Tabel 1 merupakan alat yang digunakan.
Tabel 1 Alat yang Digunakan
Pada tahap perancangan Tampilan terdapat penggambaran sistem tampilan aplikasi, aplikasi ini dibuat dengan bahasa html. Akan dijelaskan mengenai desain aplikasi yang telah dibuat dapat dilihat pada gambar 2.
Gambar2.Desain tampilan loginuser
No Komponen Fungsi Spesifikasi
1 Router Mikrotik
Penghubung router dengan switch dan client
CAT 5E, RJ45
5 Notepad++ Sebagai developer PHP - 6 Web Browser Sebagai media menjalankan
program
Chrome Browser, Mozilla, Dll
7 Winbox Sebagai tester konfigurasi Winbox v3.0
9
Gambar 6 merupakan rancangan tampilan form login client, pada tampilan pertama menunjukkan informasi tentang hotspot dan juga harga yang sudah ditentukan oleh admin (1), tampilan (2) merupakan tampilan untuk login. login memiliki dua inputan data yang harus diisi sesuai dengan data pada saat registrasi yaitu username(3) dan password(4). Terdapat button login(5).Apabila salah satu data tidak sesuai dengan data yang ada di database maka login gagal dan jika login benar maka akan menuju ke halaman berhasil login. Setelah melakukan login maka akan masuk ke tampilan informasi akun, disini akan dijelaskan pada Gambar 3.
Gambar3.Desain tampilan Status login
Pada Gambar 3 merupakan tampilan status login, dimana setelah melakukan login username dan password maka akan menampilkan tampilan ini. (1) merupakan tampilan informasi bahwa client sudah berhasil melakukan login, dan (2) menunjukan pengguna yang memakai username dan password yang sudah terdaftar. Pada tampilan no (3) menunjukkan Status login yang meliputi IP addres, MAC addres, bytes up/down, connected, dan status refresh. Pada tampilan (4) merupakan button logout, dimana pengguna bisa melakukan logout setelah penggunaan berakhir.
10
Gambar 4 merupakan rancangan tampilan form manage user dengan memiliki beberapa button dan inputan data yang harus diisi sesuai dengan data. Pada tampilan menu(1) admin dapat memilih menu sesuai kebutuhan. tambah user (2) merupakan fitur untuk menambah user yang ingin melakukan akses internet via hotspot. Fitur entries (3) dan search (4) adalah fitur untuk melakukan pencaharian user supaya lebih mudah dan cepat. Pada nomor (5) sampai (10) adalah tampilan menu bar. Pada button beli paket (11) admin dapat menentukan paket sesuai pembayaran. Pada button edit (12) admin dapat melakukan edit untuk penambahan paket jika paket sudah mau habis sesuai jumlah pembayaran. Pada button hapus (13) admin dapat menghapus data pelanggan jika tidak melakukan pembayaran atau paket sudah habis. Berikut adalah topologi jaringan yang akan diterapkan dalam perancangan sistem antar muka penjualan dan registrasi voucher internet.
Gambar5.Desain topologi jaringan
Berdasarkan topologi pada gambar 5 diatas laptop client digunakan untuk mengakses internet dan melakukan login menggunakan password dan username. Admin berfungsi untuk mengolah data dalam database maupun mikrotik yang terhubung dengan menggunakan aplikasi web. Halaman login ini menggunakan bahasa HTML yang sudah ada di mikrotik, sehingga penulis mengganti tampilan agar lebih menarik.
Pada tahap pembuatan sistem dilakukan pembuatan program secara utuh berdasarkan pada tahap design dan latar belakang permasalahan. Program dibangun dengan menggunakan HTML yang sudah tersedia di Mikrotik, program ini dibuat dengan tampilan yang mudah dipergunakan sesuai kebutuhan dan dengan bahasa yang mudah dimengerti. Kode program 1 merupakan kode program tampilan Login user.
Code Program 1.Loginuser
1.<form name="login" action="$(link-login-only)" method="post" 2. $(if chap-id) onSubmit="return doLogin()" $(endif)>
3. <input type="hidden" name="dst" value="$(link-orig)" /> 4. <input type="hidden" name="popup" value="true" /> 5. <table width="242" style="background-color: none"> 6. <tr>
11
8. <td width="137" align="center">
9. <input style="width: 150px" name="username" type="text" 10.value="$(username)"/></td>
11. </tr> 12. <tr>
13. <td align="right" valign="middle"><span>Password</span></td> 14. <td align="center"><input style="width: 150px" name="password" 15.type="password"/></td></tr><tr><td height="26"> </td> 16. <td align="center"><input type="submit" value="Masuk" /></td> 17. </tr>
18. </form>
Dibawah ini kode program status user, yang ditampilkan setelah user melakukan login dan akan menunjukkan informasi status IP addres user, MAC addres, bytes up/down, connected dan status refresh yang ditunjukkan pada kode program 2.
Code Program 2. Kode program Status user
1. <table border="1" cellpadding="1" cellspacing="1" class="tabula">
2. $(if login-by == 'trial') <div class="notice">Welcome trial user!</div><br> 3. $(elif login-by != 'mac')
4. <br><div class="notice">Welcome Anda Telah Membeli Paket Sesuai Pilihan Anda, 5. <b> $(username)!</b></div><br>
6. $(endif)
7. <tr><td colspan="2" align="center"><b>Informasi Akun Anda</b></td></tr> 8. <tr class="data"><td align="right">IP address:</td><td>$(ip)</td></tr> 9. <tr class="data"><td align="right">MAC address:</td><td>$(mac)</td></tr> 10.<tr class="data"><td align="right">bytes up/down:</td>
11.<td>$(bytes-in-nice) / $(bytes-out-nice)</td></tr> 12.$(if session-time-left)
13.<tr class="data">
14.<td align="right">Uptime/connected:</td><td>$(uptime)</td></tr> 15.<tr class="data">
16.<td align="right">Session time left:</td><td>$(session-time-left)</td> 17.</tr>
27.<a href="$(link-advert)" target="hotspot_advert">advertisement</a> 28. required</div>
29.</td>
30.$(elif refresh-timeout)
31.<tr class="data"><td align="right">status refresh:</td> 32.<td>$(refresh-timeout)</td>
33.$(endif) 34.</table>
35.$(if login-by-mac != 'yes') 36.<br>
37.<input type="submit" class="button" value="Logout">$(endif)
12
mikrotik antara lain untuk pembuktian apakah tampilan yang sudah dirubah berjalan dengan baik atau tidak dengan menjalankan proses login dan logout dengan menggnakan password dan username yang sudah ditentukan apakah sudah berjalan dengan baik atau tidak.
Pada tahapan kesimpulan dari perancangan sistem yang dibuat sudah berdasarkan tahapan-tahapan diatas. Sehingga dapat ditarik kesimpulan tentang pembuatan aplikasi antar muka sistem hotspot mikrotik. Penarikan kesimpulan juga berdasarkan alur program, jika program masih ada kekurangan maka akan diberikan saran supaya program yang sudah dibuat ini dapat dikembangkan lagi.
4. Hasil dan pembahasan
Berikut ini merupakan hasil dan pembahasan dari perancangan aplikasi antar muka menggunakan HTML. Untuk membangun sistem ini pertama kali dibangun halaman login client. Pada penelitian ini login client dapat melakukan login dengan password dan username yang sudah ditentukan. Hasil tampilan login ditampilkan pada gambar 6.
Gambar6.Tampilan login client
13
Gambar7.Tampilan setelah Login
Gambar8.Tampilan setelah Logout
14
Gambar9.Tampilan manageuser
Pada tampilan manage user admin dapat melakukan penambahan paket, menentukan jenis paket, dan penambahan user. Jenis paket-paket tersebut sudah ditentukan dan bisa di edit sesuai kebutuhan seorang admin. Penambahan paket juga harus sesuai dengan jumlah pembayaran yang sudah ditentukan.
Berikutnya adalah tampilan beli paket, admin dapat menambahkan paket sesuai ketentuan setelah user melakukan pembayaran. Tampilan beli paket dapat ditunjukkan pada gambar 10.
Gambar10.Tampilan beli paket
15
Tabel 2 hasil pengujian fungsi-fungsi aplikasi
No. Test Case Hasil yang
Edit paket Database berubah Database berubah Berhasil
5. Pengel
Tabel 2 menunjukkan pengujian funsi-fungsi aplikasi seperti login, registrasi, menambah data paket, set paket dan pengelolaan user. Setelah menjalankan aplikasi menggunakan browser dan dilakukan uji coba fungsi-fungsi yang ada pada aplikasi seperti pada tabel 2 menunjukkan bahwa tidak terdapat masalah atau error pada proses pengujian aplikasi antarmuka tersebut.
5. Kesimpulan
16 6. Daftar Pustaka
[1] I Ketut Deni Satria Raharja. 2016. Perancangan Sistem Autentikasi User Mikrotik Menggunakan Media Sosial Dengan Application Programming Interface(API). Jurusan Ilmu Komputer S1, Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Udayana. Bujit Jimbaran
[2] Adam Rachmad. 2016. “Cara Settiing Hotspot MikroTik”, [online] Tersedia : www.modalsemangat.com/2016/01/cara-setting-hotspot -mikrotik.html [Diakses: 20-juni-2016]
[3] Pratama. A.N.W. 2010. CodeIgniter: Cara Mudah Membangun Aplikasi PHP.
[4] Zuhar Musliyana. 2014. Sistem Pendaftaran Hotspot Berbasis Web Pada Hotspot Mikrotik STMIK U’Budiyah Menggunakan Mikrotik Application Programing Interface (API), PHP, dan MySql. Jurusan Magister Teknik Elektro, Universitas Syiah Kuala, Banda Aceh.
[5] Titus Hendradi. 2015. Perancangan Program Bantu Mikrotik Menggunakan API (Aplication Programming Interface) PHP class Mikrotik. Jurusan Teknik Informatika S1, Fakultas Teknologi Informasi Universitas Kristen Satya Wacana Salatiga.
[6] Viktor Nicolas Nore. 2013. Perancangan Sistem Informasi Penjualan dan Pemesanan Produk Berbasis Web. Jurusan Sistem Informasi S1, Fakultas Teknik Universitas Widyatama Bandung
