Page 1
1
1 Perancangan dan Implementasi Aplikasi Pencarian Layanan
Kesehatan Menggunakan HTML 5 Geolocation
Artikel Ilmiah
Peneliti :
Bagas Prakoso Widodo (672011199)
Hindriyanto Dwi Purnomo, Ph. D
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
Februari 2016
Page 2
2
2 Perancangan dan Implementasi Aplikasi Pencarian Layanan
Kesehatan Menggunakan HTML 5 Geolocation
Artikel Ilmiah
Diajukan kepada
Fakultas Teknologi Informasi
untuk memperoleh Gelar Sarjana Komputer
Peneliti :
Bagas Prakoso Widodo (672011199)
Hindriyanto Dwi Purnomo, Ph. D
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
Februari 2016
Page 8
8
Perancangan dan Implementasi Aplikasi Pencarian Layanan
Kesehatan Menggunakan HTML 5 Geolocation
1)Bagas Prakoso Widodo, 2)Hindriyanto Dwi Purnomo
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Jl. Diponegoro 52-60, Salatiga 50711, Indonesia
Email : 1)[email protected] ,2)[email protected]
Abstract Health is a primary need for humans. Salatiga city provides many health services
both individuals and institutions. The number of existing health services, on the one hand
cause problems for a person to obtain health care information in the surrounding precisely at
times when in need of health care on an emergency basis. It has now expanded location-
tracking technology one HTML5 Geolocation, this technology allows tracking of the user's
location via a device used through a browser. In this study combines HTML5 Geolocation
with Haversine Formula to calculate the distance between the user's location with the
location of health services are nearby. This research resulted in an application that can help
conduct a search of appropriate health services to the user when an urgent situation at a
given time
Keywords: HTML5, Salatiga, Haversine, Laravel, Health Facility
Abstrak Kesehatan merupakan kebutuhan primer bagi manusia. Kota Salatiga menyediakan
banyak layanan kesehatan baik perorangan maupun lembaga. Banyaknya layanan kesehatan
yang ada, di satu sisi menimbulkan permasalahan bagi seseorang untuk mendapatkan
informasi layanan kesehatan yang ada di sekitarnya secara tepat pada saat tertentu ketika
membutuhkan penanganan kesehatan secara darurat. Saat ini telah berkembang teknologi
pelacakan lokasi salah satunya HTML5 Geolocation, teknologi ini memungkinkan pelacakan
lokasi pengguna melalui perangkat yang digunakan melalui browser. Pada penelitian ini
memadukan HTML5 Geolocation dengan Haversine Formula untuk menghitung jarak antara
lokasi pengguna dengan lokasi layanan kesehatan yang ada disekitarnya. Penelitian ini
menghasilkan aplikasi yang dapat membantu melakukan pencarian layanan kesehatan yang
tepat untuk pengguna ketika keadaan mendesak pada waktu tertentu.
Kata Kunci: HTML5, Salatiga, Haversine, Laravel, Fasilitas Kesehatan
1) Mahasiswa Fakultas Teknologi Informasi Jurusan Teknik Informatika, Universitas Kristen Satya Wacana
Salatiga 2) Staff Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Salatiga
Page 9
9
1. Pendahuluan
Kesehatan merupakan kebutuhan primer manusia, di mana dengan kesehatan
manusia dapat menjalankan hidup dengan aktif dan produktif. Akan tetapi, manusia
tidak luput dari sakit, baik ringan, sedang maupun parah. Penyakit seseorang
terkadang hadir secara mendadak atau tiba – tiba. Ketika keadaan mendesak,
dibutuhkan layanan kesehatan untuk membantu mengatasi penyakitnya. Pemilihan
layanan kesehatan yang tepat tentunya dapat menyelematkan nyawa seseorang.
Seperti halnya Kota Salatiga yang merupakan kota kecil yang berada di Propinsi Jawa
Tengah, dengan luas wilayah 56,78 km² terdiri dari 4 kecamatan dan 22 kelurahan.
Layanan kesehatan di Kota Salatiga terdiri dari 23 puskesmas utama dan puskesmas
pembantu, 6 rumah sakit, 17 klinik dan 220 praktek dokter umum, dan 59 dokter
gigi [1]. Jumlah layanan kesehatan Kota Salatiga di satu sisi tentunya menimbulkan
permasalahan bagi seseorang untuk mendapatkan informasi lokasi dan jam praktik
layanan kesehatan yang ada di sekitarnya pada saat tertentu ketika membutuhkan
penanganan kesehatan secara mendesak. Peraturan Menteri Kesehatan No. 71 Tahun
2013 tentang pelayanan kesehatan pada jaminan kesehatan nasional, dimana pasal 14
menyebutkan bahwa pelayanan kesehatan bagi peserta dilaksanakan secara
berjenjang sesuai kebutuhan medis dimulai dari fasilitas kesehatan tingkat pertama.
Fasilitas Kesehatan tingkat pertama yang dimaksud yakni puskesmas atau yang
setara, praktik dokter mandiri, praktik dokter gigi dan klinik. Hal tersebut tentunya
memunculkan masalah baru yaitu memilih layanan kesehatan tingkat pertama yang
tepat terutama bagi penduduk Salatiga maupun yang berasal dari luar Kota Salatiga
ketika membutuhkan penanganan dalam keadaan mendesak.
Perkembangan teknologi informasi yang cukup pesat seharusnya dapat
membantu memecahkan masalah pemilihan layanan kesehatan tersebut.
Perkembangan aplikasi berbasis lokasi menggunakan teknologi HTML5 Geolocation
telah lama dikembangkan sebagai metode untuk melakukan pelacakan lokasi
pengguna[2]. Fery dengan sampel Kota Malang membangun sebuah aplikasi tentang
layanan kesehatan dengan aplikasi yang berbasis Responsive Web Design (RWD) dan
memanfaatkan HTML5 Geolocation untuk pelacakan lokasi pengguna [3].
Selain menentukan lokasi layanan kesehatan yang tepat, jarak tempuh menuju
layanan kesehatan menjadi satu masalah baru. Untuk melakukan pencarian layanan
kesehatan yang ada di sekitar pengguna tentunya diimbangi formula yang dapat
menghitung jarak menuju lokasi layanan kesehatan tersebut. Salah satu formula
tersebut adalah Haversine Formula. Pemanfaatan Haversine Formula pernah
dikembangkan untuk mendeteksi posisi minyak bumi di lepas pantai oleh Mwemezi
[4]. Selain Haversine metode yang digunakan untuk mencari jarak terdekat adalah
Euclidean. Budi [5] menggunakan Euclidean dan konsep penyelesaian jalur
terpendek untuk menemukan lokasi pelayanan gawat darurat berdasarkan rute waktu
tempuh terdekat dengan sampel kota Surakarta.
Dalam penelitian ini dikembangkan aplikasi pencarian layanan kesehatan
berdasarkan jadwal layanan yang ada di sekitar pengguna dengan memadukan
Page 10
10
HTML5 Geolocation API untuk melacak lokasi pengguna dan Haversine Formula
untuk mengukur jarak antara lokasi pengguna dengan layanan kesehatan yang ada
disekitar pengguna. Batasan masalah pada penelitan ini adalah data layanan kesehatan
yang digunakan yakni data layanan kesehatan yang ada di Kota Salatiga. Pengukuran
jarak antara lokasi pengguna dan layanan kesehatan diukur secara point-to-point
tanpa menghitung simpangan jalan dan ketinggian suatu kontur jalan, penelitian ini
juga tidak membahas keamanan konten web dan keamanan data, penentuan jadwal
hari pelayanan layanan kesehatan mengacu pada hari kerja secara umum tanpa
memperhatikan hari libur nasional atau hari libur khusus.
2. Kajian Pustaka
Permasalahan yang berhubungan dengan pencarian informasi layanan
kesehatan telah di teliti oleh beberapa peneliti. Riegen [6] Melakukan penelitian
pembuatan sistem informasi layanan kesehatan Kota Salatiga berbasis webGIS
menggunakan Google Map API. Sistem ini menampilkan informasi pelayanan
kesehatan di Kota Salatiga dengan menggunakan permrograman PHP, basis data
MySQL serta menggunakan Google Map API untuk menampilkan data layanan
kesehatan [6]. Hasil penelitian ini menunjukkan sistem informasi ini dapat digunakan
untuk memberikan informasi layanan kesehatan di Kota Salatiga terbatas pada rumah
sakit dan puskesmas.
Bambang [7] melakukan penelitian pembuatan aplikasi pencarian tambal ban
terdekat menggunakan Location Based Services (LBS) berbasis android platform.
Metode pencarian jarak antara pengguna dan tambal ban menggunakan Haversine
Formula. Hasil penelitian ini yakni Aplikasi berbasis android platform yang mampu
menunjukkan lokasi tambal ban terdekat dengan pengguna pada android platform
menggunakan Haversine Formula. Fery [3] melakukan penelitian pencarian layanan
kesehatan di Kota Malang menggunakan HTML5 Geolocation untuk mendapatkan
lokasi pengguna. Aplikasi ini menggunakan basis data berupa data dokter, jadwal
praktik dokter dan koordinat lokasi praktik dokter. Hasil dari penelitian ini adalah
aplikasi berbasis web yang responsif dan penerapan HTML5 Geolocation berhasil
melakukan pelacakan lokasi pengguna dengan keakuratan toleransi 100 meter dari
lokasi pengguna dan pengimplementasian Responsive Web Design ( RWD) terbukti
aplikasi mampu berjalan dan menyesuaikan tampilan pada perangkat yang berbeda-
beda.
Pelayanan kesehatan adalah sebuah konsep yang digunakan dalam memberikan
layanan kesehatan kepada masyarakat. Definisi pelayanan kesehatan menurut Prof.
Dr. Soekidjo Notoatmojo adalah sebuah sub sistem pelayanan kesehatan yang tujuan
utamanya adalah pelayanan preventif (pencegahan) dan promotif (peningkatan
kesehatan) dengan sasaran masyarakat. Jenis pelayanan kesehatan secara umum dapat
dibedakan atas dua, yaitu pelayanan kedokteran dan pelayanan kesehatan masyarakat.
Pelayanan kedokteran adalah pelayanan kesehatan yang termasuk dalam kelompok
pelayanan kedokteran (medical services) ditandai dengan cara pengorganisasian yang
Page 11
11
dapat bersifat sendiri (solo practice) atau secara bersama-sama dalam satu organisasi.
Tujuan utamanya untuk menyembuhkan penyakit dan memulihkan kesehatan, serta
sasarannya terutama untuk perseorangan dan keluarga. Sedangkan pelayanan
kesehatan masyarakat adalah pelayanan kesehatan yang termasuk dalam kelompok
kesehatan masyarakat (public health service) ditandai dengan cara pengorganisasian
yang umumnya secara bersama-sama dalam suatu organisasi. Tujuan utamanya untuk
memelihara dan meningkatkan kesehatan serta mencegah penyakit, serta sasarannya
untuk kelompok dan masyarakat[6].
Laravel merupakan framework yang dikembangkan oleh Taylor Otwell.
Laravel adalah sebuah MVC web development framework PHP yang didesain untuk
meningkatkan kualitas perangkat lunak dengan mengurangi biaya pengembangan dan
perbaikan serta meningkatkan produktifitas pekerjaan dengan sintak yang bersih dan
fungsional set yang dapat mengurangi banyak waktu untuk implementasi. Laravel
juga memberikan keterbaruan alat untuk berinteraksi dengan database disebut dengan
migration. Dengan migration, pengembang dapat dengan mudah untuk melakukan
modifikasi sebuah database pada sebuah platform secara independen karena
implementasi skema database direpresentasikan dalam sebuah class. Migration dapat
berjalan pada beberapa basis data yang telah didukung Laravel (MySQL, PostgreSQL,
MSSQL, dan SQLITE) dan untuk implementasi Active Record pada Laravel disebut
Eloquent yang menggunakan standard modern OOP. Laravel juga memberikan
sebuah Command Line Interface disebut dengan artisan dengan artisan, pengembang
dapat berinteraksi dengan aplikasi untuk sebuah aksi seperti migrations, testing, atau
membuat controller dan model. Selain itu, laravel juga memiliki Blade template
engine yang memberikan estetika dan kebersihan kode pada view secara parsial[8].
HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun
1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011
masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk
memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah
dibaca oleh manusia dan juga mudah dimengerti oleh mesin[9].
HTML5 Geolocation API Merupakan salah satu fitur baru HTML5 yang
memiliki arsitektur layanan berbasis lokasi. Dengan populernya aplikasi layanan
berbasis lokasi, banyak pengembang yang tidak familiar dengan layanan ini karena
sulit dan membingungkan[2]. Untuk mengatasi permasalahan tersebut W3C (World
Wide Web Consortium) memperkenalkan HTML5 Geolocation. Kemudahan
memahami Bahasa pemrograman HTML5 membuat HTML5 Geolocation cepat
populer dan banyak aplikasi berbasis lokasi dibangun menggunakan HTML5
geolocation karena lebih mudah digunakan untuk melakukan pelacakan lokasi,
pengguna hanya melakukan permintaan posisi melalui browser. Jika pengguna
mengijinkan permintaan tersebut browser mengakses lokasi pengguna kemudian
browser akan memberikan respon seperti koordinat lokasi lintang dan bujur pada
pengguna[10].
Gambar 1 menjelaskan cara kerja HTML5 Geolocation API. Pertama, pengguna
membuka aplikasi melalui browser. Kemudian, aplikasi melakukan permintaan
Page 12
12
koordinat dari browser menggunakan fungsi geolocation. Sebelumnya, browser
meminta persetujuan pengguna untuk melakukan permintaan yang dilakukan
pengguna tersebut. Jika pengguna mengijinkan permintaan tersebut, maka browser
kemudian memberikan informasi koordinat pengguna dari perangkat yang sedang
digunakan. Seperti, IP Address atau koordinat GPS.[10].
Gambar 1. Arsitektur HTML5 Geolocation dan privasi perangkat[10]
Untuk melakukan pencarian layanan kesehatan di sekitar pengguna, dibutuhkan
metode untuk penghitungan jarak, pada penelitian kali ini metode yang digunakan
adalah Haversine. Haversine adalah suatu posisi di bumi yang direpresentasikan
dengan posisi garis latitude(lintang) dan longitude(bujur) untuk memperkirakan jarak
antara dua titik di bumi berdasarkan letak garis lintang dan bujur bisa dilakukan
dengan beberapa persamaan yang digunakan dengan asumsi bentuk bumi yang bulat
(spherical earth) dengan menghilangkan faktor bahwa bumi itu sedikit elips
(elipsodial factor). Untuk metode ini, kemungkinan kesalahan hanya mencapai
0,5%[11]. Rumus 1 merupakan persamaan menghitung jarak Haversine [12] :
…(1)
Formulasi ini menggunakan persamaan Haversine sebagai dasar. Persamaan ini
dapat digunakan untuk menghitung jarak lingkaran yang jauh antara dua titik[7].
Selain menggunakan Haversine untuk melakukan perhitungan jarak dapat
menggunakan Euclidean. Euclidean distance adalah perhitungan jarak dari 2 buah
titik dalam Euclidean space. Untuk mempelajari hubungan antara sudut dan jarak.
Euclidean ini berkaitan dengan Teorema Phytagoras dan biasanya diterapkan pada 1,
2 dan 3 dimensi. Tapi juga sederhana jika diterapkan pada dimensi yang lebih tinggi.
Rumus (2) merupakan rumus menghitung Euclidean[13]
…(2)
Page 13
13
Hasil perhitungan jarak menggunakan rumus (2) masih dalam satuan decimal
degree. sehingga untuk menyesuaikannya perlu dikalikan dengan 111,319 km (1
derajat bumi = 69 mil ~= 111,319 km) [14]
3. Metode Penelitian dan Perancangan Aplikasi
Penelitian yang dilakukan dilakukan melalui tahapan penelitian yang terbagi
dalam 5 tahapan, yaitu: 1) Analisis kebutuhan dan pengumpulan data, 2) Perancangan
sistem, 3) Perancangan aplikasi/program, 4) Implementasi dan pengujian sistem, serta
analisis hasil pengujian, 5) Penulisan laporan hasil penelitian [15].
Tahap pertama adalah analisis kebutuhan dan pengumpulan data. Analisis
kebutuhan dilakukan melalui observasi dan wawancara kepada penduduk yang
berasal dari Kota Salatiga maupun dari luar Kota Salatiga mengenai cara
mendapatkan informasi layanan kesehatan di Kota Salatiga. Hasil observasi yang di
dapat adalah bila penduduk mendapatkan musibah sakit atau hendak berobat baik itu
ringan ataupun sedang, penduduk terutama yang berasal dari luar Kota Salatiga
kesulitan mendapatkan informasi layanan kesehatan terutama layanan kesehatan
tingkat pertama yang ada disekitarnya. Selain itu bila penduduk hendak berobat ke
dokter praktik mandiri terkadang dokter tersebut tidak praktik ketika penduduk
membutuhkan pengobatan. Untuk tahapan pengumpulan data layanan kesehatan
didapatkan dari Dinas Kesehatan Kota Salatiga dan melakukan penandaan langsung
ke lokasi layanan kesehatan di Kota Salatiga menggunaan GPS sedangkan untuk
jadwal layanan kesehatan dan jadwal dokter didapat melalui website resmi layanan
kesehatan tersebut ataupun pencatatan langsung ke lokasi layanan kesehatan.
Gambar 2. Tahapan Penelitian [15]
Tahap kedua adalah perancangan sistem berdasarkan hasil analisis kebutuhan
menggunakan UML (Unified Modelling Language) yang terdiri dari use case
diagram, activity diagram dan class diagram. Tambahan perancangan yang lain yaitu
perancangan database meliputi tabel-tabel yang digunakan dalam menyimpan data
serta penentuan hubungan relasinya dan perancangan antarmuka aplikasi yang akan
dibuat.
Analisis Kebutuhan dan Pengumpulan Data
Perancangan Sistem Meliputi Perancangan Proses (UML), Perancangan
Arsitektur, Perancangan Database, Perancangan Antarmuka
Perancangan Aplikasi/Program
Implementasi dan Pengujian Sistem, serta Analisis Hasil Pengujian
Penulisan Laporan Hasil Penelitian
Page 14
14
Tahap ketiga adalah perancangan aplikasi/program, yaitu merancang aplikasi
sesuai dengan kebutuhan sistem berdasarkan perancangan yang sudah dilakukan.
Bahasa pemrograman yang dipakai adalah PHP dengan Laravel Framework,
Bootstrap dan Materialize framework sebagai kerangka tampilan dan MySQL sebagai
basis data.
Tahap keempat adalah implementasi dan pengujian sistem serta analisis hasil
pengujian, yaitu mengimplementasikan aplikasi yang sudah dirancang ke hosting agar
dapat diakses secara online, kemudian dilakukan pengujian. Analisis hasil pengujian
dilakukan untuk mengetahui apakah aplikasi telah sesuai dengan yang diharapkan.
Tahap kelima adalah penulisan laporan hasil penelitian. Tahap ini dilakukan
dokumentasi proses dari tahap awal sampai tahap akhir dalam bentuk tulisan. Adapun
metode pengembangan sistem yang digunakan yakni metode waterfall yang
ditunjukkan pada gambar 3.
Tahapan dalam pengembangan sistem dengan metode waterfall model yakni
analisis kebutuhan, desain sistem, pengkodean dan testing. Tahapan pertama yakni
analisis. Pada tahap ini dilakukan identifikasi kebutuhan data yang dibutuhkan sistem
yakni data spasial. Data tersebut diperoleh melalui tahap pengumpulan data dari
tahapan penelitian yang dilakukan.
Tahapan kedua setelah analisis yakni desain aplikasi. Desain aplikasi pada
penelitian ini menggunakan UML yang terdiri dari use case diagram, activity
diagram dan class diagram.
Gambar 3 Waterfall Model [16]
Use case diagram berguna untuk mendeskripsikan tindakan sistem dari sudut
pandang pengguna, sebagai deskripsi fungsional dari sebuah sistem dan proses
utamanya, serta menjelaskan siapa saja yang terlibat sebagai aktor dalam
menggunakan sistem berikut interaksinya.
Use case pada Gambar 4 menunjukkan bahwa Aplikasi Pencarian Layanan
Kesehatan memiliki dua pengguna yang memiliki akses yang berbeda – beda, yaitu
Tamu dan Administrator. Pengguna tamu hanya memiliki akses melihat informasi
layanan kesehatan yang ada disekitarnya dan mendapatkan rute menuju layanan
kesehatan terdekat yang buka. Administrator memiliki akses untuk mengelola
layanan kesehatan, jam layanan kesehatan serta dokter dan jadwal dokter yang
praktik pada layanan kesehatan.
Page 15
15
uc Use Case Mo...
ApplHealth
administrator
tamu
Tampilkan layanan
kesehatan terdekta
tambahkan jadwal
praktek dokter
tambah jadwal
praktek layanan
kesehatan
Jadwal layanan
kesehatan
ubah jadwal praktek
layanan kesehatan
hapus jadwal praktek
layanan kesehatan
ihat jadwal praktek
layanan kesehatan
jadwal praktek
dokter
ubah jadwal praktek
dokter
lihat jadwal praktek
dokter
hapus jadwal praktek
dokter
Tampilkan rute
«extend»
«include»
«extend»
«extend»«extend»
«include»
«extend»
«extend»
«extend»
Gambar 4. Use Case Diagram Aplikasi Pencarian Layanan Kesehatan
Gambar 5 merupakan activity diagram untuk pengguna biasa yang mengakses
aplikasi, untuk melakukan pencarian layanan kesehatan di sekitar pengguna.
Pengguna, harus memasukkan lokasi posisinya terlebih dahulu baik secara manual
atau menggunakan geolocation apabila pengguna tidak mengetahui lokasinya saat ini.
Setelah sistem mendapatkan lokasi pengguna, sistem melakukan pencarian lokasi
layanan kesehatan yang ada disekitar pengguna yang masih buka atau praktek pada
saat pengguna mengakses aplikasi. Apabila pengguna telah menemukan lokasi
layanan kesehatan disekitarnya yang dibutuhkan, aplikasi juga dapat memberikan rute
ke tujuan layanan kesehatan apabila dibutuhkan pengguna.
Gambar 5. Activity diagram pencarian layanan kesehatan terdekat
Class diagram menggambarkan struktur objek, deskripsi objek, class package,
serta relasinya satu sama lain. Class diagram digambarkan dalam beberapa kelas
serta paket yang ada dalam sistem. Gambar 6 merupakan class diagram dari aplikasi
pencarian layanan kesehatan. Class adalah sebuah spesifikasi yang jika diinstansiasi
akan menghasilkan sebuah objek dan merupakan inti dari pengembangan dan desain
Page 16
16
berorientasi objek Class menggambarkan keadaan (atribut/properti) suatu sistem,
sekaligus menawarkan layanan untuk memanipulasikeadaan tersebut (metoda/fungsi).
Class diagram menggambarkan struktur dan deskripsi class, package dan objek
beserta hubungan satu sama lain seperti containment, pewarisan, asosiasi, dan lain-
lain. Class diagram terdiri dari model, view dan controller. Model adalah penghubung
antara fungsi dengan database. View adalah tampilan / user interface dari aplikasi.
Controller adalah penggerak yang berfungsi menerima perintah dari view lalu
meneruskan ke model. class Class Mo...
Faskes
- id_faskes: int
- nama_faskes: string
- id_tipe: int
- alamat: string
- no_telpon: int
- foto: string
- bpjs: int
- id_user: int
- latitude: float
- longitude: float
+ getFaskes() : array
+ deleteFaskes(int) : boolean
+ getFaskes(int) : array
+ addFaskes(array) : void
+ editFaskes(array) : void
Tipe
- id_tipe: int
- deskripsi: string
+ getTipe() : array
+ deleteTipe(int) : array
+ getTipe(int) : array
+ addTipe(array) : void
+ editTipe(array) : void
Dokter
- id_dokter: int
- id_faskes: int
- nama_dokter: string
- alamat: string
+ getDokter() : array
+ deleteDokter(int) : boolean
+ getDokter(int) : array
+ addDokter(array) : void
+ editDokter(array) : void
FaskesOpen
- id_faskes: int
- hari: int
- jam_buka: TIME
- jam_tutup: TIME
- jam_mulai_istirahat: TIME
- jam_selesai_istirahat: TIME
+ addJamKerja(array) : void
+ ubahJamKerja(array) : void
+ getJamKerja(int) : array
+ hapusJamKerja(int) : array
FaskesDokter
- hari: int
- jam_buka: TIME
- jam_tutup: TIME
- jam_mulai_istirahat: TIME
- jam_selesai_istirahat: TIME
- id_dokter: int
- id_faskes: int
+ addJamPraktek(array) : void
+ editJamPraktek(array) : void
+ deleteJamPraktek(int) : boolean
+ getJamPraktek(int) : array
Gambar 6. Class DiagramAplikasi
Setelah selesai melakukan desain sistem dan perancangan UML, tahap
berikutnya yakni penulisan kode program. Pada tahap ini dilakukan implementasi
pada perancangan yang telah dibuat. Implementasi dilakukan dengan menulis kode
program menggunakan PHP dengan Laravel Framework, Bootstrap dan Materialize
framework sebagai kerangka tampilan, MySQL sebagai basis data.
Tahapan berikutnya dalam perancangan sistem menggunakan Waterfall yakni
pengujian aplikasi. Pengujian aplikasi dilakukan dengan dua cara yakni dengan
pengujian teori dan pengujian aplikasi. Untuk menguji aplikasi langsung untuk
menguji keakuratan data dan HTML5 Geolocation sedangkan untuk pengujian teori
dilakukan perbandingan pengukuran dengan Euclidean dan Jarak dengan Google
Map. Hasil dari pengujian akan digunakan dalam tahap penyimpulan hasil sebagai
kesimpulan dari penelitian.
Tahapan terakhir dari mode Waterfall adalah perawatan program. Pada tahap
ini dilakukan pemeliharaan terhadap aplikasi yang dibuat. Bentuk pemeliharaan
dengan memperbarui aplikasi atau membuat versi yang lebih baru dengan teknologi
atau metode yang lebih cepat dan efisien.
4. Hasil dan Pembahasan
Dalam sistem ini terdapat dua pengguna dalam sistem ini yakni pengguna biasa
dan pengelola. Pengguna biasa dapat melakukan pencarian layanan kesehatan yang
ada baik yang masih melayani ataupun yang tidak melayani. Ketika pengguna
Page 17
17
melakukan permintaan pencarian layanan kesehatan yang ada disekitarnya. Pengguna
juga dapat meminta rute dari lokasi pengguna menuju layanan kesehatan yang
dibutuhkan menggunakan Google Direction API. Pengelola mampu melakukan
penambahan, pengubahan dan menghapus layanan kesehatan, jadwal layanan
kesehatan, dokter pada layanan kesehatan serta jadwal dokter pada layanan
kesehatan.
Gambar 7 adalah Halaman awal aplikasi. Di sistem ini terdapat menu untuk
mencari lokasi layanan kesehatan yang ada disekitar pengguna berdasarkan lokasi
pengguna menggunakan HTML5 Geolocation atau melakukan input secara manual
lokasi pada field form yang disediakan.
Gambar 7. Halaman awal aplikasi
Untuk memudahkan pencarian lokasi pengguna selain menggunakan HTML5
Geolocation, sistem juga memberikan kemudahan yakni autocomplete yang
memberikan daftar lokasi yang mungkin merupakan lokasi pengguna. Tabel 1 adalah
tabel browser yang mendukung HTML5 Geolocation. Tabel 1. Browser yang mendukung Geolocation API [17]
API IE Google
Chrome
Firefox Safari Opera
Geolocation 9.0 5.0 3.5 5.0 16.0
Setelah sistem mendapatkan lokasi pengguna, sistem melakukan pencarian
layanan kesehatan yang ada disekitar pengguna dalam radius 1 KM. apabila dalam 1
KM pengguna tidak menemukan layanan kesehatan yang dibutuhkan, pengguna dapat
memperlebar pencarian hingga radius 3 KM. setelah pengguna memiliih layanan
kesehatan yang dibutuhkan, pengguna dapat melihat jadwal layanan kesehatan,
jadwal dokter pada layanan kesehatan yang terpilih.
Kode Program 1. Kode Program pelacakan lokasi HTML5 Geolocation API
1. if (navigator.geolocation) {
2. navigator.geolocation.getCurrentPosition(function showPosition(position){
3. koordinat = position.coords.latitude + "," + position.coords.longitude;
4. akurasi = position.coords.accuracy;
5. } else {
6. console.log('not supported');
7. }
Page 18
18
8. function showPosition(position) {
9. x.innerHTML = "Latitude: " + position.coords.latitude + 10. "<br>Longitude: " + position.coords.longitude;
11. }
12.
13. function showError(error) {
14. switch(error.code) {
15. case error.PERMISSION_DENIED:
16. alert("Pengguna tidak mengijinkan mengakses layanan lokasi");
17. break;
18. case error.POSITION_UNAVAILABLE:
19. alert("Layanan informasi Lokasi tidak tersedia");
20. break;
21. case error.TIMEOUT:
22. alert("Permintaan akses lokasi telah habis")
23. break;
24. case error.UNKNOWN_ERROR:
25. alert("Sepertinya terjadi kesalahan");
26. break;
27. }
28. }
Kode program 1 adalah kode program untuk menerapkan API HTML5
Geolocation. Baris ke-1 pada kode program 2 untuk melakukan pengecekan apakah
browser yang digunakan untuk mengakses aplikasi mendukung fitur HTML5
geolocation. Baris ke-3 dan baris ke-4 berfungsi untuk mendapatkan lokasi pengguna
dan akurasi HTML5 geolocation. Baris ke 12 – 27 berfungsi untuk penanganan
kesalahan yang terjadi dalam pelacakan lokasi menggunakan HTML5 Geolocation. Tabel 2. Dataset Layanan Kesehatan Tiap Kecamatan
No Kecamatan Rumah Sakit Dokter Puskesmas
1 Sidorejo 1 30 2
2 Sidomukti 2 31 2
3 Argomulyo 1 9 2
4 Tingkir 2 14 1
Tabel 2 merupakan dataset jumlah layanan yang kesehatan pada aplikasi di
tiap kecamatan di kota Salatiga meliputi Rumah Sakit, Dokter, dan Puskesmas.
Dataset tersebut nantinya digunakan untuk melakukan pencarian layanan kesehatan
yang ada disekitarnya berdasarkan lokasi pengguna.
(a) (b)
Gambar 8. Hasil pencarian layanan kesehatan
Page 19
19
Gambar 8a terlihat bahwa secara default aplikasi menampilkan layanan
kesehatan yang ada disekitar pengguna pada jarak 1 KM yang masih melayani ketika
pengguna menjalankan aplikasi. Bila pengguna meminta aplikasi menunjukkan
semua layanan kesehatan yang ada disekitar pengguna baik yang aktif maupun tidak
aktif pengguna dapat melakukan penyarigan data dengan mengubah tombol switch
dari buka menjadi semua seperti yang ditunjukkan pada gambar 8b. Kode Program 2. Mencari layanan kesehatan aktif dalam radius 1 km
1. public function activeHaversine($latitude,$longitude,$jarak=1)
2. {
3. $start = microtime(true);
4. $data = DB::select('Select fo.hari, fo.jam_buka, fo.jam_tutup,
5. f.faskes_id, f.nama_faskes, f.alamat,
6. f.latitude, f.longitude,f.tipe_id, 6371*(2*ASIN(SQRT(POWER(SIN((abs(f.latitude)
7. -abs($latitude)) * pi()/180 / 2), 2) + COS(abs($longitude) * pi()/180 ) *
8. COS(abs(f.latitude) * pi()/180) * POWER(SIN((f.longitude - $longitude) *pi()/180
9. / 2), 2) ))) as jarak from faskes f join faskes_open fo on fo.faskes_id
10. f.faskes_id where fo.hari = WEEKDAY(now()) AND TIME(NOW()) BETWEEN fo.jam_buka
11. AND fo.jam_tutup AND TIME(NOW()) NOT BETWEEN fo.jam_mulai_istirahat and
12. fo.jam_selesai_istirahat having jarak < 1 ORDER BY jarak ASC’);
13. $time_elapsed = microtime(true) - $start;
14. return response()->json(['distance' => $jarak, 'waktu' => $time_elapsed ,
15. 'data' => $data]);
16. }
Kode Program 2 adalah kode program untuk melakukan pencarian layanan
kesehatan yang ada disektiar pengguna dalam radius 1 KM yang masih melayani
ketika pengguna melakukan permintaan pencarian layanan kesehatan. Pencarian
layanan kesehatan yang aktif dilakukan dengan menggunakan Haversine formula dan
untuk mencari layanan kesehatan yang aktif dilakukan penyeleksian pada tabel yang
berelasi dengan tabel layanan kesehatan yakni tabel faskes_open yang merupakan
tabel yang menyimpan jadwal layanan kesehatan. Sistem melakukan pencocokan
antara waktu sistem dengan waktu pengguna saat mengakses aplikasi. Fungsi ini
mengembalikan data dalam bentuk JSON berupa data layanan kesehatan waktu
eksekusi dan radius pencarian.
Kode Program 3. Query SQL mencari layanan kesehatan dalam radius 1 km
1. public function haversine($latitude,$longitude,$jarak=1){
2. $start = microtime(true);
3. $data = DB::select('select faskes_id, nama_faskes, latitude, longitude,
4. tipe_id, alamat,6371*(2*ASIN(SQRT(POWER(SIN((abs(latitude) - abs(-7.3304)) *
5. pi()/180 / 2), 2) +COS(abs(110.5) * pi()/180 ) * COS(abs(latitude) *
6. pi()/180) * POWER(SIN((longitude - 110.5) * pi()/180 / 2), 2) ))) as jarak
7. from faskes f having jarak < 1 ORDER BY jarak ASC’);
8. $time_elapsed = microtime(true) - $start;
9. return response()->json(['distance' => $jarak, 'waktu' => $time_elapsed
10. ,'data' => $data]);
11. }
Kode program 3 adalah method untuk melakukan seleksi data pada database
untuk mencari semua layanan kesehatan yang ada disekitar pengguna baik yang aktif
mapun tidak aktif dalam radius 1 KM. Fungsi ini mengembalikan data dalam bentuk
JSON berupa data layanan kesehatan waktu eksekusi dan radius pencarian.
Page 20
20
Gambar 9 Rute Menuju layanan kesehatan
Gambar 9 sistem menunjukkan rute menuju layanan kesehatan yang dipilih
oleh pengguna dari lokasi pengguna menuju lokasi layanan kesehatan yang telah
dipilih pengguna sebelumnya menggunakan Google Direction API.
Kode Program 4. Mendapatkan rute dengan Google Direction API
1. function routing(awal,tujuan)
2. {
3. var directionsService = new google.maps.DirectionsService();
4. var directionsDisplay = new google.maps.DirectionsRenderer();
5. document.getElementById('panel').innerHTML = "";
6. var map = new google.maps.Map(document.getElementById('map'), {
7. zoom:7,
8. mapTypeId: google.maps.MapTypeId.ROADMAP
9. });
10. directionsDisplay.setMap(map);
11. directionsDisplay.setPanel(document.getElementById('panel'));
12. var request = {
13. origin: awal,
14. destination: tujuan,
15. travelMode: google.maps.DirectionsTravelMode.DRIVING
16. };
17. directionsService.route(request, function(response, status) {
18. if (status == google.maps.DirectionsStatus.OK) {
19. directionsDisplay.setDirections(response);
20.
21. var point = response.routes[ 0 ].legs[ 0 ];
22. }
23. });
24. }
Kode program 4 adalah kode untuk mendapatkan rute menuju layanan
kesehatan dari lokasi pengguna. Baris 3 -9 merupakan konfigurasi untuk pengaturan
peta Google Map. Baris 10-15 merupakan konfigurasi untuk menampilkan turn-by-
turn navigation dari Google Direction API. Baris 17 -23 merupakan fungsi untuk
mendapatkan rute dari lokasi awal ke tujuan.
Page 21
21
(a) (b)
Gambar 10. Tampilan aplikasi pada perangkat yang berbeda
Gambar 10 adalah tampilan aplikasi menggunakan framework Materialize yang
responsive yaitu tampilan aplikasi secara otomatis menyesuaikan browser dan
perangkat yang digunakan, bila resolusi layar berubah ukuran tampilan aplikasi tidak
akan rusak tetapi akan menyesuaikan ukuran resolusi layar. Fitur ini dibuat agar
memudahkan pengguna untuk mengakses aplikasi tidak hanya melalui browser pada
komputer tapi perangkat yang berbeda yang memiliki resolusi layar yang berbeda.
Setelah tahapan pembuatan program/ aplikasi tahap berikutnya adalah
pengujian. Pengujian metode dilakukan dengan melakukan perbandingan dengan
metode Euclidean dan untuk akurasi panjang jarak dibandingkan dengan jarak
menggunakan Google Map.
Pengujian dilakukan langsung ke lapangan di kecamatan sidomukti, tepatnya di
sekitar lapangan pancasila (-7.3304,110.5) pada pukul 9.00 pagi.
Tabel 3. Hasil Pengukuran Jarak dalam radius 1 KM dari lokasi (-7.3304,110.5)
No Nama Faskes Euclidean(km) Haversine(km) Google
Map (km)
1 Klinik Aura Medika 0,085396 0,085073 0,085
2 RSUD Salatiga 0,466161 0,463422 0,463
3 RS Mutiara Bunda 0,471987 0,467651 0,468
4 Puskesmas Margosari 0,501231 0,500535 0,501
5 BKPM Salatiga 0,531009 0,530033 0,531
6 Puskesmas Kalicacing 0,549208 0,548183 0,547
8 drg. Kristine 0,613266 0,608783 0,609
9 Puskesmas Mangunsari 0,85316 0,845561 0,847
Waktu Eksekusi query 0,0032 0,0034 -
Tabel 3 menunjukkan aplikasi berhasil menemukan sembilan layanan kesehatan
yang ada disekitar pengguna pada radius maksimum 1 km dan yang aktif ketika
pengguna mengakses aplikasi. Terlihat bahwa metode Haversine memiliki akurasi
yang mendekati Google Map daripada metode Euclidean.
Page 22
22
Tabel 4. Rata rata eksekusi waktu query
Lokasi Haversine Euclidean
rata -rata standar deviasi rata-rata standar deviasi
1 0,00316 8,43274E-05 0,00303 0,000216282
2 0,0031 0,000166333 0,00307 0,000266875
3 0,00294 0,00011547 0,00277 0,0003335
4 0,00291 0,000347051 0,00277 0,000170294
Tabel 4 adalah tabel pengujian lama waktu pencarian lokasi layanan kesehatan
yang aktif di sekitar pengguna menggunakan Haversine dan Euclidean. Pengujian
dilakukan sebanyak 10 kali pada masing masing lokasi kemudian dicari rata – rata
waktu eksekusi dan standar deviasi dari masing masing pengukuran. Terlihat bahwa
untuk eksekusi query, Euclidean memiliki kecepatan yang lebih baik daripada
Haversine.
Tabel 5 adalah akurasi API HTML5 Geolocation. Untuk mendapatkan lokasi
lintang dan bujur pengguna dapat menggunakan position.coords.latitude dan
position.coords.longitude, sedangkan untuk mendapatkan akurasi HTML5
Geolocation dapat menggunakan position.coords.accuracy Tabel 5. Akurasi HTML5 Geolocation Berdasarkan Operator seluler
Lokasi Provider Akurasi (meter)
1 indosatooreedo 6
telkomsel 1415
xl 12
2 indosatooreedo 26
telkomsel 1411
xl 28
3 indosatooreedo 23
telkomsel 26
xl 40
4 indosatooreedo 15
telkomsel 6
xl 33
5. Kesimpulan
Dalam penelitian ini dibuat sistem untuk melakukan pencarian layanan
kesehatan yang aktif yang ada di sekitar pengguna menggunakan Haversine.
Penelitian ini juga membandingkan metode Haversine dan Euclidean. Berdasarkan
pengujian yang dilakukan, metode Euclidean memiliki kecepatan eksekusi waktu
yang lebih baik daripada Haversine tetapi Haversine memiliki akurasi jarak yang
lebih baik daripada Euclidean bila dibandingkan dengan jarak yang diukur
menggunakan Google Map. Pemanfaatan responsive design juga membantu agar
aplikasi dapat di akses melalui berbagai perangkat seperti smartphone, tablet dan
Page 23
23
Notebook / PC. Akurasi HTML5 Geolocation juga bergantung pada lokasi dan
operator seluler yang digunakan.
Penelitian ini bisa dikembangkan untuk mencari layanan kesehatan di sekitar
pengguna dan yang buka dari lokasi pengguna dengan menambahkan perhitungan
panjang jalan dan persimpangan yang dilalui serta ketinggian kontur jalan. Selain itu,
dapat ditambahkan hari libur nasional sebagai pengecualian tambahan hari kerja.
Daftar Pustaka
[1] BPS Kota Salatiga,2015, Salatiga Dalam Angka 2015, Salatiga : Badan Pusat
Statistik.
[2] Hu, Wen-Chen, Wang, Xiwei, __, Location-Based Services Using HTML5
Geolocation and Google Maps APIs.
[3] Supardi, Fery D, dkk, 2014, Rancang Bangun Aplikasi Sistem informasi
geografis praktik dokter dengan geolocatoin API berbasis responsive web
design, Igarss.
[4] Mwemezi, Jovin J. ,Huang, Youfang, 2011, Optimal Facility Location on
spherical surfaces,New York Science Journal 4(7).
[5] Sukoco, Budi, 2010, Penentuan Rute Optimal Berdasarkan Waktu Tempuh
Tercepat (Studi Kasus : Kota Surakarta). Repository Universitas Sebelas
Maret.
[6] Riegen,Riecher, ___, Sistem Informasi Layanan Kesehatan Kota Salatiga
Berbasis Web GIS,
https://drive.google.com/file/d/0BzlQWFPGVUr9cjhueTA0Sk5VQmc/edit?pref
=2&pli=1, Diakses tanggal 6 Agustus 2015
[7] Sumarsono, Bambang, 2014, Perancangan Aplikasi Mobile Tambal Ban
Terdekat di Kabupaten Sleman Menggunakan Location Based Services Pada
Platform Android.
[8] McCool, Shawn, 2012, Laravel Starter, Birmingham : Packt Publishing.
[9] Gregorius,Agung, 2012, Buku Pintar HMTL5 CSS3 Dreamweaver CS6,
Yogyakarta : Jubilee Enterprise.
[10] Lubbers, Peter, dkk,2010, Pro HTML5 Programming. New York : Springer.
[11] Widyatmoko, Nur, 2012,Pemanfaatan Geolocation dan Haversine Formulla
dalam Perancangan Sistem Informasi Geografis (GIS) (Studi Kasus :
Pariwisata Kabupaten Semarang), Repository Digital Library UKSW.
[12] Rofiq, M. ,Uzzy, Riza Fathul, 2014, Penentuan Jalur Terpendek Menuju Cafe
Di Kota Malang Menggunakan Metode Bellman-Ford dengan Location Based
Service Berbasis Android, Jurnal Ilmiah Teknologi dan Informasi ASIA 8(2):
49–64.
Page 24
24
[13] Shiddiq, Ahmad, dkk,2012, Rancang Bangun Alat Kalibrasi Sensor
Menggunakan Metode Euclidean, Seminar Proyek Akhir Jurusan Teknik
elektronika PENS-ITS.
[14] Andy, Rubin, Geo (proximity) Search with MySQL 2006.
http://www.arubin.org/files/geo_search.pdf. Diakses tanggal 6 Agustus 2015.
[15] Hasibuan, Zainal A., Metodologi Penelitian Pada Bidang Ilmu Komputer dan
Tekonlogi Informasi. Konsep, Teknik Dan Aplikasi . Jakarta : Ilmu Komputer
Universitas Indonesia.
[16] Pressman, Roger, 2001, Software Engineering : A Practitioner ’ s Approach,
2001.New York : McGraw-Hill Higher Education.
[17] W3schools, 2015, HTML5 Geolocation,
http://www.w3schools.com/html/html5_geolocation.asp, Diakses tanggal 05
Desember 2015.