126
4.3.3 Perancangan Interface
Penulis menggunakan State Transition Diagram STD dan rancangan interface untuk merencanakan perancangan interface dalam penelitian ini.
1. State Transition Diagram STD
a. Level User Admin 1 Halaman Utama
Klik Home Masuk Home
Home Peta
Himbauan Status Siaga
Assessment Daftar Warga
User Peta
Masuk Peta Klik Himbauan
Masuk Armada Klik Status Siaga
Masuk Status Siaga Klik Assessment
Masuk Assessment Klik Daftar Warga
Masuk Daftar Warga Klik User
Masuk User
Keluar Klik Home
Masuk Home Logout
Klik Logout Masuk Logout
Gambar 4.15 Perancangan STD untuk halaman utama admin
127 2 Menu Peta
Menampilkan Data Assessment Per-RW
Peta Data
Assessment Per-RT
Klik Data RW Menampilkan Peta danData
Assessment Per-RT
Keluar Klik Peta
Masuk Peta Klik Back
Kembali Menampilkan Peta dan Data Assessment Per-RW
Peta dan Data Assessment
Per-RW Klik Peta
Masuk Peta
Gambar 4.16 Perancangan STD untuk halaman menu peta
3 Menu Himbauan
Gambar 4.17 Perancangan STD untuk halaman menu himbauan
128 4 Menu Peringatan Dini
Gambar 4.18 Perancangan STD untuk halaman menu pringatan dini
5 Menu Assessment
Gambar 4.19 Perancangan STD untuk halaman menu pringatan dini
111 6 Menu Daftar Warga
Gambar 4.20 Perancangan STD untuk halaman menu daftar warga
129
130 7 Menu User
Gambar 4.21 Perancangan STD untuk halaman menu user
8 Logout
Gambar 4.22
Perancangan STD untuk halaman menu logout
131 b. Level User Guest
1 Halaman Utama
Gambar 4.23 Perancangan STD untuk halaman utama guest
2 Halaman Peta
Menampilkan Data Assessment Per-RW
Peta Data
Assessment Per-RT
Klik Data RW Menampilkan Peta danData
Assessment Per-RT
Keluar Klik Peta
Masuk Peta Klik Back
Kembali Menampilkan Peta dan Data Assessment Per-RW
Peta dan Data Assessment
Per-RW Klik Peta
Masuk Peta
Gambar 4.24 Perancangan STD untuk halaman menu peta
2. Rancangan Interface
132 a. Level User Admin
1 Halaman Utama
Logo Kelurahan
LOGOUT USER
HOME HIMBAUAN
PPERINGATAN DINI PETA
DAFTAR WARGA ASSESSMENT
Aplikasi Manajemen Penanggulangan
Bencana Banjir
Kelurahan Karet Tengsin Kecamatan Tanah Abang Kota Administrasi Jakarta Pusat DKI Jakarta
PETA KELURAHAN KARET TENGSIN
STATUS SIAGA SAAT INI JUMLAH KEBUTUHAN BANTUAN
SIAGA
X
Keterangan
Kata Sambutan
Air Minum = x Lt | Beras = x Gr | Biskuit = x Gr | Mie Instan = xBks |
Sayuran = x Gr | Selimut = x Buah | Susu = x Gr | Telur = x Butir |
Gambar 4.25 Perancangan interface untuk halaman utama
2 Halaman Peta RW
Gambar 4.26 Perancangan interface untuk halaman peta RW
3 Halaman Peta RT
133
PETA KELURAHAN KARET TENGSIN
JUMLAH KORBAN DI MASING-MASING RT
X
Manula : X
Dewasa : X
Anak : X
Balita : X
RT
X
Manula : X
Dewasa : X
Anak : X
Balita : X
RT
X
Manula : X
Dewasa : X
Anak : X
Balita : X
RT
X
Manula : X
Dewasa : X
Anak : X
Balita : X
RT
X
Manula : X
Dewasa : X
Anak : X
Balita : X
RT
LOGOUT USER
HOME HIMBAUAN
PETA DAFTAR WARGA
ASSESSMENT PERINGATAN DINI
Gambar 4.27 Perancangan interface untuk halaman peta RT
4 Halaman Himbauan
NO JUDUL
ISI AKSI
KIRIM SMS TAMBAH HIMBAUAN
X XXXXX
X. XXXXXXXXXXXXX X. XXXXXXXXXXXXX
X. XXXXXXXXXXXXX
V
kirim delete
edit X
XXXXX X. XXXXXXXXXXXXX
X. XXXXXXXXXXXXX X. XXXXXXXXXXXXX
V
kirim delete
edit X
XXXXX X. XXXXXXXXXXXXX
X. XXXXXXXXXXXXX X. XXXXXXXXXXXXX
V
kirim delete
edit X
XXXXX X. XXXXXXXXXXXXX
X. XXXXXXXXXXXXX X. XXXXXXXXXXXXX
V
kirim delete
edit X
XXXXX X. XXXXXXXXXXXXX
X. XXXXXXXXXXXXX X. XXXXXXXXXXXXX
V
kirim delete
edit X
XXXXX X. XXXXXXXXXXXXX
X. XXXXXXXXXXXXX X. XXXXXXXXXXXXX
V
kirim delete
edit X
XXXXX X. XXXXXXXXXXXXX
X. XXXXXXXXXXXXX X. XXXXXXXXXXXXX
V
kirim delete
edit X
XXXXX X. XXXXXXXXXXXXX
X. XXXXXXXXXXXXX X. XXXXXXXXXXXXX
V
kirim delete
edit LOGOUT
USER HOME
HIMBAUAN PETA
DAFTAR WARGA ASSESSMENT
PERINGATAN DINI
Gambar 4.28 Perancangan interface untuk halaman himbauan
5 Halaman Tambah Himbauan
134
Gambar 4.29 Perancangan interface untuk halaman tambah himbauan
6 Halaman Status Siaga
NO STATUS
KONDISI AKSI
1 Normal
2 Siaga 1
X. XXXXXXXXXXXXX X. XXXXXXXXXXXXX
X. XXXXXXXXXXXXX Status Aktif
3 Siaga 2
X. XXXXXXXXXXXXX X. XXXXXXXXXXXXX
X. XXXXXXXXXXXXX 4
Siaga 3 X. XXXXXXXXXXXXX
X. XXXXXXXXXXXXX X. XXXXXXXXXXXXX
5 Siaga 4
X. XXXXXXXXXXXXX X. XXXXXXXXXXXXX
X. XXXXXXXXXXXXX Status Aktif
Status Aktif Status Aktif
Status Aktif LOGOUT
USER HOME
HIMBAUAN PETA
DAFTAR WARGA ASSESSMENT
PERINGATAN DINI
Gambar 4.30 Perancangan interface untuk halaman status siaga
7 Halaman Assessment
135
Gambar 4.31 Perancangan interface untuk halaman assessment
8 Halaman Detail Assessment
RW MANULA
X XXX
XXX XXX
X XXX
X XXX
DEWASA XXX
XXX XXX
XXX XXX
ANAK-ANAK XXX
XXX XXX
XXX XXX
BALITA XXX
XXX XXX
XXX XXX
AKSI XXX
XXX XXX
POS PENGUNGSIAN
XXX XXX
XXX XXX
XXX RT
X X
AIR MINUM XXX
XXX XXX
XXX XXX
BERAS XXX
XXX XXX
XXX XXX
BISKUIT XXX
XXX XXX
XXX XXX
MIE INSTAN XXX
XXX XXX
XXX XXX
SAYURAN XXX
XXX XXX
XXX XXX
NO X
X SELIMUT
XXX XXX
XXX XXX
XXX SUSU
XXX XXX
XXX XXX
XXX TELUR
XXX XXX
XXX XXX
XXX LOGOUT
USER HOME
HIMBAUAN PETA
DAFTAR WARGA ASSESSMENT
PERINGATAN DINI
Gambar 4.32 Perancangan interface untuk halaman detail assessment
9 Halaman Pilih Jenis Warga
136
Gambar 4.33
Perancangan interface untuk halaman pilih jenis warga 10 Halaman Daftar RW
Gambar 4.34 Perancangan interface untuk halaman daftar RW
11 Halaman Daftar RT
137
Gambar 4.35 Perancangan interface untuk halaman daftar RT
12 Halaman Daftar Warga
Gambar 4.36 Perancangan interface untuk halaman daftar Warga
13 Halaman User Admin
138
Gambar 4.37 Perancangan interface untuk halaman user
b. Level User Guest 1 Halaman Utama
Logo Kelurahan
HOME PETA
Aplikasi Manajemen Penanggulangan
Bencana Banjir
Kelurahan Karet Tengsin Kecamatan Tanah Abang Kota Administrasi Jakarta Pusat DKI Jakarta
PETA KELURAHAN KARET TENGSIN
STATUS SIAGA SAAT INI JUMLAH KEBUTUHAN BANTUAN
SIAGA
X
Keterangan
Kata Sambutan
Air Minum = x Lt | Beras = x Gr | Biskuit = x Gr | Mie Instan = xBks |
Sayuran = x Gr | Selimut = x Buah | Susu = x Gr | Telur = x Butir |
Gambar 4.38 Perancangan interface untuk halaman utama
2 Halaman Peta RW
139
PETA KELURAHAN KARET TENGSIN
JUMLAH KORBAN DI MASING-MASING RW
RW
X
Manula : X
Dewasa : X
Anak : X
Balita : X
RW
X
Manula : X
Dewasa : X
Anak : X
Balita : X
RW
X
Manula : X
Dewasa : X
Anak : X
Balita : X
RW
X
Manula : X
Dewasa : X
Anak : X
Balita : X
RW
X
Manula : X
Dewasa : X
Anak : X
Balita : X
HOME PETA
Gambar 4.39
Perancangan interface untuk halaman peta RW
3 Halaman Peta RT
PETA KELURAHAN KARET TENGSIN
JUMLAH KORBAN DI MASING-MASING RT
X
Manula : X
Dewasa : X
Anak : X
Balita : X
RT
X
Manula : X
Dewasa : X
Anak : X
Balita : X
RT
X
Manula : X
Dewasa : X
Anak : X
Balita : X
RT
X
Manula : X
Dewasa : X
Anak : X
Balita : X
RT
X
Manula : X
Dewasa : X
Anak : X
Balita : X
RT
LOGOUT USER
HOME HIMBAUAN
PETA DAFTAR WARGA
ASSESSMENT PERINGATAN DINI
Gambar 4.40 Perancangan interface untuk halaman peta RT
4.4 System Implementation