20
BAB IV
RANCANGAN SISTEM DAN PROGRAM USULAN
4.1. Analisa Kebutuhan Software
A. Tahapan Analisis
Berikut ini spesifikasi kebutuhan (system requirement) dari aplikasi
peLayanan masyarakat yaitu:
Halaman Masyarakat:
A1. Masyarakat melakukan daftar akun
A2. Masyarakat melakukan login dengan input Username dan password.
A3. Masyarakat input jenis laporan
Halaman Bagian Layanan:
B1. Bagian Layanan melakukan login dengan input Username dan password.
B2. Bagian Layanan melakukan verifikasi laporan baru
B3. Bagian Layanan lihat data laporan masyarakat
Halaman Bagian Penindakan:
C1. Bagian Penindakan
melakukan login dengan input Usernname dan
password.
C2. Bagian Penindakan melakukan update data laporan
C3. Bagian Penindakan lihat data laporan
B. Use Case Diagram
1. Use Case Diagram Masyarakat Input Laporan
Gambar IV.1 Use Case Diagram Masyarakat Input Laporan
Deskripsi Use Case Diagram Masyarakat Input Laporan:
Tabel IV.1
Deskripsi Use Case Masyarakat Input Laporan
Use Case Name
Input Laporan
Requirements
A1,A2,A3
Goal
Masyarakat dapat input Laporan
Pre-condition
Masyarakat daftar,login
Post-condition
Masyarakat simpan input Laporan
Failed end condition
Masyarakat gagal simpan
Primary Actor
Masyarakat
Main Flow/Basic Path
1. Masyarakat melakukan daftar akun
2. Masyarakat melakukan login
3. Masyarakat Input data Laporan
Invariant
-
uc Masyarakat
Masyarakat
Login
Daftar Akun
Input Jenis Laporan
Input Username dan Passw ord
2. Use Case Diagram Halaman Bagian Layanan
Gambar IV.2 Use Case Diagram Halaman Layanan
Deskripsi Use Case Diagram Halaman Layanan:
Tabel IV.2
Use Case Diagram Halaman Layanan
Use Case Name
Halaman layanan
Requirements
B1,B2,B3
Goal
Layanan dapat verifikasi dan menampilkan data
laporan
Pre-Conditions
Layanan melakukan login
Post-Conditions
Data laporan terverifikasi
Failed end condition
Gagal verifikasi
Primary Actors
Layanan
Main Flow / Basic Path
1. Layanan melakukan login
2. Layanan verifikasi laporan baru
3. Layanan lihat data laporan masyarakat
Alternate Flow/Invariant 1
-
Invarian 2
-
uc Layanan
Layanan
login
Verifikasi Laporan Baru
Lihat Data Laporan Masyarakat
Input Username dan Passw ord
3. Use Case Diagram Halaman Penindakan
Gambar IV.3 Use Case Diagram Halaman Penindakan
Deskripsi Use Case Diagram Halaman Penindakan:
Tabel IV.3
Use Case Diagram Halaman Penindakan
Use Case Name
Halaman Penindakan
Requirements
C1,C2,C3
Goal
Penindakan dapat update Laporan
Pre-Conditions
Penindakan melakukan login
Post-Conditions
Data Laporan terupdate
Failed end condition
Gagal update Laporan
Primary Actors
Penindakan
Main Flow / Basic Path
1. Penindakan melakukan login
2. Penindakan update data Laporan
3. Penindakan lihat data Laporan
Alternate Flow/Invariant 1
-
Invarian 2
-
uc Penindakan
Penindakan
login
Update Data Laporan
Lihat Data laporan
Input Username dan Passw ord
C. Activity Diagram
1. Activity Diagram Halaman Masyarakat Input Laporan
Gambar IV.4 Activity Diagram Halaman Masyarakat Input Laporan
act Sistem Layanan Masyarakat
Masyarakat
Mulai
Buka Aplikasi
input username
dan password Sesuai?
Masuk sistem layanan Pilih Menu Laporan Kejadian Selesai Input Data Simpan Data Aplikasi Mobile [Tidak] [Ya]
2. Activity Diagram Layanan Verifikasi Laporan
Gambar IV.5 Activity Diagram Layanan Verifikasi Laporan
act Sistem Layanan Masyarakat
Bagian Layanan
Mulai
Buka Aplikasi
input username
dan password Sesuai?
Masuk sistem layanan Pilih Menu Laporan Kejadian Selesai Verifikasi Data Laporan Simpan Data Aplikasi Mobile [Tidak] [Ya]
3. Activity Diagram Penindakan Update Data Laporan
Gambar IV.6 Activity Diagram Penindakan Update Data Laporan
act Sistem Layanan Masyarakat
Bagian Penindakan
Mulai
Buka Aplikasi
input username
dan password Sesuai?
Masuk sistem layanan Pilih Menu Laporan Kejadian Selesai Update Data Laporan Simpan Data Aplikasi Mobile [Tidak] [Ya]
4.2. Desain
4.2.1. Database
1. Entity Relationship Diagram
Tb_Pengguna Isi Tb_Kejadian mengelola Tb_Petugas
Nama_pengguna kronologi jenis Photo_kejadian Tgl_kejadian No_kejadian photo password email Id_pengguna password No_telepon Jenis_kelamin Nama_petugas No_induk status Id_pengguna photo Akses No_induk 1 1 1 1
Gambar IV.7 Entity Relationship Diagram
2. Logical Record Structure
Penggambaran hubungan antar tabel dalam website ini dapat di gambarkan
sebagai berikut:
Tb_pengguna PK Id_pengguna Nama_pengguna email password photo Tb_petugas PK No_induk Nama_petugas Jenis_kelamin No_telepon Password Akses Photo Tb_kejadian PK No_kejadian Tgl_kejadian Photo_kejadian Jenis Kronologi status Id_pengguna No_indukGambar IV.8. Logical Record Structure
3. Spesifikasi File
a. Nama file
: Tabel Pengguna
Akronim
: tb_pengguna.myd
Fungsi
: Untuk menyimpan data pengguna
Tipe
: File master
Panjang Karakter : 121 karakter
Akses file
: Random (Acak)
Kunci field
: id_pengguna
Tabel IV.4. Spesifikasi File Tabel Pengguna
No Elemen Data
Akronim
Type
Size
Ket
1
Id_pengguna
Id_pengguna
Int
11
Primary key
2
Nama_pengguna Nama_pengguna
Varchar
60
3
Text
-
4
password
password
Varchar
50
5
photo
photo
Text
-
b. Nama file
: Tabel Petugas
Akronim
: Tb_petugas.myd
Fungsi
: Untuk Menyimpan Data Petugas
Tipe
: File Master
Organisasi file
: Index sequential
Panjang Karakter : 93 karakter
Akses file
: Random (Acak)
Kunci field
: No_induk
Tabel IV.5. Spesifikasi File Tabel Petugas
No
Elemen Data
Akronim
Type
Size
Ket
1
No_induk
No_induk
Varchar
20
Primary Key
2
Nama_petugas
Nama_petugas
Varchar
60
3
Jenis_kelamin
Jenis_kelamin
Enum
„Laki-Laki‟,‟Perm
puan‟
-
4
No_telepon
No_telepon
Varchar
13
5
Password
Password
Text
-
6
Akses
Akses
Enum
„Layanan‟,‟
Penindakan‟
7
Photo
Photo
Text
-
c. Nama file
: Tabel Kejadian
Akronim
: Tb_kejadian.myd
Fungsi
: Untuk Menyimpan Data Laporan
Tipe
: File Transaksi
Organisasi file
: Index sequential
Panjang Karakter : 103 karakter
Akses file
: Random (Acak)
Kunci field
: no_Laporan
Tabel IV.6. Spesifikasi File Tabel Laporan
1
no_Laporan
No_kejadian
Int
11
Primary Key
2
Nama_Laporan
Tgl_kejadian
Varchar
20
3
Deskripsi
Photo_kejadian
Text
30
4
Tgl_mulai
Jenis
Date
-
5
Tgl_selesai
Kronologi
Date
-
6
Nilai_Laporan
Id_pengguna
Varchar
20
Forgien Key
7
Status
Status
Enum‟ On
Going‟,‟Proses‟
-
8
No_induk
No_induk
Varchar
20
Forgien Key
4.2.2. Software Architecture
A. Component Diagram
Gambar IV.9. Component Diagram
B. Deployment Diagram
Gambar IV.10. Deployment Diagram
cmp Component Model
Serv er
database layanan Serv er Aplikasi Layanan Masyarakat
User Layanan Client
«use»
deployment Deployment Model
«executionEnvironment»
Serv er
«device»
User Layanan Aplikasi Layanan Masyarakat
«device» Serv er Aplikasi :: Layanan Client Tcp Ip «use» «use»
4.2.3. User Interface
1. Halaman Loading Aplikasi Halaman Masyarakat
Gambar IV.11. Halaman Loading Aplikasi Halaman Masyarakat
Gambar IV.12. Halaman Login Masyarakat
3. Halaman Utama Masyarakat
Gambar IV.13. Halaman Utama Masyarakat
4. Halaman Input Laporan
5. Halaman Informasi
Gambar IV.15. Halaman Informasi
Gambar IV.16. Halaman Halaman Login User Layanan dan Penindakan
7. Halaman Utama Bagian Layanan
Gambar IV.17. Halaman Utama Bagian Layanan
8. Halaman Laporan Masyarakat
4.3. Code Generation
inputLaporan
package com.example.simpel; import android.app.ProgressDialog; import android.content.Intent; import android.graphics.Bitmap; import android.os.Build; import android.os.Bundle; import android.provider.MediaStore; import android.support.annotation.Nullable; import android.support.design.widget.TextInputEditText; import android.support.v4.app.Fragment; import android.util.Base64; import android.util.Log; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.Button; import android.widget.EditText; import com.android.volley.VolleyError; import com.android.volley.toolbox.StringRequest; import com.android.volley.toolbox.Volley; import com.bumptech.glide.Glide; import com.example.simpel.setting.UserParcelable; import org.json.JSONException; import org.json.JSONObject; import java.io.ByteArrayOutputStream; import java.io.IOException; import java.util.HashMap; import java.util.Map;import static android.app.Activity.RESULT_OK; public class lapor extends Fragment {
private ImageView imagePhoto; private EditText kronologi; private Button simpan; private String lnama,email; private Spinner jenis; private int ident;
private UserParcelable user; private int request_code = 1; private Bitmap bitmap;
private ProgressDialog progressbar; RequestQueue requestQueue; StringRequest stringRequest; View view;
@Nullable @Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
view = inflater.inflate(R.layout.fragment_lapor, container, false); imagePhoto = (ImageView) view.findViewById(R.id.gambar_profil); kronologi = (EditText) view.findViewById(R.id.t_kronologi); jenis =(Spinner) view.findViewById(R.id.jenis);
simpan = (Button)view.findViewById(R.id.btn_simpan); requestQueue = Volley.newRequestQueue(getActivity()); simpan.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) { simpan();
} });
imagePhoto.setOnClickListener(new View.OnClickListener() { @Override
public void onClick(View v) { Intent i = null;
//verificacion de la version de plataforma if(Build.VERSION.SDK_INT < 19){ //android 4.3 y anteriores i = new Intent(); i.setAction(Intent.ACTION_GET_CONTENT); }else { //android 4.4 y superior i = new Intent(Intent.ACTION_OPEN_DOCUMENT); i.addCategory(Intent.CATEGORY_OPENABLE); } i.setType("image/*"); startActivityForResult(i, request_code); } }); @Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) { super.onViewCreated(view, savedInstanceState);
//you can set the title for your toolbar here for different fragments different titles getActivity().setTitle("Form Laporan ");
try{
Bundle bundle = getActivity().getIntent().getExtras(); user = bundle.getParcelable("DATA_USER"); if(bundle!=null){
ident = user.getId(); email=user.getEmail(); private void simpan() { if (!validasi()) return;
progressbar = new ProgressDialog(getActivity()); progressbar.setMessage("Menunggu...");
progressbar.show();
String url = "http://192.168.43.227/Korlantas/Laporan/Api/simpan.php?"; stringRequest = new StringRequest(Request.Method.POST, url, new Response.Listener<String>() {
@Override
public void onResponse(String response) {
UserParcelable userParcelable = new UserParcelable();; Log.i("Respon Json: ",""+response);
try {
JSONObject jsonObject = new JSONObject(response); if(jsonObject.names().get(0).equals("success")){ kronologi.setText(""); oast.makeText(getActivity(),jsonObject.getString("success"),Toast.LENGTH_SHORT).show(); progressbar.dismiss(); }else{ Toast.makeText(getActivity(),jsonObject.getString("error"),Toast.LENGTH_SHORT).show(); Log.i("Respon JSON: ",""+jsonObject.getString("error"));
}
} catch (JSONException e) { e.printStackTrace();
}
progressbar.dismiss(); }
}, new Response.ErrorListener() { @Override
public void onErrorResponse(VolleyError error) { Toast.makeText(getActivity(),"Tidak menjangkau server",Toast.LENGTH_SHORT).show(); Log.i("ERROR: ",""+error.toString()); progressbar.dismiss(); } }){ @Override
protected Map<String, String> getParams() throws AuthFailureError { // String sEmail = jenis.getText().toString();
String sNama = kronologi.getText().toString(); String sImagePhoto = convertirImgString(bitmap); String sId = Integer.toString(ident);
String sJenis = jenis.getSelectedItem().toString(); Map<String,String> parameter = new HashMap<>(); parameter.put("id",sId); parameter.put("jenis",sJenis); parameter.put("kronologi",sNama); parameter.put("photo",sImagePhoto); return parameter; } }; requestQueue.add(stringRequest); }
private String convertirImgString(Bitmap bitmap) { String imagenString;
ByteArrayOutputStream array=new ByteArrayOutputStream(); if(bitmap!=null){
bitmap.compress(Bitmap.CompressFormat.JPEG,100,array); byte[] imagenByte=array.toByteArray();
imagenString= Base64.encodeToString(imagenByte,Base64.DEFAULT); }else{
imagenString = "Tidak ada gambar"; }
return imagenString; }
private boolean validasi() { boolean valid = true;
String sNama = kronologi.getText().toString(); String sImage = convertirImgString(bitmap); if (sNama.isEmpty() || sNama.length() < 50) {
kronologi.setError("Kronologi harus di isi minimal 50 karakter"); valid = false; } else { kronologi.setError(null); } return valid; } }
4.4. Testing
a. Login Masyarakat
Tabel IV.7. Hasil Pengujian Black Box Testing Form Login Masyarakat
No
Skenario
Pengujian
Test Case
Hasil yang
diharapkan
Hasil
Pengujian
Kesim
pulan
1.
Mengkosongkan
semua data, lalu
tekan tombol
“login”
No KTP:
(kosong)
Password:
(kosong)
Sistem akan menolak
dan menampilkan pesan
“Isi dulu bagian
Kursor”
Sesuai
harapan
Valid
2.
Mengisi semua
dan Username
salah, lalu tekan
tombol “login”
No KTP:
084898383922
1
Password:
12345678
Sistem akan menolak
dan menampilkan pesan
“Maaf, Username
admi@gmail.com tidak
dikenal.”
Sesuai
harapan
Valid
3.
Mengisi semua
data dengan
benar dan
lengkap, lalu
tekan tombol
“login”
No KTP:
084898383922
1
Password:
12345678
Sistem menerima akses,
dan masuk kehalaman
utama
Sesuai
harapan
Valid
b. Daftar Masyarakat
Tabel IV.8 Hasil Pengujian Black Box Testing Form Daftar Akun
NO SkenarioPengujian
Test Case Hasil Yang diharapkan Hasil Pengujian Kesimpul an
1.
Mengkosongka
n semua data,
lalu tekan
tombol
“Daftar”
No KTP:
(kosong)
No Telepon:
(kosong)
Password:
(kosong)
Sistem akan
menolak dan
kursor berada
pada data yang
belum terisi
Sesuai
harapan
Valid
2.
Mengkosongka
n Salah satu,
lalu tekan
tombol
“Daftar”
No KTP:
343234234244
No Telepon:
08675848848
Password:
(kosong)
Sistem akan
menolak dan
kursor berada
pada data yang
belum terisi
Sesuai
harapan
Valid
3.
Mengisi semua
data dengan
benar dan
lengkap, lalu
tekan tombol
No KTP:
343234234244
No Telepon:
08675848848
Password:
Sistem menerima
akses.
Sesuai
harapan
Valid
“Daftar”
12345678
c. Laporan Masyarakat
Tabel IV.9 Hasil Pengujian Black Box Testing Form Laporan Masyarakat
NO SkenarioPengujian
Test Case Hasil Yang diharapkan Hasil Pengujian Kesimpul an
