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

Salatiga

September 2016

2

3

4

5

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].

Pada penelitian lainnya yang berjudul “Perancangan program bantu

mikrotik menggunakan API (Application Programing Interface) PHP class

Mikrotik” membahas tentang bagaimana membangun sebuah aplikasi berbasis

web yang berfungsi sebagai remote akses Mikrotik. Manfaat dari program ini

adalah untuk mempermudah dan sebagai program bantu serta hanya

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 hotspot mikrotik 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 hotspot di 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

Pengujian Tampilan Kesimpulan

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 login user

No Komponen Fungsi Spesifikasi

1 Router Mikrotik

RB951Series

Sebagai penghubung antar

jaringan CPU AR9344 600MHz

RAM 128MB

LAN Ports 5

RouterOS v4

2 PC/LAPTOP Sebagai sarana implementasi -

4 Kabel UTP

(Unshielded

Twisted Pair)

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

8 WAMP Server Sebagai Localhost -

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.

Gambar4.Desain tampilan manage user

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.Login user

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> 7. <tdwidth="93" align="right" valign="middle"><span>Username</span></td>

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">&nbsp;</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> 18. $(else)<tr class="data"> 19. <td align="right">connected:</td> 20. <td>$(uptime)</td> 21. </tr> 22. $(endif) 23. $(if blocked == 'yes') 24. <tr class="data"> 25. <td align="right">status:</td> 26. <td><div style="color: #FF8080"> 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)

Pada tahap pengujian tampilan yang sudah dibangun serta dilakukan

dengan melakukan uji coba penggunaan aplikasi antar muka sistem hotspot

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

Tampilan dibawah ini merupakan tampilan cek status login client, yang

berguna untuk mengetahui jumlah jam penggunaan, IP address, MAC address,

bytes up/down, connected dan status refresh. Adapun button lougout dan login

untuk memutuskan koneksi ke mikrotik, sehingga tidak dapat melakukan akses

jika telah logout. Tampilan ini akan keluar ketika kita belum malakukan proses

login atau setelah terkoneksi dengan jaringan hotspot tersebut, jika kita belum

melakukan login dan langsung melakukan browsing login maka halamana yang

akan kita tuju akan di redirect ke halaman login ini.

13

Gambar7.Tampilan setelah Login

Gambar8.Tampilan setelah Logout

Setelah melakukan logout maka akan muncul tampilan seperti Gambar 12,

pada Gambar 12 dijelaskan bahwa informasi setelah pemakaian seperti username,

alamat IP, lama login dan upload/download dan ada button login untuk kembali

melakukan akses internet kembali. Dari segi admin, admin dapat mengelola user

setelah melakukan registrasi dan pembayaran. Tampilan pengelolaan user pada

admin dapat ditunjukkan pada gambar 9.

14

Gambar9.Tampilan manage user

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

Pada tampilan beli paket admin dapat menentukan paket yang sudah

ditentukan sesuai pembayaran. Jika sudah menambahkan paket maka user atau

pengguna baru bisa melakukan akses internet melalui laptop pribadinya. Jika

masa berlaku paketan habis atau pelanggan ingin memperpanjang masa aktif

paket, maka admin dapat menambahkan sesuai pembayaran yang dilakukan.

Sebagai hasil pengujian pada penelitian ini dilakukan menggunakan metode

pengujian blackbox.

15

Tabel 2 hasil pengujian fungsi-fungsi aplikasi

No.

Test Case Hasil yang

Diharapkan

Hasil dari

Aplikasi

Hasil

Penguji

an

1. Login Username dan

password diisikan

dengan benar

Diarahkan

kehalaman

pengguna sesuai id

pengguna

Diarahkan

kehalaman

pengguna sesuai

id pengguna

Berhasil

Username dan

password diisikan

dengan salah

Dikembalikan ke

beranda

Dikembalikan ke

beranda

Berhasil

2. Registr

asi

Nama pengguna

sudah ada

Tidak tersimpan ke

database

Tidak tersimpan

ke database

Berhasil

Nama pengguna

belum ada

Menyimpan data

pengguna dan data

paket

Menyimpan data

pengguna dan data

paket

Berhasil

3. Mena

mbah

data

paket

Menampilkan

tampilan tambah

paket

Paket ditambahkan

setelah user

melakukan

registrasi dan

pembayaran

Paket

ditambahkan

setelah user

melakukan

registrasi dan

pembayaran

Berhasil

Penambahan paket

yang sudah ada

Penambahan paket

sesuai waktu yang

sudah ditentukan

Penambahan paket

sesuai waktu yang

ditentukan

Berhasil

4. Set

Paket

Menampilkan

paket

Menampilkan

harga dan batasan

waktu paket

Menampilkan

hargadan batasan

waktu paket

Berhasil

Edit paket Database berubah Database berubah Berhasil

5. Pengel

olaan

user

Menampilkan user

yang sudah

melakukan

registrasi

Sesuai yang

diharapkan

Sesuai yang

diharapkan

Berhasil

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

Berdasarkan analisa dan perancangan ulang antarmuka hotspot mikrotik ini

dapat disimpulkan bahwa dengan menggunakan desain aplikasi ini dapat

memberikan kebebasan pelanggan dalam mendapatkan username dan password,

juga pelanggan lebih mudah untuk mengetahui informasi batas pemakaian atau

informasi bandwidth yang terpakai dan connectivitas ke jaringan internet. untuk

pengguna juga tidak kesulitan untuk mengingat username dan password apabila

masa berlaku paket internet masih tersisa batas waktu pemakaian. Dari segi admin

juga lebih mudah dalam memanage client dan menentukan paket yang akan

digunakan oleh client.

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

[7] Ahmad Hudhori. 2012. Perancangan Jaringan Hotspot dengan Sistem

Operasi Mikrotik 2.9.27 Menggunakan Konfigurasi Winbox. Jurusan

Program Pendidikan D3, Akademi Teknologi Pringsewu Lampung