Perancangan Struktur Menu Perancangan Sistem

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