Layanan Pengaduan

35

No. Aktor Deskripsi

pengaduan yang akan diproses.

c. Definisi Use Case
Berikut adalah deskripsi pendefinisian use case untuk Android yang

digunakan oleh masyarakat dan use case untuk aplikasi berbasis web yang
digunakan oleh super admin dan admin pada sistem layanan pengaduan
masyarakat.
Tabel 3.4 Definisi Use Case untuk Android

No. Use case Deskripsi
UC01 Login aplikasi Merupakan proses untuk melakukan login
UC02 Logout aplikasi user
UC03 Melihat pengaduan Merupakan proses untuk melakukan logout
UC04 Menambah pengaduan user
UC05 Melihat berita Merupakan proses menampilkan pengaduan
UC06 Melihat akun yang telah kirim
UC07 Mengubah profil Merupakan proses menambahkan pengaduan
UC08 Mengubah password yang dilakukan oleh user (masyarakat)
UC09 Membuat akun Merupakan proses menampilkan berita yang
berkaitan dengan BPOM Kota Pontianak
Merupakan proses melihat data akun milik
user
Merupakan proses mengubah detail profil
milik user
Merupakan proses mengubah password milik
user
Merupakan proses registrasi akun untuk user
yang akan menggunakan aplikasi

36

Tabel 3.5 Definisi Use Case untuk Web

No. Use case Deskripsi
UC10 Login web Merupakan proses untuk melakukan login
super admin dan admin
UC11 Logout web Merupakan proses untuk melakukan logout
super admin dan admin

UC12 Melihat berita Merupakan proses untuk menampilkan data
berita yang telah dibuat

UC13 Menambah data berita Merupakan proses untuk menambah data
berita terbaru

UC14 Mengubah data berita Merupakan proses untuk mengubah data
berita
UC15 Menghapus data berita Merupakan proses untuk menghapus data
berita
UC16 Melihat data
pengaduan Merupakan proses untuk melihat data
pengaduan yang telah masuk ke sistem

UC17 Mengubah data Merupakan proses untuk mengubah status
pengaduan pengaduan yang telah masuk. Pengaduan
yang masuk di kelola oleh bidang infokom
dan pimpinan yang kemudian hasilnya akan
di kirim kembali ke pelapor

3.3.2.4 Perancangan Activity Diagram
Activity diagram menggambarkan alur kerja atau aktivitas pada sistem

yang bertujuan untuk melihat alur proses sistem secara bertahap. Activity diagram
dibuat berdasarkan sebuah atau beberapa use case pada use case diagram.
a. Activity Diagram Login User

Berikut adalah activity diagram login user dapat dilihat pada Gambar 3.6.

37

Gambar 3.6 Activity Diagram Login User
Pada Gambar 3.6, dapat dilihat bahwa saat login, user memasukkan email
atau username dan password, kemudian aplikasi akan mengecek jika email atau
username dan password benar maka aplikasi akan menampilkan halaman home,
jika salah maka akan kembali menampilkan halaman login.
b. Activity Diagram Pendaftaran
Berikut adalah activity diagram pendaftaran akun user pada Android dapat
dilihat pada Gambar 3.7.

38

Gambar 3.7 Activity Diagram Pendaftaran User
Pada Gambar 3.7, dapat dilihat bahwa saat membuat akun, user
memasukkan nama lengkap, username, email, dan password. Selanjutnya aplikasi
mengecek email atau username yang sudah terdaftar jika sudah maka akan
kembali ke halaman pendaftaran, jika email yang dimasukkan tidak ada maka
pendaftaran berhasil dan aplikasi akan menampilkan halaman login.
c. Activity Diagram Login Bidang Infokom dan Pimpinan
Berikut adalah activity diagram login pada web dapat dilihat pada Gambar
3.8.

39

Gambar 3.8 Activity Diagram Login pada Web
Pada Gambar 3.8, dapat dilihat bahwa saat login, infokom dan pimpinan
mengisi username dan password jika berhasil maka akan tampil halaman beranda
infokom atau pimpinan dan jika gagal makan akan kembali ke halaman login.
d. Activity Diagram Kelola Akun
Berikut adalah activity diagram kelola akun user pada android dapat
dilihat pada Gambar 3.9.

40

Gambar 3.9 Activity Diagram Kelola Akun
Pada Gambar 3.9, dapat dilihat bahwa pada halaman akun dapat dilakukan
logout, ubah profil, dan ubah password. Pada saat mengubah password, ubah
profil, dan logout maka ditampilkan halaman ubah password, halaman ubah
profil, dan halaman login.
e. Activity Diagram Pengaduan
Berikut adalah activity diagram pengaduan yang dilakukan user dapat
dilihat pada Gambar 3.10.

41

Gambar 3.10 Activity Diagram Pengaduan
Pada Gambar 3.10, dapat dilihat bahwa user memilih menu aduan,
kemudian aplikasi menampilkan halaman list pengaduan yang sudah pernah user
buat. Selanjutnya user membuka form pengaduan dan kemudian mengisi form
pengaduan. Jika melanjutkan mengisi pengaduan maka aplikasi akan
menampilkan data pengaduan yang telah diisi, jika batal melakukan pengaduan
maka kembali ke halaman daftar pengaduan yang telah di buat oleh user. Data
pengaduan yang telah dikirim akan tampil di halaman aduan pada Bidang
Infokom yang kemudian pengaduan tersebut akan diproses lebih lanjut.
f. Activity Diagram Proses Pengaduan pada Bidang Infokom
Berikut adalah activity diagram proses pengaduan dapat dilihat pada
Gambar 3.11.

42

Gambar 3.11 Activity Diagram Proses Pengaduan pada Infokom
Pada Gambar 3.11, dapat dilihat bahwa user dengan role bidang infokom
yang telah login memilih menu aduan, kemudian aplikasi menampilkan halaman
daftar aduan yang telah masuk ke sistem. User tersebut memilih pengaduan yang
akan diproses lebih lanjut. Pada halaman detail aduan, user tersebut dapat
melakukan membalas pengaduan, memproses pengaduan, dan mengubah status
aduan. Pada saat melakukan memproses pengaduan dan mengubah status
pengaduan, halaman akan kembali ke halaman detail pengaduan dengan data yang
telah berubah. Pada saat melakukan membalas pengaduan maka akan
menampilkan halaman percakapan antara user dari masyarakat dan user dengan
role bidang infokom.

43
g. Activity Diagram Proses Pengaduan pada Pimpinan

Berikut adalah activity diagram proses pengaduan dapat dilihat pada
Gambar 3.12.

Gambar 3.12 Activity Diagram Proses Pengaduan pada Pimpinan
Pada Gambar 3.12, dapat dilihat bahwa user dengan role pimpinan BPOM
yang telah login dapat memilih menu tindak lanjut yang kemudian aplikasi akan
menampilkan halaman yang berisi daftar pengaduan yang akan di tindak lanjut.
Selanjutnya user memilih pengaduan yang akan di tindak lanjut dan menampilkan
halaman detail pengaduan. User tersebut dapat memilih disposisi dan memilih
kirim jawaban langsung dengan menjawab pertanyaan dari aduan yang masuk.
Saat memilih diposisi maka aplikasi akan menampilkan halaman form disposisi
dan saat memilih kirim jawaban maka aplikasi akan menampilkan halaman form
jawaban. Setelah user mengisi form disposisi dan form jawaban, maka selanjutnya
aplikasi menampilkan halaman detail pengaduan yang datanya telah berubah.

44
h. Activity Diagram Data Berita

Berikut adalah activity diagram data berita dapat dilihat pada Gambar
3.13.

Gambar 3.13 Activity Diagram Data Berita
Pada Gambar 3.13, dapat dilihat bahwa user dengan role infokom dapat
melakukan tambah, edit, hapus data berita. Untuk menambah, mengedit, dan
menghapus data berita, dengan cara memilih menu berita. Aplikasi menampilkan
form tambah, edit, dan hapus berita. Setelah itu user tersebut mengisi form
tambah, edit, dan hapus berita dan aplikasi akan menampilkan halaman data berita
yang telah ditambah dan diubah. Data yang telah diubah akan tampil di halaman
menu berita pada aplikasi user dengan role masyarakat. Data yang tampil seperti
list berita dan detail dari berita.

45
3.3.2.5 Perancangan Class Diagram

Class diagram merupakan salah satu diagram utama dari UML untuk
menggambarkan class atau blueprint object pada sebuah sistem. serta memiliki
atribut dan operasi yang terdapat dalam sistem. Analis pembentukan class
diagram, merupakan aktivitas inti yang sangat mempengaruhi arsitektur piranti
lunak yang dirancang hingga ke tahap pengkodean.

Gambar 3.14 Class Diagram Sistem
3.3.2.6 Perancangan Sequence Diagram

Sequence diagram adalah diagram yang menjelaskan interaksi objek
berdasarkan urutan waktu. Sequence diagram menggambarkan urutan atau
tahapan yang harus dilakukan pengguna. Diagram ini menujukkan sejumlah
contoh objek dan pesan yang melakukan satu tugas atau aksi tertentu. Komponen
utama sequence diagram terdiri atas objek yang dituliskan dengan kotak persegi.

46
Pesan diwakili oleh garis dengan tanda panah dan waktu yang ditunjukkan dengan
progress vertikal.
a. Sequence Diagram Login User

Berikut adalah sequence diagram login user data dapat dilihat pada
Gambar 3.15.

Gambar 3.15 Sequence Diagram Login User
Pada Gambar 3.15, dapat dilihat bahwa user melakukan login pada sistem
menggunakan UserController dengan mengakses login form terlebih dahulu,
kemudian user mengisi login form yang dibutuhkan. Setelah user masuk
menggunakan fungsi login(), sistem akan mengecek data pada basis data, apabila
data user ada maka user akan masuk ke halaman dashboard.
b. Sequence Diagram Tambah Data Berita
Berikut adalah sequence diagram tambah data berita dapat dilihat pada
Gambar 3.16.

47

Gambar 3.16 Sequence Diagram Tambah Berita
Pada Gambar 3.16, dapat dilihat bahwa admin dari staff bidang infokom
mengakses halaman daftar berita dengan menggunakan fungsi index() pada
BeritaController terlebih dahulu. Kemudian sistem menampilkan halaman form
tambah berita yang selanjutnya admin mengisi form tersebut sesuai kebutuhan.
Apabila sudah di isi, sistem akan mengirimkan isi dari form tersebut ke basis data
menggunakan fungsi store(). Sistem akan mengecek terlebih dahulu mengenai
data yang sudah di isi pada form, apabila data belum lengkap maka sistem akan
menampilkan pesan error. Apabila data sudah lengkap, maka data akan di simpan
pada tabel beritas di basis data dan sistem akan kembali ke halaman daftar berita.
c. Sequence Diagram Edit Data Pengaduan
Berikut adalah sequence diagram edit data pengaduan dapat dilihat pada
Gambar 3.17.

48

Gambar 3.17 Sequence Diagram Edit Data Pengaduan
Pada Gambar 3.17, dapat dilihat bahwa admin dari staff bidang infokom
mengakses halaman daftar aduan dengan menggunakan fungsi index() terlebih
dahulu. Kemudian sistem menampilkan halaman daftar aduan yang selanjutnya
admin dapat membuka aduan tersebuat dengan menggunakan fungsi show().
Setelah masuk ke dalam aduan yang dipilih, admin dapat mengubah data aduan
yang masuk menggunakan AduanController yang terdapat pada sistem. Apabila
data sudah tersimpan pada tabel Aduan di basis data, maka sistem akan kembali
menampilkan halaman daftar aduan.
d. Sequence Diagram Tambah Data Admin
Berikut adalah sequence diagram tambah data admin dapat dilihat pada
Gambar 3.18.

49

Gambar 3.18 Sequence Diagram Tambah Admin
Pada Gambar 3.18, dapat dilihat bahwa admin dari staff bidang infokom
mengakses halaman daftar user dengan menggunakan fungsi index() pada
UserController terlebih dahulu. Kemudian sistem menampilkan halaman form
tambah user yang selanjutnya admin mengisi form tersebut sesuai kebutuhan.
Apabila sudah di isi, sistem akan mengirimkan isi dari form tersebut ke basis data
menggunakan fungsi store(). Sistem akan mengecek terlebih dahulu mengenai
data yang sudah di isi pada form, apabila data belum lengkap maka sistem akan
menampilkan pesan error. Apabila data sudah lengkap, maka data akan di simpan
pada tabel users di basis data dan sistem akan kembali ke halaman daftar berita.
e. Sequence Diagram Tambah Data Pengaduan
Berikut adalah sequence diagram tambah pengaduan dapat dilihat pada
Gambar 3.19.

50

Gambar 3.19 Sequence Diagram Tambah Pengaduan
Pada Gambar 3.19, dapat dilihat bahwa pengguna yaitu masyarakat
membuka aplikasi berbasis Android yang selanjutnya membuka halaman daftar
aduan menggunakan fungsi list_aduan() pada AduanController. Pada halaman
tersebut terdapat tombol tambah yang apabila di tekan maka akan masuk ke
halaman form aduan. User akan mengisi form aduan tersebut dengan sesuai
kebutuhan. Apabila sudah di isi, maka aplikasi akan mengirimkan data tersebut ke
tabel Aduans di basis data menggunakan fungsi AduanMasuk() pada
AduanController. Apabila data sudah tersimpan, maka user akan kembali ke
halaman daftar aduan yang sudah pernah user tersebut buat di dalam aplikasinya.
f. Sequence Diagram Buat Akun
Berikut adalah sequence diagram buat akun data dapat dilihat pada
Gambar 3.20.

51

Gambar 20 Sequence Diagram Buat Akun
Pada Gambar 3.20, dapat dilihat bahwa pengguna membuat akun dengan
menggunakan tapDaftar(), lalu aplikasi akan menampilkan form pendaftaran
akun, setelah itu pengguna mengisi data yang dibutuhkan untuk daftar akun. Jika
data lengkap maka akun berhasil dibuat oleh pengguna.
g. Sequence Diagram Ubah Profil
Berikut adalah sequence diagram ubah profil data dapat dilihat pada
Gambar 3.21.

52

Gambar 3.21 Sequence Diagram Ubah Profil
Pada Gambar 3.21, dapat dilihat bahwa pengguna mengubah data profil
melalui menu ubah profil, kemudian pengguna mengisi form untuk mengubah
data profil. Jika berhasil, maka data profil akan berubah.
h. Sequence Diagram Logout
Berikut adalah sequence diagram ubah password data dapat dilihat pada
Gambar 3.22.

Gambar 3.22 Sequence Diagram Logout

53

Pada Gambar 3.22, dapat dilihat bahwa pengguna melakukan keluar dari

akun menggunakan fungsi logout(), Jika logout berhaisl maka pengguna akan

kembali ke halaman awal aplikasi.

3.3.2.7 Perancangan Basis Data

Sistem ini memiliki 8 tabel, yang dapat dilihat pada rincian berikut.

a. Spesifikasi Tabel Role

Nama database : tugasakhir_db

Nama tabel : roles

Keterangan : tabel yang digunakan untuk menentukan tipe user

Tabel 3.6 Spesifikasi Tabel Role

Nama Field Tipe Boleh Kosong Keterangan

id int (10) Tidak Kunci Primer

rolename varchar(191) Tidak

ket varchar(191) Tidak

b. Spesifikasi Tabel User

Nama database : tugasakhir_db

Nama tabel : users

Keterangan : tabel yang digunakan untuk masuk ke dalam sistem

Tabel 3.7 Spesifikasi Tabel User

Nama Field Tipe Boleh Kosong Keterangan

id int (10) Tidak Kunci Primer

id_role int (10) Tidak Foreign Key

name varchar(199) Tidak

username varchar(150) Tidak

email varchar(150) Tidak

password varchar(199) Tidak

54

c. Spesifikasi Tabel Biouser

Nama database : tugasakhir_db

Nama tabel : biousers

Keterangan : tabel yang digunakan untuk melengkapi data User

Tabel 3.8 Spesifikasi Tabel Biouser

Nama Field Tipe Boleh Kosong Keterangan

id int (10) Tidak Kunci Primer

id_user int (10) Tidak Foreign Key

jk enum('Laki-Laki', Tidak
alamat
'Perempuan')

varchar(199) Tidak

profesi varchar(199) Tidak

instansi varchar(199) Tidak

no_hp varchar(199) Tidak

no_ktp varchar(199) Tidak

ktp varchar(199) Tidak

foto varchar(199) Tidak

d. Spesifikasi Tabel Aduan

Nama database : tugasakhir_db

Nama tabel : aduans

Keterangan : tabel yang digunakan untuk menyimpan data pengaduan

yang masuk

Tabel 3.9 Spesifikasi Tabel Aduan

Nama Field Tipe Boleh Kosong Keterangan

id int (10) Tidak Kunci Primer

id_user int (10) Tidak Foreign Key

status varchar(199) Tidak

55

Nama Field Tipe Boleh Kosong Keterangan
jenis_produk varchar(199) Tidak
nama_produk varchar(199) Tidak
no_reg varchar(199) Ya
tgl_exp date Ya
nama_pabrik varchar(199) Ya
alamat_pabrik varchar(199) Ya
no_batch varchar(199) Ya
lat double Tidak
lng double Tidak
alamat_beli varchar(199) Tidak
tgl_guna date Ya
info_lain varchar(199) Ya
isi varchar(255) Tidak
file varchar(199) Tidak

e. Spesifikasi Tabel Log Aduan

Nama database : tugasakhir_db

Nama tabel : log_aduans

Keterangan : tabel yang digunakan untuk menyimpan data proses

pengaduan yang masuk

Tabel 3.10 Spesifikasi Tabel Log Aduan

Nama Field Tipe Boleh Kosong Keterangan

id int (10) Tidak Kunci Primer

id_aduan int (10) Tidak Foreign Key

id_create int (10) Tidak Foreign Key

56

Nama Field Tipe Boleh Kosong Keterangan
status
bidang varchar(199) Tidak

note_disposisi enum('Bidang Ya
jawaban
Pengujian','Bidang

Pemeriksaan','Bidang

Penindakan','Bidang

Informasi dan

Komunikasi','Bagian

Tata Usaha')

varchar(199) Ya

varchar(255) Ya

f. Spesifikasi Tabel Laporan

Nama database : tugasakhir_db

Nama tabel : laporans

Keterangan : tabel yang digunakan untuk menyimpan data laporan yang

diunggah oleh admin mengenai jawaban pengaduan

Tabel 3.11 Spesifikasi Tabel Laporan

Nama Field Tipe Boleh Kosong Keterangan

id int (10) Tidak Kunci Primer

id_aduan int (10) Tidak Foreign Key

id_create int (10) Tidak Foreign Key

laporan_status Enum Tidak

('PENDING','APPROVED')

filename varchar(199) Tidak

keterangan varchar(255) Tidak

57

g. Spesifikasi Tabel Pesan
Nama database : tugasakhir_db
Nama tabel : pesans
Keterangan : tabel yang digunakan untuk menyimpan data percakapan
antara admin dan user yang mngirimkan pengaduan

Tabel 3.12 Spesifikasi Tabel Pesan
Nama Field Tipe Boleh Kosong Keterangan

id int (10) Tidak Kunci Primer

id_aduan int (10) Tidak Foreign Key

id_user int (10) Tidak Foreign Key

pesan varchar(199) Tidak

h. Spesifikasi Tabel Berita

Nama database : tugasakhir_db

Nama tabel : beritas

Keterangan : tabel yang digunakan untuk menyimpan data berita

Tabel 3.13 Spesifikasi Tabel Berita

Nama Field Tipe Boleh Kosong Keterangan

id int (10) Tidak Kunci Primer

id_create int (10) Tidak Foreign Key

judul varchar(199) Tidak

isi varchar(255) Tidak

gambar varchar(199) Ya

status varchar(25) Tidak

3.3.2.8 Perancangan Antarmuka
Antarmuka merupakan tampilan dari suatu program aplikasi yang berperan

sebagai sarana interaksi antara program dengan user. Sistem yang dibangun
diharapkan dapat menyediakan antarmuka yang mudah dimengerti dan mudah

58
digunakan oleh user. Berikut ini adalah perancangan antarmuka pada sistem yang
akan dibuat.
3.3.2.8.1 Perancangan Struktur Antarmuka Sistem

Adapun struktur antarmuka aplikasi dijabarkan sebagai berikut.

Gambar 3.23 Perancangan Struktur Antarmuka Sistem
Sistem ini merupakan aplikasi berbasis android dan website sebagai web
service yang nantinya setiap data yang masuk akan tersimpan di database.
Antarmuka aplikasi yang dibangun memiliki beberapa tampilan yang disesuaikan
dengan menu – menu aplikasi yang ada.
3.3.2.8.2 Perancangan Layout
Adapun perancangan layout dari aplikasi yang akan dibuat pada aplikasi
platform android menggunakan alat berupa perangkat lunak bernama Adobe XD
dan pada aplikasi berbasis web menggunakan alat bernama Draw io. Adapun
perancangan layout aplikasi dijabarkan sebagai berikut.

59
a. Perancangan Halaman Login Web

Halaman login berfungsi untuk menjaga keamanan sistem dan hanya yang
berhak dalam mengelola website yang diizinkan masuk ke dalam sistem. Halaman
ini berisi username serta password, apabila pengguna mengisikan data username
dan password dengan benar maka pengguna dapat mengakses halaman
manajemen data. Rancangan Halaman Login dapat dilihat pada Gambar 3.24.

Gambar 3.24 Rancangan Halaman Login Web
b. Perancangan Halaman Beranda

Halaman beranda berfungsi untuk menampilkan informasi data jumlah
pengaduan yang masuk dan diterima, jumlah pengaduan yang sedang diproses,
dan jumlah pengaduan yang telah selesai. Rancangan halaman beranda dapat
dilihat pada Gambar 3.25.

Gambar 3.25 Rancangan Halaman Beranda

60
c. Perancangan Halaman Semua Aduan

Halaman semua aduan berfungsi untuk mengelola data pengaduan yang
telah diterima. Rancangan Halaman Data aduan dapat dilihat pada Gambar 3.26.

Gambar 3.26 Rancangan Halaman Semua Aduan
d. Perancangan Halaman Detail Aduan

Halaman detail aduan berfungsi untuk melihat detail dari aduan yang
dipilih pada halaman semua aduan. Pada halaman ini, menampilkan data seperti
data pelapor, balasan, jawaban, dan log dari pengaduan yang masuk. Selain itu,
admin pada halaman ini dapat melanjutkan pengaduan agar dapat diproses, dan
dapat membalas pesan dari user yang mengirim pesan di aduan yang diterima.
Rancangan Halaman Detail Aduan dapat dilihat pada Gambar 3.27.

Gambar 3.27 Rancangan Halaman Detail Aduan

61

e. Perancangan Halaman Disposisi
Halaman disposisi berfungsi untuk mengelola data pengaduan yang

berstatus disposisi dan akan diproses oleh admin yaitu staff dari bidang Infokom
untuk dilanjutkan ke konsumen atau user atau akan diproses oleh bidang-bidang
terkait. Rancangan Halaman Disposisi dapat dilihat pada Gambar 3.28.

Gambar 3.28 Rancangan Halaman Disposisi
f. Perancangan Halaman Detail Disposisi

Halaman detail disposisi berfungsi untuk melihat detail dari aduan yang
dipilih pada halaman semua disposisi. Pada halaman ini, menampilkan data
seperti data pelapor dan detail aduan yang akan diberikan disposisi. Selain itu,
admin pada halaman ini dapat memberikan disposisi pengaduan agar dapat
ditindak lanjut. Rancangan Halaman Detail Disposisi dapat dilihat pada Gambar
3.29.

62

Gambar 3.29 Rancangan Halaman Detail Disposisi
g. Perancangan Halaman Detail Laporan

Halaman detail laporan berfungsi untuk melihat laporan yang telah di
unggah oleh admin. Rancangan Halaman Detail Laporan dapat dilihat pada
Gambar 3.30.

Gambar 3.30 Rancangan Halaman Detail Laporan
h. Perancangan Halaman User

Halaman data user berfungsi untuk mengelola data user seperti tambah
data user, edit data user, dan hapus data user. Rancangan Halaman Data User
dapat dilihat pada Gambar 3.31.

63

Gambar 3.31 Rancangan Halaman User
i. Perancangan Halaman Data Berita

Halaman data berita berfungsi untuk mengelola data berita seperti tambah
data berita, edit data berita, dan hapus data berita. Rancangan Halaman Data
Berita dapat dilihat pada Gambar 3.32.

Gambar 3.32 Rancangan Halaman Data Berita
j. Perancangan Halaman Login Android

Halaman login berfungsi untuk menjaga keamanan sistem dan hanya yang
berhak dalam mengelola android yang diizinkan masuk ke dalam sistem. Halaman
ini berisi username serta password, apabila pengguna mengisikan data username
dan password dengan benar maka pengguna dapat mengakses halaman dashboard
user. Rancangan Halaman Login Android dapat dilihat pada Gambar 3.33.

64

Gambar 3.33 Rancangan Halaman Login Android
k. Perancangan Halaman Pendaftaran Akun

Halaman pendaftaran akun berfungsi untuk user melakukan pengisian data
untuk membuat akun supaya user bisa masuk ke dalam sistem android
menggunakan akun yang telah didaftarkan. Di halaman ini user mengisi data
nama, username, email, dan password untuk membuat akun. Rancangan Halaman
Pendaftaran Akun dapat dilihat pada Gambar 3.34.

Gambar 3.34 Rancangan Halaman Pendaftaran Akun
l. Perancangan Halaman Beranda Android

Halaman beranda android berfungsi sebagai landing page apabila user
berhasil melakukan login di aplikasi android. Di halaman ini menampilkan tiga

65
berita terbaru. Rancangan Halaman Beranda Android dapat dilihat pada Gambar
3.35.

Gambar 3.35 Rancangan Halaman Beranda Android
m. Perancangan Halaman Daftar Pengaduan

Halaman daftar pengaduan berfungsi untuk menampilkan daftar
pengaduan yang telah dibuat oleh user. Daftar pengaduan menampilkan data
singkat berupa jenis pengaduan, tanggal pengaduan dibuat, dan status dari
pengaduan tersebut. Rancangan Halaman Daftar Pengaduan dapat dilihat pada
Gambar 3.36.

66

Gambar 3.36 Rancangan Halaman Daftar Pengaduan
n. Perancangan Halaman Input Pengaduan

Halaman input pengaduan berfungsi untuk menampilkan formulir data
yang dibutuhkan untuk mengirimkan bantuan. Data-data yang dibutuhkan
diantaranya adalah jenis produk, nama produk, tanggal kadaluarsa, lokasi
pembelian, dan foto atau gambar untuk mendukung proses pengaduan tersebut.
Rancangan Halaman Input Pengaduan dapat dilihat pada Gambar 3.37.

67

Gambar 3.37 Rancangan Halaman Input Pengaduan
o. Perancangan Halaman Detail Pengaduan

Halaman detail pengaduan berfungsi untuk menampilkan detail pengaduan
yang pernah dibuat oleh user. Dalam halaman ini menampilkan data-data detail
pengaduan dan juga status proses dari pengaduan tersebut. Rancangan Halaman
Detail Pengaduan dapat dilihat pada Gambar 3.38.

68

Gambar 3.38 Rancangan Halaman Detail Pengaduan
p. Perancangan Halaman Daftar Berita

Halaman daftar berita berfungsi untuk menampilkan daftar berita yang
telah dibuat oleh admin. Rancangan Halaman Daftar Berita dapat dilihat pada
Gambar 3.39.

Gambar 3.39 Rancangan Halaman Daftar Berita

69
q. Perancangan Halaman Detail Berita

Halaman detail berita berfungsi untuk menampilkan detail dari berita yang
berada di halaman daftar berita. Rancangan Halaman Detail Berita dapat dilihat
pada Gambar 3.40.

Gambar 3.40 Rancangan Halaman Detail Berita
r. Perancangan Halaman Profil User

Halaman profil berfungsi untuk menampilkan data lengkap biodata dari
user yang telah melakukan pendaftaran akun. User diwajibkan melengkapi data
profil. Rancangan Halaman Profil dapat dilihat pada Gambar 3.41.

Gambar 3.41 Rancangan Halaman Profil User

70

s. Perancangan Halaman Update Profil
Halaman update profil berfungsi untuk user melengkapi biodata profilnya.

Rancangan Halaman update profil dapat dilihat pada Gambar 3.42.

Gambar 3.42 Rancangan Halaman Update Profil
3.3.3 Perancangan Pengujian Sistem

Pengujian pada aplikasi dilakukan dengan menggunakan metode Black
Box yang akan menguji fungsionalitas, performa, penggunaan memori, dan
kompatibilitas, serta metode kuesioner untuk mengetahui tingkat keberhasilan
pembuatan aplikasi.
3.3.3.1 Pengujian Black Box

Pengujian fungsional yang digunakan untuk menguji sistem yang baru
adalah metode pengujian alpha. Metode yang digunakan dalam pengujian ini
adalah pengujian Black Box yang berfokus pada fungsional, performa,
penggunaan memori, dan kompatibilitas aplikasi yang dibangun. Pada pengujian
ini menggunakan sistem yaitu Bitbar Testing yang akan menggunakan empat
devices yaitu Motorola Google Nexus 6 Android versi 7.1.1 dan versi 6.0.1, LG
Google Nexus 5 D820, dan LG Google Nexus 5. Pengujian Black Box digunakan
untuk menguji validitas dari integrasi dan konsistensi sistem.

71

3.3.3.2 Pengujian Kuesioner

Pengujian kuesioner yaitu menguji tingkat penerimaan pengguna terhadap

sistem melalui kuesioner berdasarkan variabel pada user interface dan user

experience. Kuesioner dibagikan kepada 30 responden. Responden akan mencoba

aplikasi untuk dapat mengetahui kapabilitas dan kelancaran jalannya aplikasi itu

sendiri.

Kuesioner berisi beberapa pertanyaan yang dikelompokkan menjadi tiga

aspek yang digunakan dalam pengujian aplikasi tersebut, yaitu aspek rekayasa

perangkat lunak, aspek fungsionalitas, dan aspek komunikasi visual. Tiga aspek

ini berisikan pertanyaan-pertanyaan yang mengukur kemudahan dari suatu sistem

saat digunakan seperti kemudahan mengakses fitur, kelancaran menjalankan

tombol, sehingga bisa membuat user tertarik (Usability), melihat tampilan sistem

yang disajikan menarik atau tidak seperti kombinasi warna, jenis dan ukuran font,

antarmuka aplikasi, kemudahan melihat hasil, sehingga akan membuat user

merasa senang saat menggunakan aplikasi (Pleasure), dan mengukur kesesuaian

tampilan informasi yang disajikan pada aplikasi (Content dan Quality of

Information).

Perhitungan dilakukan dengan menggunakan metode Likert’s Summated

Rating (LSR), dimana setiap pertanyaan memiliki bobot nilai. Adapun bobot

jawaban yang diberikan adalah sebagai berikut:

Tabel 3.14 Bobot Jawaban

Keterangan Jawaban Bobot Nilai

Sangat Baik 5

Baik 4

Cukup Baik 3

Kurang Baik 2

Tidak Baik 1

Selanjutnya aplikasi akan di uji coba kepada pengguna. Hasil pengujian

dengan kuesioner akan diukur menggunakan metode Likert’s Summated Rating

(LSR), pengukuran akan dilakukan kepada pengguna yang sudah mencoba

aplikasi. Tabel perhitungan Skala Likert dapat dilihat pada tabel 3.15.

72

Tabel 3.15 Tabel Perhitungan Skala Likert

No Aspek / Pertanyaan Nilai Pengujian Persentase
. Likert

TB KB CB B SB

Aspek Rekayasa Perangkat Lunak

1. Kemudahan
menjalankan aplikasi

2. Kompabilitas aplikasi
pada perangkat

Kelancaran
3. menjalankan aplikasi

pada perangkat

Kemudahan
4. mengakses fitur-fitur

pada aplikasi

Kenyamanan dalam
5. menggunakan aplikasi

secara keseluruhan

Aspek Fungsionalitas

Kemudahan
6. menjalankan tombol

menu pada aplikasi

Tingkat kesesuaian
menampilkan input,
7. proses, dan hasil dari
pengaduan pada
aplikasi android

Tingkat kesesuaian
aplikasi dalam
8. menampilkan
informasi berupa
berita

Aspek Komunikasi Visual

Kemudahan

9. memahami informasi
yang ditampilkan pada

aplikasi

73

No Aspek / Pertanyaan Nilai Pengujian Persentase
. Likert

TB KB CB B SB

10 Tampilan antarmuka

. aplikasi

11 Jenis dan ukuran huruf
. yang digunakan
mudah dibaca

12 Kombinasi warna pada
. tampilan aplikasi

13 Tingkat kemudahan
. melihat hasil yang
ditampilkan aplikasi

Total Persentase (%)

Nilai persentase skala likert dihitung dengan rumus berikut ini:

= (SB x 5) + (B x 4) + (CB x 3) + (KB x 2) + (TB x1) x100
NB

Keterangan :
- L : Nilai persentase likert
- SB : Jumlah responden yang memilih pilihan sangat baik
- B : Jumlah responden yang memilih pilihan baik
- CB : Jumlah responden yang memilih pilihan cukup baik
- KB : Jumlah responden yang memilih pilihan kurang baik
- TB : Jumlah responden yang memilih pilihan tidak baik
- NB : 5 (bobot tertinggi) x jumlah responden

Untuk menyimpulkan hasil akhir dari aplikasi, harus diketahui terlebih
dahulu nilai interval total persentase dengan metode pencarian nilai interval pada
persamaan berikut ini I = 100 / 5 = 20

Nilai 5 didapat dari jumlah pilihan yang diberikan dalam kuesioner.
Nilai interval persentase pada kuesioner ini yaitu:
- X <= 19,99% dikategorikan tidak baik
- 20% >= X <= 39,99% dikategorikan kurang baik

74

- 40% >= X <= 59,99% dikategorikan cukup baik
- 60% >= X <= 79,99% dikategorikan baik
- X >= 80% dikategorikan sangat baik

3.3.4 Analisis Hasil Pengujian
Pada analisa hasil pengujian, dilakukan analisis terhadap sistem secara

keseluruhan berdasarkan pengujian yang sudah dilakukan.

3.3.5 Penarikan Kesimpulan
Kesimpulan dirumuskan berdasarkan analisis hasil pengujian sistem yang

dilakukan apakah sistem yang dirancang sesuai dengan tujuan yang ingin dicapai
dalam penelitian.

BAB IV
IMPLEMENTASI DAN HASIL PENGUJIAN
4.1 Implementasi
Berdasarkan hasil analisis dan pengujian terhadap aplikasi layanan
pengaduan masyarakat di Balai Besar POM Kota Pontianak berbasis mobile,
dapat disimpulkan bahwa sistem ini pada aplikasi berbasis mobile dapat
menghasilkan informasi yang diberikan oleh Balai Besar POM Kota Pontianak
berupa berita, selain itu pada aplikasi ini dapat melakukan fungsi utamanya yaitu
dapat mengirimkan pengaduan melalui aplikasi secara online apabila terhubung
ke internet yang selanjutnya pengaduan tersebut diterima dan diproses oleh pihak
Balai Besar POM Kota Pontianak menggunakan aplikasi berbasis web. Berikut ini
adalah penjelasan mengenai hasil perancangan antarmuka dari aplikasi yang
dirancang.
4.1.1 Tampilan Antarmuka Halaman Login Android
Pada tampilan halaman login android terdapat satu tipe user pengguna,
yaitu pengguna dari masyarakat umum. Antarmuka halaman login pada android
dapat dilihat pada Gambar 4.1.

Gambar 4.1 Antarmuka Halaman Login Android

74

75
4.1.2 Tampilan Antarmuka Halaman Login Android

Menu pendaftaran akun pada user umum terdiri dari nama, username,
email, dan password. Setelah mendaftar, user dapat mengakses masuk ke menu
utama dengan cara login terlebih dahulu. Antarmuka halaman pendaftaran akun
dapat dilihat pada Gambar 4.2.

Gambar 4.2 Antarmuka Halaman Pendaftaran Akun
4.1.3 Tampilan Antarmuka Halaman Beranda User

Pada tampilan halaman beranda user terdapat informasi tentang aplikasi
yang memiliki tiga menu utama di halaman user yaitu beranda, pengaduan, dan
berita. Pada halaman beranda, terdapat informasi berupa jumlah pengaduan yang
telah masuk dari masyarakat sebagai user. Antarmuka halaman beranda user
dapat dilihat pada Gambar 4.3.

76

Gambar 4.3 Antarmuka Halaman Beranda User
4.1.4 Tampilan Antarmuka Halaman Akun

Pada halaman akun, user dapat melihat data profil user seperti pada
gambar. User diharuskan melengkapi data profil terlebih dahulu sebelum
menggunakan aplikasi. Selain melihat data profil user, terdapat juga logout dari
aplikasi. Tampilan antarmuka halaman akun dapat dilihat pada Gambar 4.4.

Gambar 4.4 Antarmuka Halaman Akun

77

4.1.5 Tampilan Antarmuka Halaman Daftar Pengaduan
Pada tampilan halaman daftar pengaduan menampilkan informasi berupa

daftar pengaduan yang pernah user tersebut kirimkan melalui aplikasi. Pada daftar
tersebut menampilkan nama produk dan status pengaduan tersebut. Tampilan
antarmuka daftar pengaduan dapat dilihat pada Gambar 4.5.

Gambar 4.5 Antarmuka Halaman Daftar Pengaduan
4.1.6 Tampilan Antarmuka Halaman Form Pengaduan

Pada halaman form pengaduan, user diharuskan mengisi form yang
memiliki tanda khusus yang wajib diisi. User diharuskan memilih jenis produk,
mengisi nama produk, tanggal kadaluarsa, nama pabrik, tanggal guna, lokasi beli,
isi pengaduan atau isi masalah, dan melampirkan beberapa gambar atau foto yang
berkaitan dengan permasalahan yang akan dikirimkan. User dapat mengosongkan
atau mengisi nomor registrasi produk, alamat pabrik, nomor batch, lokasi
pembelian produk, dan info tambahan. Pada saat mengisi lokasi pembelian
produk, aplikasi akan menampilkan halaman place picker dari Places SDK untuk
Android seperti terlihat pada gambar b. Setelah user memilih tempat, aplikasi
akan kembali ke halaman form pengaduan yang ada pada gambar a dan lokasi beli

78
kemudian akan langsung terisi secara otomatis. Tampilan antarmuka form
pengaduan dapat dilihat pada Gambar 4.6.

a) b)
Gambar 4.6 Antarmuka Halaman Form Pengaduan
4.1.7 Tampilan Antarmuka Halaman Detail Aduan Android
Pada halaman detail aduan, aplikasi menampilkan informasi dari
pengaduan yang dipilih pada halaman daftar pengaduan. Detail aduan
menampilkan data yang pengaduan yang pernah di kirim oleh user melalui
aplikasi. Pada gambar a menampilkan informasi singkat seperti nama produk,

79

tanggal, gambar, dan pesan percakapan dengan pihak Balai Besar POM Kota

Pontianak. Pada gambar a terdapat tombol Lihat Lebih Luas untuk melihat

gambar-gambar yang pernah di kirim yang dalam format dokumen. Pada gambar

b menampilkan data secara lengkap pengaduan yang pernah dikirim. Tampilan

antarmuka detail aduan dapat dilihat pada

Gambar 4.7.

a) b)
Gambar 4.7 Antarmuka Halaman Detail Aduan Android

4.1.8 Tampilan Antarmuka Halaman Login Website
Pada tampilan halaman login website terdapat dua tipe pengguna yang

dapat masuk ke dalam sistem, yaitu admin yang merupakan staff bidang infokom

80
dan pimpinan Balai Besar POM Kota Pontianak. Antarmuka halaman login dapat
dilihat pada Gambar 4.8.

Gambar 4.8 Antarmuka Halaman Login Website
4.1.9 Tampilan Antarmuka Halaman Beranda Website Super Admin

Apabila super admin yaitu staff bidang Infokom berhasil login dengan
username dan password yang benar, maka user akan diarahkan pada halaman
beranda. Pada halaman beranda, user dapat melihat informasi jumlah user mobile,
jumlah pengaduan yang diterima, diproses, dan selesai. Antarmuka halaman
beranda dapat dilihat pada Gambar 4.9.

Gambar 4.9 Antarmuka Halaman Beranda Website Bidang Infokom
4.1.10 Tampilan Antarmuka Halaman Semua Aduan

Pada tampilan halaman semua aduan, aplikasi menampilkan semua
pengaduan yang telah masuk ke dalam sistem dengan menampilkan semua status

81

setiap pengaduan, pengaduan yang diterima, pengaduan yang diproses, pengaduan
yang telah disposisi, pengaduan yang telah selesai, dan pengaduan yang ditolak.
Untuk melihat detail dari setiap pengaduan dapat membuka melalui tombol detail.
Tampilan antarmuka halaman semua aduan dapat dilihat pada gambar 4.10.

Gambar 4.10 Antarmuka Halaman Semua Aduan
4.1.11 Tampilan Antarmuka Halaman Detail Aduan Website

Pada halaman detail aduan, aplikasi menampilkan detail aduan yang
dipilih dari semua aduan. Pada halaman detail aduan menampilkan data-data
pengaduan yang dikirim oleh user berupa data user dan isi dari pengaduan
tersebut. Pada halaman detail aduan, terdapat tombol-tombol yang berfungsi
untuk menampilkan percakapan dengan user, jawaban akhir aduan, log aduan,
proses untuk meneruskan pengaduan kepada pimpinan, dan menolak pengaduan
tersebut. Tombol proses atau teruskan untuk meneruskan pengaduan tersebut
kepada pimpinan agar dapat segera disposisi. Tampilan antarmuka detail aduan
website dapat dilihat pada Gambar 4.11.

82

Gambar 4.11 Antarmuka Halaman Detail Aduan Website
4.1.12 Tampilan Antarmuka Halaman Pesan

Pada halaman detail aduan terdapat bagian balasan yang berisi pesan atau
percakapan antara admin dan user, admin dapat membaca pesan yang dikirim oleh
user pada pengaduan yang dikirim. Admin juga dapat membalas pesan tersebut
secara langsung kepada user lewat pengaduan yang telah dikirim oleh user.
Tampilan antarmuka halaman pesan dapat dilihat pada Gambar 4.12.

83

Gambar 4.12 Antarmuka Halaman Pesan
4.1.13 Tampilan Antarmuka Halaman Log Aduan

Pada tampilan halaman log aduan menampilkan riwayat proses pengaduan
yang telah masuk ke Balai Besar POM Kota Pontianak dari awal user kirim
pengaduan hingga pengaduan tersebut selesai. Tampilan antarmuka halaman log
aduan dapat dilihat pada Gambar 4.13.

Gambar 4.13 Antarmuka Halaman Log Aduan