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
PCLAPTOP 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 username3 dan password4. Terdapat button login5.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 updown, 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 menu1 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=middlespanUsernamespantd
11
8. td width=137 align=center 9. input style=width: 150px name=username type=text
10.value=usernametd 11. tr
12. tr 13. td align=right valign=middlespanPasswordspantd
14. td align=centerinput style=width: 150px name=password 15.type=passwordtdtrtrtd height=26nbsp;td
16. td align=centerinput 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 updown, 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=noticeWelcome trial userdivbr 3.
elif login-by = mac 4.
brdiv class=noticeWelcome Anda Telah Membeli Paket Sesuai Pilihan Anda, 5.
b usernamebdivbr 6.
endif 7.
trtd colspan=2 align=centerbInformasi Akun Andabtdtr 8.
tr class=datatd align=rightIP address:tdtdiptdtr 9.
tr class=datatd align=rightMAC address:tdtdmactdtr 10.
tr class=datatd align=rightbytes updown:td 11.
tdbytes-in-nice bytes-out-nicetdtr 12.
if session-time-left 13.
tr class=data 14.
td align=rightUptimeconnected:tdtduptimetdtr 15.
tr class=data 16.
td align=rightSession time left:tdtdsession-time-lefttd 17.
tr 18.
elsetr class=data 19.
td align=rightconnected:td 20.
tduptimetd 21.
tr 22.
endif 23.
if blocked == yes 24.
tr class=data 25.
td align=rightstatus:td 26.
tddiv style=color: FF8080 27.
a href=link-advert target=
hotspot
_advertadvertisementa 28.
requireddiv 29.
td 30.
elif refresh-timeout 31.
tr class=datatd align=rightstatus refresh:td 32.
tdrefresh-timeouttd 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 updown, 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 uploaddownload 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
