3.4.3. Perancangan Antarmuka interface
Spesifikasi antarmuka merupakan suatu bentuk tampilan dari program yang akan dibuat untuk kebutuhan interface dengan user. Spesifikasi antarmuka
terdiri dari perancangan tampilan menu, tampilan form, tampilan pesan, dan jaringan semantik. Berikut ini gambaran dari perancangan antarmuka :
1. Tampilan Menu Login
Gambar Login
Aplikasi STO TELKOM
Login Administrator Username
Password |
Login Hapus
F01 Navigator
1. masukan id pengguna di form input username
2. masukan password di form input password
3. Klik tombol login untuk malakukan login , apabila login berhasil maka akan keluar
form F02 4. klik tombol hapus untuk membersihkan
form input username dan password
Ukuran Form 1200 x 400 px Font Arial, verdana
Gambar 3.33 Tampilan Menu Login 2.
Tampilan Menu Utama
F02 Navigator
1. klik tombol home untuk masuk ke F02 2. klik link jabatan akan tampil F03
3. klik link pegawai akan tampil F04 4. klik link pengguna akan tampil F05
5. klik link kecamatan akan tampil F06 6. klik link kelurahan akan tampil F07
7. klik link rw akan tampil F08 8. klik link rt akan tampil F09
9. klik link sto akan tampil F10 10. klik link rk akan tampil F11
11. klik link dp akan tampil F12 12. klik link sambungan akan tampil F13
13. klik link statistik akan tampil F14 14. klik link pelanggan akan tampil F15
15. klik link sajian informasi akan tampil F16 16. klik link logout akan tampil F01
Ukuran Form 1200 x 400 px Font Arial, verdana
Gambar Home
kepegawaian Pengguna
Alamat Data STO
Statistik Pelanggan Sajian informasi Logout
Jabatan Pegawai
Kecamatan Kelurahan
RW RT
STO Sambungan
Telepon RK
DP
Gambar 3.34 Tampilan Menu Utama
3. Tampilan Lihat Jabatan
F03 Navigator
1. klik cari maka akan tampil data yang di cari berdasar kata yang ada di form input
pencarian 2. klik lambang + akan tampil Form F03i
Ukuran Form 1200 x 400 px Font Arial, verdana
+
Pencarian Cari
Kode Jabatan Nama Jabatan
Aksi
Gambar 3.35 Tampilan Lihat Jabatan 4.
Tampilan Tambah Jabatan
F03i Navigator
1. kode jabatan terisi otomatis oleh sistem 2. isi nama jabatan dengan huruf
3. klik tombol tambah untuk tambah jabatan 4. klik tombol kembali untuk kembali ke
menu sebelumnya
Ukuran Form 1200 x 400 px Font Arial, verdana
Form Tambah Jabatan 1
Tambah Kembali
Kode Jabatan Nama Jabatan
Gambar 3.36 Tampilan Tambah Jabatan 5.
Tampilan Ubah Jabatan
F03e Navigator
1. kode jabatan tidak bisa di ubah 2. ubah nama jabatan
3. klik tombol edit untuk merubah data 4. klik tombol kembali untuk kembali ke
menu sebelumnya
Ukuran Form 1200 x 400 px Font Arial, verdana
Form Edit Jabatan 1
xxxx Edit
Kembali
Kode Jabatan Nama Jabatan
Gambar 3.37 Tampilan Ubah Jabatan 6.
Tampilan Hapus Jabatan
F03h Navigator
1. klik tombol hapus untuk jika akan menghapus data
2. klik tombol kembali untuk kembali ke halaman sebelumnya
Ukuran Form 1200 x 400 px Font Arial, verdana
Form Hapus Jabatan
Hapus Kembali
Apakah anda yakin akan menghapus data tersebut ?
Gambar 3.38 Tampilan Hapus Jabatan 7.
Tampilan Lihat Pegawai
F04 Navigator
1. klik cari maka akan tampil data yang di cari berdasar kata yang ada di form input
pencarian 2. klik lambang + akan tampil Form F04i
Ukuran Form 1200 x 400 px Font Arial, verdana
+
Pencarian Cari
nip Nama Pegawai
Aksi Jabatan
Gambar 3.39 Tampilan Lihat Pegawai 8.
Form Tambah Pegawai
F04i Navigator
1. isi form input nik pegawai dengan angka 2. isi form nama pegawai dengan huruf
3. pilih jabatan pegawai 4. klik tombol tambah untuk tambah jabatan
5. klik tombol kembali untuk kembali ke menu sebelumnya
Ukuran Form 1200 x 400 px Font Arial, verdana
Form Tambah Pegawai
Tambah Hapus
Nik Nama Pegawai
Jabatan