BAB IV IMPLEMENTASI DAN PENGUJIAN

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

48 http://digilib.mercubuana.ac.id/

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. <meta

http-equiv="Content-type"

content="initial-scale=1.0,

name="viewport"

maximum-scale=1.0,

user-

scalable=no, width=device-width"> Pencarian Lokasi Pencucian Kendaraan <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(); }


Menu

style="text-align:

data-role="none"

center">
src=gambar/carwash2.png

/>

data-role="listview"

data-

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

type="image"

src="gambar/peta.png" width="48px" heigth="48px">
Lihat
Peta


src="gambar/search.png"

width="48px"

heigth="48px">
Data
Lokasi

href="bantuan.html"

data-role="button" rel="external" data-theme="a">
type="image"

src="gambar/help.png" width="48px" heigth="48px">
Bantuan

href="tentang.html"

data-role="button" rel="external" data-theme="a">


type="image"

src="gambar/info.png" width="48px" heigth="48px">
Tentang

name="buttonClick"

data-role="button"

rel="external"

data-theme="a">
type="image"

src="gambar/exit.png" width="48px" heigth="48px">
Keluar

© Copyright 2016


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, user-


scalable=no, width=device-width"> Aplikasi Pencarian Lokasi Pencucian Kendaraan <script src="jquery.mobile-1.3.2/jquery1.7.2.min"> <script src="jquery.mobile-1.3.2/jquery.mobile1.3.2.min.js"> <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"> <script type="text/javascript" charset="utf-8" src="index.js">

Kembali
Radius

Pilih radius yang anda inginkan


rel="external">Radius 1Km

Radius 2Km

Radius 3Km

© Copyright 2016

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


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. <meta



name="viewport"

maximum-scale=1.0,

user-

scalable=no, width=device-width"> Pencarian Lokasi Pencucian Kendaraan <style> #contentmap { padding: 0; position : absolute !important; top : 40px !important; right : 0; bottom : 40px !important; left : 0 !important; }


data-theme="a">
href="index.html"

rel="external">Kembali
Map

id="map_canvas"

style="height:100%">

© Copyright 2016

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; }


} var

lat1

=

var

lon1

=

var

lat2

=

var

lon2

=

position.coords.latitude; position.coords.longitude; parseFloat(loaddata.latitude); parseFloat(loaddata.longitude); var R = 6371; // metres var dlat1 = lat1.toRad(); var dlat2 = lat2.toRad(); var

slat

=

(lat2-

var

slon

=

(lon2-

lat1).toRad(); 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;

var

info_window


=

new

google.maps.InfoWindow(); google.maps.event.addListener(markerall,

'click',

(function(markerall) { return function() { info_window.setContent(loaddata.nama_pk+'
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');

Berikut adalah tampilan halaman lihat peta:


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. <meta



name="viewport"

maximum-scale=1.0,

user-

scalable=no, width=device-width"> Aplikasi Pencarian 60 http://digilib.mercubuana.ac.id/ Lokasi Pencucian Kendaraan
data-role="page"

id="pagelist"

class="main-

page">

href="index.html"

Pilih Lokasi

id="PkList"

data-inset="true"

data-role="listview" data-filter="true"

data-

data-filter-

placeholder="Data Lokasi">

© Copyright 2016

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('


href="detailrute.html?id='

+

loaddata.id

+

'data-

transition="flip" rel="external">' + '
'

+

loaddata.nama_pk + '
'); }); $('#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


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. <meta



name="viewport"

maximum-scale=1.0,

user-

scalable=no, width=device-width"> Pencarian Lokasi Tempat Pencucian Kendaraan

href="data.html"

Info


data-inset="true"

theme="a" data-dividertheme="a">


data-

Lihat Rute

© Copyright 2016

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);


:

$('#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


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. <meta



name="viewport"

maximum-scale=1.0,

user-

scalable=no, width=device-width"> Pencarian Lokasi Tempat Pencucian Kendaraan

Kembali
Rute


data-

inset="true" data-theme="d" data-dividertheme="d">

id="map_canvas"

style="

height:300px;">


© Copyright 2016

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); } }); }); }


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. <meta



name="viewport"

maximum-scale=1.0,

user-

scalable=no, width=device-width"> Aplikasi Pencarian 68 http://digilib.mercubuana.ac.id/ Lokasi Pencucian Kendaraan

href="index.html"

Bantuan


data-

Aplikasi pencarian lokasi pencucian kendaraan
adalah aplikasi untuk menemukan keberadaan
lokasi

pencucian

terdekat dengan posisi anda
dan dapat melihat rute jalan menuju lokasi pen
cucian kendaraan.Untuk menjalankan aplikasi,
harus

menggunakan

internet untuk dan menga
ktifkan

GPS

pada

android.

type="image"

style="text-align: data-role="none"

src=gambar/paketdata.png style="width:250px; height:380px;"


/>


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

dapat

melihat

lokasi dapat dilakukan
dengan

memilih

tombol Lihat Peta dan unt
uk melihat jaraknya dengan mentap marker
lokasi

pencucian

kendaraan pada map.

type="image"

src=gambar/Mapradius.png

style="text-align: data-role="none" style="width:250px;

height:380px;" />


data-

Untuk dapat melihat rute lokasi pencucian
kendaraan

dengan

memilih tombol Data
Lokasi kemudian pilih lokasi pencucian ke
ndaraan

setelah

itu

mentap button lihat rute.

type="image"

style="text-align: data-role="none"

src=gambar/datalokasi.png style="width:250px; height:380px;" />


type="image"

src=gambar/rute.png

style="width:250px;

style="text-align: data-role="none" height:380px;"

/>

© Copyright 2016

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. 71 http://digilib.mercubuana.ac.id/

<meta



name="viewport"

maximum-scale=1.0,

user-

scalable=no, width=device-width"> Pencarian Lokasi Tempat Pencucian Kendaraan

data-role="header"

data-position="fixed"

data-theme="a">
href="index.html"

Tentang

href="#"

style="color:

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

src="gambar/twitter.png" width="32px" height="32px" datainline="true">


type="image"

width="32px"

height="32px"

data-

inline="true">


data-

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

style="text-align:

center">Aplikasi Pencarian Lokasi Pencucian Kendaraan
Dibuat

untuk

Tugas

Akhir
Teknik Informatika
Fakultas

Ilmu

Komputer
Universitas Mercubuana Jakarta

© Copyright 2016

BAB IV IMPLEMENTASI DAN PENGUJIAN

Recommend Documents

Menu

Lihat Peta 50 http://digilib.mercubuana.ac.id/

Data Lokasi

Bantuan

Tentang

Keluar

© Copyright 2016

Radius

© Copyright 2016

Map

© Copyright 2016

Pilih Lokasi

© Copyright 2016

' + loaddata.nama_pk + '

Info

© Copyright 2016

Rute

© Copyright 2016

Bantuan

© Copyright 2016

Tentang

© Copyright 2016

Lihat
Peta

50 http://digilib.mercubuana.ac.id/

Data
Lokasi

'

+

loaddata.nama_pk + '