BAB IV IMPLEMENTASI DAN PENGUJIAN

Transkripsi

1 BAB IV 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 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, 49

2 50 `gambar` varchar(255) NOT NULL ) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=latin1; 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 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 data-role="page" class="main-page"> <div data-role="header" data-position="fixed" data-theme="d"> <h1>menu</h1> <div data-role="content"> <p style="text-align: center"><input type="image" datarole="none" src=gambar/map.png /></p> <ul data-role="listview" data-inset="true" datatheme="d"> Terdekat</a></li> Rumah Sakit</a></li> <li><a href="peta.html" rel="external">rumah Sakit <li><a href="daftarrs.html" rel="external">cari

3 51 <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 data-role="footer" data-position="fixed" data-theme="d"> <h1> Copyright 2015</h1> Berikut adalah tampilan halaman menu: Gambar 4.1 Halaman Menu 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 52 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"> <div data-role="header" data-position="fixed" data-theme="d"> <a href="index.html" rel="external">kembali</a><h1>map</h1> <div id="contentmap"> <div id="map_canvas" style="height:100%"> <div data-role="footer" data-position="fixed" data-theme="d"> <h1> Copyright 2015</h1> 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 53 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 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 54 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. <div data-role="page" id="pagelist" class="main-page"> <div data-role="header" data-position="fixed" data-theme="d"> <a href="index.html" rel="external">kembali</a><h1>pilih Rumah Sakit</h1> <div data-role="content"> <ul id="rslist" data-role="listview" data-theme="d" data-inset="true" data-filter="true" data-filter-placeholder="cari Rumah Sakit..."></ul> <div data-role="footer" data-position="fixed" data-theme="d"> <h1> Copyright 2015</h1> 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 55 Berikut adalah tampilan halaman daftar rumah sakit: Gambar 4.3 Halaman Cari Rumah Sakit 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 id="pagedetail" data-role="page" class="main-page"> <div data-role="header" data-position="fixed" data-theme="d"> <a href="daftarrs.html" rel="external">kembali</a><h1>info</h1> <div data-role="content"> <center><img id="gambarrs" style="height:150px;

8 56 width:230px;"/></center> <ul data-role="listview" data-inset="true" data-theme="d" datadividertheme="d"> <li id="namars"></li> <li id="alamatrs"></li> <li id="teleponrs"></li> <li id="latrs"></li> <li id="lngrs"></li> </ul> <div data-role="footer" data-position="fixed" data-theme="d"> <div data-role="navbar"> <ul> <li><a href="#directmap">lihat Rute</a></li> </ul> <h1> Copyright 2015</h1> 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', ' +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 57 $('#lngrs').text('longitude : '+loaddetailrs.longitude); } }); Berikut adalah tampilan halaman info rumah sakit: Gambar 4.4 Halaman detail rumah sakit 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. <div id="directmap" data-role="page" class="main-page"> <div data-role="header" data-position="fixed" data-theme="d">

10 58 <a href="#pagedetail">kembali</a><h1>rute</h1> <div data-role="content"> <ul data-role="listview" data-inset="true" data-theme="d" datadividertheme="d"> <li data-role="list-divider"></li> <li id="map_canvas" style=" height:300px;"></li> <li id="directionpanel"></li> </ul> <div data-role="footer" data-position="fixed" data-theme="d"> <h1> Copyright 2015</h1> 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); } }); Berikut adalah tampilan halaman rute rumah sakit:

11 59 Gambar 4.5 Halaman rute 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="page" class="main-page" data-dom-cache="false"> <div data-role="header" data-position="fixed" data-theme="d"> <a href="index.html" rel="external">kembali</a><h1>bantuan</h1> <div data-role="content"> <content> <div data-role="footer" data-position="fixed" data-theme="d"> <h1> Copyright 2015</h1>

12 60 Berikut adalah tampilan halaman bantuan: Gambar 4.6 Halaman bantuan 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="page" class="main-page"> <div data-role="header" data-position="fixed" data-theme="d"> <a href="index.html" rel="external">kembali</a><h1>tentang</h1> <div data-role="content"> <ul data-role="listview" data-inset="true" align="center" data-theme="d"> <li><p style="text-align: center">aplikasi Pencarian Lokasi Rumah Sakit</br> Berfasilitas BPJS. Dibuat untuk Tugas</br>

13 61 Jakarta</strong></p></li> </ul> Akhir Jurusan Tehnik Informatika</br> Fakultas Ilmu Komputer</br> <strong>universitas Mercubuana <div data-role="listview" data-inset="true" data-theme="d" align="center"> <li><a href="#" style="color: #4099FF" onclick="window.open(' '_system');"> <input type="image" src="gambar/twitter.png" width="32px" height="32px" data-inline="true"></input> </a></li> <li><a href="#" style="color: #186776" '_system');"> <input type="image" src="gambar/mail.jpg" width="32px" height="32px" data-inline="true"></input> </a></li> <div data-role="footer" data-position="fixed" data-theme="d"> <h1> Copyright 2015</h1>

14 62 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 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 63 CPU Dual_core 1.2GHz Chipset Intel Atom Z2520 OS Android Jelly Bean v 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 Normal Menampilkan halaman daftar sakit rumah sakit Tidak normal Menampilkan alert 4 Memilih rumah sakit Normal Menampilkan halaman info rumah sakit Tidak normal Menampilkan alert 5. Memilih lihat rute Normal Menampilkan halaman map informasi rute Tidak normal Menampilkan alert 6. Memilih bantuan Normal Menampilkan halaman bantuan 7. Memilih tentang Normal Menampilkan halaman tentang 8. Kembali ke halaman Normal Menampilkan halaman sebelumnya sebelumnya 9. Memilih keluar aplikasi Normal Keluar aplikasi

16 Hasil Pengujian Tabel 4.2 Hasil Pengujian Aplikasi No Nama Tes Sifat Hasil Yang Kegiatan diharapkan 1. Masuk halaman Normal Menampilkan menu halaman menu 2. Memilih rumah Normal Menampilkan sakit terdekat halaman map rumah sakit terdekat Tidak Menampilkan alert normal 3. Memilih cari Normal Menampilkan rumah sakit halaman daftar rumah sakit Tidak Menampilkan alert normal 4 Memilih rumah Normal Menampilkan sakit halaman detail rumah sakit Tidak Menampilkan alert normal 5. Memilih lihat Normal Menampilkan rute halaman map informasi rute Tidak Menampilkan alert normal 6. Memilih bantuan Normal Menampilkan halaman bantuan Hasil Pengujian

17 65 Lanjutan Tabel Memilih tentang Normal Menampilkan halaman tentang 8. Kembali ke Normal Menampilkan halaman sebelumnya halaman sebelumnya 9. Memilih keluar Normal Keluar aplikasi aplikasi 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 66