BAB IV IMPLEMENTASI DAN PENGUJIAN

(1)

IMPLEMENTASI DAN PENGUJIAN

Bab ini menjelaskan mengenai implementasi dari prototype aplikasi pencarian lokasi rumah sakit BPJS berbasis android yang akan dibuat dan hasil pengujian terhadap aplikasi pada perangkat android. Pada bagian implementasi akan dibahas mengenai rancangan antarmuka aplikasi dan kode program yang akan diterapkan, sedangkan pengujian aplikasi menggunakan metode pengujian kotak hitam (black box testing). Metode pengujian ini dilakukan untuk mengetahui apakah aplikasi dapat berjalan sesuai yang diinginkan.

4.1 Implementasi

Setelah sistem dianalisis dan didesain secara rinci, tahap selanjutnya adalah implementasi. Implementasi sistem merupakan tahap meletakkan sistem sehingga siap untuk dioperasikan. Implementasi bertujuan untuk mengkonfirmasi modul-modul perancangan, sehingga pengguna dapat memberi masukan kepada pengembangan sistem.

4.1.1 Implementasi Basis Data

Database terdapat pada server, database ini mempunyai 1 table, yaitu table tb_rumahsakit. Berikut merupakan SQL statement dari database ini.

1. SQL statement tb_rumahsakit

CREATE TABLE IF NOT EXISTS `tb_rumahsakit` ( `id` int(11) NOT NULL,

`nama_rs` varchar(50) NOT NULL, `alamat_rs` varchar(100) NOT NULL, `telepon_rs` varchar(15) NOT NULL, `latitude` double NOT NULL, `longitude` double NOT NULL,

(2)

`gambar` varchar(255) NOT NULL

) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=latin1; 4.1.2 Implementasi Penulisan Kode

Penulisan kode atau biasa disebut dalam bahasa inggris coding merupakan bagian utama dalam pembuatan aplikasi ini. penulisan kode pada aplikasi ini menggunkan bahasa Javascript dan HTML5 sebagai penggunaan bahasa utamanya dengan editor Eclipse di running dengan menggunakan smartphone android, Sedangkan untuk database menggunakan MySQL acuannya adalah apakah aplikasi yang dibuat telah berjalan dengan seharusnya. Bila belum maka kode atau source code akan di perbaiki sampai di dapatkan aplikasi yang berjalan dan berfungsi dengan baik. Pada bagian ini akan dijabarkan penulisan kode dari aplikasi ini secara rinci.

4.1.2.1 Penulisan Kode Pada Halaman Menu

Kode pada halaman menu merupakan tampilan awal setelah user membuka aplikasi. Pada halaman ini terdapat gambar marker, lima buah listview, header dan footer. Ketika salah satu Listview pada halaman menu aplikasi di tekan maka akan mengarahkan aplikasi ke halaman yang ditekan oleh user.

</div>

<li><a href="peta.html" rel="external">Rumah Sakit Terdekat</a></li>

<li><a href="daftarrs.html" rel="external">Cari Rumah Sakit</a></li>

(3)

<li><a href="bantuan.html" rel="external">Bantuan</a></li> <li><a href="tentang.html" rel="external">Tentang</a></li> <li><a name="buttonClick" onclick="exitFromApp()">Keluar</a></li> </ul> </div>

</div> </div>

Berikut adalah tampilan halaman menu:

Gambar 4.1 Halaman Menu

4.1.2.2 Penulisan Kode Pada Halaman Rumah Sakit Terdekat

Kode pada halaman rumah sakit terdekat merupakan tampilan map setelah user menekan rumah sakit terdekat pada halaman menu. Pada halaman ini terdapat map, marker posisi user, menampilkan marker rumah sakit mana saja yang

(4)

terdekat, tombol kembali, header dan footer. Ketika salah satu marker rumah sakit pada halaman rumah sakit terdekat di tekan maka akan menampilkan window nama rumah sakit dan terdapat tombol kembali untuk ke halaman sebelumnya. <div id="getallmarker" data-role="page" class="main-page">

<a href="index.html" rel="external">Kembali</a><h1>Map</h1> </div>

</div>

</div> </div>

Pada halaman ini terdapat kode untuk menghitung jarak dengan menggunakan rumus haversine untuk mengetahui rumah sakit terdekat dengan posisi pengguna dimana latitude/longitude rumah sakit didapat dari server dan latitude/longitude posisi pengguna didapat dengan menggunakan GPS pada handphone. Berikut adalah potongan kodenya:

if (typeof(Number.prototype.toRad) === "undefined") { Number.prototype.toRad = function() {

return this * Math.PI / 180; }

}

var lat2 = parseFloat(loaddata.latitude); var lon2 = parseFloat(loaddata.longitude); var lat1 = position.coords.latitude; var lon1 = position.coords.longitude; var R = 6371; // metres

(5)

var dlat1 = lat1.toRad(); var dlat2 = lat2.toRad(); var slat = (lat2-lat1).toRad(); var slon = (lon2-lon1).toRad();

var a = Math.sin(slat/2) * Math.sin(slat/2) + Math.cos(dlat1) * Math.cos(dlat2) * Math.sin(slon/2) * Math.sin(slon/2);

var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); var d = R * c;

Berikut adalah tampilan halaman rumas sakit terdekat:

Gambar 4.2 Halaman rumah sakit terdekat

4.1.2.3 Penulisan Kode Pada Halaman Daftar Rumah Sakit

Kode pada halaman daftar rumah sakit merupakan tampilan listview nama dan gambar rumah sakit yang diambil dari server berupa JSON setelah user menekan cari rumah sakit pada halaman menu. Pada halaman ini terdapat lisview nama dan rumah sakit, textbox cari rumah sakit, header dan footer. Ketika salah

(6)

satu listview rumah sakit pada halaman daftar rumah sakit di tekan maka akan mengarahkan user ke halaman info rumah sakit dan terdapat tombol kembali untuk ke halaman sebelumnya.

<a href="index.html" rel="external">Kembali</a><h1>Pilih Rumah Sakit</h1>

</div>

</div>

</div> </div>

Pada halaman ini terdepat kode untuk mengambil data JSON pada web server dan menampilkan pada android PhoneGap. Berikut potongan kode tersebut:

function getlistrs() {

$.getJSON(url + 'pilihrs.php', function(data) { var listrs = data.items;

$.each(listrs, function(index, loaddata) {

$('#RsList').append('<li><a href="detailrute.html?id=' + loaddata.id + 'data-transition="flip" rel="external">' +

'<h2>' + loaddata.nama_rs + '</h2>'); });

$('#RsList').listview('refresh'); });

(7)

Berikut adalah tampilan halaman daftar rumah sakit:

Gambar 4.3 Halaman Cari Rumah Sakit

4.1.2.4 Penulisan Kode Pada Halaman Info Rumah Sakit

Kode pada halaman info rumah sakit merupakan tampilan detail rumah sakit yang diambil dari server berupa JSON berdasarkan id setelah user menekan salah satu rumah sakit pada halaman daftar rumah sakit. Pada halaman ini terdapat informasi gambar, nama, alamat, telepon, latitude/longitude, tombol panggil, tombol lihat rute header dan footer. Terdapat tombol lihat rute. Jika user menekan tombol panggil maka akan mengarahkan user ke menu panggilan. Jika user menekan tombol lihat rute maka akan mengarahkan user ke halaman rute rumah sakit dan terdapat tombol kembali untuk ke halaman sebelumnya.

<div data-role="header" data-position="fixed" data-theme="d"> <a href="daftarrs.html" rel="external">Kembali</a><h1>Info</h1> </div>

(8)

width:230px;"/></center>

<ul>

<li><a href="#directmap">Lihat Rute</a></li> </ul>

</div>

Pada halaman ini terdapat kode untuk mengambil data rumah sakit berdasarkan rumah sakit yang dipilih dan akan menampilkan info rumah sakit dan di tampilkan dalam bentuk listview. Berikut potongan kode tersebut:

function getdetailrs() {

$.getJSON(url + 'ambildetailrs.php?id='+id, function(data) { loaddetailrs = data.items; console.log(loaddetailrs); $('#gambarRS').attr('src', 'http://bpjs-data.hol.es/gambar/' +loaddetailrs.gambar); $('#namaRS').text('Nama : '+loaddetailrs.nama_rs); $('#alamatRS').text('Alamat : '+loaddetailrs.alamat_rs); $('#teleponRS').text('Telepon : '+loaddetailrs.telepon_rs); $('#latRS').text('Latitude : '+loaddetailrs.latitude);

(9)

$('#lngRS').text('Longitude : '+loaddetailrs.longitude); });

}

Berikut adalah tampilan halaman info rumah sakit:

Gambar 4.4 Halaman detail rumah sakit

4.1.2.5 Penulisan Kode Pada Halaman Rute Rumah Sakit

Kode pada halaman Rute rumah sakit merupakan tampilan map dan informasi rute menuju rumah sakit setelah user menekan tombol lihat rute pada halaman info rumah sakit. Pada halaman ini terdapat marker rute dari posisi user sampai tujuan, informasi rute jalan, header dan footer. Ketika salah satu marker atau informasi rute pada halaman rute rumah sakit di tekan maka akan menampilkan window pada map alamat tersebut dan terdapat tombol kembali untuk ke halaman sebelumnya.

(10)

<a href="#pagedetail">Kembali</a><h1>Rute</h1> </div>

</ul> </div>

</div> </div>

Pada halaman ini terdepat kode untuk menampilkan informasi rute dan jalan menuju rumah sakit yang dipilih sebelumnya. Kode ini memanfaatkan Google Map API untuk mendapatkan data-data informasi jalan dan map. Berikut potongan kode tersebut:

var posisi = position.coords.latitude + ',' + position.coords.longitude;

var tujuan = new google.maps.LatLng(loaddata.latitude, loaddata.longitude); var request = { origin:posisi, destination:tujuan, travelMode: google.maps.DirectionsTravelMode.DRIVING };

directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) {

directionsDisplay.setDirections(response); }

});

(11)

Gambar 4.5 Halaman rute

4.1.2.6 Penulisan Kode Pada Halaman Bantuan

Kode pada halaman bantuan merupakan tampilan informasi bantuan bagaimana menggunakan aplikasi ini, setelah user menekan lisview bantuan. Pada halaman ini terdapat gambar , text, tombol kembali, header dan footer. Menampilkan informasi bantuan dalam menggunakan aplikasi dan terdapat tombol kembali untuk ke halaman sebelumnya.

<div data-role="header" data-position="fixed" data-theme="d"> <a href="index.html" rel="external">Kembali</a><h1>Bantuan</h1> </div>

</div>

</div> </div>

(12)

Berikut adalah tampilan halaman bantuan:

Gambar 4.6 Halaman bantuan

4.1.2.7 Penulisan Kode Pada Halaman Tentang

Kode pada halaman Tentang merupakan tampilan profil aplikasi, setelah user menekan lisview tentang. Pada halaman ini terdapat gambar , text, tombol kembali, header dan footer. Menampilkan profil aplikasi dan terdapat tombol kembali untuk ke halaman sebelumnya.

<div data-role="header" data-position="fixed" data-theme="d"> <a href="index.html" rel="external">Kembali</a><h1>Tentang</h1> </div>

<li><p style="text-align: center">Aplikasi Pencarian Lokasi Rumah Sakit</br>

(13)

Akhir Jurusan Tehnik Informatika</br> Fakultas Ilmu Komputer</br>

<strong>Universitas Mercubuana Jakarta</strong></p></li>

</ul>

</a></li>

</a></li> </div>

</div>

</div> </div>

(14)

Berikut adalah tampilan halaman tentang:

Gambar 4.7 halaman tentang

4.2 Pengujian Fungsionalitas

Proses pengujian ini di lakukan dengan cara install aplikasi pada device. Dalam hal ini penulis akan menggunakan metode pengujian aplikasi blackbox. Untuk melihat apakah fungsi-fungsi pada aplikasi berjalan dengan baik atau tidak dan juga mengetahui di bagian mana saja terdapat kesalahan pada aplikasi ini untuk segera dapat di perbaiki oleh penulis.

4.2.1 Lingkungan Pengujian

Aplikasi Pencarian lokasi Rumah Sakit berfasilitas BPJS ini diuji menggunakan Smartphone Android.

Spesifikasi Android:

 ASUS Zenfone 4

 Display – 480 x 800 pixels  Memory Internal – 8GB  RAM – 1GB

(15)

 CPU – Dual_core 1.2GHz  Chipset – Intel Atom Z2520  OS – Android Jelly Bean v4.3 4.2.2 Skenario Pengujian

Pengujian aplikasi ini dilakukan menggunakan SmartPhone ASUS Zenfone 4. Item yang diuji antara lain:

Tabel 4.1 Skenario Pengujian Aplikasi

No Nama Tes Sifat Kegiatan Hasil Yang diharapkan 1. Masuk halaman menu Normal Menampilkan halaman menu 2. Memilih rumah sakit

terdekat

Normal Menampilkan halaman map rumah sakit terdekat

Tidak normal Menampilkan alert 3. Memilih cari rumah

sakit

Normal Menampilkan halaman daftar rumah sakit

Tidak normal Menampilkan alert

4 Memilih rumah sakit Normal Menampilkan halaman info rumah sakit

5. Memilih lihat rute Normal Menampilkan halaman map informasi rute

6. Memilih bantuan Normal Menampilkan halaman

bantuan

7. Memilih tentang Normal Menampilkan halaman

tentang 8. Kembali ke halaman

sebelumnya

Normal Menampilkan halaman

sebelumnya 9. Memilih keluar aplikasi Normal Keluar aplikasi

(16)

4.2.3 Hasil Pengujian

Tabel 4.2 Hasil Pengujian Aplikasi

No Nama Tes Sifat

Kegiatan Hasil Yang diharapkan Hasil Pengujian 1. Masuk halaman menu Normal Menampilkan halaman menu Sesuai 2. Memilih rumah sakit terdekat Normal Menampilkan

halaman map rumah sakit terdekat

Sesuai

Tidak normal

Menampilkan alert Sesuai

3. Memilih cari rumah sakit

Normal Menampilkan

halaman daftar rumah sakit

Sesuai

Tidak normal

4 Memilih rumah sakit

Normal Menampilkan

halaman detail rumah sakit

Sesuai

Tidak normal

5. Memilih lihat rute Normal Menampilkan halaman map informasi rute Sesuai Tidak normal

6. Memilih bantuan Normal Menampilkan halaman bantuan

(17)

Lanjutan Tabel 4.2

7. Memilih tentang Normal Menampilkan halaman tentang Sesuai 8. Kembali ke halaman sebelumnya Normal Menampilkan halaman sebelumnya Sesuai 9. Memilih keluar aplikasi

Normal Keluar aplikasi Sesuai

4.3 Analisis Hasil Pengujian

Setelah tahap pengujian blackbox diatas terhadap semua fungsi pada Aplikasi pencarian lokasi rumah sakit BPJS berbasis android yang sudah dijalankan, maka dapat disimpulkan:

1. Aplikasi berjalan baik pada Android karena pada saat pembuatan penulis menggunakan smartphone android untuk mengetahui error dan yang lainnya.

2. Fungsi-fungsi pada aplikasi berjalan dengan baik seperti, mengambil data JSON pada web server, menampilkan map rumah sakit terdekat dengan jarak masing-masing rumah sakit dari posisi pengguna, menampilkan map rute menuju rumah sakit dari posisi pengguna dan menampilkan informasi rute.

3. Aplikasi membutuhkan waktu untuk mengakses data rumah sakit dan map karena membutuhkan koneksi internet.

(18)