BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM

(1)

BAB IV

IMPLEMENTASI DAN PENGUJIAN SISTEM

4.1 Implementasi

Tujuan dari tahapan implementasi adalah untuk memastikan apakah perancangan perangkat lunak yang dibuat dapat bekerja secara efektif dan efisien serta sesuai dengan hasil yang diharapkan. Sebelum melakukan implementasi, aplikasi yang dibuat harus bebas dari kesalahan, baik dari kesalahan penulisan kode program maupun kesalahan logical.

4.2 Perangkat Yang Digunakan

Dalam perancangan suatu aplikasi tentunya dibutuhkan perangkat pendukung, baik perangkat keras (hardware) maupun perangkat lunak (software). Berikut ini akan dijelaskan mengenai perangkat pendukung yang digunakan.

4.2.1 Perangkat Keras (Hardware)

Perangkat keras merupakan komponen penting yang dibutuhkan dalam perancangan sebuah sistem, dengan perangkat yang baik serta spesifikasi yang memadai akan membuat sistem beroperasi dengan baik. Berikut adalah tabel spesifikasi perangkat keras yang digunakan selama pembangunan sistem.

Tabel 4.1 Spesifikasi Perangkat Keras

Perangkat Keras Spesifikasi

Processor Intel Core i3, Celeron (R) @ 1.50GHz 1.50 GHz

RAM 4,00 GB

VGA None

System Type 64-bit Operating System, x64-based processor

4.2 Perangkat Lunak (Software)

Perangkat lunak merupakan komponen penting yang dibutuhkan dalam perancangan

sebuah sistem dan pemrograman, berikut adalah beberapa perangkat lunak yang

digunakan.

(2)

Tabel 4.2 Spesifikasi Perangkat Lunak

Perangkat Lunak Fungsi

Windows 8.1 Single Language Sistem Operasi

Oracle VM VirtualBox 5.0.16 Berfungsi sebagai Virtual Machine Genymotion Berfungsi untuk emulator android Android Studio 2.1.5 Berfungsi sebagai pembuatan dan

pengembangan aplikasi berbasis android, membuat tampilan antarmuka aplikasi, dan komponen yang dibutuhkan didalam sebuah aplikasi.

Microsoft Office 2013 Berfungsi sebagai dokumentasi dan penulisan Microsoft Visio 2007 Berfungsi sebagai perancangan sistem Adobe Photoshop CS3 Berfungsi sebagai pengolah gambar

Sublime Text Berfungsi sebagai pengolah bahasa pemrograman seperti HTML dan PHP.

4.3 Implementasi Basis Data

Pada sub bab ini akan menjelaskan implementasi basis data dari aplikasi sistem menggunakan XAMPP beberapa fungsi yang dibuat yang terdiri dari ruang lingkup implementasi dari aplikasi sistem tersebut. Dibawah ini adalah pembuatan database menggunakan phpMyAdmin.

Berikut ini adalah tampilan dari tabel-tabel yang telah dibuat dalam database binamargadki.sql

Gambar 4.1 Halaman Utama phpMyAdmin

(3)

4.3.1 Tabel tb_admin

Gambar 4.2 Tabel tb_admin

Implementasi pembuatan basis data pada tabel tb_admin adalah sebagai berikut ini;

CREATE TABLE IF NOT EXISTS `tb_admin` (

`id_admin` int(20) NOT NULL AUTO_INCREMENT, `nama_admin` varchar(30) NOT NULL,

`email` varchar(30) NOT NULL, `alamat` varchar(30) NOT NULL, `no_telp` varchar(15) NOT NULL, `tgl_lahir` date NOT NULL,

`jeniskelamin` varchar(30) NOT NULL, `username` varchar(30) NOT NULL, `password` varchar(30) NOT NULL, PRIMARY KEY (`id_admin`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

(4)

4.3.2 Tabel tb_pelapor

Gambar 4.3 Tabel tb_pelapor

Implementasi pembuatan basis data pada tabel tb_pelapor adalah sebagai berikut ini;

CREATE TABLE IF NOT EXISTS `tb_pelapor` (

`id_pelapor` int(10) NOT NULL AUTO_INCREMENT,

`name` varchar(30) NOT NULL,

`username` varchar(20) NOT NULL,

`phone` varchar(15) NOT NULL,

`password` varchar(20) NOT NULL,

PRIMARY KEY (`id_pelapor`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=15 ;

(5)

4.3.3 Tabel tb_pengaduan

Gambar 4.4 Tabel tb_pengaduan

Implementasi pembuatan basis data pada tabel tb_pengaduan adalah sebagai berikut ini;

CREATE TABLE IF NOT EXISTS `tb_pengaduan` ( `id_pengaduan` int(11) NOT NULL AUTO_INCREMENT, `foto` varchar(400) NOT NULL,

`kategori` varchar(50) NOT NULL, `keterangan` varchar(120) NOT NULL, `lokasi` varchar(120) NOT NULL, `waktu` datetime NOT NULL,

`status` enum('menunggu','proses','selesai') NOT NULL, PRIMARY KEY (`id_pengaduan`)

) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=45 ;

(6)

4.3 Tabel tb_sukudinas

Gambar 4.5 Tabel tb_sukudinas

Implementasi pembuatan basis data pada tabel tb_sukudinas adalah sebagai berikut ini;

CREATE TABLE IF NOT EXISTS `tb_sukudinas` ( `id_sukudinas` int(10) NOT NULL AUTO_INCREMENT,

`nama` varchar(30) NOT NULL,

`email` varchar(30) NOT NULL,

`alamat` varchar(150) NOT NULL,

`no_telp` varchar(15) NOT NULL,

`tgl_lahir` date NOT NULL,

`jeniskelamin` varchar(30) NOT NULL,

`username` varchar(30) NOT NULL,

`password` varchar(30) NOT NULL,

PRIMARY KEY (`id_sukudinas`)

) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;

(7)

4.4 Implementasi Program

Aplikasi ini dibuat dengan menggunakan Android Studio versi 2.1.5 dengan bahasa pemrograman Java. Tampilan pada aplikasi ini adalah hasil implementasi layar berdasarkan analisis dan perancangan layar pada bab sebelumnya.

4.4.1 Tampilan Halaman Login pada User

Dalam tampilan antarmuka pada Login User terdapat form pengisian username dan password.

Gambar 4.6 Tampilan Halaman Login pada User

Pada tampilan Login ini terdapat 2 class antara LoginActivity dan LoginRequest menggunakan metode volley. Berikut potongan kode program LoginActivity:

bLogin.setOnClickListener(new View.OnClickListener() { @Override

public void onClick(View v) {

final String username = etUsername.getText().toString();

final String password = etPassword.getText().toString();

// Response received from the server

Response.Listener<String> responseListener = new Response.Listener<String>() { @Override

public void onResponse(String response) { try {

JSONObject jsonResponse = new JSONObject(response);

boolean success = jsonResponse.getBoolean("success");

if (success) {

Intent intent = new Intent(LoginActivity.this, HomeActivity.class);

LoginActivity.this.startActivity(intent);

} else {

AlertDialog.Builder builder = new AlertDialog.Builder(LoginActivity.this);

(8)

4.4.2 Tampilan Halaman Register pada User

Dalam tampilan antarmuka pada Register User terdapat form pengisian mengenai pendaftaran.

Gambar 4.7 Tampilan Halaman Register pada User

Pada tampilan Register ini mempunyai 4 inputan data yang dikelola 2 class activity yaitu RegisterActivity dengan RegisterRequest dengan menggunakan metode volley. Berikut potongan kode program pada RegisterActivity:

Response.Listener<String> responseListener = new Response.Listener<String>(){

@Override

public void onResponse(String response) { try {

JSONObject jsonResponse = new JSONObject(response);

boolean success = jsonResponse.getBoolean("success");

if (success) {

Intent Intent = new Intent(RegisterActivity.this, LoginActivity.class);

RegisterActivity.this.startActivity(Intent);

}else{

AlertDialog.Builder builder = new AlertDialog.Builder(RegisterActivity.this);

builder.setMessage("Register Failed") .setNegativeButton("Retry", null) .create()

.show();

}

} catch (JSONException e) { e.printStackTrace();

} } };

RegisterRequest registerRequest = new RegisterRequest(name, username, phone, password, responseListener );

RequestQueue queue = Volley.newRequestQueue(RegisterActivity.this);

queue.add(registerRequest);

} });

(9)

4.4.3 Tampilan Halaman Menu Utama pada User

Dalam tampilan antarmuka pada Menu Utama, terdapat beberapa button dan image button yang berfungsi untuk berpindah ke activity lain.

Gambar 4.8 Tampilan Halaman Menu Utama pada User

Dalam tampilan halaman utama menggunakan Linear Layout yang dipadukan dengan RelativeLayout, perpindahan antara menu satu dengan yang lain menggunakan Intent. Berikut potongan kode program pada Halaman Utama:

final LinearLayout bHome = (LinearLayout) findViewById(R.id.bHome);

final LinearLayout bVisi = (LinearLayout) findViewById(R.id.bVisi);

final LinearLayout bIssue = (LinearLayout) findViewById(R.id.bIssue);

final LinearLayout bContact = (LinearLayout) findViewById(R.id.bContact);

final LinearLayout bNews = (LinearLayout) findViewById(R.id.bNews);

final LinearLayout bLaporan = (LinearLayout) findViewById(R.id.bLaporan);

final Button buttonExit = (Button) findViewById(R.id.buttonExit);

bHome.setOnClickListener(new View.OnClickListener() { @Override

Intent aboutusIntent = new Intent(HomeActivity.this, AboutmeActivity.class);

HomeActivity.this.startActivity(aboutusIntent);

} });

bVisi.setOnClickListener(new View.OnClickListener() { @Override

Intent visimisiIntent = new Intent(HomeActivity.this, VisiActivity.class);

HomeActivity.this.startActivity(visimisiIntent);

} });

(10)

4.4.4 Tampilan Halaman About Us pada User

Dalam tampilan antarmuka pada About Us, terdapat informasi mengenai sejarah Dinas Bina Marga Provinsi DKI Jakarta.

Gambar 4.9 Tampilan Halaman About Us pada User

Dalam tampilan Halaman About Us menggunakan Android WebView dalam penggunaannya. Berikut potongan kode program pada About Us:

package com.developer.aguspermadi.ayolaporbinamarga;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.webkit.WebView;

public class AboutmeActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

setContentView(R.layout.activity_aboutme);

String url = "http://192.168.56.1/binamargadkinet3/about-us.html"; //Pendefinisian URL

WebView view = (WebView) this.findViewById(R.id.webView1); //sinkronisasi object berdasarkan id view.getSettings().setJavaScriptEnabled(true); //untuk mengaktifkan javascript

view.loadUrl(url); //agar URL terload saat dibuka aplikasi }

}

(11)

4.4.5 Tampilan Halaman Visi Misi pada User

Dalam tampilan antarmuka Halaman Visi dan Misi, terdapat informasi mengenai visi dan misi dari Dinas Bina Marga Provinsi DKI Jakarta.

Gambar 4.10 Tampilan Halaman Visi dan Misi pada User

Dalam tampilan Halaman Visi dan Misi menggunakan Android WebView dalam penggunaannya. Berikut potongan kode program pada Halaman Visi dan Misi:

public class VisiActivity extends AppCompatActivity {

@Override

setContentView(R.layout.activity_visi);

String url = "http://192.168.56.1/binamargadkinet3/visidanmisi.html"; //Pendefinisian URL

}

(12)

4.4.6 Tampilan Halaman Buat Issue/Buat Laporan pada User

Dalam tampilan antarmuka pada Halaman Buat Issue, terdapat form pengisian mengenai pelaporan sarana dan prasarana pada jalan raya.

Gambar 4.11 Tampilan Halaman Buat Issue pada User

Dalam tampilan membuat issue atau laporan menggunakan metode volley. Dimana data inputan menggunakan sarana pertukaran data yaitu json, hampir sama seperti Login dan Register pada sub-bab sebelumnya. Berikut potongan kode program pada Halaman Issue:

private int PICK_IMAGE_REQUEST = 1;

private String UPLOAD_URL ="http://192.168.56.1/binamargadkinet1/upload.php";

private String KEY_FOTO = "foto";

private String KEY_TITLE = "kategori";

private String KEY_LOCATION = "lokasi";

private String KEY_STORY = "keterangan";

protected Map<String, String> getParams() throws AuthFailureError { //Converting Bitmap to String String foto = getStringImage(bitmap); //Getting Image Name

String kategori = etTitle.getText().toString().trim(); //Creating parameters String lokasi = etLocation.getText().toString().trim(); //Creating parameters String keterangan = etStory.getText().toString().trim(); //Creating parameters Map<String,String> params = new Hashtable<String, String>();

//Adding parameters

params.put(KEY_FOTO, foto);

params.put(KEY_TITLE, kategori);

params.put(KEY_LOCATION, lokasi);

params.put(KEY_STORY, keterangan);

//returning parameters return params;

} };

(13)

4.4.7 Tampilan Halaman Kontak pada User

Dalam tampilan antarmuka pada Halaman Kontak, terdapat informasi mengenai Kontak-Kontak yang bisa dihubungi pada Dinas Bina Marga Provinsi DKI Jakarta.

Gambar 4.12 Tampilan Halaman Kontak pada User

Dalam tampilan Halaman kontak pada user menggunakan Android WebView dalam penggunaannya. Berikut potongan kode program pada Halaman Kontak:

public class ContactActivity extends AppCompatActivity {

@Override

setContentView(R.layout.activity_contact);

String url = "http://192.168.56.1/binamargadkinet3/contact-us.html"; //Pendefinisian URL

}

(14)

4.4.8 Tampilan Halaman Berita pada User

Dalam tampilan antarmuka pada Halaman Berita, terdapat berita mengenai jakarta, activity ini menggunakan webview dalam penerapannya.

Gambar 4.13 Tampilan Halaman Berita pada User

Berikut potongan kode program pada Halaman Berita:

String url = "http://www.beritajakarta.com/"; //Pendefinisian URL

view.loadUrl(url); //agar URL terload saat dibuka aplikasi

view.setWebViewClient(new MainWebViewClient());

}

private class MainWebViewClient extends WebViewClient{

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url){

Log.i("Log","loading:"+url);

view.loadUrl(url);

return true;

} } }

(15)

4.4.9 Tampilan Halaman Laporan pada User

Dalam tampilan antarmuka Halaman Laporan, terdapat informasi mengenai laporan yang sudah masuk kedalam sistem. Pada activity ini menggunakan webview dalam penerapannya.

Gambar 4.14 Tampilan Halaman Laporan pada User Berikut potongan kode program pada Halaman Laporan:

public class LaporanActivity extends AppCompatActivity {

@Override

setContentView(R.layout.activity_laporan);

String url = "http://192.168.56.1/binamargadkinet1/kelolapengaduan.php"; //Pendefinisian URL WebView view = (WebView) this.findViewById(R.id.webView5); //sinkronisasi object berdasarkan id view.getSettings().setJavaScriptEnabled(true); //untuk mengaktifkan javascript

}

(16)

4.4.10 Tampilan Halaman Login Admin

Dalam tampilan antarmuka WebServer pada halaman Login Admin ini, terdapat form login yang berisi username dan password, dibuat dengan menggunakan bahasa pemrograman PHP dan template bootstrap.

Gambar 4.15 Tampilan Halaman Login Admin 4.4.11 Tampilan Halaman About Us pada Admin

Dalam tampilan antarmuka WebServer pada halaman About us ini, terdapat informasi mengenai Visi dan Misi pada Dinas Bina Marga Provinsi DKI Jakarta.

Gambar 4.16 Tampilan Halaman About Us pada Admin

(17)

4.4.12 Tampilan Halaman Dashboard pada Admin

Dalam tampilan antarmuka WebServer pada halaman Dashboard ini, terdapat informasi mengenai pelapor dan pengaduan yang masuk ke dalam sebuah sistem.

Gambar 4.17 Tampilan Halaman Dashboard pada Admin

4.4.13 Tampilan Halaman Kelola Pelapor pada Admin

Dalam tampilan antarmuka WebServer pada halaman Kelola Pelapor ini, terdapat informasi mengenai pelapor, implementasi pada antarmuka WebServer ini berguna untuk admin mengelola data dari pelapor.

Gambar 4.18 Tampilan Halaman Kelola Pelapor pada Admin

(18)

4.4.14 Tampilan Halaman Kelola Pengaduan pada Admin

Dalam tampilan antarmuka WebServer pada halaman Kelola Pengaduan ini, terdapat informasi mengenai pengaduan, implementasi pada antarmuka WebServer ini berguna untuk admin mengelola pengaduan yang masuk ke dalam sebuah database.

Gambar 4.19 Tampilan Halaman Kelola Pengaduan pada Admin 4.4.15 Tampilan Halaman Laporan/Report pada Admin

Dalam tampilan antarmuka WebServer pada halaman Laporan ini, terdapat informasi mengenai laporan pengaduan, implementasi pada antarmuka WebServer ini berguna untuk admin mengetahui hasil laporan, yang bisa di konversi menjadi PDF.

Gambar 4.20 Tampilan Halaman Report/Laporan pada Admin

(19)

Gambar 4.21 Tampilan Halaman Laporan PDF

4.5 Pengujian

Pengujian atau Testing dilakukan untuk memastikan apakah sistem yang akan dipakai sudah sesuai dengan yang dibutuhkan dan diharapkan. Pengujian aplikasi ini dilakukan dengan menggunakan metode black box testing, yaitu melakukan pengujian dengan memfokuskan pada fungsionality sistem tanpa mengetahui apa sesungguhnya yang terjadi dalam black end system. Tujuan dari metode ini adalah untuk menemukan kesalahan fungsi dari suatu program yang telah dibuat.

4.6 Skenario Pengujian

Skenario pengujian dilakukan untuk menentukan langkah langkah dalam melakukan

pengujian didalam sebuah aplikasi yang telah dibuat. Dengan cara memberikan sejumlah

inputan (input data) melalui penekanan tombol antarmuka pada sistem, untuk menentukan

apakah aplikasi berfungsi dengan baik atau tidak. Spesifikasi pengujian dilakukan dengan

memperhatikan fungsi-fungsi dari menu aplikasi apakah berjalan sesuai harapan.

(20)

Tabel 4.3 Tabel Skenario Pengujian

No. Antar

Muka

Uji Coba Status Aplikasi

Skenario Pengujian

Hasil Pengujian

1. Halaman Login (Android)

Menguji inputan (input data) yang terdapat dalam antarmuka tersebut, dan kesesuaian fungsi yang telah dibuat

Halaman Login pada User telah terbuka

 Memasukkan username dan password yang benar

 Memasukkan username dan password yang salah

 Jika username dan password salah maka halaman utama tidak terbuka

 Jika username dan password benar maka halaman utama akan terbuka

2. Halaman Register (Android)

Menguji inputan (input data) yang terdapat dalam antarmuka tersebut, dan kesesuaian fungsi yang telah dibuat

Halaman Register pada User telah terbuka

Memasukkan username, password, name dan phone yang benar

Jika data yang di inputkan telah benar maka akan pindah ke activity login, untuk memasukkan username dan password kembali.

3. Halaman Menu Utama (Android)

Menguji button-button yang terdapat dalam antarmuka tersebut, dan kesesuaian fungsi yang telah dibuat

Halaman Menu Utama pada user telah terbuka

Menguji dengan menekan button- button apakah sesuai dengan yg diharapkan.

Akan muncul tampilan Activity lain sesuai button yang ditekan.

4. Halaman Tentang Dinas Bina Marga (Android)

Menguji button-button yang terdapat dalam antarmuka tersebut

Halaman Tentang Bina Marga telah terbuka

Melihat apakah konten yang berisi benar tentang Dinas Bina Marga

Aplikasi menampilkan informasi mengenai Dinas Bina Marga

(21)

No. Antar Muka

Uji Coba Status Aplikasi

Skenario Pengujian

Hasil Pengujian

5. Halaman Visi dan Misi Bina Marga (Android)

Halaman Visi dan Misi telah terbuka

Melihat apakah konten yang berisi benar tentang Visi dan Misi Dinas Bina Marga

Aplikasi menampilkan informasi mengenai Visi dan Misi Dinas Bina Marga

6. Halaman Buat Issue atau Buat Laporan (Android)

Menguji button-button dan Textfield yang terdapat dalam antarmuka tersebut

Halaman Buat issue telah terbuka

Menguji dengan memasukkan data, apakah aplikasi dapat bekerja sesuai dengan fungsinya

 Jika data yang

dimasukkan kurang maka sistem tidak akan merespon

 Jika data yang dimasukkan sudah lengkap maka sistem akan memproses.

7. Halaman Kontak (Android)

Halaman Kontak telah terbuka

Melihat apakah konten berisi benar tentang kontak pada Dinas Bina Marga

Aplikasi menampilkan informasi mengenai Kontak Dinas Bina Marga

8. Halaman Berita (Android)

Halaman Berita telah terbuka

Melihat apakah konten berisi benar tentang Berita Jakarta

Aplikasi menampilkan informasi mengenai Berita yang terkait dengan Jakarta.

9. Halaman Laporan (Android)

Halaman Laporan telah terbuka

Melihat apakah konten berisi benar tentang Laporan pada Dinas Bina Marga

 Jika ketika membuat Issue laporan yang kita buat benar maka pada halaman laporan, pelapor bisa melihat laporannya telah terkirim.

10. Halaman Login Admin (Web)

Menguji Halaman Login Admin

Halaman login admin

(22)

telah terbuka

11. Halaman Login Suku Dinas (Web)

Menguji Halaman Login Suku Dinas

Halaman login suku dinas telah terbuka

12. Halaman Kelola Pelapor (Web)

Halaman kelola pelapor telah terbuka

 Menguji dengan menekan button tambah

 Menguji dengan menekan button edit

 Menguji dengan menekan button hapus

 Telah berhasil

menambahkan pelapor

 Telah berhasil mengedit data pelapor

 Telah berhasil menghapus data pelapor pada

database.

13. Halaman Kelola Pengaduan (Web)

Halaman kelola pengaduan telah terbuka

 Menguji dengan menekan button tambah

 Menguji dengan menekan button edit

 Menguji dengan menekan button hapus

 Telah berhasil

menambahkan pengaduan

 Telah berhasil mengedit data pengaduan

 Telah berhasil menghapus data pengaduan pada database.

14. Halaman Report (Web)

Halaman report telah terbuka

Menguji dengan kesesuaian tanggal per periode untuk sebuah laporan harian/bulanan

Telah berhasil menampilkan keluaran berupa laporan harian/bulanan.

(23)

4.7 Analisa Hasil Pengujian

Berikut adalah analisa yang telah dilakukan berdasarkan hasil pengujian yang telah dilakukan. maka dapat dianalisa sebagai berikut:

1. Aplikasi dapat membuka aplikasi yang telah di instal pada perangkat smartphone.

2. Pelapor dapat melakukan pendaftaran dari form pendaftaran yang terdapat pada activity register.

3. Pelapor dapat melakukan login dari form login yang terdapat pada activity login.

4. Pelapor dapat melihat informasi yang terdapat pada aplikasi pelayanan pengaduan pada Dinas Bina Marga DKI Jakarta.

5. Pelapor dapat melakukan pembuatan issue atau pembuatan laporan mengenai sarana dan prasarana jalan raya melalui aplikasi pelayanan pengaduan pada Dinas Bina Marga DKI Jakarta.