BAB IV DESKRIPSI PEKERJAAN
4.3 Perancangan Sistem
4.3.5 Desain User Interface
4.3.5 Desain User Interface
Berikut adalah hasil desain interface yang ada diaplikasi pengelolaan pengaduan yang dibagi menjadi 3 bagian yaitu Admin, Petugas, Customer dan beserta penjelasan desain tersebut.
1) Desain User Interface Menu Awal
Halaman ini adalah halaman awal pengguna dimana terdapat akses untuk Login User dan Login admin maupun petugas
Gambar 4.19 Desain User Interface Menu Awal
2) Desain User Interface Login Customer
Halaman ini adalah halaman Login User dimana Customer sebelumnya sudah menghubungi admin untuk melakukan registrasi di form Login terdapat pilihan lupa Password jika lupa Password sebelumnya.
9. pengaduan_keterangan Text 10. pengaduan_status Integer 11. pengaduan_bukti Text 12. pengaduan_pesan Text
Gambar 4.20 Desain User Interface Login
3) Desain User Interface Lupa Password Customer
Halaman ini adalah halaman lupa Password dimana Customer dapat mereset Password mereka jika mereka lupa Password sebelumnya yang penting mereka ingat Username nya.
50
4) Desain User Interface Halaman Utama Customer
Halaman ini adalah halaman utama setelah melakukan Login , pada halaman tersebut terdapat dashboard untuk menuju halaman utama dan terdapat Box notifikasi detail laporan seperti pengaduan belum terkonfirmasi , terkonfirmasi, pengaduan terselaikan, dan tabel laporan. Disebelah kiri teradapt menu dropdown dan teradapat menu pilihan lengkapi profil, ganti Password dan logout.
Gambar 4.22 Desain User Interface Setelah Login
5) Desain User Interface Data Pengaduan Customer
Halaman ini adalah halaman data pengaduan dimana Customer dapat menambahkan pengaduan dan tabel terdapat opsi detail agar dapat melihat proses perkembangan laporan yang diadukan.
Gambar 4.23 Desain User Interface Data pengaduan Customer
6) Desain User Interface Tambah Pengaduan
Halaman ini adalah halaman Tambah pengaduan dimana Customer menambahkan data pengaduan yang dialami dan mengisi semua form data yang disediakan seperti masalah kejadian yang terjadi, dimana kejadiannya, tanggal kejadian, siapa petugas yang terlibat, menjelakan proses kejadiannya, keterangan, barang bukti berupa foto.
52
Gambar 4.24 Desain User Interface Tambah Pengaduan
7) Desain User Interface Pengaduan Detail
Halaman ini adalah halaman pengaduan detail dimana Customer dapat melihat secara detail pengaduan yang diadukan dan melihat pesan petugas.
Gambar 4.25 Desain User Interface Pengaduan Detail
8) Desain User Interface Lengkapi Profile
Halaman ini untuk melengkapi Profile Customer yang masih belum lengkap dan agar petugas dan admin dapat mengetahui informasi detail Customer
54
Gambar 4.26 Desain User Interface Lengkapi Profil
9) Desain User Interface Ganti Password Customer
Halaman ini untuk merubah Password jika Customer ingin merubah sesuai dengan yang diinginkan.
Gambar 4.27 Desain User Interface Ganti Password
10) Desain User Interface Login Admin
Desain User Interface ini Halaman Login admin terdapat dua pilihan Login sebagai admin atau sebagai petugas. Disini saya akan menjelaskan terlebih dahulu Login sebagai super admin atau admin.
56
11) Desain User Interface Halaman Utama Login
Halaman ini adalah halaman utama setelah melakukan Login Admin , pada halaman tersebut terdapat dashboard untuk menuju halaman utama dan terdapat Master data yang didalamnya ada pilihan untuk melihat dan User, pengaduan, petugas, Registasi member, Box notifikasi detail laporan seperti jumlah User, pengaduan belum terkonfirmasi, terkonfirmasi, pengaduan terselaikan, dan tabel laporan. Disebelah kiri teradapt menu dropdown dan teradapat menu pilihan ganti Password dan logout.
Gambar 4.29 Desain User Interface Daftar Property
12) Desain User Interface Ganti Password
Halaman ini untuk merubah Password jika Admin ingin merubah sesuai dengan yang diinginkan.
Gambar 4.30 Desain User Interface Ganti Password
13) Desain User Interface Data User
Halaman ini Data User untuk melihat detail profil lengkap User dan admin dapat menghapus data User jika dibutuhkan.
58
14) Desain User Interface Data Pengaduan
Halaman ini Data Pengaduan untuk melihat pengaduan yang belum dikonfirmasi, sedang ditangani sampai selesai admin dapat mengkonfirmasi data pengaduan setelah itu data akan masuk ke petugas terkait.
Gambar 4.32 Desain User Interface Data Pengaduan
15) Desain User Interface Detail Pengaduan
Halaman ini adalah halaman pengaduan detail dimana Admin dapat melihat secara detail pengaduan yang diadukan.
Gambar 4.33 Desain User Interface Detail Pengaduan
16) Desain User Interface Document Laporan
Halaman ini adalah halaman print laporan dimana admin dapat mencetak laporan data pengaduan Customer.
60
17) Desain User Interface Data Petugas
Halaman ini adalah halaman Data Petugas dimana Admin dapat menambahkan data petugas, hapus petugas dan Update data petugas.
Gambar 4.35 Desain User Interface Data Petugas
18) Desain User Interface Tambah Petugas
Halaman ini adalah halaman Tambah data Petugas dimana Admin dapat menambahkan data petugas dan mengisi data sesuai inputan tabel.
Gambar 4.36 Desain User Interface Tambah Petugas
19) Desain User Interface Update Data Petugas
Halaman ini adalah halaman Update data Petugas dimana Admin dapat mengUpdate data petugas dan melengkapi kekurangan data profil petugas.
62
Gambar 4.37 Desain User Interface Update Data Petugas
20) Desain User Interface Register User
Halaman ini adalah halaman Register Customer dimana Admin dapat menambahkan data Customer yang ingin melakukan pengaduan.
Gambar 4.38 Desain User Interface Register User
21) Desain User Interface Login Petugas
Desain User Interface ini Halaman Login Petugas terdapat dua pilihan Login sebagai admin atau sebagai petugas. Disini saya akan menjelaskan terlebih dahulu Login sebagai Petugas.
64
22) Desain User Interface Halaman Utama Login Petugas
Halaman ini adalah halaman utama setelah melakukan Login Petugas , pada halaman tersebut terdapat dashboard untuk menuju halaman utama dan terdapat Master data yang didalamnya ada pilihan untuk melihat dan User, pengaduan, petugas, Box notifikasi detail laporan seperti jumlah User, pengaduan belum terkonfirmasi, terkonfirmasi, pengaduan terselaikan, dan tabel laporan. Disebelah kiri teradapt menu dropdown dan teradapat menu pilihan ganti Password dan logout.
Gambar 4.40 Desain User Interface Halaman Utama Login Petugas
23) Desain User Interface Ganti Password Petugas
Halaman ini untuk merubah Password jika Petugas ingin merubah sesuai dengan yang diinginkan.
Gambar 4.41 Desain User Interface Ganti Password Petugas
24) Desain User Interface Data User Petugas
Halaman ini Data User untuk melihat detail profil lengkap User dan admin dapat menghapus data User jika dibutuhkan.
66
25) Desain User Interface Detail User Petugas
Halaman ini adalah Data detail User untuk melihat profil lengkap User.
Gambar 4.43 Desain User Interface Detail User Petugas
26) Desain User Interface Data Pengaduan Petugas
Desain User Interface ini digunakan untuk petugas dalam melihat status konfirmasi yang diterima dari Admin dan Petugas dapat melanjutkan pengaduan yang diterima.
Gambar 4.44 Desain User Interface Data Pengaduan Petugas
27) Desain User Interface Detail Pengaduan petugas
Desain User Interface ini digunakan untuk halaman pengaduan detail dimana petugas dapat melihat isi pengaduan yang diadukan.
68
28) Desain User Interface Update data pengaduan
Desain User Interface ini digunakan untuk Petugas dalam mengUpdate data pengaduan yang diterima lalu memberi pesan kepada Customer dan memberikan status pengaduan dimana terdapat dua pilihan sedang ditangani atau selesai lalu simpan dan secara otomatis akan terkirim ke Customer terkait.
Gambar 4.46 Desain User Interface Update data pengaduan
29) Desain User Interface Data Petugas
Desain User Interface ini digunakan untuk Petugas dalam melihat data petugas lainnya.
Gambar 4.47 Desain User Interface Data Petugas