BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM

BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM 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

Gambar 4.1. Struktur table User

43

44

4.1.2

Struktur table Role

Gambar 4.2. Struktur table Role 4.1.3

Struktur table Bank

Gambar 4.3. Struktur table Bank

45

4.1.4

Struktur table Lokasi ATM

Gambar 4.4. Struktur table Lokasi ATM 4.1.5

Struktur table AUTH User

Gambar 4.5. Struktur table AUTH User

46

4.1.6

Struktur table AUTH Bank

Gambar 4.6. Struktur table AUTH Bank 4.1.7

Struktur table AUTH Lokasi ATM

Gambar 4.7. Struktur table AUTH Lokasi ATM

47

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

Gambar 4.9. Tampilan Utama User Input

48

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

Gambar 4.11. Tampilan Tambah Lokasi ATM User Input

49

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

Gambar 4.13. Tampilan Hapus Lokasi ATM User Input

50

4.2.1.7 Implementasi Tampilan Utama Otorisator

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

Gambar 4.15. Tampilan Daftar Lokasi ATM Otorisator

51

4.2.1.9 Implementasi Tampilan Otorisasi Lokasi ATM Otorisator

Gambar 4.16. Tampilan Otorisasi Lokasi ATM Otorisator

52

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

Gambar 4.18. Tampilan Home

53

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

54

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>' +'' +'' +'';

}

return sendRequest(request);

55

Fungsi dibawah ini digunakan untuk mencari posisi dari device yang digunakan oleh pengguna. Kode 4.3 Fungsi Mencari Posisi Pengguna if ( navigator.geolocation ) { function success(pos) { // Location found, show map with these coordinates locations.push(['

Current Position

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

Gambar 4.19. Tampilan Home Setelah Melakukan Pencarian

56

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

Current Position

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

'+atmLocation[int].address+'

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

57

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

58

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

}

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

59

Kode 4.5 XML 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>' +'' +''+currentLatitude+'' +''+currentLongitude+'' +''+bankId+'' +'' +'' +''; }

return sendRequest(request);

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 public

List

getNearestATM(Integer

bankId,

Double

longitude) { List locationDtos = new ArrayList(); List list = new ArrayList(); 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";

latitude,

Double

60

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;

4.2.2.3 Implementasi Tampilan About

Gambar 4.20. Tampilan About

61

4.3

Spesifikasi Perangkat Keras dan Perankat Lunak Perangkat Keras ( hardware )

4.3.1

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. Pengujian Black Box

4.4

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.

1

Interaface yang diuji

Halaman Login

Bagian yang diuji

Form Login

Hasil yang diharapkan Memasukan Masuk ke username dan halaman utama password dengan benar Memasukan Tidak bisa username dan masuk ke Cara pengujian

Hasil pengujian Sesuai

Sesuai

62

Menu User

2

Halaman Utama User Input

Menu Role

Menu Bank Menu Lokasi ATM Form Tambah Data

Form Ubah Data

3

Halaman Daftar User Form Hapus Data

Form Ubah Password

password yang halaman utama salah Klik Menu User Masuk ke halaman Daftar User Klik Menu Role Masuk ke halaman Daftar Role Klik Menu Bank Masuk ke halaman Daftar Bank Klik Menu Masuk ke Lokasi ATM halaman Daftar Lokasi ATM 1. Mengisi Data berstatus seluruh isian form INAU dan 2. Klik tombol butuh otorisasi Simpan 1. Pilih Ubah Data berstatus Data pada salah INAU dan satu data butuh otorisasi 2. Mengubah salah satu isian form 3. Klik tombol Simpan 1. Pilih Hapus Data berstatus Data pada salah DLAU dan satu data butuh otorisasi 2. Klik tombol Hapus 1. Pilih Ubah Data berstatus Password pada INAU dan salah satu data butuh otorisasi 2. Mengisi seluruh isian form 3. Klik tombol Simpan

Sesuai

Sesuai

Sesuai

Sesuai

Sesuai

Sesuai

Sesuai

Sesuai

63

Form Tambah Data

4

Halaman Daftar Bank

Form Ubah Data

Form Hapus Data

Form Tambah Data

5

Halaman Daftar Lokasi ATM

Form Ubah Data

Form Hapus Data

6

Halaman Utama Otorisator

1. Mengisi seluruh isian form 2. Klik tombol Simpan 1. Pilih Ubah Data pada salah satu data 2. Mengubah salah satu isian form 3. Klik tombol Simpan 1. Pilih Hapus Data pada salah satu data 2. Klik tombol Hapus 1. Mengisi seluruh isian form 2. Klik tombol Simpan 1. Pilih Ubah Data pada salah satu data 2. Mengubah salah satu isian form 3. Klik tombol Simpan 1. Pilih Hapus Data pada salah satu data 2. Klik tombol Hapus Klik Menu User

Menu User Menu Bank

Klik Menu Bank

Data berstatus INAU dan butuh otorisasi

Sesuai

Data berstatus INAU dan butuh otorisasi Sesuai

Data berstatus DLAU dan butuh otorisasi

Data berstatus INAU dan butuh otorisasi

Sesuai

Sesuai

Data berstatus INAU dan butuh otorisasi Sesuai

Data berstatus DLAU dan butuh otorisasi

Masuk ke halaman Daftar Otorisasi User Masuk ke

Sesuai

Sesuai Sesuai

64

Menu Lokasi ATM

Form Otorisasi Data INAU

7

Halaman Daftar Otorisasi User

Form Otorisasi Data DLAU

8

Halaman Daftar Otorisasi Bank

Form Otorisasi Data INAU

Form Otorisasi Data DLAU

halaman Daftar Otorisasi Bank Klik Menu Masuk ke Lokasi ATM halaman Daftar Otorisasi Lokasi ATM 1. Pilih Otorisasi Data tersimpan Data pada salah dan berstatus satu data LIVE 2. Klik tombol Setujui 1. Pilih Otorisasi Data dihapus Data pada salah dari database satu data 2. Klik tombol Tolak 1. Pilih Otorisasi Data dihapus Data pada salah dari database satu data 2. Klik tombol Setujui 1. Pilih Otorisasi Data tersimpan Data pada salah dan berstatus satu data LIVE 2. Klik tombol Tolak 1. Pilih Otorisasi Data tersimpan Data pada salah dan berstatus satu data LIVE 2. Klik tombol Setujui 1. Pilih Otorisasi Data dihapus Data pada salah dari database satu data 2. Klik tombol Tolak 1. Pilih Otorisasi Data dihapus Data pada salah dari database

Sesuai

Sesuai

Sesuai

Sesuai

Sesuai

Sesuai

Sesuai

Sesuai

65

Form Otorisasi Data INAU

9

Halaman Daftar Otorisasi Lokasi ATM

Form Otorisasi Data DLAU

satu data 2. Klik tombol Setujui 1. Pilih Otorisasi Data pada salah satu data 2. Klik tombol Tolak 1. Pilih Otorisasi Data pada salah satu data 2. Klik tombol Setujui 1. Pilih Otorisasi Data pada salah satu data 2. Klik tombol Tolak 1. Pilih Otorisasi Data pada salah satu data 2. Klik tombol Setujui 1. Pilih Otorisasi Data pada salah satu data 2. Klik tombol Tolak

Data tersimpan dan berstatus LIVE

Data tersimpan dan berstatus LIVE

Data dihapus dari database

Sesuai

Sesuai

Sesuai

Data dihapus dari database Sesuai

Data tersimpan dan berstatus LIVE

Sesuai

66

4.4.2

Hasil Pengujian pada Tampilan Mobile

Tabel 4.2 Hasil Pengujian pada Tampilan Mobile No.

Interaface

Bagian yang

yang diuji

diuji Halaman

1

Halaman Home

Pencarian ATM Terdekat

Cara pengujian 1.Pilih Bank 2.Klik

Hasil yang

Hasil

diharapkan

pengujian

Sistem

tombol menujukan

Search

lokasi

ATM

Sesuai

terdekat Sistem menujukan

2

Halaman About

Halaman About

nama

aplikasi,

pembuat

dan

versi aplikasi

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.

Sesuai