BAB IV IMPLEMENTASI DAN PENGUJIAN
4.1
Implementasi Setelah melakukan analisa dan perancangan terhadap Aplikasi Panduan
Wisata Religi Kota Tangerang dan Sekitarnya maka tahapan selanjutnya ialah tahap implementasi. Implementasi adalah suatu tindakan atau pelaksanaan dari sebuah perancangan yang sudah disusun secara matang dan terperinci. Pada tahapan implementasi akan terdapat beberapa pembahasan, yaitu pembahasan implementasi proses yang meliputi coding, implementasi basis data, dan implementasi interface (antarmuka). 4.1.1 Implementasi Proses Aplikasi Pada sub bab ini penulis akan menjelaskan beberapa bagian dari kode sumber (source code) Aplikasi Wisata Religi Kota Tangerang dan Sekitarnya yang menggunakan perangkat lunak (software) Eclipse Juno. 4.1.1.1 Implementasi Pembuatan Halaman Utama Aplikasi Frontend Pada
implementasi pembuatan
Wisata
Religi
ini,
penulis
akan
menampilkan potongan kode sumber (Source code) dalam pembuatan layout halaman utama yang berisikan pembuatan aksi dari Button, tampilan dan size. Berikut potongan kode sumber dari halaman utama yang dijelaskan pada Kode 4.1. Kode 4.1 MenuWisrel.java public class MenuWisrel extends Activity { Dialog dialogExit; Button btnExitYa,btnExitTidak; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_menu_utama); Button wisrel = (Button)findViewById(R.id.btn_wisrel); Button peta = (Button) findViewById(R.id.btn_peta); Button search = (Button) findViewById(R.id.btn_search); Button exit = (Button) findViewById(R.id.btn_exit); wisrel.setOnClickListener(new View.OnClickListener() {
59
60
@Override public void onClick(View v) { Intent i = new Intent(MenuWisrel.this, DaftarWisrel.class); startActivity(i); } }); peta.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { .........
4.1.1.2 Implementasi Pembuatan Halaman Peta Berikut adalah potongan kode sumber untuk menampilkan map menggunakan API dari Google Map yang berisi lokasi wisata religi yang ada berupa marker atau penanda. Lihat Kode 4.2. Kode 4.2 PetaWisrel.java Public class PetaWisrel extends Activity implements OnMapLongClickListener, OnInfoWindowClickListener{ static final LatLng AWAL = new LatLng(6.182643532116648,106.63021188229322); ....... @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.peta_online); FragmentManager myFragmentManager = getFragmentManager(); MapFragment myMapFragment = (MapFragment)myFragmentManager.findFragmentById(R.id.map); myMap = myMapFragment.getMap(); myMap.setMyLocationEnabled(true); myMap.setMapType(GoogleMap.MAP_TYPE_TERRAIN); myMap.getUiSettings().setZoomControlsEnabled(true); myMap.getUiSettings().setCompassEnabled(true); myMap.getUiSettings().setMyLocationButtonEnabled(true); myMap.getUiSettings().setAllGesturesEnabled(true); myMap.setTrafficEnabled(true); myMap.setOnMapLongClickListener(this); myMap.setInfoWindowAdapter(new MyInfoWindowAdapter()); myMap.setOnInfoWindowClickListener(this); myMap.moveCamera(CameraUpdateFactory.newLatLngZoom(AWAL, 15)); myMap.animateCamera(CameraUpdateFactory.zoomTo(10), 2000, null); new getListInfo().execute();
Untuk menjalankan fungsi-fungsi tertentu, seperti akses internet, GPS, dan API Google Maps. Dibutuhkan izin-izin tertentu yang dinamakan usespermission. Kode tersebut harus dimasukkan ke dalam AndroidManifest.xml yang ditampilkan pada Kode 4.3.
61
Tabel 4.3 Permission dalam AndroidManifest.xml <uses-permission android:name="com.example.wisatareligi.MAPS_RECEIVE" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSE RVICES" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="AIzaSyBB0Aw5ONUYZE27dal2yb79p2LxKBd4LoY" />
4.1.2 Implementasi Basis Data Implementasi basis data diambil berdasarkan perancangan kebutuhan basis data yang dibuat sebelumnya. Implementasi basis data di implementasikan menggunakan perangkat lunak MySQL Server. Berikut ini adalah implementasi dari struktur table basis data: Tabel tbl_user CREATE TABLE IF NOT EXISTS tbl_user ( id_admin int(11) NOT NULL, nama_admin varchar(30) NOT NULL, jenis_kelamin char (1) NOT NULL, alamat varchar(100) NOT NULL, PRIMARY KEY (id_admin)); Tabel tbl_wisrel CREATE TABLE IF NOT EXISTS tbl_wisrel ( id_wisrel int(11) NOT NULL, nama_wisrel varchar(30) NOT NULL, jenis_wisrel varchar(20) NOT NULL, alamat_wisrel varchar(100) NOT NULL, deskripsi varchar(200) NOT NULL, latitude double(8,6) NOT NULL, longitude double(9,6) NOT NULL, gambar varchar(20), PRIMARY KEY (id_wisrel));
62
4.1.3 Implementasi Class Tabel 4.1 menunjukkan beberapa implementasi class pada aplikasi wisata religi berbasis android yang telah dibuat. Tabel 4.1 Implementasi Class No
Nama kelas
Nama File Fisik
1
Splashscreen
Splashscreen.java
2
Koneksi
Koneksi.java
3
Menu Utama
MenuWisrel.java
4
Peta
PetaWisrel.java
5
Search
Search.java
6
View Detail Wisrel
ViewWisrelDetail.java
7
Wisrel
Wisrel.java
8
CustomHttpClient
CustomHttpClient.java
9
DownloadImageTask
DownloadImageTask.java
10
ListAdapter
ListAdapter.java
11
JSONParser
JSONParser.java
12
Detail Search
DetailSearch.java
4.1.4 Implementasi Interface Implementasi interface dilakukan dengan setiap halaman yang dibuat baik frontend maupun backend. Berikut ini beberapa tampilan interface yang telah diimplemetasikan. 4.1.4.1 Interface Aplikasi Frontend Interface aplikasi frontend terdiri dari beberapa halaman utama yaitu halaman pembuka (Splashscreen), halaman menu, halaman search, halaman peta, halaman detail wisata religi dan halaman rute. 1.
Halaman Splashscreen Interface halaman splashscreen adalah tampilan singkat yang muncul beberapa detik ketika pengguna membuka aplikasi Wisata Religi. Halaman splashscreen dapat digambarkan seperti Gambar 4.1.
63
Gambar 4.1 Tampilan Splashscreen 2.
Halaman Menu Utama Interface halaman menu utama adalah tampilan menu utama dari aplikasi wisata religi berbasis android. Pada menu utama ini terdapat 4 menu fungsional yang dapat diakases oleh pengguna yaitu menu wisata religi, menu search, menu peta dan menu exit. Berikut ini adalah implementasi halaman menu utama dapat digambarkan seperti Gambar 4.2.
Gambar 4.2 Tampilan Menu Utama
64
3.
Halaman Menu Wisata Religi Interface halaman menu wisata religi ini berisi daftar wisata religi dimana wisatawan dapat melihat daftar wisata religi apa saja yang terdapat di kota tangerang dan sekitarnya. Wisata religi ini terdiri dari berbagai jenis wisata religi, seperti tempat ibadah, bangunan sejarah dan makam. Berikut ini adalah implementasi halaman menu wisata religi dapat digambarkan seperti Gambar 4.3.
Gambar 4.3 Tampilan Menu Wisata Religi 4.
Halaman Peta Interface halaman peta ini merupakan halaman yang menampilkan peta kota Tangerang beserta simbol lokasi wisata religi. Apabila wisatawan mengklik salah satu simbol tersebut maka akan menampilkan detail berupa nama wisata, alamat, deskripsi, dan juga map menjadi focus ke symbol yang telah dipilih. Berikut ini adalah implementasi halaman peta wisata religi dapat digambarkan seperti Gambar 4.4.
65
Gambar 4.4 Tampilan Peta 5.
Halaman Detail Wisata Religi Interface halaman detail wisata religi ini merupakan isi dari aksi klik symbol pada peta wisata religi dimana berisi mengenai informasi wisata religi, alamat wisata, deskripsi singkat wisata religi tersebut beserta fungsi rute. Berikut ini adalah implementasi halaman detail wisata religi dapat digambarkan seperti Gambar 4.5.
Gambar 4.5 Tampilan Detail Wisata Religi
66
6.
Halaman Rute Interface halaman rute merupakan perpanjangan dari halaman detail wisata religi dimana rute ini menampilkan posisi wisatawan menuju lokasi wisata yang akan dituju. Berikut ini adalah implementasi halaman rute dapat digambarkan seperti Gambar 4.6.
Gambar 4.6 Tampilan Rute 7. Halaman Search Interface halaman search ini merupakan halaman pencarian wisata berdasarkan nama wisata religi yang diinputkan pada kolom pencarian. Berikut ini adalah implementasi halaman search dapat digambarkan seperti Gambar 4.7.
Gambar 4.7 Tampilan Search
67
4.1.4.2 Interface Aplikasi Backend Interface aplikasi backend terdiri dari beberapa halaman utama yaitu halaman menu login, halaman tambah data, halaman view data, halaman edit data, dan halaman search data. 1.
Halaman Login Pada halaman login ini admin diminta untuk memasukan username dan password untuk masuk ke menu utama. Menu login ini digunakan agar tidak semua orang tidak dapat mengakses data wisata dengan mudah tetapi hanya admin yang sudah valid dapat mengakses data wisata ini. Berikut adalah tampilannya pada Gambar 4.8.
Gambar 4.8 Tampilan Menu Login 2.
Halaman Menu Utama Halaman menu utama menampilkan langsung data wisata religi yang sudah ada beserta menu untuk memanipulasi data, search, dan logout. Berikut adalah tampilannya pada Gambar 4.9.
68
Gambar 4.9 Tampilan Menu Utama 4.
Halaman Tambah Data Pada halaman ini menampilkan form tambah data untuk menambahkan data wisata religi. Admin mengisi semua isian yang terdapat dalam form dan menekan tombol simpan untuk menyimpan, tombol ulang untuk mereset inputan yang sudah diisi. Berikut adalah tampilannya pada Gambar 4.10.
Gambar 4.10 Tampilan Tambah Data Wisata
69
5.
Halaman Edit Data Pada halaman ini akan menampilkan form edit data dan menapilkan data yang sudah tercatat. Untuk menyimpan hasil data yang sudah diedit admin tinggal mengklik tombol update untuk menyimpan data yang sudah diedit sedangkan tombol batal untuk membatalkan hasil edit. Berikut adalah tampilannya pada Gambar 4.11.
Gambar 4.11 Tampilan Edit Data Wisata 7.
Halaman Pencarian Data Pada halaman ini admin memasukan nama wisata yang akan dicari setelah itu admin mengklik tombol cari setelah diproses maka akan menampilkan hasil pencarian berdasarkan inputan. Berikut adalah tampilannya pada Gambar 4.12.
Gambar 4.12 Tampilan Search Data Wisata
70
4.2
Pengujian Pengujian merupakan bagian terpenting dalam pengembangan perangkat
lunak. Dalam penelitian ini pengujian dilakukan terhadap sistem yaitu pengujian secara fungsional (alpha). Metode yang digunakan dalam pengujian ini adalah pengujian blackbox yang berfokus pada persyaratan fungsional dari sistem yang dibangun. 4.2.1 Lingkungan Pengujian Aplikasi wisata religi ini diuji pada lingkungan dengan spesifikasi perangkat lunak dan perangkat keras yang digunakan sebagai berikut: 4.2.1.1 Perangkat Lunak Yang Digunakan Perangkat lunak yang digunakan pada sistem komputer untuk membangun Aplikasi Wisata Religi Kota Tangerang dan Sekitarnya ini adalah sebagai berikut: 1.
Sistem Operasi Windows XP Profesional SP 2
2.
XAMPP untuk penyimpanan basis data dan local server
3.
EditPlus untuk penulisan kode program PHP
4.
Eclipse ADT untuk penulisan kode program Android
5.
Microsoft Visio sebagai UML Modeler
6.
Mozilla firefox dan Google Chrome sebagai browser
4.2.1.2 Perangkat Keras Yang Digunakan Perangkat keras yang digunakan untuk mengimplementasikan aplikasi yang dibuat adalah perangkat keras komputer Notebook PC kompatibel dengan spesifikasi yang sebagai berikut: 1.
Processor
: Kecepatan minimum 2.0 GHz
2.
Memory / RAM : Kapasitas minimum 2 GB
3.
Harddisk
: Kapasitas minimum 250 Gb
4.
VGA
: Kapasitas minimum 312 MB
5.
Smartphone Android sitem operasi 4.4.4
71
4.2.2 Skenario Pengujian Aplikasi ini di implementasikan dengan menggunakan teknik client-server dimana PC sebagai server dan Android Device sebagai Client. Pada Tabel 4.2 menunjukkan bagaimana scenario pengujian dilakukan. Tabel 4.2 Skenario Pengujian No 1
Item yang Diuji Form Login
Sifat Normal Tidak Normal
2
Form Tambah Data
Normal
Cara Menguji Input username: admin && password: admin Input username: admin && password: asal Input Data Wisrel ke semua kolom
Tidak Normal
Input Data Wisrel beberapa kolom
Form Edit Data
Normal
Merubah data wisrel Merubah data wisrel
4
Halaman Peta
Tidak Normal Normal
5
Halaman Search
Normal
Input kata kunci “makam”
Tidak Normal Normal
Input kata kunci “desa” Memilih menu wisata religi
Normal
Memilih marker dari salah satu lokasi di halaman peta
3
6
Halaman Wisata Religi
7
Halaman Detail Wisata Religi
Memilih Menu Peta
Hasil yang Diharapkan Menampilkan Halaman Utama Menampilkan pesan parameter login tidak valid Menampilkan pesan data berhasil ditambahkan Menampilkan pesan tidak berhasil ditambahkan Menampilkan pesan data telah diperbarui Menampilkan Pesan data gagal diperbarui Ketika memilih menu, maka muncul tampilan peta lokasi wisata religi yang ada dalam aplikasi wisata religi Menampilkan pesan ditemukan dan data yang memiliki kata makam Menampilkan pesan data tidak ditemukan Ketika memilih menu akan menampilkan daftar wisata religi yang ada di Kota Tangerang dan Sekitarnya Ketika memilih marker maka akan menampilkan detail dari wisata religi beserta rute menuju lokasi
72
8
Halaman Rute
Normal
Memilih icon Rute di detail wisata religi
9
Aplikasi Backend
Normal
Membuka aplikasi backend
Tidak Nomal
Membuka aplikasi backnd
Ketika rute dipilih maka akan menampilkan rute yang dapat ditempuh menuju lokasi Masuk ke halaman utama aplikasi Menampilkan pesan idak ada koneksi internet
4.2.3 Hasil Pengujian Pada Tabel 4.6 menunjukkan bagaimana hasil yang di dapat dari proses pengujian yang telah dijelaskan dalam skenario pengujian. Tabel 4.3 Hasil Pengujian No
Item yang Diuji
Sifat
Cara Menguji
Hasil yang Diharapkan
1
Form Login
Normal
Input username: admin && password: admin Input username: admin && password: asal Input Data Wisrel ke semua kolom
Menampilkan Halaman Utama
Tidak Normal 2
3
4
Form Tambah Data
Form Edit Data
Halaman Peta
Normal
Tidak Normal
Input Data Wisrel beberapa kolom
Normal
Merubah data wisrel
Tidak Normal
Merubah data wisrel
Normal
Memilih Menu Peta
Menampilkan pesan parameter login tidak valid Menampilkan pesan data berhasil ditambahkan Menampilkan pesan tidak berhasil ditambahkan Menampilkan pesan data telah diperbarui Menampilkan Pesan data gagal diperbarui Ketika memilih menu, maka muncul tampilan peta lokasi wisata religi yang ada di aplikasi
Hasil Penguj ian Sesuai Sesuai Sesuai
Sesuai
Sesuai Sesuai Sesuai
73
Tabel 4.3 ( Lanjutan ) 5 Halaman Normal Search
Input kata kunci “makam”
Tidak Normal
Input kata kunci “desa”
6
Halaman Wisata Religi
Normal
Memilih menu wisata religi
7
Halaman Detail Wisata Religi
Normal
Memilih marker dari salah satu lokasi di halaman peta
8
Halaman Rute
Normal
Memilih icon Rute di detail wisata religi
9
Aplikasi Backend
Normal
Membuka aplikasi backend
Tidak Normal
Membuka aplikasi backnd
Menampilkan pesan ditemukan dan data yang memiliki kata makam Menampilkan pesan data tidak ditemukan Ketika memilih menu akan menampilkan daftar wisata religi yang ada di aplikasi Ketika memilih marker maka akan menampilkan detail dari wisata religi beserta rute menuju lokasi Ketika rute dipilih maka akan menampilkan rute yang dapat ditempuh menuju lokasi Masuk ke halaman utama aplikasi Menampilkan pesan idak ada koneksi internet
Sesuai
Sesuai Sesuai
Sesuai
Sesuai
Sesuai Sesuai
4.2.4 Analisis Hasil Pengujian Dalam sub bab ini akan dibahas mengenai analisis dari hasil pengujian yang telah dilakukan terhadap beberapa proses di dalam aplikasi frontend yang akan digunakan wisatawan. Berikut penjelasannya: 1.
Pada Aplikasi Backend Admin diharuskan mengisi Username dan Password yang valid agar dapat masuk ke menu utama yaitu untuk memanipulasi data wisata religi. Jika admin ingin melakukan penambahan data maka admin memilih menu tambah data di bagian bawah halaman
74
utama aplikasi backend di browser. Namun jika Username dan Password salah, maka pesan kesalahan akan tampil dan akan kembali ke halaman login untuk memasukkan data yang valid. 2.
Pada Aplikasi Frontend yang dapat digunakan oleh semua orang yang memiliki smartphone android minimal dengan sistem operasi 4.0 kitkat dan menginstall aplikasi wisata religi ini maka setelah masuk halaman utama aplikasi dan memilih menu peta maka akan menampilkan peta tangerang dan menampilkan marker yang menandakan lokasi wisata religi. Bila wisatawan memilih marker tersebut maka akan tampil info dari marker dan ketika dipilih maka wisatawan akan melihat detail wisata religi berupa gambar wisata religi dan deskripsi beserta peta lokasi wisata religi yang dipilih.
3.
Jika wisatawan memilih menu Wisata Religi maka wisatawan dapat melihat daftar wisata religi yang ada berupa teks dan thumbnail gambar lokasi wisata religi dan jika wisatawan memilih salah satu wisata religi maka akan menampilkan informasi wisata religi berupa deskripsi singkat dan alamat lokasi.