LAPORAN KEMAJUAN PENGEMBANGAN APLIKASI WEB

Pengembangan Sistem Informasi Pelaporan Kerusakan Jalan Kota

Bogor

Oleh :

Andi Nurkholis 133040039

Erika Indah Safitri 133040017

PROGRAM STUDI S1 SISTEM INFORMASI

FAKULTAS TEKNIK DAN ILMU KOMPUTER
UNIVERSITAS TEKNOKRAT INDONESIA
2017
 DAFTAR ISI

DAFTAR ISI............................................................................................. i

DAFTAR GAMBAR................................................................................ ii

DAFTAR TABEL .................................................................................... iii

BAB I PENDAHULUAN ........................................................................ 1

1.1. Latar Belakang.......................................................................... 1
1.2. Rumusan Masalah .................................................................... 2
1.3. Tujuan....................................................................................... 2
1.4. Manfaat..................................................................................... 3
1.5. Ruang Lingkup......................................................................... 3
1.6. Metode Pengembangan............................................................. 3
BAB II PEMBAHASAN .......................................................................... 5
2.1. Deskripsi Sistem....................................................................... 5
2.2. Entitas Pengguna...................................................................... 5
BAB III DESAIN SISTEM ..................................................................... 6
3.1. Diagram Konteks...................................................................... 6
3.2. Perancangan DFD (Data Flow Diagram)................................. 6
3.3. Class Diagram........................................................................... 7
3.4. Perancangan Use Case Diagram............................................... 7
3.5. Fully Development Use Case Description................................ 8
3.6. Mockup System......................................................................... 11
DAFTAR PUSTAKA ............................................................................... 22
 DAFTAR GAMBAR

Gambar 3.1 Diagram Konteks ......................................................................... 6

Gambar 3.2 DFD Level 0 ................................................................................ 6
Gambar 3.3 DFD Level 1 ................................................................................ 7
Gambar 3.4 Class Diagram .............................................................................. 7
Gambar 3.5 Use Case Diagram ....................................................................... 8
Gambar 3.6 Mockup Tampilan Utama.............................................................. 12
Gambar 3.7 Mockup tampilan Login ............................................................... 13
Gambar 3.8 Mockup tampilan signup .............................................................. 13
Gambar 3.9 Mockup tampilan forgotten .......................................................... 14
Gambar 3.10 Mockup tampilan dashboard admin .......................................... 15
Gambar 3.11 Mockup tampilan dashboard admin data daerah ....................... 15
Gambar 3.12 Mockup tampilan dashboard admin data user ........................... 16
Gambar 3.13 Mockup tampilan dashboard admin data laporan ...................... 17
Gambar 3.14 Mockup tampilan dashboard admin data komentar ................... 17
Gambar 3.15 Mockup tampilan dashboard member .......................................... 18
Gambar 3.16 Mockup tampilan dashboard member edit profile ......................... 19
Gambar 3.17 Mockup tampilan dashboard member view data laporan ................ 19
Gambar 3.18 Mockup tampilan dashboard member data komentar .................... 20
Gambar 3.19 Mockup tampilan form lapor ....................................................... 21
 DAFTAR TABEL
Tabel 3.1 Use Case Description Mengelola data daerah ................................. 8
Tabel 3.2 Use Case Description mengelola data user ..................................... 9
Tabel 3.3 Use Case Description konfirmasi tindak lanjut ............................... 9
Tabel 3.4 Use Case Description pendaftaran user ........................................... 9
Tabel 3.5 Use Case Description pendaftaran user............................................ 10
Tabel 3.6 Use Case Description memberikan komentar ................................. 10
Tabel 3.7 Use Case Description melihat komentar ......................................... 11
 BAB I
PENDAHULUAN
1.1. Latar Belakang

Jalan raya adalah prasarana perhubungan darat dan jalur transportasi yang sangat
vital. Jalan memiliki funsi sebagai faktor pendorong dalam proses pengembangan
suatu wilayah serta pemerataan pembangunan suatu wilayah serta pemerataan
pembangunan bagi seluruh daerah disekitarnya. Fungsi lain dari jalan adalah berperan
penting dalam proses perhubungan pusat-pusat pertumbuhan dengan wilayah lain.
Bagi pemerintah, jalan merupakan prasarana trasportasi yang penting untuk
menjalankan roda ekonomi dan pemerintah. Jika kondisi jalan baik, maka trasportasi
dan aktifitas perekonomian pun akan menjadi lancar.

Sesuai dengan Peraturan Menteri PUPR Nomor 15/PRT/M/2015 tentang

Organisai dan Tata Kerja Kementerian Pekerjaan Umum dan Perumahan Rakyat
Kementerian Pekerjaan Umum dan Perumahan Rakyat mempunyai tugas
menyelenggarakan urusan pemerintahan di bidang pekerjaan umum dan perumahan
rakyat untuk membantu Presiden dalam menyelenggarakan pemerintahan negara
dalam melaksanakan tugas sebagaimana dimaksud di atas, Kementerian Pekerjaan
Umum dan Perumahan Rakyat menyelenggarakan fungsi:

Perumusan, penetapan, dan pelaksanaan kebijakan di bidang pengelolaan sumber

daya air, penyelenggaraan jalan, penyediaan perumahan dan pengembangan kawasan
permukiman, pembiayaan perumahan, penataan bangunan gedung, sistem penyediaan
air minum, sistem pengelolaan air limbah dan drainase lingkungan serta
persampahan, dan pembinaan jasa konstruksi dan dinas Bina Marga adalah salah satu
bagian dari dinas PU (Pekerjaan Umum) yang khusus menangani dalam
penyelenggaraan jalan bagi masyarakat.

Kendala secara umum yang dialami masyarakat adalah bagaimana

menyampaikan dan melaporkan apabila terjadi kerusakan jalan di suatu daerah
kepada pihak terkait. Sering terjadi beberapa kasus yang membuat masyarakat sekitar

1
memblokir suatu jalan karena sudah mengalami kerusakan parah dan tidak layak
untuk dilewati. Masyarakat juga tidak dapat mengetahui jalan mana saja yang
menjadi prioritas untuk dikerjakan perbaikannya oleh pihak PU.

Dalam perkembangan digital saat ini, hampir di semua bidang terlepas dari
teknologi atau sistem komputerisasi. Tidak terkecuali untuk permasalahan diatas,
yang dapat dijawab dengan mengembangkan sebuah sistem informasi pelaporan
jalan. Diyakini bahwa sistem pelaporan jalan ini akan sangat efektif dan membantu
masyarakat serta pihak PU untuk memperbaiki jalan dengan respon yang cepat.
Dengan harapan perbaikan jalan pada suatu wilayah dapat terstruktur dengan baik dan
mudah dipantau oleh masyarakat luas.

1.2. Rumusan Masalah

Berdasarkan latar belakang yang telah penulis jelaskan diatas, dapat disimpulkan
perumusan masalah sebagai berikut:

1. Bagaimana masyarakat kota Bogor dapat melakukan pelaporan kerusakan

jalan dengan pihak terkain dengan mudah dan efisien?
2. Bagaimana pihak Dinas Pekerjaan Umum dapat memantau kerusakan jalan
dengan mudah dan efisien?
1.3. Tujuan
Tujuan dari dikembangkannya aplikasi ini antara lain:
1. Membuat sistem informasi pelaporan jalan secara online.
2. Membuat sistem yang dapat memberikan informasi pengerjaan perbaikan
jalan serta laporan pengerjaan.
1.4. Manfaat
Manfaat yang diharapkan dari pengembangan aplikasi ini adalah:
1. Membantu masyarakat melaporkan kerusakan jalan pada kota Bogor dengan
mudah dan efisien.
2. Membantu dinas pekerjaan umum mendapat informasi kerusakan jalan,
menginformasikan perbaikan jalan pada kota Bogor dengan mudah dan
efisien.

2
1.5. Ruang Lingkup
Ruang lingkup dari sistem ini adalah:
1. Sistem hanya melakukan pelaporan kerusakan jalan pada Kota Bogor.
2. User dari sistem ini adalah pihak dinas pekerjaan umum sebagai admin dan
masyarakat kota Bogor maupun pendatang yang tinggal di kota Bogor.
3. Laporan yang di unggah oleh masyarakat hanya bisa di komentari oleh user
lain.
1.6. Metode Pengembangan
Metode pengembangan dari sistem pelaporan kerusakan jalan kota Bogor ini
menggunakan model prototype. Model prototype merupakan metode pengembangan
sistem salah satu metode siklus hidup sistem yang didasarkan pada konsep model
bekerja (working model). Tujuannya adalah mengembangkan model menjadi sistem
final. Artinya sistem akan dikembangkan lebih cepat dari pada metode tradisional dan
biayanya menjadi lebih rendah. Tahapan yang dilakukan pada pengembangan sistem
ini dintaranya sebagai berikut:
a. Analisa Kebutuhan
Merupakan tahapan dalam melakukan analisa tentang apa saja yang akan
dibutuhkan pada pengembangan sistem informasi pelaporan kerusakan jalan kota
Bogor. Pada tahap ini dibutuhkan komunikasi antara klien dan pengembang
sistem, tentang apa saja yang dibutuhkan.
b. Membangun Prototype
Pada tahap ini pengembang sistem melakukan pembuatan perancangan antar
muka dari sistem yang akan dibangun. Tahap ini berguna untuk mengetahui
kebutuhan klien pada sistem. Pada tahap ini menggunakan aplikasi balsamiq
untuk membangun model MockUp dari website yang akan dibangun.
c. Evaluasi Prototype
Tahap ini merupakan tahap negosiasi antara pembangun sistem dan klien, guna
mengetahui apakah fungsi yang dibuat oleh pengembang telah sesuai dengan

3
 keinginan klien. Pada tahap ini, pengembang harus mengerti dan mengetahui apa
saja kebutuhan dan keinginan klien terhadap sistem.
d. Pengkodean Sistem
Setelah diketahui kebutuhan dan fungsi dari client, maka tahan selanjutnya
pembangun mengimplementasikan dalam sebuah koding hingga menjadi sistem
yang dibutuhkan. Pada sistem ini, menggunakan framework Laravel dan database
MySQL.

4
 BAB II

PEMBAHASAN

2.1 Deskripsi Sistem

Perangkat lunak yang akan dibangun merupakan sistem informasi berbasis web.
Aplikasi web ini dibangun dengan menggunakan framework Laravel yang
dikombinasikan dengan bahasa pemrograman HTML, CSS, dan javascript. Karena
aplikasi ini berbasis web, maka tentu membutuhkan akses internet atau berbasis
online. Perangkat lunak ini memiliki menu atau fungsi utama yaitu sebagai media
pelaporan jalan di kota bogor dengan tujuan efisiensi waktu dan akurasi lokasi.
Aplikasi ini adalah sistem yang mencakup seluruh jalan raya umum yang ada di kota
Bogor, sehingga setiap warga yang berada di seluruh kawasan kota Bogor dapat
melakukan pelaporan kerusakan jalan kapanpun dan dimanapun.

2.2 Entitas Pengguna

Pada sistem ini terdapat 2 level user yang dapat menggunakan, diataranya:
a. User : Merupakan masyarakat kota bogor maupun pendatang yang
tinggal di kota Bogor, yang telah melakukan regristasi pendaftaran
akun sebelumnya. User mempunyai akses untuk sistem pelaporan
kerusakan jalan ini, dengan cara login terlebih dahulu, untuk
kemudian masuk ke menu pelaporan jalan. Setelah melakukan
pelaporan, user menunggu tindak lanjut dari admin tentang
laporan yang diajukan.
b. Admin : Admin dalam sistem ini merupakan pegawai dinas pekerjaan
umum kota Bogor. Admin bertugas dalam mengelola konten di
dalam sistem. Tugas lainnya adalah melakukan verifikasi laporan
sebagai langkah awal tindak lanjut laporan masyarakat. Setelah
dilakukan perbaikan jalan pada maka admin harus melakukan
update informasi pada sistem, sehingga pelapor dan user lain
sudah mengetahui hasilnya.

5
 BAB III
DESAIN SISTEM
3.1 Diagram Konteks
Diagram Koteks pada sistem informasi pelaporan jalan kota bogor dapat dilihat
pada Gambar 3.1 bawah ini:

Gambar 3.1 Diagram Konteks

3.2 Perancangan DFD (Data Flow Diagram)
a. DFD level 0 dapat dilihat pada Gambar 3.2 di bawah ini :

Gambar 3.2 DFD level 0

6
 b. DFD level 1 ditunjukkan pada Gambar 3.3 di bawag ini :

Gambar 3.3 DFD level 1

3.3 Class Diagram
Class diagram dapat dilihhat pada Gambar 3.4 dibawah ini.

Gambar 3.4 Class Diagram

3.4 Perancangan Use Case Diagram
Perancangan use case diagram dapat dilihat pada Gambar 3.5 seperti berikut.

7
 Gambar 3.5 Use case diagram
3.5 Fully Development Use Case Description
Berikut ini adlah beberapa perancangan Fully Developed Use Case Description.
a. Fully Developed Use Case Description untuk Mengelola data daerah dapat
dilihat pada tabel 3.1 di bawah ini.
Use Case Name Mengelola Data Daerah
Scenario Menambah, melihat, memperbaharui, menghapus data daerah
Trigerring Event Data daerah baru
Brief Description Membuat data berdasarkan data daerah dari staf yang telah terjun
kelapangan
Actor Admin
Related Use Case Login
Stakeholder Staf Admin
Precondition Login Admin
Actor System
Flow Activity 1. Admin menambah data daerah 1.1 Menyimpan data daerah
2. Admin melihat data daerah 2.1 Menampilkan data daerah
3. Admin memperbaharui data 3.1 Menyimpan data daerah
daerah yang baru
4. Admin menghapus data daerah 4.1 Menghapus data derah

Exception Condition 1. Login Admin

Tabel 3.1 Use Case Description Mengelola data daerah

8
b. Fully Developed Use Case Description untuk Mengelola data user dapat
dilihat pada tabel 3.2 di bawah ini.
Use Case Name Mengelola Data User
Scenario Menambah, melihat, memperbaharui, menghapus data user
Trigerring Event Data user baru
Brief Description Membuat data berdasarkan data dari user
Actor Admin
Related Use Case Login
Stakeholder Staf Admin
Precondition Login Admin
Actor System
Flow Activity 1. Admin menambah data user 1.1 Menyimpan data user
2. Admin melihat data user 2.1 Menampilkan data user
3. Admin memperbaharui data user 3.1 Menyimpan data user
4. Admin menghapus data user yang baru
4.1 Menghapus data user

Exception Condition 1. Login Admin

Tabel 3.2 Use Case Description mengelola data user
c. Fully Developed Use Case untuk Konfirmasi tindak lanjut dapat dilihat pada
tabel 3.3 di bawah ini.
Use Case Name Konfirmasi tindak lanjut
Scenario Mengkonfirmasi penindaklajutan laporan
Trigerring Event Status Laporan baru
Brief Description Mengubah status laporan menjadi telah di proses
Actor Admin
Related Use Case Login Admin, Laporan
Stakeholder Admin
Precondition Login Admin
Actor System
Flow Activity 1. Admin mengubah status laporan 1.1 Mengupdate sataus
laporan

Exception Condition 2. Login Admin

Tabel 3.3 Use Case Description konfirmasi tindak lanjut
d. Fully Developed Use Case untuk Pendaftaran user dapat dilihat pada tabel 3.4
di bawah ini.
Use Case Name Pendaftaran user
Scenario Menginputkan data diri
Trigerring Event Data user baru
Brief Description Mengisi form identitas sekaligus manjadi member
Actor User
Related Use Case -
Stakeholder User
Precondition Tampilan home

9
 Actor System
Flow Activity 1. User mengisi data 1.1 Menyimpan data user

Exception Condition 1. Jika telah memiliki akun akan langsung diarahkan ke daskboard
Tabel 3.4 Use Case Description pendaftaran user
e. Fully Developed Use Case untuk Melaporkan permasalahan dapat dilihat pada
tabel 3.5 di bawah ini.
Use Case Name Melaporkan permasalahan
Scenario Melaporkan permasalahan jalan
Trigerring Event Melihat kerusakan jalan
Brief Description Menulis laporan baru berupa keterangan lokasi, menambahkan foto
sebagai penguat informasi, menunggu tidak lanjut dari admin staf PU
berupa konfirmasi
Actor Member dan staf PU
Related Use Case Konfirmasi tindak lanjut dan menunggu konfirmasi dari staf PU
Stakeholder Pegawai lapangan PU : untuk menindak lanjuti secara nyata dilapangan.
Petugas Verifikas Lapangan : Memeriksa validasi laporan
Precondition - Pelapor sudah memiliki akun
- Data – data yang telah tersedia
Actor System
Flow Activity 1. Pelapor membuat laporan 1.1 Tampilan form laporan
2. Pelapor menetukan lokasi 2.1 Menampilkan data jalan
berdasarkan data yang ada di yang telah diinput oleh staff
sistem PU
3. Mengirimkan laporan 3.1 Informasi tampilan laporan
4. Pelapor menunggu konfirmasi terekan oleh sistem
tindak lanjut oleh staff PU 4.1 Tampilan pelapor telah
5. Admin staff PU mengkonfrimasi ditindaklanjuti
tindak lanjut laporan 5.1 Tampilan informasi pelapor
6. Amin mengkorfirmasi yang telas diselesaikan
tindaklanjut penyelesaiian
laporan

Exception 1. Jika pelapor belum memiliki akun maka akan dialihkan kehalaman
Condition registrasi member.
2. Jika pelapor tidak menemkan data jalan yang tersedia maka data
harus diisi secara manual.
3. Jika petugas tidak menemukan kevalidan data dilapangan maka data
tidak ditindak lanjuti.
Tabel 3.5 Use Case Description pendaftaran user
f. Fully Developed Use Case untuk Memberikan komentar dapat dilihat pada
tabel 3.6 di bawah ini.
Use Case Name Memberikan komentar
Scenario Mengisi komentar pada laporan
Trigerring Event Komentar laporan
Brief Description Member memberikan komentar yang ada

10
 Actor User
Related Use Case Melaporkan masalah
Stakeholder User
Precondition Harus ada laporan
Actor System
Flow Activity 1. Aktor meberikan komentar 1.1 sistem menyimpan komentar
pada setiap laporan

Exception Condition 1. Jika tidak terdapat laporan maka tidak bisa memberikan komentar
Tabel 3.6 Use Case Description memberikan komentar
g. Fully Developed Use Case untuk Melihat laporan dapat dilihat pada tabel 3.7
di bawah ini.
Use Case Name Melihat laporan
Scenario Melihat laporan dan komentar yang telah dibuat
Trigerring Event Daftar laporan
Brief Description admin adan pimpinan melihat hasil laporan yang dibuat
Actor Admin dan pimpinan
Related Use Case Laporan
Stakeholder Admin dan pemimpin
Precondition Harus ada laporan
Actor System
Flow Activity Melihat laporan Menampilkan laporan
Exception Jika tidak login maka tidak dapat melihat laporan
Condition
Tabel 3.7 Use Case Description melihat komentar
3.6 Mockup sistem
Merupakan tahapan dalam pembuatan desain tatap muka sistem informasi berbasis
web menggunakan aplikasi balsamiq. Mockup ini juga dipakai sebagai prototipe yang
disajikan kepada klien guna mencari kebutuhan sistem lain dari klien. Juga untuk
mencari masukan-masukan baru untuk menyempurnakan sistem yang akan dibangun.
Dibawah ini adalah Gambar-Gambar mockup yang kami buat dengann tujuan
sperti yang telah dijelaskan diatas.
a. Mockup tampilan halaman utama
Halaman ini merupakan tampilan halaman utama ketika url dari website di
buka, tampilan mirip seperti sosial media. Pada bagian atas terdapat menu untuk
mengunggah laporan. Dan pada bagian bawahnya terdapat tampilan unggahan
dari user lain diurutkan berdasarkan waktu unggah dan dapat dikomentari oleh
member lain. Namun apabila user belum memiliki akun, maka hanya dapat
melihat halaman utama saja, tanpa dapat berkomentar ataupun menambahkan

11
laporan. Mockup tampilan halaman utama dapat dilihat pada Gambar 3.6 dibawah
ini.

Gambar 3.6 Mockup tampilan halaman utama

b. Mockup tampilan login
Mockup tampilan login merupakan perencanaan atau disain untuk halaman
awal ketika user mencoba masuk kedalam sistem menggunakan email dan kata
sandi yang telah didaftarkan sebelumnya. Pada halaman ini ada 2 button selain
login yaitu lupa kata sandi dan belum punya akun? Apabila di tekan lupa kata
sandi maka user akan diarahkan ke halaman forgotten. Namun bila user belum
memiliki akun maka harus membuat akun baru dengan menekan tombol belum
punya akun dan akan diarahkan ke halaman signup. Mockup tampilan login dilihat
pada Gambar 3.7 dibawah ini.

12
 Gambar 3.7 Mockup tampilan Login
c. Mockup tampilan signup
Mockup tampilan signup adalah disain tampilan atau halaman ketika user
membuat akun baru pada sistem. Terdapat sebuah formulir yang wajib diisi
dengan data yang valid. Mockup tampilan signup dapat dilihat pada Gambar 3.8
dibawah ini.

Gambar 3.8 Mockup tampilan signup

13
d. Mockup tampilan forgotten
Mockup tampilan forgotten merupakan halaman menu apabila terjadi
kesalahan user lupa kata sandi. User harus mengisikan alamat email dan akan
menerima pemberitahuan pada email tersebut. Mockup tampilan forgotten dappat
dilihat pada Gambar 3.9 di bawah ini.

Gambar 3.9 Mockup tampilan forgotten

e. Mockup tampilan dashboard admin
Mockup tampilan dashboard admin merupakan halaman pertama kali terbuka
ketika admin login pada sistem. Pada halaman ini terdapat beberapa menu khusus
admin yaitu menu untuk data daerah, data user, data laporan serta logout untuk
keluar sistem. Mockup tampilan dashboard admin dapat dilihat pada Gambar 3.10
di bawah ini.

14
 Gambar 3.10 Mockup tampilan dashboard admin
f. Mockup tampilan dashboard admin data daerah
Apabila pada halaman dashboard admin memilih menu data daerah, maka
akan diarahkan ke halaman dashboard admin data daerah. Halaman ini berisi
form penambahan alamat jalan yang diisikan oleh admin. Juga terdapat tabel yang
menyajikan data yang telah ditambahkan oleh admin. Data dapat di hapus, di
update oleh admin. Mockup tampilan dashboard admin data daerah dapat dilihat
pada Gambar 3.11 dibawah ini.

Gambar 3.11 Mockup tampilan dashboard admin data daerah

15
g. Mockup tampilan dashboard admin data user
Dashboard admin data user dapat dibuka apabila pada halaman dashboard
admin memilih menu data user. Pada halaman ini admin hanya berhak untuk
melihat dan menghapus data. Mockup tampilan dashboard admin data user dapat
dilihat pada Gambar 3.12 dibawah ini.

Gambar 3.12 Mockup tampilan dashboard admin data user

h. Mockup tampilan dashboard admin data laporan
Ketika admin memilih menu data laporan pada halaman dashboard admin,
maka akan diarahkan ke halaman dashboard admin data laporan. Halaman ini
berisi tabel yang berisi laporan yang diunggah oleh user atau masyarakat. Admin
dapat melihat laporan, membaca komentar serta menghapus laporan. Mockup
tampilan dashboard admin data laporan dapat dilihat pada Gambar 3.13 dibawah
ini.

16
 Gambar 3.13 Mockup tampilan dashboard admin data laporan
i. Mockup tampilan dashboard admin data komentar
Pada halaman data laporan, apabila admin ingin melihat dan membaaca komentar,
maka akan dialihkan ke halaman dashboard admin data komentar. Admin hanya dapat
melihat dan menghapus komentar dan tidak bisa membalas komantar. Mockup tampilan
dashboard admin data komentar dapat dilihat pada Gambar 3.14 dibawah ini.

Gambar 3.14 Mockup tampilan dashboard admin data komentar

17
j. Mockup tampilan dashboard member
Halaman ini dapat diakses ketika member sudah login, maka pada halaman
utama di sebelah kanan atas terdapat nama member. Apabila di klik pada nama
member maka akan dialihkan ke halaman dashboard member. Pada halaman ini
terdapat tampilan profil dari member sesuai yang telah didaftarkan pada halaman
signup. Ada dua menu utama pada halaman dashboard member yaitu lihat
laporan dan lihat profil. Menu lihat laporan adalah untuk melihat laporan-laporan
yang telah diunggah oleh member tersebut. Menu lihat porofil adalah untuk
melihat profil member dan dapat melakukan proses edit didalamnya. Mockup
tampilan dashboard member dapat dilihat pada Gambar 3.15 di bwah ini.

Gambar 3.15 Mockup tampilan dashboard member

k. Mockup tampilan dashboard member edit profile
Merupakan halaman ketika member ingin merubah informasi profil masing-
masing. Hanya ada data yang bisa diubah yaitu, nomor telpon, alamat dan foto
profil. Untuk data lain tidak dapat dirubah karena terkait dengan data pada kartu
tanda penduduk elektronik. Mockup tampilan dashboard member edit profile dapat
dilihat pada Gambar 3.16 di bawah ini.

18
 Gambar 3.16 Mockup tampilan dashboard member edit profile
l. Mockup tampilan dashboard member view data laporan
Apabila pada halaman dashbor member dipilih menu view laporan, maka member
akan diarahkan ke halaman view laporan. Pada halaman ini terdapat tabel berupa
laporan-laporan yang telah di unggah. Mockup tampilan dashboard member view data
laporan dapat dilihat pada Gambar 3.17 di bawah ini.

Gambar 3.17 Mockup tampilan dashboard member view data laporan

19
m. Mockup tampilan dashboard member data komentar
Merupakan halaman yang menampilkan komentar pada kiriman laporan yang
telah diunggah oleh member. Member dapat membalas komentar dari member
lain. Halaman ini dapat dibuka ketika pada halaman view data laporan menekan tombol
komentar pada tabel. Mockup tampilan dashboard member data komentar dapat dilihat
pada Gambar 3.18 dibawah ini.

Gambar 3.18 Mockup tampilan dashboard member data komentar

n. Mockup tampilan form lapor
Merupakan halaman dimana member melakukan proses pelaporan kerusakan
jalan. Pada halaman ini tersaji form yang didalamnya adalah masalah yang
dikeluhkan, kemudian alamat lokasi permasalahan RT/RW, Desa/Kelurahan,
Kecamatan, nama jalan, tanggal kejadian dan juga unggah foto sebagai pemerkuat
bukti. Keseluruhan data pada form haruslah diisi pada saat melaporkan kerusakan.
Mockup tampilan form lapor dapat dilihat pada Gambar 3.19 di bawah ini.

20
Gambar 3.19 Mockup tampilan form lapor

21
 DAFTAR PUSTAKA
Satzinger et al. 2010. Systems Analysis & Design in a Changing World Fifth
Edition. Course Technology: USA.
Satzinger et al. 2012. Systems Analysis & Design in a Changing World Sixth
Edition. Course Technology: USA.

22