BAB IV IMPLEMENTASI DAN PENGUJIAN

(1)

BAB IV

IMPLEMENTASI DAN PENGUJIAN

Bab ini menjelaskan mengenai implementasi dari prototype aplikasi mobile pencarian lokasi apartemen di jakarta 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 untukmengkonfirmasi 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_apartemen. Berikut merupakan SQL statement dari database ini.

1. SQL statement tb_apartemen

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

`nama` varchar(50) NOT NULL,

`nama_pemilik` varchar(50) NOT NULL, `alamat` varchar(100) NOT NULL, `telepon ` varchar(15) NOT NULL,

(2)

`latitude` double NOT NULL, `longitude` double NOT NULL, `gambar` varchar(255) NOT NULL, `tipe` varchar(15) NOT NULL, `harga` int(10) NOT NULL,

`fasilitas` varchar(255) NOT NULL, `kondisi` 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 tekanmaka akan mengarahkan aplikasi ke halaman yang ditekan oleh user.

(3)

data-icon="info" data-theme="b" rel="external">Peta Apartemen</a>

<a href="daftar-apartemen.html" data-role="button" data-theme="b" rel="external">Daftar Apartemen</a></li>

<a href="bantuan.html" role="button" data-theme="b" rel="external">Bantuan</a>

<a href="tentang.html#tentang" data-role="button" data-theme="b" rel="external">Tentang Aplikasi</a>

<a href="info.html" icon="info" role="button" data-theme="b" rel="external">Tentang Apartemen</a>

<div><a href="#popupexit" rel="popup" role="button" data-icon="delete" data-position-to="window" data-iconpos="right" data-theme="e">Keluar</a></div>

<h1>Keluar aplikasi?</h1>

</div>

</div>

(4)

</div>

Berikut adalah tampilan halaman menu:

4.1.2.2 Penulisan Kode Pada Halaman Peta Apartemen

Kode pada halaman peta apartemen merupakan tampilan map setelah user menekan apartemen terdekat pada halaman menu. Pada halaman ini terdapat map, marker posisi user, menampilkan marker apartemen mana saja yang terdekat, tombol kembali, header dan footer. Ketika salah satu marker apartemen pada halaman peta apartemen di tekan maka akan menampilkan window nama apartemen 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="a"> <a href="index.html" rel="external">Kembali</a><h1>Peta</h1> </div>

</div>

</div> </div>

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

(5)

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

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;

(6)

Gambar 4.1 Halaman Peta Apartemen 4.1.2.3 Penulisan Kode Pada Halaman Daftar Apartemen

Kode pada halaman daftar apartemen merupakan tampilan listview nama dan gambar apartemen yang diambil dari server berupa JSON setelah user menekan cari apartemen pada halaman menu. Pada halaman ini terdapat lisview nama dan apartemen, textbox cari apartemen, header dan footer. Ketika salah satu listview apartemen pada halaman daftar apartemen di tekan maka akan mengarahkan user ke halaman info apartemen 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="a"> <a href="index.html" rel="external">Kembali</a><p align="center">Pilih Apartemen</p>

(7)

<li><a href="harga.html" rel="external" data-theme="b">Berdasarkan Harga Terkecil</a></li>

</ul>

</div> <br>

</div> </div>

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

function getlistla() {

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

console.log(listla);

$.each(listla, function(index, data) {

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

+data.nama+ '<span class="ui-li-count">'+data.harga+'</span></a></li>');

(8)

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

}

Berikut adalah tampilan halaman daftar apartemen:

Gambar 4.2 Halaman Daftar Apartemen 4.1.2.4 Penulisan Kode Pada Halaman Info Apartemen

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

<div data-role="header" data-position="fixed" data-theme="a"> <a href="daftar-apartemen.html"

(9)

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

<br>

<div data-role="collapsible" data-theme="b" data-content-theme="d" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u"> <h4>Apartemen</h4>

</div>

<div data-role="collapsible" data-theme="b" data-content-theme="d" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u"> <h4>Tempat</h4>

<div data-role="collapsible" data-theme="b" data-content-theme="d" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u"> <h4>Harga</h4>

</ul> </div>

<div data-role="collapsible" data-theme="b" data-content-theme="d" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u"> <h4>Deskripsi</h4>

(10)

<ul>

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

</div>

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

function getdetaillp() {

$.getJSON(url + 'ambildetaillp.php?id='+id, function(data) { loaddetaillp = data.items; console.log(loaddetaillp); $('#gambar').attr('src', 'http://192.168.127.2/gambar/' +loaddetaillp.gambar); $('#nama').text('Nama : '+loaddetaillp.nama); $('#nama_pemilik').text('Nama Pemilik : '+loaddetaillp.nama_pemilik); $('#alamat').text('Alamat : '+loaddetaillp.alamat); $('#telepon').text('Telepon : '+loaddetaillp.telepon); $('#lat').text('Latitude : '+loaddetaillp.latitude); $('#long').text('Longitude : '+loaddetaillp.longitude); $('#tipe').text('Tipe : '+loaddetaillp.tipe); $('#harga').text('Harga/bulan : Rp ' +loaddetaillp.harga); $('#fasilitas').text('Fasilitas : '+loaddetaillp.fasilitas); $('#kondisi').text('Kondisi : '+loaddetaillp.kondisi); }); }

(11)

Berikut adalah tampilan halaman info apartemen:

Gambar 4.3 Halaman detail apartemen 4.1.2.5 Penulisan Kode Pada Halaman Rute Apartemen

Kode pada halaman Rute apartemen merupakan tampilan map dan informasi rute menuju apartemen setelah user menekan tombol lihat rute pada halaman info apartemen. 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 apartemen di tekan maka akan menampilkan window pada map alamat tersebut dan terdapat tombol kembali untuk ke halaman sebelumnya.

<div data-role="header" data-position="fixed" data-theme="a"> <a href="#pagedetail">Kembali</a><h1>Rute</h1>

(12)

</div>

</ul> </div>

</div> </div>

Pada halaman ini terdepat kode untuk menampilkan informasi rute dan jalan menuju apartemen 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); }

});

(13)

Gambar 4.4 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.

<li><p align="center">Aplikasi pencarian lokasi apartemen

<p align="center">berbasis android dapat menemukan keberadaan

<p align="center">apartemen terdekat dengan posisi anda dan

(14)

<p align="center">dapat melihat rute jalan menuju apartemen.

<p align="center">Untuk memulai aplikasi, terlebih dahulu anda

<p align="center">mengaktifkan data internet dan mengaktifkan

<p align="center"> GPS pada android.<br></li>

</ul>

<li><p align="center">Untuk dapat melihat lokasi terdekat dapat dilakukan

<p align="center">dengan memilih apartemen terdekat dan untuk melihat

<p align="center">jaraknya dengan mentap marker apartemen

</ul>

(15)

<li><p align="center">Untuk dapat melihat rute apartemen dengan memilih

<p align="center">cari apartemen kemudian pilih apartemen

<p align="center">setelah itu menekan button lihat rute.<br></p></li></ul>

</div>

Berikut adalah tampilan halaman bantuan:

(16)

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.

<h3 align="center"> APLIKASI MOBILE PENCARIAN LOKASI APARTEMEN DI JAKARTA BERBASIS ANDROID </h3>

<center><img src="gambar/mercu.png" width="200px" height="180px"></center> <p align="center">Dosen Pembimbing Tugas Akhir</p>

<p align="center">Achmad Kodar, Drs. MT</p> <p align="center">Dibuat untuk Tugas

Akhir Jurusan Tehnik Informatika Fakultas Ilmu Komputer

Universitas Mercubuana Jakarta</p> </div>

</a> </div>

<input type="image" src="gambar/twitter.png" width="48px" height="48px" align="center"

(17)

data-role="none"></input></a>

</div>

</div> </div>

Berikut adalah tampilan halaman tentang:

(18)

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 Apartemen ini diuji menggunakan Smartphone Android.

Spesifikasi Android:

 SAMSUNG GALAXY SIII

 Display – 480 x 800 pixels

 Memory Internal – 8GB

 RAM – 1GB

 CPU – Dual_core 1.2GHz

 Chipset – Intel Atom Z2520 4.2.2 Skenario Pengujian

Pengujian aplikasi ini dilakukan menggunakan SmartPhone Samsung Galaxy SII. 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 peta apartemen Normal Menampilkan halaman map apartemen terdekat

(19)

Lanjutan Tabel 4.1

3. Memilih daftar

apartemen

Normal Menampilkan halaman daftar apartemen

Tidak Normal Menampilkan alert 4. Memilih Berdasarkan

Harga Terkecil

Normal Menampilkan Harga dari

yang terkecil

5. Memilih apartemen Normal Menampilkan halaman info

apartemen

Tidak normal Menampilkan alert

6. Memilih lihat rute Normal Menampilkan halaman map

informasi rute Tidak normal Menampilkan alert

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

menu

Sesuai

2. Memilih peta apartemen

peta apartemen

Sesuai

(20)

Lanjutan Tabel 4.2 3. Memilih daftar

apartemen

daftar apartemen

Sesuai

Tidak normal Menampilkan alert Sesuai 4. Memilih

berdasarkan harga terkecil

Normal Menampilkan Harga

dari yang terkecil

Sesuai

5 Memilih apartemen

detail apartemen

Sesuai

Tidak normal Menampilkan alert Sesuai 6. Memilih lihat

rute

peta informasi rute

Sesuai

Tidak normal Menampilkan alert Sesuai 7. Memilih

bantuan

Sesuai

8. Memilih tentang

tentang

Sesuai

9. Kembali ke halaman

sebelumnya

Sesuai

10. Memilih keluar aplikasi

Normal Keluar aplikasi Sesuai

4.3 Analisis Hasil Pengujian

Setelah tahap pengujian blackbox diatas terhadap semua fungsi pada aplikasi mobile pencarian lokasi apartemen di jakarta berbasis android yang sudah dijalankan, maka dapat disimpulkan:

(21)

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 peta apartemen dengan jarak masing-masing apartemen dari posisi pengguna, menampilkan peta rute menuju apartemen dari posisi pengguna dan menampilkan informasi rute.

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