BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM

Transkripsi

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

2 56 Tabel 4.2 Spesifikasi Perangkat Lunak Perangkat Lunak Fungsi Windows 8.1 Single Language Sistem Operasi Oracle VM VirtualBox Berfungsi sebagai Virtual Machine Genymotion Berfungsi untuk emulator android Android Studio Berfungsi sebagai pembuatan dan pengembangan aplikasi berbasis android, membuat tampilan 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 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` ( ìd_admin` int(20) NOT NULL AUTO_INCREMENT, `nama_admin` varchar(30) NOT NULL, ` ` varchar(30) NOT NULL, àlamat` varchar(30) NOT NULL, `no_telp` varchar(15) NOT NULL, `tgl_lahir` date NOT NULL, `jeniskelamin` varchar(30) NOT NULL, ùsername` varchar(30) NOT NULL, `password` varchar(30) NOT NULL, PRIMARY KEY (ìd_admin`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ; 57

4 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` ( ìd_pelapor` int(10) NOT NULL AUTO_INCREMENT, `name` varchar(30) NOT NULL, ùsername` varchar(20) NOT NULL, `phone` varchar(15) NOT NULL, `password` varchar(20) NOT NULL, PRIMARY KEY (ìd_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 ; 59

6 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` ( ìd_sukudinas` int(10) NOT NULL AUTO_INCREMENT, `nama` varchar(30) NOT NULL, ` ` varchar(30) NOT NULL, àlamat` varchar(150) NOT NULL, `no_telp` varchar(15) NOT NULL, `tgl_lahir` date NOT NULL, `jeniskelamin` varchar(30) NOT NULL, ùsername` varchar(30) NOT NULL, `password` varchar(30) NOT NULL, PRIMARY KEY (ìd_sukudinas`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;

7 4.4 Implementasi Program Aplikasi ini dibuat dengan menggunakan Android Studio versi dengan bahasa pemrograman Java. Tampilan pada aplikasi ini adalah hasil implementasi layar berdasarkan analisis dan perancangan layar pada bab sebelumnya Tampilan Login pada User Dalam tampilan pada Login User terdapat form pengisian username dan password. Gambar 4.6 Tampilan 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() 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>() 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); 61

8 Tampilan Register pada User pendaftaran. Dalam tampilan pada Register User terdapat form pengisian mengenai Gambar 4.7 Tampilan 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 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 Menu Utama pada User Dalam tampilan pada Menu Utama, terdapat beberapa button dan image button yang berfungsi untuk berpindah ke activity lain. Gambar 4.8 Tampilan 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 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() public void onclick(view v) { Intent aboutusintent = new Intent(HomeActivity.this, AboutmeActivity.class); HomeActivity.this.startActivity(aboutusIntent); ); bvisi.setonclicklistener(new View.OnClickListener() public void onclick(view v) { Intent visimisiintent = new Intent(HomeActivity.this, VisiActivity.class); HomeActivity.this.startActivity(visimisiIntent); ); 63

10 Tampilan About Us pada User Dalam tampilan pada About Us, terdapat informasi mengenai sejarah Dinas Bina Marga Provinsi DKI Jakarta. Gambar 4.9 Tampilan About Us pada User Dalam tampilan 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 protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_aboutme); String url = " //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 Visi Misi pada User Dalam tampilan Visi dan Misi, terdapat informasi mengenai visi dan misi dari Dinas Bina Marga Provinsi DKI Jakarta. Gambar 4.10 Tampilan Visi dan Misi pada User Dalam tampilan Visi dan Misi menggunakan Android WebView dalam penggunaannya. Berikut potongan kode program pada Visi dan Misi: package com.developer.aguspermadi.ayolaporbinamarga; import android.support.v7.app.appcompatactivity; import android.os.bundle; import android.webkit.webview; public class VisiActivity extends AppCompatActivity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_visi); String url = " //Pendefinisian URL WebView view = (WebView) this.findviewbyid(r.id.webview2); //sinkronisasi object berdasarkan id view.getsettings().setjavascriptenabled(true); //untuk mengaktifkan javascript view.loadurl(url); //agar URL terload saat dibuka aplikasi 65

12 Tampilan Buat Issue/Buat Laporan pada User Dalam tampilan pada Buat Issue, terdapat form pengisian mengenai pelaporan sarana dan prasarana pada jalan raya. Gambar 4.11 Tampilan 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 Issue: private int PICK_IMAGE_REQUEST = 1; private String UPLOAD_URL =" 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 Kontak pada User Dalam tampilan pada Kontak, terdapat informasi mengenai Kontak-Kontak yang bisa dihubungi pada Dinas Bina Marga Provinsi DKI Jakarta. Gambar 4.12 Tampilan Kontak pada User Dalam tampilan kontak pada user menggunakan Android WebView dalam penggunaannya. Berikut potongan kode program pada Kontak: package com.developer.aguspermadi.ayolaporbinamarga; import android.support.v7.app.appcompatactivity; import android.os.bundle; import android.webkit.webview; public class ContactActivity extends AppCompatActivity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_contact); String url = " //Pendefinisian URL WebView view = (WebView) this.findviewbyid(r.id.webview3); //sinkronisasi object berdasarkan id view.getsettings().setjavascriptenabled(true); //untuk mengaktifkan javascript view.loadurl(url); //agar URL terload saat dibuka aplikasi 67

14 Tampilan Berita pada User Dalam tampilan pada Berita, terdapat berita mengenai jakarta, activity ini menggunakan webview dalam penerapannya. Gambar 4.13 Tampilan Berita pada User Berikut potongan kode program pada Berita: String url = " //Pendefinisian URL WebView view = (WebView) this.findviewbyid(r.id.webview4); //sinkronisasi object berdasarkan id view.getsettings().setjavascriptenabled(true); //untuk mengaktifkan javascript view.loadurl(url); //agar URL terload saat dibuka aplikasi view.setwebviewclient(new MainWebViewClient()); private class MainWebViewClient extends public boolean shouldoverrideurlloading(webview view, String url){ Log.i("Log","loading:"+url); view.loadurl(url); return true;

15 4.4.9 Tampilan Laporan pada User Dalam tampilan Laporan, terdapat informasi mengenai laporan yang sudah masuk kedalam sistem. Pada activity ini menggunakan webview dalam penerapannya. Gambar 4.14 Tampilan Laporan pada User Berikut potongan kode program pada Laporan: package com.developer.aguspermadi.ayolaporbinamarga; import android.support.v7.app.appcompatactivity; import android.os.bundle; import android.webkit.webview; public class LaporanActivity extends AppCompatActivity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_laporan); String url = " //Pendefinisian URL WebView view = (WebView) this.findviewbyid(r.id.webview5); //sinkronisasi object berdasarkan id view.getsettings().setjavascriptenabled(true); //untuk mengaktifkan javascript view.loadurl(url); //agar URL terload saat dibuka aplikasi 69

16 Tampilan Login Admin Dalam tampilan 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 Login Admin Tampilan About Us pada Admin Dalam tampilan WebServer pada halaman About us ini, terdapat informasi mengenai Visi dan Misi pada Dinas Bina Marga Provinsi DKI Jakarta. Gambar 4.16 Tampilan About Us pada Admin

17 Tampilan Dashboard pada Admin Dalam tampilan WebServer pada halaman Dashboard ini, terdapat informasi mengenai pelapor dan pengaduan yang masuk ke dalam sebuah sistem. Gambar 4.17 Tampilan Dashboard pada Admin Tampilan Kelola Pelapor pada Admin Dalam tampilan WebServer pada halaman Kelola Pelapor ini, terdapat informasi mengenai pelapor, implementasi pada WebServer ini berguna untuk admin mengelola data dari pelapor. Gambar 4.18 Tampilan Kelola Pelapor pada Admin 71

18 Tampilan Kelola Pengaduan pada Admin Dalam tampilan WebServer pada halaman Kelola Pengaduan ini, terdapat informasi mengenai pengaduan, implementasi pada WebServer ini berguna untuk admin mengelola pengaduan yang masuk ke dalam sebuah database. Gambar 4.19 Tampilan Kelola Pengaduan pada Admin Tampilan Laporan/Report pada Admin Dalam tampilan WebServer pada halaman Laporan ini, terdapat informasi mengenai laporan pengaduan, implementasi pada WebServer ini berguna untuk admin mengetahui hasil laporan, yang bisa di konversi menjadi PDF. Gambar 4.20 Tampilan Report/Laporan pada Admin

19 Gambar 4.21 Tampilan 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 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. 73

20 74 Tabel 4.3 Tabel Skenario Pengujian No. Antar Uji Coba Status Skenario Hasil Pengujian Muka Aplikasi Pengujian 1. Memasukkan Jika username dan Login inputan (input Login pada username dan password salah maka (Android) data) yang User telah password yang halaman utama tidak terdapat dalam benar tersebut, dan kesesuaian fungsi yang telah dibuat Memasukkan username dan password yang salah Jika username dan password benar maka halaman utama akan 2. Memasukkan Jika data yang di inputkan Register inputan (input Register username, telah benar maka akan (Android) data) yang pada User password, name pindah ke activity login, terdapat dalam telah dan phone yang untuk memasukkan benar username dan password tersebut, dan kembali. kesesuaian fungsi yang telah dibuat 3. dengan Akan muncul tampilan Menu button-button Menu menekan button- Activity lain sesuai button Utama yang terdapat Utama button apakah yang ditekan. (Android) dalam pada user sesuai dengan yg telah diharapkan. tersebut, dan kesesuaian fungsi yang telah dibuat 4. Melihat apakah Aplikasi menampilkan Tentang button-button Tentang konten yang berisi informasi mengenai Dinas Dinas Bina yang terdapat Bina benar tentang Bina Marga Marga dalam Marga Dinas Bina Marga (Android) telah tersebut

21 No. Antar Uji Coba Status Skenario Hasil Pengujian Muka Aplikasi Pengujian 5. Melihat apakah Aplikasi menampilkan Visi dan button-button Visi dan konten yang berisi informasi mengenai Visi dan Misi Bina yang terdapat Misi telah benar tentang Visi Misi Dinas Bina Marga Marga dalam dan Misi Dinas (Android) Bina Marga tersebut 6. dengan Jika data yang Buat Issue button-button Buat issue memasukkan dimasukkan kurang maka atau Buat dan Textfield telah data, apakah sistem tidak akan Laporan yang terdapat aplikasi dapat merespon (Android) dalam tersebut bekerja sesuai dengan fungsinya Jika data yang dimasukkan sudah lengkap maka sistem akan memproses. 7. Melihat apakah Aplikasi menampilkan Kontak button-button Kontak konten berisi informasi mengenai Kontak (Android) yang terdapat telah benar tentang Dinas Bina Marga dalam kontak pada Dinas Bina Marga tersebut 8. Melihat apakah Aplikasi menampilkan Berita button-button Berita konten berisi informasi mengenai Berita (Android) yang terdapat telah benar tentang yang terkait dengan Jakarta. dalam Berita Jakarta tersebut 9. Melihat apakah Jika ketika membuat Issue Laporan button-button Laporan konten berisi laporan yang kita buat (Android) yang terdapat telah benar tentang benar maka pada halaman dalam Laporan pada laporan, pelapor bisa Dinas Bina Marga melihat laporannya telah tersebut terkirim. 10. Memasukkan Jika username dan Login login username dan password salah maka Admin Login Admin admin password yang halaman utama tidak (Web) benar 75

22 76 telah Memasukkan Jika username dan username dan password benar maka password yang halaman utama akan salah 11. Memasukkan Jika username dan Login Suku login suku username dan password salah maka Dinas Login Suku dinas telah password yang halaman utama tidak (Web) Dinas benar Memasukkan Jika username dan username dan password benar maka password yang halaman utama akan salah 12. dengan Telah berhasil Kelola button-button kelola menekan button menambahkan pelapor Pelapor (Web) yang terdapat dalam tersebut pelapor telah tambah dengan menekan button edit Telah berhasil mengedit data pelapor Telah berhasil menghapus data pelapor pada dengan database. menekan button hapus 13. dengan Telah berhasil Kelola button-button kelola menekan button menambahkan pengaduan Pengaduan (Web) yang terdapat dalam tersebut pengaduan telah tambah dengan menekan button edit Telah berhasil mengedit data pengaduan Telah berhasil menghapus data pengaduan pada dengan database. menekan button hapus 14. dengan Telah berhasil menampilkan Report button-button report telah kesesuaian keluaran berupa laporan (Web) yang terdapat tanggal per harian/bulanan. dalam periode untuk sebuah laporan tersebut 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. 6. Pelapor juga dapat melihat berita mengenai Jakarta yang diambil melalui beritajakarta.com. 7. Pelapor juga dapat melihat hasil laporan yang telah ia laporkan melalui aplikasi pelayanan pengaduan pada Dinas Bina Marga DKI Jakarta. 8. Pelapor juga bisa keluar dari aplikasi tersebut. 77