BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM

(1)

43

Setelah melakukan analisa dan perancangan sistem, selanjutnya adalah implementasi dari desain menjadi sebuah aplikasi dan melakukan pengujian dari aplikasi yang telah dibuat. Implementasi adalah proses penulisan ke dalam kode – kode yang dimengerti oleh mesin dari desain yang telah dibuat.

Setelah melakukan proses implementasi, proses selanjutnya adalah proses pengujian. Pengujian dilakukan agar dapat menemukan kesalahan – kesalahan dan memastikan proses dari awal hingga akhir dapat berjalan dengan baik.

4.1 Implementasi Basis Data

Implementasi basis data pada pembuatan aplikasi ini menggunakan mysql sebagai environmentnya. Berikut hasil dari implementasinya :

4.1.1 Struktur table User

(2)

4.1.2 Struktur table Role

Gambar 4.2. Struktur table Role 4.1.3 Struktur table Bank

(3)

4.1.4 Struktur table Lokasi ATM

Gambar 4.4. Struktur table Lokasi ATM 4.1.5 Struktur table AUTH User

(4)

4.1.6 Struktur table AUTH Bank

Gambar 4.6. Struktur table AUTH Bank 4.1.7 Struktur table AUTH Lokasi ATM

(5)

4.2 Implementasi Sistem

Aplikasi ini memiliki 2 tampilan antar muka yang berbeda peruntukannya, tampilan pertama yaitu tampilan web, yang digunakan sebagai input data user, bank, dan lokasi atm. Sedangkan tampilan kedua adalah tampilan mobile yang berinteraksi dengan pengguna dalam mencari lokasi atm terdekat.

4.2.1 Implementasi Tampilan Web 4.2.1.1 Implementasi Tampilan Login

Gambar 4.8. Tampilan Login 4.2.1.2 Implementasi Tampilan Utama User Input

(6)

4.2.1.3 Implementasi Tampilan Daftar Lokasi ATM User Input

Gambar 4.10. Tampilan Daftar Lokasi ATM User Input 4.2.1.4 Implementasi Tampilan Tambah Lokasi ATM User Input

(7)

4.2.1.5 Implementasi Tampilan Ubah Lokasi ATM User Input

Gambar 4.12. Tampilan Ubah Lokasi ATM User Input 4.2.1.6 Implementasi Tampilan Hapus Lokasi ATM User Input

(8)

4.2.1.7 Implementasi Tampilan Utama Otorisator

Gambar 4.14. Tampilan Utama Otorisator 4.2.1.8 Implementasi Tampilan Daftar Lokasi ATM Otorisator

(9)

4.2.1.9 Implementasi Tampilan Otorisasi Lokasi ATM Otorisator

(10)

4.2.2 Implementasi Tampilan Mobile 4.2.2.1 Implementasi Splash Screen

Gambar 4.17. Splash Screen 4.2.2.2 Implementasi Tampilan Home

(11)

Fungsi mencari daftar bank adalah fungsi yang digunakan untuk mencari seluruh parameter bank yang sudah di input ke dalam database.

Kode 4.1 Fungsi Mencari Daftar Bank function getAllBankRequest(){ var invocationData = { adapter : appAdapterName, procedure : 'getAllBank', parameters : [] }; WL.Client.invokeProcedure(invocationData, { onSuccess : loadFeedsSuccess, onFailure : loadFeedsFailure }); }; function loadFeedsSuccess(result){ console.log(result.invocationResult); if (result.invocationResult.hasOwnProperty('GetAllBankResponse')){ var bank = result.invocationResult.GetAllBankResponse.allBank; var banks = convertToArray(bank);

var selBanks = document.getElementById("allBank"); for (var int = 0; int < banks.length; int++) {

var opt = document.createElement('option'); opt.value = banks[int].id; opt.innerHTML = banks[int].name; selBanks.add(opt); console.log(opt); } selBanks.options[0].selected = true; $('#allBank').selectmenu('refresh'); } else { loadFeedsFailure(result); } } function loadFeedsFailure(result){

WL.Logger.error("Get All Bank Request Failed"); console.log(result.invocationResult);

(12)

Berikut adalah data JSON dan XML yang digunakan sebagai request ke aplikasi web untuk mengambil seluruh daftar bank yang ada di database.

Kode 4.2 JSON dan XML Mencari Daftar Bank function sendRequest(request) {

var path = '/atm-ws/endpoint/nearestAtmService.wsdl'; var input = { method : 'post', returnedContentType : 'xml', path : path, body : { content : request.toString(),

contentType : 'text/xml; charset=utf-8' }

};

var result = WL.Server.invokeHttp(input); return result.Envelope.Body;

}

function getAllBank() {

var request = '<soapenv:Envelope

xmlns:soapenv=http://schemas.xmlsoap.org/soap/envelope/ xmlns:bank="http://nearest.atm.com/service/contract/bank">' +'<soapenv:Header/>' +'<soapenv:Body>' +'<bank:GetAllBankRequest/>' +'</soapenv:Body>' +'</soapenv:Envelope>'; return sendRequest(request); }

(13)

Fungsi dibawah ini digunakan untuk mencari posisi dari device yang digunakan oleh pengguna.

Kode 4.3 Fungsi Mencari Posisi Pengguna

Gambar 4.19. Tampilan Home Setelah Melakukan Pencarian if ( navigator.geolocation ) {

function success(pos) {

// Location found, show map with these coordinates

locations.push(['<h3>Current Position</h3>', pos.coords.latitude, pos.coords.longitude]); centerLocation = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude); drawMap(locations, centerLocation);

}

function fail(error) {

drawMap(locations, 0); // Failed to find location, show default map }

// Find the users current position. Cache the location for 5 minutes, timeout after 6 seconds navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000,

enableHighAccuracy:true, timeout: 6000}); } else {

drawMap(locations, 0); // No geolocation support, show default map }

(14)

Fungsi ini digunakan untuk mencari ATM terdekat dari aplikasi mobile. Fungsi ini berjalan setelah mengguna memilih bank dan menekan tombol search yang diwakili oleh icon kaca pembesar.

Kode 4.4 Fungsi Mencari ATM Terdekat $("#searchNearest").click(function(){

locations = [];

locations.push(['<h3>Current Position</h3>', centerLocation.lat(), centerLocation.lng()]); getNearestATMRequest(centerLocation.lat(), centerLocation.lng(), $('#allBank').val()); });

function getNearestATMRequest(cLatitude, cLongitude, bankId){ $.mobile.loading("show");

var invocationData = { adapter : appAdapterName, procedure : 'getNearestATM',

parameters : [cLatitude, cLongitude, bankId] }; WL.Client.invokeProcedure(invocationData, { onSuccess : loadFeedsATMSuccess, onFailure : loadFeedsATMFailure }); }; function loadFeedsATMSuccess(result){ if (result.invocationResult.hasOwnProperty('ATMLocationResponse')){ var atmLocation = convertToArray(result.invocationResult.

ATMLocationResponse.nearestATM); for (var int = 0; int < atmLocation.length; int++) {

locations.push(['<h3>'+atmLocation[int].address+'</h3>', parseFloat(atmLocation[int].latitude), parseFloat(atmLocation[int].longitude)]); } drawMap(locations, centerLocation); } else { loadFeedsFailure(result); } } function loadFeedsATMFailure(result){

WL.Logger.error("Get Nearest ATM Request Failed"); console.log(result.invocationResult);

(15)

var marker; var markers = [];

function drawMap(arrayLocation, centerLocation) { var myOptions = { zoom: 16, mapTypeId: google.maps.MapTypeId.ROADMAP, panControl: false, streetViewControl: false, mapTypeControl: false };

var infowindow = new google.maps.InfoWindow({ maxWidth: 160 });

var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions); var directionsService = new google.maps.DirectionsService();

var directionsDisplay = new google.maps.DirectionsRenderer(); directionsDisplay.setMap(map);

for (var i = 0; i < arrayLocation.length; i++) { var icon; if(i == 0){ icon = "images/red-dot.png"; } else { icon = "images/atm.png"; }

marker = new google.maps.Marker({

position: new google.maps.LatLng(arrayLocation[i][1], arrayLocation[i][2]), map: map,

icon: icon, });

markers.push(marker); //Set name if marker clicked

google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(locations[i][0]); infowindow.open(map, marker); }; })(marker, i)); }

(16)

Kode di bawah ini adalah data XML yang digunakan sebagai request ke aplikasi web untuk mengambil seluruh daftar atm terdekat yang ada di database dengan parameter posisi garis lintang pengguna ( currentLatitude ), posisi garis bujur pengguna ( currentLongitude ) dan banknya ( bankId ).

// set view to current location if(centerLocation != 0){ map.panTo(centerLocation); markers.pop(); } if (arrayLocation.length > 1) { drawRoute(centerLocation, arrayLocation[1]); } function drawRoute(origin,to){ var request = {

origin: new google.maps.LatLng(origin.lat(), origin.lng()), destination: new google.maps.LatLng(to[1], to[2]), travelMode: google.maps.TravelMode.WALKING };

directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK){ directionsDisplay.setDirections(response); } }); $.mobile.loading("hide"); } }

(17)

Kode 4.5 XML Mencari ATM Terdekat

Kode beserta query berikut digunakan untuk mengambil data ke database dengan parameter yang dikirim dari data XML di atas.

Kode 4.6 Query Mencari ATM Terdekat

function getNearestATM(currentLatitude, currentLongitude, bankId) { var request = '<soapenv:Envelope

xmlns:soapenv=http://schemas.xmlsoap.org/soap/envelope/ xmlns:loc="http://nearest.atm.com/service/contract/location">' +'<soapenv:Header/>' +'<soapenv:Body>' +'<loc:ATMLocationRequest>' +'<loc:currentLatitude>'+currentLatitude+'</loc:currentLatitude>' +'<loc:currentLongitude>'+currentLongitude+'</loc:currentLongitude>' +'<loc:bankId>'+bankId+'</loc:bankId>' +'</loc:ATMLocationRequest>' +'</soapenv:Body>' +'</soapenv:Envelope>'; return sendRequest(request); }

public List<ATMLocationDto> getNearestATM(Integer bankId, Double latitude, Double longitude) {

List<ATMLocationDto> locationDtos = new ArrayList<ATMLocationDto>(); List<Object[]> list = new ArrayList<Object[]>();

try {

String sql = "SELECT location, latitude, longitude, " + "(6371 * acos(cos(radians(:cLat)) " +

"* cos(radians(latitude)) * cos(radians(longitude) " + "- radians(:cLng)) + sin(radians(:cLat)) " +

"* sin(radians(latitude)))) AS distance " + "FROM lokasi_atm la " +

"JOIN lokasi_banks lb ON la.id = lb.lokasi_id " +

"WHERE lb.bank_id = :bankId AND la.status = :status " + "HAVING distance < 1 ORDER BY distance LIMIT 0,5";

(18)

4.2.2.3 Implementasi Tampilan About

Gambar 4.20. Tampilan About list = getEntityManager().createNativeQuery(sql) .setParameter("cLat", latitude) .setParameter("cLng", longitude) .setParameter("bankId", bankId) .setParameter("status", DataStatusEnum.LIVE.getId()) .getResultList();

for (Object[] objects : list) {

locationDtos.add(new ATMLocationDto(objects)); } } catch (Exception e) { e.printStackTrace(); } return locationDtos;

(19)

4.3 Spesifikasi Perangkat Keras dan Perankat Lunak 4.3.1 Perangkat Keras ( hardware )

Perangkat keras atau hardware yang digunakan dalam pembuatan aplikasi pencarian ATM terdekat ini adalah :

a. Processor : Intel® Core™ i3-3110 CPU @ 2.40GHz b. Memory : 8.00 GB of RAM

c. Harddisk : 500 GB 4.3.2 Perangkat Lunak ( software )

Untuk perangkat lunak atau software yang digunakan adalah :

a. Windows 7 Professional 64-bit.

b. Spring Tool Suite 3.4.0.RELEASE, untuk membuat aplikasi versi web. c. Eclipse Luna + Worklight v6.3.0, untuk membuat aplikasi versi mobile. d. XAMPP v1.8.3 dengan MySQL v5.6.16, yang digunakan sebagai basis

data.

4.4 Pengujian Black Box

Pengujian dengan metode Black Box digunakan untuk menentukan apakah aplikasi berjalan dengan semestinya atau tidak. Pengujian dengan metode Black Box dilakukan dengan cara mengklik tombol – tombol yang ada pada tampilan antar muka. Berikut hasil tes yang telah dilakukan :

4.4.1 Hasil Pengujian pada Tampilan Web Tabel 4.1 Hasil Pengujian pada Tampilan Web

No. Interaface yang diuji

Bagian yang

diuji Cara pengujian

Hasil yang diharapkan

Hasil pengujian

1 Halaman Login Form Login

Memasukan username dan password dengan benar Masuk ke halaman utama Sesuai Memasukan username dan Tidak bisa masuk ke Sesuai

(20)

password yang salah halaman utama 2 Halaman Utama User Input Menu User

Klik Menu User Masuk ke halaman Daftar User

Sesuai

Menu Role

Klik Menu Role Masuk ke halaman Daftar Role

Sesuai

Menu Bank

Klik Menu Bank Masuk ke halaman Daftar Bank Sesuai Menu Lokasi ATM Klik Menu Lokasi ATM Masuk ke halaman Daftar Lokasi ATM Sesuai 3 Halaman Daftar User Form Tambah Data 1. Mengisi seluruh isian form

Data berstatus

INAU dan

butuh otorisasi Sesuai 2. Klik tombol

Simpan

Form Ubah Data

1. Pilih Ubah Data pada salah satu data Data berstatus INAU dan butuh otorisasi Sesuai 2. Mengubah

salah satu isian form 3. Klik tombol Simpan Form Hapus Data 1. Pilih Hapus Data pada salah satu data

Data berstatus

DLAU dan

butuh otorisasi Sesuai 2. Klik tombol Hapus Form Ubah Password 1. Pilih Ubah Password pada salah satu data

Data berstatus

INAU dan

butuh otorisasi

Sesuai 2. Mengisi

seluruh isian form 3. Klik tombol Simpan

(21)

4 Halaman Daftar Bank

Form Tambah Data

1. Mengisi seluruh isian form

Data berstatus

INAU dan

Simpan

Form Ubah Data

Data berstatus

DLAU dan

butuh otorisasi Sesuai 2. Klik tombol Hapus 5 Halaman Daftar Lokasi ATM Form Tambah Data 1. Mengisi seluruh isian form

Data berstatus

INAU dan

Simpan

Form Ubah Data

Data berstatus

DLAU dan

butuh otorisasi Sesuai 2. Klik tombol Hapus 6 Halaman Utama Otorisator Menu User

Klik Menu User Masuk ke halaman Daftar Otorisasi User

Sesuai Menu Bank Klik Menu Bank Masuk ke Sesuai

(22)

halaman Daftar Otorisasi Bank Menu Lokasi ATM Klik Menu Lokasi ATM Masuk ke halaman Daftar Otorisasi Lokasi ATM Sesuai 7 Halaman Daftar Otorisasi User Form Otorisasi Data INAU 1. Pilih Otorisasi Data pada salah satu data Data tersimpan dan berstatus LIVE Sesuai 2. Klik tombol Setujui 1. Pilih Otorisasi Data pada salah satu data Data dihapus dari database Sesuai 2. Klik tombol Tolak Form Otorisasi Data DLAU 1. Pilih Otorisasi Data pada salah satu data Data dihapus dari database Sesuai 2. Klik tombol Setujui 1. Pilih Otorisasi Data pada salah satu data Data tersimpan dan berstatus LIVE Sesuai 2. Klik tombol Tolak 8 Halaman Daftar Otorisasi Bank Form Otorisasi Data INAU 1. Pilih Otorisasi Data pada salah satu data Data tersimpan dan berstatus LIVE Sesuai 2. Klik tombol Setujui 1. Pilih Otorisasi Data pada salah satu data Data dihapus dari database Sesuai 2. Klik tombol Tolak Form Otorisasi Data DLAU 1. Pilih Otorisasi Data pada salah

Data dihapus

(23)

satu data

2. Klik tombol Setujui

1. Pilih Otorisasi Data pada salah satu data Data tersimpan dan berstatus LIVE Sesuai 2. Klik tombol Tolak 9 Halaman Daftar Otorisasi Lokasi ATM Form Otorisasi Data INAU 1. Pilih Otorisasi Data pada salah satu data Data tersimpan dan berstatus LIVE Sesuai 2. Klik tombol Setujui 1. Pilih Otorisasi

Data pada salah satu data

Data dihapus

dari database Sesuai 2. Klik tombol Tolak Form Otorisasi Data DLAU 1. Pilih Otorisasi Data pada salah satu data Data dihapus dari database Sesuai 2. Klik tombol Setujui 1. Pilih Otorisasi Data pada salah satu data Data tersimpan dan berstatus LIVE Sesuai 2. Klik tombol Tolak

(24)

4.4.2 Hasil Pengujian pada Tampilan Mobile Tabel 4.2 Hasil Pengujian pada Tampilan Mobile

No. Interaface yang diuji

Bagian yang

diuji Cara pengujian

Hasil yang diharapkan Hasil pengujian 1 Halaman Home Halaman Pencarian ATM Terdekat

1.Pilih Bank Sistem menujukan lokasi ATM terdekat Sesuai 2.Klik tombol Search

2 Halaman About Halaman About

Sistem menujukan nama aplikasi, pembuat dan versi aplikasi Sesuai 4.4.3 Kesimpulan Pengujian

Kesimpulan dari pengujian aplikasi pencarian ATM terdekat ini yaitu semua fungsi, button dan proses berjalan sesuai dengan apa yang sudah di rencanakan, terbukti dari seluruh hasil pengujian yang telah dilakukan.