METODOLOGI PENELITIAN
1. Diagram Konteks
4.3.3 Perancangan Interface
4.3.3.3 Perancangan Antar Muka
Desain antar muka ( interface ) ini bertujuan untuk memberikan gambaran yang optimal untuk aplikasi SIPERSIB, sehingga pegguna dapat berinteraksi dengan baik sesuai dengan kebutuhan pengguna. Berikut adalah rancangan desain antar muka SIPERSIB :
136
a) Rancangan Layar Home (Layar Utama / Index) untuk publik.
SISTEM INFORMASI SPASIAL SEBARAN INDUSTRI BESAR DKI ( SIPERSIB )
FOOTER HEADER
GIS INDUSTRI INDUSTRI JAKARTA PENGETAHUAN WEBSITE TERKAIT BUKU TAMU Halaman utama Login administator
Gambar 4.19 Halaman Layar Utama / Index
b) Rancangan Layar GIS INDUSTRI
HEADER
TOOLS PETA
VIEW PETA
JENIS PETA
FOOTER
LIHAT PETA ONLINE DETAIL PETA
137
HEADER
TOOLS PETA
LEGENDA / FUNGSI
PETA PETA DKI JAKARTA
FOOTER
Gambar 4.21 Halaman Layar GIS Industri
c) Rancangan Layar INDUSTRI JAKARTA ( Administrasi )
HEADER
FOOTER Nama kab
VIEW DATA ADMINISTRASI
ADMINISTRASI INDUSTRI CEROBONG
HALAMAN UTAMA PENCEMARAN BUKU TAMU
Cari Cari administrasi
Data Administrasi
138
d) Rancangan Layar INDUSTRI JAKARTA ( Industri)
HEADER
FOOTER Nama industri
VIEW DATA INDUSTRI ADMINISTRASI INDUSTRI CEROBONG
HALAMAN UTAMA PENCEMARAN BUKU TAMU
Cari Cari industri
Data Industri
Gambar 4.23 Halaman Layar Industri Jakarta – Industri
e) Rancangan Layar INDUSTRI JAKARTA ( Cerobong )
HEADER
FOOTER Nama cerobong
VIEW DATA CEROBONG ADMINISTRASI INDUSTRI CEROBONG
HALAMAN UTAMA PENCEMARAN BUKU TAMU
Nama industri Cari cerobong
Data Cerobong
Cari
139
f) Rancangan Layar INDUSTRI JAKARTA ( Pencemaran )
HEADER
FOOTER Nama industri
VIEW DATA PENCEMARAN ADMINISTRASI INDUSTRI CEROBONG
HALAMAN UTAMA PENCEMARAN BUKU TAMU
Nama cerobong Cari pencemaran
Data Pencemaran
Cari
Gambar 4.25 Halaman Layar Industri Jakarta – Pencemaran
g) Rancangan Layar PENGETAHUAN HEADER
FOOTER ISI PENGETAHUAN
HALAMAN UTAMA LOGIN ADMINISTRATOR
140
h) Rancangan Layar WEBSITE TERKAIT
HEADER FOOTER HALAMAN UTAMA LOGO LOGO KETERANGAN KETERANGAN LOGIN ADMINISTRATOR LOGO KETERANGAN
Gambar 4.27 Halaman Layar Website Terkait
i) Rancangan Layar BUKU TAMU HEADER
FOOTER Nama
ADMINISTRASI INDUSTRI CEROBONG
HALAMAN UTAMA PENCEMARAN BUKU TAMU
Email Buku Tamu Input Buku Tamu
Simpan Saran
Kembali
141
j) Rancangan Layar REGISTER USER HEADER
FOOTER Nama User
ADMINISTRASI INDUSTRI CEROBONG
HALAMAN UTAMA PENCEMARAN
Email Register User Jabatan BUKU TAMU Simpan Kembali Industri Gambar 4.29 Halaman Layar Register User
k) Rancangan Layar PROFIL HEADER
FOOTER ADMINISTRASI INDUSTRI CEROBONG
HALAMAN UTAMA PENCEMARAN BUKU TAMU UPDATE USER
PROFIL UPLOAD DATA LOGOUT
NAMA USER EMAIL JABATAN INDUSTRI
SIMPAN KEMBALI
142
l) Rancangan Layar UPLOAD DATA HEADER
FOOTER ADMINISTRASI INDUSTRI CEROBONG
HALAMAN UTAMA PENCEMARAN BUKU TAMU
LIHAT UPLOAD DATA
PROFIL UPLOAD DATA LOGOUT
CARI DATA
NAMA DATA TGL UPLOAD
UPLOAD DATA
Gambar 4.31 Halaman Layar upload data
m) Rancangan Layar Login Admin dan User
HEADER
FOOTER Username ADMINISTRASI INDUSTRI CEROBONG
HALAMAN UTAMA PENCEMARAN BUKU TAMU
Password LOGIN
LOGO
Login Reset
143
n) Rancangan Layar Home (Layar Utama / Index) Admin
HEADER
FOOTER ADMINISTRASI INDUSTRI CEROBONG
HALAMAN UTAMA PENCEMARAN BUKU TAMU
SELAMAT DATANG DILAYANAN PETA INDUSTRI DKI JAKARTA
LAPORAN LOGOUT
Gambar 4.33 Halaman Layar Utama Admin
o) Rancangan Layar INDUSTRI JAKARTA Admin ( Administrasi)
HEADER
FOOTER Nama kab
ADMINISTRASI INDUSTRI CEROBONG
HALAMAN UTAMA PENCEMARAN BUKU TAMU
Cari Cari administrasi
Data Administrasi
Input Administrasi
LAPORAN LOGOUT
No Nama kab Propinsi Aksi
Gambar 4.34 Halaman Layar Industri Jakarta Admin –
144
p) Rancangan Layar Industri Jakarta Admin – Edit Administrasi
HEADER
FOOTER
ADMINISTRASI INDUSTRI CEROBONG
HALAMAN UTAMA PENCEMARAN
Nama Kab Administrasi Input Administrasi Propinsi BUKU TAMU LAPORAN LOGOUT Simpan Kembali Gambar 4.35 Halaman Layar Industri Jakarta Admin – Edit Administrasi
q) Rancangan Layar INDUSTRI JAKARTA Admin ( Industri ) HEADER
FOOTER Nama industri
ADMINISTRASI INDUSTRI CEROBONG
HALAMAN UTAMA PENCEMARAN
Cari Cari industri
Data Industri
Input Industri
No Nama kab Nama Industri Alamat Telp Fax Aksi BUKU TAMU
LAPORAN LOGOUT
Gambar 4.36 Halaman Layar Industri Jakarta Admin – View Industri
145
r) Rancangan Layar Industri Jakarta Admin – Input Industri
HEADER
FOOTER ADMINISTRASI INDUSTRI CEROBONG
HALAMAN UTAMA PENCEMARAN
Nama kab Input Industri Nama industri Alamat X Y Telp Fax Penanggung jawab Jabatan BUKU TAMU LAPORAN LOGOUT Kembali Simpan
Gambar 4.37 Halaman Layar Industri Jakarta Admin – Input Industri
s) Rancangan Layar INDUSTRI JAKARTA Admin ( Cerobong ) HEADER
FOOTER Nama cerobong
ADMINISTRASI INDUSTRI CEROBONG
HALAMAN UTAMA PENCEMARAN
Nama industri Cari cerobong
Data Cerobong
Cari Input Cerobong
No Nama Industri Nama Cerobong Aksi
BUKU TAMU
LAPORAN LOGOUT
146
t) Rancangan Layar Industri Jakarta Admin – Input Cerobong
HEADER
FOOTER
ADMINISTRASI INDUSTRI CEROBONG
HALAMAN UTAMA PENCEMARAN
Nama industri Input Cerobong Nama cerobong BUKU TAMU LAPORAN LOGOUT Kembali Simpan
Gambar 4.39 Halaman Layar Industri Jakarta Admin – Input Cerobong
u) Rancangan Layar INDUSTRI JAKARTA Admin ( Pencemaran ) HEADER
FOOTER Nama industri
ADMINISTRASI INDUSTRI CEROBONG
HALAMAN UTAMA PENCEMARAN
Nama cerobong Cari pencemaran Data Pencemaran Cari Input Pencemaran BUKU TAMU LAPORAN LOGOUT
No Tanggal Nama Cerobong Nama Industri Status Aksi
147
v) Rancangan Layar Industri Jakarta Admin – Input Pencemaran
HEADER
FOOTER Id pencemaran
ADMINISTRASI INDUSTRI CEROBONG
HALAMAN UTAMA PENCEMARAN
Nama cerobong Input Pencemaran Tanggal NH3 CL2 HCL HF OPASITAS PARTIKULAT SO2 H2S Hg As Sb Cd Zn Pb BUKU TAMU LAPORAN LOGOUT Kembali Simpan
Gambar 4.41 Halaman Layar Industri Jakarta Admin – Input Pencemaran
w) Rancangan Layar INDUSTRI JAKARTA Admin ( Laporan )
HEADER
FOOTER ADMINISTRASI INDUSTRI CEROBONG
HALAMAN UTAMA PENCEMARAN
Data Pencemaran
BUKU TAMU LAPORAN LOGOUT
No Tanggal Nama Cerobong Nama Industri Status
Cetak
Gambar 4.42 Halaman Layar Industri Jakarta Admin – Laporan
148
HEADER
FOOTER ADMINISTRASI INDUSTRI CEROBONG
HALAMAN UTAMA PENCEMARAN LAPORAN BUKU TAMU LOGOUT
Data Buku Tamu
No Nama Industri Email Saran Aksi
Gambar 4.43 Halaman Layar Buku Tamu Admin