State Transition Diagram STD Rancangan Interface

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