Upload
lyanh
View
223
Download
0
Embed Size (px)
Citation preview
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"> </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