BAB IV IMPLEMENTASI DAN PENGUJIAN

(1)

BAB IV

IMPLEMENTASI DAN PENGUJIAN

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_pencucian. Berikut merupakan SQL statement dari database ini.

1. SQL statement tb_pencucian

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

`nama_pk` varchar(100) NOT NULL, `alamat_pk` varchar(225) NOT NULL, `telepon_pk` varchar(15) NOT NULL, `latitude` double NOT NULL,

`longitude` double NOT NULL,

) engine=InnoDB auto_increment =6 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

(2)

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 logo, lima buah button, header dan footer. Ketika salah satu button pada halaman menu aplikasi di tekan maka akan mengarahkan aplikasi ke halaman yang ditekan oleh user.

<title>Pencarian Lokasi Pencucian Kendaraan</title> <script> document.addEventListener('deviceready', function() { document.addEventListener("backbutton", go_back, false); }, false); function go_back(){ } function onLoad(){ document.addEventListener("deviceready", onDeviceReady, true); } function exitFromApp(){ navigator.app.exitApp(); }

(3)

</script>

</head>

<div data-role="page" class="main-page">

<div data-role="header" data-position="fixed" data-theme="a">

<div data-role="content">

<p style="text-align: center"><input type="image" data-role="none" src=gambar/carwash2.png /></p>

<ul role="listview"

data-inset="true" data-theme="a">

<!-- <li><a

href="#getallmarker">Pencucian Kendaraan Terdekat</a></li> -->

<div class="ui-grid-a"> <div class="ui-block-a" >

<a href="peta.html" data-role="button" rel="external"

data-theme="a">

<input type="image" src="gambar/peta.png" width="48px" heigth="48px">

<h4 align="center">

Lihat <br> Peta

(4)

</h4></a> </div>

<div class="ui-block-b">

<a href="data.html" data-role="button" rel="external"

data-theme="a"> <input

type="image" src="gambar/search.png" width="48px" heigth="48px"> <h4 align="center"> Data <br> Lokasi </h4></a> </div> </div> <div class="ui-grid-a"> <div class="ui-block-a" > <a href="bantuan.html" data-role="button" rel="external" data-theme="a">

<input type="image" src="gambar/help.png" width="48px" heigth="48px">

<h4 align="center"> Bantuan<br> </h4></a> </div> <div class="ui-block-b" > <a href="tentang.html" data-role="button" rel="external" data-theme="a">

(5)

<input type="image" src="gambar/info.png" width="48px" heigth="48px">

<h4 align="center"> Tentang<br> </h4></a> </div> </div> <a name="buttonClick" onclick="exitFromApp()" data-role="button" rel="external" data-theme="a">

<input type="image" src="gambar/exit.png" width="48px" heigth="48px">

<h4 align="center"> Keluar <br>

</h4></a> </ul>

</div>

(6)

Berikut adalah tampilan halaman menu:

Gambar 4.1 Halaman Menu 4.1.2.2 Penulisan Kode Pada Halaman Radius

Kode pada halaman radius merupakan tampilan sebuah button listview radius setelah user menekan lihat peta pada halaman menu. Pada halaman ini terdapat textbox pilih radius, button listview radius, tombol kembali, header dan footer. Ketika salah satu button listview radius pada halaman radius di tekan maka akan menampilkan peta serta jarak antara posisi user dengan lokasi tersebut dan terdapat tombol kembali untuk ke halaman sebelumnya.

<meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0,

(7)

user-scalable=no, width=device-width">

<title>Aplikasi Pencarian Lokasi Pencucian Kendaraan</title>

<link rel="stylesheet" href="jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.css" />

<link rel="stylesheet" href="index.css" /> <script src="jquery.mobile-1.3.2/jquery-1.7.2.min"></script>

<script src="jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.js"></script>

<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>

<script type="text/javascript" charset="utf-8" src="index.js"></script>

</head>

<body>

<a href="index.html"

rel="external">Kembali</a><h1>Radius</h1> </div>

<ul role="listview" data-inset="true" align="center" data-theme="a">

<li><p style="text-align: center">Pilih radius yang anda inginkan </p> </li>

(8)

rel="external">Radius 1Km</a></li> <li><a href="peta2.html" rel="external">Radius 2Km</a></li> <li><a href="peta3.html" rel="external">Radius 3Km</a></li> </ul> </div>

Berikut adalah tampilan halaman radius:

Gambar 4.2 Halaman Radius 4.1.2.3 Penulisan Kode Pada Halaman Lihat Peta

Kode pada halaman lihat peta merupakan tampilan map setelah user menekan lihat peta pada halaman menu. Pada

(9)

halaman ini terdapat map, marker posisi user, menampilkan marker lokasi pencucian kendaraan mana saja yang terdekat dengan radius 3km dari posisi user, tombol kembali, header dan footer. Ketika salah satu marker lokasi pencucian kendaraan pada halaman lihat peta di tekan maka akan menampilkan window nama lokasi pencucian kendaraan serta jarak antara posisi user dengan lokasi tersebut dan terdapat tombol kembali untuk ke halaman sebelumnya.

<title>Pencarian Lokasi Pencucian Kendaraan</title>

padding: 0;

position : absolute !important; top : 40px !important; right : 0; bottom : 40px !important; left : 0 !important; } </style> </head> <body>

<div id="getallmarker" data-role="page" class="main-page">

(10)

data-theme="a"> <a href="index.html" rel="external">Kembali</a><h1>Map</h1> </div> <div data-role="content"> <div id="contentmap"> <div id="map_canvas" style="height:100%"></div> </div> </div>

Pada halaman ini terdapat kode untuk menghitung jarak dengan menggunakan rumus haversine formula serta kode radius sejauh 3km untuk mengetahui lokasi pencucian kendaraan terdekat dengan posisi pengguna dimana latitude/longitude lokasi pencucian kendaraan 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;

(11)

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

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;

(12)

google.maps.InfoWindow(); google.maps.event.addListener(markerall, 'click', (function(markerall) { return function() { info_window.setContent(loaddata.nama_pk+'</br> Jarak '+d+' km'); info_window.open(map, markerall); } })(markerall)); });

var circle = new google.maps.Circle({ map: map,

radius: 3000, // 10 miles in metres fillColor: '#AA0000'

});

circle.bindTo('center', marker, 'position');

(13)

Gambar 4.3 Halaman Lihat Peta 4.1.2.4 Penulisan Kode Pada Halaman Data Lokasi

Kode pada halaman data lokasi merupakan tampilan listview nama yang diambil dari server berupa JSON setelah user menekan cari data lokasi pada halaman menu. Pada halaman ini terdapat lisview nama lokasi pencucian kendaraan, textbox cari data lokasi, header dan footer. Ketika salah satu listview nama lokasi pencariaan kendaraan pada halaman data lokasi di tekan maka akan mengarahkan user ke halaman detail lokasi pencucian kendaraan dan terdapat tombol kembali untuk ke halaman sebelumnya.

(14)

Kendaraan</title>

</head>

<body>

<div data-role="page" id="pagelist" class="main-page">

<a href="index.html"

rel="external">Kembali</a><h1>Pilih Lokasi</h1> </div>

<ul id="PkList" role="listview" data-theme="a" data-inset="true" data-filter="true" data-filter-placeholder="Data Lokasi"></ul>

</div>

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

function getlistpk() {

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

$.each(listpk, function(index, loaddata) { $('#PkList').append('<li><a

(15)

href="detailrute.html?id=' + loaddata.id + 'data-transition="flip" rel="external">' + '<h2>' + loaddata.nama_pk + '</h2>'); }); $('#PkList').listview('refresh'); }); }

Berikut adalah tampilan halaman data lokasi:

Gambar 4.4 Halaman Data Lokasi 4.1.2.5 Penulisan Kode Pada Halaman Info Lokasi

Pencucian Kendaraan

Kode pada halaman info lokasi pencucian kendaraan merupakan tampilan detail lokasi pencucian kendaraan yang diambil dari server berupa JSON berdasarkan id setelah user menekan salah satu lokasi pencucian kendaraan pada halaman daftar lokasi pencucian kendaraan. Pada halaman ini terdapat informasi nama, alamat, telepon, latitude/longitude, tombol lihat

(16)

rute header dan footer. Terdapat tombol lihat rute. Jika user menekan tombol lihat rute maka akan mengarahkan user ke halaman rute rumah sakit dan terdapat tombol kembali untuk ke halaman sebelumnya.

<title>Pencarian Lokasi Tempat Pencucian Kendaraan</title>

</head>

<body>

<div id="pagedetail" data-role="page" class="main-page">

<a href="data.html"

rel="external">Kembali</a><h1>Info</h1> </div>

<ul role="listview" inset="true" data-theme="a" data-dividerdata-theme="a"> <li id="namapk"></li> <li id="alamatpk"></li> <li id="teleponpk"></li> <li id="latpk"></li> <li id="lngpk"></li> </ul> </div>

(17)

<div data-role="footer" data-position="fixed" data-theme="a"> <div data-role="navbar"> <ul> <li><a href="#directmap">Lihat Rute</a></li> </ul> </div> <h1>© Copyright 2016</h1> </div> </div> </body> </html>

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

function getdetailpk() { $.getJSON(url + 'ambildetailpk.php?id='+id, function(data) { loaddetailpk = data.items; console.log(loaddetailpk); $('#namapk').text('Nama : '+loaddetailpk.nama_pk); $('#alamatpk').text('Alamat : '+loaddetailpk.alamat_pk); $('#teleponpk').text('Telepon : '+loaddetailpk.telepon_pk); $('#latpk').text('Latitude : '+loaddetailpk.latitude);

(18)

$('#lngpk').text('Longitude : '+loaddetailpk.longitude);

}); }

Berikut adalah tampilan halaman info lokasi pencucian kendaraan:

Gambar 4.5 Halaman detail lokasi pencucian kendaraan 4.1.2.6 Penulisan Kode Pada Halaman Rute Lokasi

Pencucian Kendaraan

Kode pada halaman Rute lokasi pencucian kendaraan merupakan tampilan map dan informasi rute menuju lokasi pencucian kendaraan setelah user menekan tombol lihat rute pada halaman info lokasi pencucian kendaraan. Pada halaman ini terdapat marker rute dari posisi user sampai tujuan, informasi rute jalan, header dan footer. Ketika salah satu marker atau informasi

(19)

rute pada halaman rute lokasi pencucian kendaraan di tekan maka akan menampilkan window pada map alamat tersebut dan terdapat tombol kembali untuk ke halaman sebelumnya.

<title>Pencarian Lokasi Tempat Pencucian Kendaraan</title>

</head>

<body>

<div id="directmap" data-role="page" class="main-page"> <div data-role="header" data-position="fixed" data-theme="a">

<a

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

<ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="d">

<li data-role="list-divider"></li> <li id="map_canvas" style=" height:300px;"></li>

<li id="directionPanel"></li> </ul>

</div>

<div data-role="footer" data-position="fixed" data-theme="a">

(20)

</div> </body> </html>

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

var tujuan = new google.maps.LatLng(loaddata.latitude, loaddata.longitude);

var posisi = position.coords.latitude + ',' + position.coords.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); } }); }); }

(21)

Berikut adalah tampilan halaman rute lokasi pencucian kendaraan:

Gambar 4.6 Halaman rute lokasi pencucian kendaraan 4.1.2.7 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.

(22)

Kendaraan</title> </head>

<body>

<a href="index.html"

rel="external">Kembali</a><h1>Bantuan</h1> </div>

<ul role="listview" data-inset="true" data-theme="a">

<li><p>Aplikasi pencarian lokasi pencucian kendaraan

<p>adalah aplikasi untuk menemukan keberadaan

<p>lokasi pencucian terdekat dengan posisi anda

<p>dan dapat melihat rute jalan menuju lokasi pen-

<p>cucian kendaraan.Untuk menjalankan aplikasi,

<p>harus menggunakan internet untuk dan menga-

<p>ktifkan GPS pada android.<br></p></li>

</ul>

<p style="text-align: center"><input type="image" data-role="none" src=gambar/paketdata.png style="width:250px; height:380px;"

(23)

/></p>

<ul data-role="listview" data-inset="true" data-theme="a">

<li><p>Untuk dapat melihat

lokasi dapat dilakukan

<p>dengan memilih tombol Lihat Peta dan unt-

<p>uk melihat jaraknya dengan mentap marker

<p>lokasi pencucian kendaraan pada map.

</ul>

<p style="text-align:

center"><input type="image" data-role="none" src=gambar/Mapradius.png style="width:250px; height:380px;" /></p>

<ul role="listview" data-inset="true" data-theme="a">

<li><p>Untuk dapat melihat rute

lokasi pencucian

<p>kendaraan dengan memilih tombol Data

<p>Lokasi kemudian pilih lokasi pencucian ke-

<p>ndaraan setelah itu mentap button lihat rute.<br></p></li>

</ul>

<p style="text-align:

center"><input type="image" data-role="none" src=gambar/datalokasi.png style="width:250px; height:380px;" /></p>

(24)

</div>

Berikut adalah tampilan halaman bantuan:

Gambar 4.7 Halaman rute lokasi pencucian kendaraan 4.1.2.8 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.

(25)

<title>Pencarian Lokasi Tempat Pencucian Kendaraan</title> </head>

<body>

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

<div data-role="listview" data-inset="true" data-theme="a" align="center">

<li><a href="#" style="color: #4099FF"

onclick="window.open('https://www.twitter.com/fernandamahesa ', '_system');">

<input type="image" src="gambar/twitter.png" width="32px" height="32px" data-inline="true"></input>

</a></li>

<li><a href="#" style="color: #186776" onclick="window.open('mailto:[email protected]', '_system');">

(26)

<input type="image" src="gambar/mail.jpg" width="32px" height="32px" data-inline="true"></input>

</a></li>

<ul data-role="listview" data-inset="true" align="center" data-theme="a">

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

Dibuat untuk Tugas

Akhir</br> Teknik Informatika</br> Fakultas Ilmu Komputer</br> <strong>Universitas Mercubuana Jakarta</strong></p></li> </ul> </div> </div>

(27)

Berikut adalah tampilan halaman tentang:

Gambar 4.8 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 pencucian kendaraan ini diuji menggunakan Smartphone Android.

Spesifikasi Android:  OPPO F1  Display – 720 x 1280 pixels  Memory Internal – 16GB  RAM – 3GB  CPU – Quad_core 1.7GHz  Chipset – Snapdragon 616  OS – Android Lollipop v5.1

(28)

4.2.2 Skenario Pengujian

Pengujian aplikasi ini dilakukan menggunakan SmartPhone ASUS Zenfone C. 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 lihat peta Normal Menampilkan

halaman radius

3. Memilih radius Normal Menampilkan

halaman map lokasi pencucian kendaraan terdekat

Tidak normal Menampilkan alert

4. Memilih data lokasi Normal Menampilkan halaman daftar lokasi pencucian kendaraan

Tidak normal Menampilkan alert

5. Memilih lokasi

pencucian kendaraan

Normal Menampilkan

halaman info lokasi pencucian kendaraan Tidak normal Menampilkan alert

6. Memilih lihat rute Normal Menampilkan

halaman map informasi rute Tidak normal Menampilkan alert

(29)

Lanjutan Tabel 4.1

7. Memilih bantuan Normal Menampilkan

halaman bantuan

8. Memilih tentang Normal Menampilkan

halaman tentang 9. Kembali ke halaman sebelumnya Normal Menampilkan halaman sebelumnya 10. Memilih keluar aplikasi

Normal Keluar aplikasi

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 lihat peta Normal Menampilkan halaman radius Sesuai 2. Memilih radius Normal Menampilkan halaman map lokasi pencucian kendaraan terdekat Sesuai Tidak normal Menampilkan alert Sesuai 3. Memilih data lokasi Normal Menampilkan halaman daftar lokasi pencucian kendaraan Sesuai

(30)

Lanjutan Tabel 4.2 Tidak normal Menampilkan alert Sesuai 4 Memilih lokasi pencucian kendaraan Normal Menampilkan halaman detail lokasi pencucian kendaraan Sesuai Tidak normal Menampilkan alert Sesuai 5. Memilih lihat rute Normal Menampilkan halaman map informasi rute Sesuai Tidak normal Menampilkan alert Sesuai 6. Memilih bantuan Normal Menampilkan halaman bantuan Sesuai 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 pencucian kendaraan dengan menggunkan metode haversine formula berbasis android yang sudah dijalankan, maka dapat disimpulkan:

(31)

1. Pada saat pembuatan aplikasi penulis menggunakan smartphone android untuk mengetahui error dan yang lainnya, sehingga aplikasi dapat berjalan dengan baik pada android.

2. Fungsi-fungsi pada aplikasi berjalan dengan baik seperti, mengambil data JSON pada web server, menampilkan peta lokasi pencucian kendaraan terdekat dengan radius yang dipilih oleh pengguna, menampilkan peta rute menuju lokasi pencucian kendaraan dari posisi pengguna dan menampilkan informasi rute.

3. Aplikasi membutuhkan waktu untuk mengakses data lokasi pencucian kendaraan dan peta karena membutuhkan koneksi internet.