PERANCANGAN APLIKASI

PERANCANGAN APLIKASI

1. Permodelan Use Case
Pada pemodelan use case Gambar GPA.1 dilakukan identifikasi

aktor, identifikasi use case, dan spesifikasi untuk setiap use case.
Identifikasi use case dilakukan dengan cara menentukan tujuan aktor dalam
menggunakan sistem. Penentuan tujuan aktor dilakukan dengan
melakukan analisis terhadap hasil identifikasi kebutuhan pengguna dan
analisis hasil identifikasi fitur yang telah dilakukan sebelumnya. Setiap use
case memiliki kode sebagai identitas yang mengikuti kodifikasi pada
Gambar GPA.2. Penomoran use case dapat ditunjukan pada Tabel TPA.1.

Gambar GPA.1 Use Case Aplikasi

Aplikasi Pelaporan Kejadian Gangguan Trantibum

Login

Kasi Trantib / Membuat Laporan
Anggota
Melihat Riwayat
Laporan

Melihat Grafik
Laporan

Mengelola Laporan
Pengguna

Admin

1

Gambar GPA.2 Keterangan Kodifikasi Use Case
UC-XX
Nomor urut kode use case
Mewakili kata use case

Tabel TPA.1 Penomoran Use Case

Kode Use Case Nama Use Case
UC-1 Login
UC-2
UC-3 Membuat Laporan
UC-4 Melihat Riwayat Laporan
UC-5 Melihat Grafik Laporan
Mengelola Laporan Pengguna

2. Identifikasi Hubungan Use Case dengan Pemangku Kepentingan

Use case yang teridentifikasi kemudian dihubungkan dengan
pemangku kepentingan dan dengan fitur yang sebelumnya telah
diidentifikasi. Penghubungan pemangku kepentingan dengan use case
dilakukan untuk membantu pemangku kepentingan memahami apa saja
yang dapat dilakukan pengguna melalui aplikasi yang akan dikembangkan.
Hubungan use case dengan pemangku kepentingan terdapat pada Tabel
TPA.2.

Tabel TPA.2 Hubungan Use Case dengan Pemangku Kepentingan

Kode Use Case Pengguna Tipe Pemangku
Kepentingan
UC-1
UC-2 Kasi Trantib / Anggota Pengguna
UC-3 Satpol PP, Admin
UC-4
UC-5 Admin

2

3. Identifikasi Hubungan Use Case dengan Fitur Aplikasi

Setiap use case kemudian dihubungkan dengan fitur-fitur yang telah
diidentifikasi sebelumnya. Penghubungan ini dilakukan untuk mempertegas
bahwa hasil pemodelan use case sesuai dengan hasil analisis persyaratan.
Hubungan use case dengan fitur ditunjukan pada Tabel TPA.3.

Tabel TPA.3 Hubungan Use Case dengan Fitur Aplikasi

Kode Use Case Kode Fitur

UC-1 F-S-1
UC-2 F-S-2

UC-3 F-S-3

UC-4 F-S-4

UC-5 F-S-3

4. Spesifikasi Use Case

Pada bagian ini setiap use case akan dijelaskan secara lebih dalam
Tabel spesifikasi use case terdiri dari kode use case, kode fitur, deskripsi
singkat, aktor yang menggunakan, alur utama, alur alternatif, alur
cadangan, kondisi sebelum use case berjalan, dan kondisi setelah use
case dijalankan. Spesifikasi use case UC-1 hingga UC-5 dapat ditunjukan
apda Tabel TPA.4 hingga Tabel TPA.8.

Tabel TPA.4 Spesifikasi Use Case Login

Kode Use Case UC-1
Kode Fitur F-S-1
Deskripsi Singkat Use case login mendeskripsikan bagaimana aktor
melakukan verifikasi terhadap identitasnya,
Aktor sehingga memperoleh hak akses aplikasi yang
sesuai.
Kasi Trantib atau Anggota Satpol PP atau Admin

3

Alur Utama {use case dimulai}
Alur Alternatif
1. Use case dimulai ketika aktor memasukan

nama akun dan kata sandi

{mengisi formulir identitas}

2. Aktor mengirim nama akun dan kata sandi

ke aplikasi

{membatalkan pengiriman}

3. Aplikasi melakukan identifikasi pengguna

{mengidentifikasi pengguna}

4. Aplikasi menampilkan informasi

berdasarkan hak akses aktor

5. Use case selesai

{use case selesai}

A1. Menangani kesalahan pengisian formulir

Pada {mengisi formulir identitas} di alur utama

jika aktor tidak lengkap atau tidak benar pada saat

mengisi formulir identitas, maka aplikasi

menampilkan pesan untuk melengkapi atau

memperbaiki isian formulir identitas.

A2. Menangani pengiriman formulir
Pada {membatalkan pengiriman} di alur utama
jika akto rtidak mengirim formulir, maka use case
dinyatakan selesai.

A3. Menangani kegagalan identifikasi pengguna
Pada {mengidentifikasi pengguna} di alur utama
jika aplikasi mengalami kegagalan identifikasi,
maka aplikasi menampilkan pesan bahwa
identifikasi pengguna gagal, kemudian use case
selesai.

Kondisi Sebelum 1. Aplikasi sudah terpasang pada perangkat
2. Perangkat yang digunakan untuk mengakses

aplikasi terhubung dengan internet
3. Data pengguna sudah dimasukan ke server

Kondisis Sesudah 1. Identitas aktor teridentifikasi oleh sistem
2. Aktor berhasil masuk ke dalam aplikasi (logged
in)
3. Aplikasi menampilkan informasi atau fungsi
sesuai hak akses aktor.

4

Tabel TPA.5 Spesifikasi Use Case Membuat Laporan Kejadian
Gangguan Ketenteraman dan Ketertiban Umum

Kode Use Case UC-2

Kode Fitur F-S-2

Deskripsi Singkat Use case mengelola laporan kejadian

mendeskripsikan bagaimana aktor menggunakan

aplikasi untuk menambah laporan, mengubah

laporan, dan menghapus laporan.

Aktor Kasi Trantib atau Anggota Satpol PP atau Admin

Alur Utama {use case dimulai}

1. Use case dimulai ketika aplikasi

menampilkan data laporan

{menampilkan formulir pelaporan}

2. Aktor memilih untuk menambahkan laporan

kejadian

3. Aplikasi menampilkan formulir

penambahan data laporan

4. Lakukan alur cadangan Menambah data

laporan

5. Use case selesai

{use case selesai}

Alur Alternatif A1. Melihat detail
Pada {menampilkan data laporan} di alur utama
jika aktor memilih untuk melihat detail laporan
maka lakukan alur cadangan Melihat detail
laporan

A2. Mengubah data laporan
Pada {menampilkan detail data laporan} di alur
cadangan jika aktor memilih untuk mengubah data
laporan, maka lakukan alur cadangan Mengubah
data laporan

A3. Menangani kesalahan pengisian formulir
Pada {mengisi formulir data laporan}, di alur
cadangan jika aktor tidak lengkap atau tidak benar

5

Alur Cadangan pada saat mengisi formulir, maka aplikasi
menampilkan pesan untuk memperbaiki pengisian
formulir yang belum terisi dengan benar.

A4. Menangani pembatalan pengiriman
formulir
Pada {membatalkan pengiriman data laporan},
di alur cadangan jika aktor tidak mengirimkan atau
keluar dari formulir, maka use case dinyatakan
selesai

A5. Menghapus data laporan
Pada {menampilkan detail data laporan} di alur
cadangan jika aktor memilih untuk menghapus
data kegiatan, maka lakukan alur cadangan
Menghapus data kegiatan

A6. Menangani verifikasi penghapusan
Pada {verifikasi penghapusan} di alur cadangan
jika identitas pemilik data yang dihapus berbeda
dengan identitas aktor, maka aplikasi akan
menampilkan pesan peringatan kegagalan dan
use case dinyatakan selesai
S1. Menambah data laporan kejadian

1. Aktor memasukan data laporan kejadian
{mengisi formulir data laporan kejadian}

2. Aktor mengirim data laporan kejadian
kedalam aplikasi

{membatalkan pengiriman data laporan}
3. Aplikasi melakukan proses penyimpanan
data kegiatan
4. Aplikasi menampilkan pesan kegiatan
berhasil ditambahkan

S2. Mengubah data laporan
1. Aktor mengubah data laporan

{mengisi formulir data laporan kejadian}
2. Aktor mengirim perubahan data laporan
kejadian ke aplikasi

{membatalkan pengiriman data laporan}
3. Aplikasi melakukan proses penyimpanan
perubahan data laporan

6

4. Aplikasi menampilkan pesan bahwa
perubahan data laporan berhasil disimpan

5. Use case selesai

S3. Menghapus data laporan

1. Aplikasi menampilkan pesan konfirmasi
penghapusan

2. Aktor melakukan konfirmasi penghapusan
data laporan

{membatalkan konfirmasi penghapusan}

3. Aplikasi melakukan proses penghapusan
data laporan

4. Aplikasi menampilkan pesan data laporan
berhasil dihapus

5. Use case selesai

Kondisi Sebelum S4. Melihat detail laporan
Kondisi Sesudah 1. Aktor menampilkan data laporan kejadian

{mengisi formulir data kegiatan}
2. Use case selesai

1. Perangkat yang digunakan untuk mengakses
aplikasi terhubung dengan internet

2. Aktor berhasil masuk ke dalam aplikasi
(logged in)

1. Aktor berhasil menyimpan data hasil
pengelolaan laporan

2. Aktor dapat melihat hasil pengelolaan data
laporan

Tabel TPA.6 Spesifikasi Use Case Mengelola Riwayat

Kode Use Case UC-3

Kode Fitur F-S-3

Deskripsi Singkat Use case mengelola riwayat mendeksripsikan

bagaimana aktor menggunakan aplikasi untuk

melihat dan mencari laporan yang telah dimasukan

ke aplikasi

7

Aktor Kasi Trantib atau Anggota Satpol PP atau Admin
Alur Utama
{use case dimulai}
Alur Alternatif 1. Use case dimulai ketika aktor memilih
untuk melihat riwayat laporan kejadian
2. Aplikasi menampilkan riwayat laporan
kejadian

{menampilkan riwayat laporan kejadian}
3. Use case selesai

{use case selesai}

A1. Melihat detail
Pada {menampilkan riwayat laporan} di alur
utama jika aktor memilih untuk melihat detail
laporan maka lakukan alur cadangan Mencari
laporan

Alur Cadangan S1. Mencari laporan kejadian
1. Aktor memasukan data laporan kejadian
2. Aktor mengirim kata kunci ke dalam aplikasi
3. Aplikasi melakukan proses pencarian
laporan kejadian berdasarkan kata kunci
4. Aplikasi menampilkan laporan kejadian hasil
pencarian
5. Use case selesai

Kondisi Sebelum 1. Perangkat yang digunakan untuk mengakses
Kondisi Sesudah aplikasi terhubung dengan internet

2. Aktor berhasil masuk ke dalam aplikasi (logged
in)

1. Aktor dapat melihat hasil pencarian data riwayat
laporan kejadian gangguan trantibum di wilayah
Kabupaten Garut

Tabel TPA.7 Spesifikasi Use Case Melihat Grafik Laporan Kejadian

Gangguan Trantibum

Kode Use Case UC-4

Kode Fitur F-S-4

8

Deskripsi Singkat Use case melihat grafik laporan kejadian, pengguna

dapat melihat grafik laporan kejadian yang telah

dilaporkan selama satu bulan kebelakang

Aktor Kasi Trantib atau Anggota Satpol PP atau Admin

Alur Utama {use case dimulai}
1. Use case dimulai ketika aplikasi menampilkan
grafik laporan kejadian bulanan
2. Aktor memilih untuk melihat grafik

{menampilkan detail data grafik laporan
kejadian}

3. Aplikasi menampilkan grafik laporan

4. Use case selesai

Kondisi Sebelum 1. Perangkat yang digunakan untuk mengakses

aplikasi terhubung dengan internet

2. Aktor berhasil masuk ke dalam aplikasi (logged
in)

3. Aktor berhasil terverifikasi sebagai admin

Kondisi Sesudah 1. Aktor berhasil menyimpan data hasil
pengelolaan laporan kejadian

2. Aktor dapat melihat hasil pengelolaan data
laporan kejadian

Tabel TPA.8 Spesifikasi Use Case Mengelola Laporan Kejadian

Gangguan Trantibum

Kode Use Case UC-5

Kode Fitur F-S-3

Deskripsi Singkat Use case mengelola laporan kejadian pengguna

mendeksripsikan bagaimana aktor menggunakan

aplikasi untuk mengubah laporan kejadian, dan

menghapus laporan kejadian yang telah dilaporkan

pengguna lainnya

Aktor Kasi Trantib atau Anggota Satpol PP atau Admin

9

Alur Utama {use case dimulai}
Alur Alternatif 5. Use case dimulai ketika aplikasi
menampilkan data laporan kejadian
6. Aktor memilih untuk mengelola laporan
kejadian pengguna
7. Aplikasi menampilkan formulir verifikasi
8. Aktor memasukan kode verifikasi

{mengisi formulir verifikasi}
9. Aktor mengirim kode verifikasi ke aplikasi
10. Aplikasi melakukan proses

{verifikasi aktor}
11. Aplikasi menampilkan data laporan
12. Aktor memilih untuk melihat detail laporan
13. Aplikasi menampilkan data laporan yang
dipilih

{menampilkan detail data laporan kejadian}
14. Lakukan alur cadangan Mengubah data
laporan
15. Use case selesai

A1. Menangani kesalahan pengisian formulir
Pada {mengisi formulir verifikasi} di alur utama
jika aktor keluar dari formulir, maka use case
dinyatakan selesai. Pada {mengisi formulir data
laporan} di alur cadangan jika aktor tidak lengkap
atau tidak benar pada saat mengisi formulir, maka
aplikasi menampilkan pesan untuk memperbaiki
pengisian formulir yang belum terisi dengan benar.

A2. Menangani kesalahan verifikasi
Pada {verifikasi aktor} di alur utama, jika aktor
memasukan kode yang salah, maka aplikasi akan
menampilkan pesan kegagalan verifikasi dan use
case dinyatakan selesai.

A3. Menghapus data kegiatan
Pada {menampilkan detail data kegiatan} di alur
utama jika aktor memilih untuk menghapus data
laporan kejadian, maka lakukan alur cadangan
Menghapus data laporan

10

A4. Menangani pembatalan pengiriman formulir
Pada {membatalkan pengiriman data laporan},

{membatalkan konfirmasi penghapusan} di alur
cadangan jika aktor tidak mengirimkan atau keluar
dari formulir, maka use case dinyatakan selesai.

Alur Cadangan S1. Mengubah data kegiatan

1. Aktor mengubah data kegiatan

{mengisi formulir data kegiatan}

2. Aktor mengirim perubahan data laporan

kejadian ke aplikasi

{membatalkan pengiriman data kegiatan}

3. Aplikasi melakukan proses

penyimpanan perubahan data

4. Aplikasi menampilkan pesan bahwa

perubahan kegiatan berhasil disimpan

S2. Menghapus data kegiatan pesan
1. Aplikasi menampilkan

konfirmasi penghapusan

2. Aktor melakukan konfirmasi penghapusan
data laporan

{membatalkan konfirmasi penghapusan}
3. Aplikasi melakukan proses penghapusan

data laporan

4. Aplikasi menampilkan pesan data
laporan berhasil dihapus

6. Use case selesai

Kondisi Sebelum 4. Perangkat yang digunakan untuk mengakses

aplikasi terhubung dengan internet
5. Aktor berhasil masuk ke dalam aplikasi (logged

in)
6. Aktor berhasil terverifikasi sebagai admin

Kondisi Sesudah 3. Aktor berhasil menyimpan data hasil
pengelolaan laporan kejadian

4. Aktor dapat melihat hasil pengelolaan data
laporan kejadian

11

5. Perancangan Antarmuka Pengguna
Pada perancangan antarmuka pengguna menjelaskan beberapa

rancangan tampilan antarmuka pengguna aplikasi yang akan
dikembangkan dalam aktualisasi. Beberapa rancangan antarmuka
pengguna tersebut diantaranya adalah antarmuka login, menu utama,
menu laporan, menu riwayat, menu grafik dan menu keluar.
5.1. Perancangan Antarmuka Login

Antarmuka login pada Gambar GPA.3 menampilkan formulir yang
dapat diisi pengguna untuk melakukan autentikasi identitas sehingga dapat
menggunakan aplikasi sesuai dengan kewenangan yang dimiliki.
Komponen yang terdapat pada antarmuka login terdiri dari nama antarmuka,
di bawahnya ada logo Pemkab Garut, logo Polisi Pamong Praja, nama
aplikasi, kolom untuk memasukan nama akun, kolom untuk memasukan
kata sandi, dan tombol untuk menjalankan fungsi autentikasi pengguna.

Gambar GPA.3 Antarmuka Login

12

5.2. Perancangan Antarmuka Menu Utama
Antarmuka menu utama pada Gambar GPA.4 merupakan tampilan

yang akan dilihat oleh pengguna sesaat setelah berhasil melakukan
autentikasi. Dari atas, komponen yang terdapat pada antarmuka ini adalah
nama antarmuka atau menu, tombol laporan yang dapat digunakan
pengguna untuk melaporkan gangguan terhadap ketenteraman dan
ketertiban umum yang telah terjadi, tombol riwayat yang dapat digunakan
untuk melihat riwayat laporan atau riwayat hasil pengisian laporan, tombol
grafik untuk melihat grafik hasil pelaporan gangguan terhadap
ketenteraman dan ketertiban umum di wilayah Kabupaten Garut dan tombol
keluar untuk keluar dari aplikasi.

Gambar GPA.4 Antarmuka Menu Utama

5.3. Perancangan Antarmuka Menu Laporan
Antarmuka menu laporan pada Gambar GPA.5 merupakan tampilan

yang akan dilihat oleh pengguna sesaat setelah klik tombol laporan pada
13

menu utama. Komponen yang terdapat pada antarmuka ini adalah tombol
laporan harian dan tombol laporan bulanan. Laporan harian adalah laporan
gangguan ketenteraman dan ketertiban umum yang terjadi dan harus
dilaporkan tiap harinya berdasarkan laporan dan fakta yang terjadi di
lapangan. Laporan bulanan adalah rekap laporan harian dalam bentuk file
pdf yang sudah dituangkan menjadi tabel rekapitulasi jumlah data
gangguan ketenteraman dan ketertiban umum yang sudah dibubuhi tanda
tangan dan cap oleh kasi trantib beserta camat.

Gambar GPA.5 Antarmuka Menu Laporan

5.4. Perancangan Antarmuka Menu Riwayat
Antarmuka menu riwayat pada Gambar GPA.6 merupakan tampilan

yang akan dilihat oleh pengguna sesaat setelah klik tombol riwayat pada
14

menu utama. Komponen yang terdapat pada antarmuka ini adalah tombol
riwayat harian dan tombol riwayat bulanan. Riwayat harian adalah riwayat
gangguan ketenteraman dan ketertiban umum yang terjadi dan telah
dilaporkan tiap harinya berdasarkan laporan dan fakta yang terjadi di
lapangan. Riwayat bulanan adalah rekap riwayat laporan harian dalam
bentuk file pdf yang sudah dituangkan menjadi tabel rekapitulasi jumlah
data gangguan ketenteraman dan ketertiban umum yang sudah dibubuhi
tanda tangan dan cap oleh kasi trantib beserta camat.

Gambar GPA.6 Antarmuka Menu Riwayat

5.5. Perancangan Antarmuka Menu Grafik
Antarmuka menu grafik pada Gambar GPA.7 merupakan tampilan

yang akan dilihat oleh pengguna sesaat setelah klik tombol grafik pada
15

menu utama. Grafik ini akan menampilkan grafik kejadian hasil laporan
bulanan.

Gambar GPA.7 Antarmuka Menu Grafik

5.6. Perancangan Antarmuka Menu Keluar
Antarmuka menu keluar pada Gambar GPA.8 merupakan tampilan

yang akan dilihat oleh pengguna sesaat setelah klik tombol keluar pada
menu utama.

16

Gambar GPA.8 Antarmuka Menu Keluar
17