3.3.5.2 Struktur Menu Admin
Login
Keluar Profile
Data Pegawai
Rekapitulasi Pegawai
Rekap Gender Rekap Usia
Rekap Tingkat Pendidikan
Rekap Tempat Kerja
Rekap Masa Kerja
Rekap Pangkat Tambah Data
Pegawai Edit Data
Pegawai Hapus Data
Pegawai Ubah Password
Gambar 3-13. Struktur Menu Admin
3.3.5.3 Struktur Menu Superadmin
Login
Profile Keluar
Data Admin
Data Pegawai
Rekapitulasi Rekap Gender
Rekap Pangkat Rekap Masa
Kerja Rekap Tempat
Kerja Rekap Tingkat
Pendidikan Rekap Usia
Tambah Data Pegawai
Edit Data Pegawai
Hapus Data Pegawai
Tambah Data Admin
Edit Data Admin Hapus Data
Admin Ubah Password
Gambar 3-14. Struktur Menu Superadmin
3.3.6 Perancangan Interface
Perancangan interface dibuat untuk kebutuhan interface dengan user, perancangan ini dibuat untuk interface umum, superadmin, dan admin. Berikut
rinciannya ditampilkan dibawah ini
3.3.6.1 Perancangan Interface Superadmin
T01 Navigasi
Header
Footer LogIn
username Grafik
Rekapitulasi
Rekapitulasi Pegawai
password
1. Klik grafik menuju halaman grafik T02
2. Klik home menuju halaman semula
3. Login dengan memasukan username dan password
superadmin maka akan menuju T03
Ukuran layar 100 dari layar user Gambar 3-15. Interface Halaman utama
T02 Navigasi
Header
Footer LogIn
username
Home Grafik
Grafik
password Gender
Usia Ting. Pend
Masa Kerja Temp Kerja
Pangkat
1. Klik gender akan me load halaman T02 dengan
gambar grafik gender, ini berlaku pada tombol
grafik lainnya seperti usia, tingkat pendidikan, masa
kerja, tempat kerja, dan pangkat. Semuanya akan
meload T02 dengan gambar grafik yang
ditentukan 2. Klik home menuju
halaman semula T01 3. Login dengan memasukan
username dan password superadmin maka akan
menuju T03 Ukuran layar 100 dari layar user
Gambar 3-16. Interface Grafik
T03 Navigasi
Header
Footer Rekapitulasi
Data Pegawai Data Admin
Keluar Profile
Rekapitulasi Data Pegawai
a. Klik Rekapitulasi akan ke halaman T03 ini
b. Klik Data Pegawai akan menuju T04
c. Klik Data Admin akan menuju T05
d. Klik Profil akan menuju page T06
e. Klik Keluar maka akan keluar dari tampilan
superadmin menuju ke T01
Ukuran layar 100 dari layar user
Gambar 3-17. Interface Menu Superadmin
T04 Navigasi
Header
Footer
Rekapitulasi Data Pegawai Data Admin Profile
Keluar Data Pegawai
Sidebar
Gender Usia
Ting. Pend Masa Kerja
Temp Kerja Pangkat
Detail Ubah
Hapus Tambah
Admin 1 2 3 4 ... Next
Tambah Pegawai
1. Klik tombol gender , usia, tingkat pendidikan,masa
kerja, tempat kerja, dan pangkat pada sidebar akan
memunculkan data pegawai sesuai dengan
kategori yang dipilihnya 2. Pada table pegawai akan
ada tombol detail yang menuju T07
3. Klik hapus data akan terhapus di database
4. Klik ubah akan menuju T08
5. Klik Tambah Admin akan menuju T09
6. Klik Tambah Pegawai maka akan menuju T11
Ukuran layar 100 dari layar user
Gambar 3-18. Interface Data Pegawai
T05 Navigasi
Header
Footer
Rekapitulasi Data Pegawai
Data Admin Profile
Keluar Data Admin
Data Admin Tambah Admin
Sidebar hapus
ubah aksi
1. Pada table aksi terdapat button hapus dan ubah
level admin, saat klik hapus maka data akan
terhapus dan saat klik ubah data akan terubah juga
dalam database 2. Tombol lainnya sama
fungsinya seperti T03 3. Klik Data Admin maka
akan menuju T05 ini 4. Klik Tambah Admin maka
akan menuju T09
Ukuran layar 100 dari layar user
Gambar 3-19. Interface Data Admin
T06 Navigasi
Header
Footer
Rekapitulasi Data Pegawai
Data Admin Profile
Keluar Form Detail Pegawai
NIP Nama
Ganti Password Sidebar
Jenis Kelamin Tingkat Pendidikan
Pangkat Tanggal Lahir
Job Title Mulai Kerja
Direkt Divisi
Bagian Urusan
1. Menu bar memiliki fungsi yang sama seperti T03
2. Klik Ganti Password maka akan menuju T10
Ukuran layar 100 dari layar user
Gambar 3-20. Interface Profile Admin atau Superadmin
T07 Navigasi
Header
Footer Data Pegawai
Data Pegawai
Sidebar
Gender Usia
Ting. Pend Masa Kerja
Temp Kerja Pangkat
Rekapitulasi Data Pegawai
Data Admin Profile
Keluar
1. Detail pegawai menampilkan data
pegawai yang dipilih detailnya
2. Klik seluruh tombol di sidebar maka akan
tampilannya akan seperti T04
Ukuran layar 100 dari layar user
Gambar 3-21. Interface Detail Data Pegawai
T08 Navigasi
Header
Footer
Rekapitulasi Data Pegawai Data Admin
Profile Keluar
Form Edit Pegawai NIP
Nama
Simpan Batal
Jenis Kelamin Tingkat Pendidikan
Pangkat Tanggal Lahir
Job Title Mulai Kerja
Direkt Divisi
Bagian Urusan
1. Klik Simpan maka akan tersimpan di database
2. Klik Batal maka akan kembali ke T04
3. menu bar memiliki fungsi yang sama seperti T03
Ukuran layar 100 dari layar user
Gambar 3-22. Interface Ubah Data Pegawai
T09 Navigasi
Header
Footer
Rekapitulasi Data Pegawai
Data Admin Profile
Keluar Form Tambah Admin
NIP Level
Simpan Ulangi
Tambah Admin Data Admin
Sidebar Nama
1. Klik simpan maka akan tersimpan di database
2. Klik ulangi maka form tambah admin akan ter-
reset 3. Sidebar memiliki fungsi
yang sama dengan T05 4. Menu bar memiliki fungsi
yang sama seperti T03
Ukuran layar 100 dari layar user
Gambar 3-23. Interface Tambah Admin
T10 Navigasi
Header
Footer
Rekapitulasi Data Pegawai
Data Admin Profile
Keluar Form Ganti Password
Password Lama Password Baru
Confirm Password Simpan
Ulangi
Ganti Password
Sidebar
1. Klik simpan maka password baru akan
tersimpan di database 2. Klik ulangi maka akan
terreset form ganti password
3. Tombol lainnya sama fungsinya seperti T03
Ukuran layar 100 dari layar user
Gambar 3-24. Interface Ganti Password
T11 Navigasi
Header
Footer
Rekapitulasi Data Pegawai
Data Admin Profile
Keluar Form Tambah Data
NIP Nama
Simpan Ulangi
Jenis Kelamin Tingkat Pendidikan
Pangkat Tanggal Lahir
Job Title Mulai Kerja
Direkt Divisi
Bagian Urusan
1. Klik simpan maka akan tersimpan di database
2. Klik ulangi maka form tambah admin akan ter-
reset 3. Menu bar memiliki fungsi
yang sama seperti T03
Ukuran layar 100 dari layar user
Gambar 3-25. Interface Tambah Pegawai
3.3.6.2 Perancangan interface admin
T01 Navigasi
Header
Footer LogIn
username Grafik
Rekapitulasi
Rekapitulasi Pegawai
password
1. Klik Rekapitulasi menuju halaman T01 ini
2. Klik Grafik menuju halaman T02
3. Login dengan memasukan username dan password
admin maka akan menuju T03
Ukuran layar 100 dari layar user Gambar 3-26. Interface Halaman Utama
T02 Navigasi
Header
Footer LogIn
username
Home Grafik
Grafik
password Gender
Usia Ting. Pend
Masa Kerja Temp Kerja
Pangkat
4. Klik gender akan me load halaman T02 dengan
gambar grafik gender, ini berlaku pada tombol
grafik lainnya seperti usia, tingkat pendidikan, masa
kerja, tempat kerja, dan pangkat. Semuanya akan
meload T02 dengan gambar grafik yang
ditentukan 5. Klik home menuju
halaman semula T01 6. Login dengan memasukan
username dan password admin maka akan menuju
T03 Ukuran layar 100 dari layar user
Gambar 3-27. Interface Grafik
T03 Navigasi
Header
Footer
Rekapitulasi Data Pegawai Profile
Keluar
Rekapitulasi Data Pegawai
1. Klik Rekapitulasi maka akan menuju T03 ini
2. Klik Data Pegawai akan menuju T04
3. Klik Profile akan menuju T05
4. Klik Keluar maka akan keluar dari tampilan
admin menuju ke T01
Ukuran layar 100 dari layar user
Gambar 3-28. Interface Rekapitulasi Data Pegawai
T04 Navigasi
Header
Footer
Rekapitulasi Data Pegawai Profile
Keluar Data Pegawai
Sidebar
Gender Usia
Ting. Pend Masa Kerja
Temp Kerja Pangkat
Detail Ubah
Hapus 1 2 3 4 ... Next
Tambah Pegawai
1. Klik tombol gender , usia, tingkat pendidikan,masa
kerja, tempat kerja, dan pangkat pada sidebar akan
memunculkan data pegawai sesuai dengan
kategori yang dipilihnya 2. Pada table pegawai akan
ada tombol detail yang menuju T06
3. Klik hapus data akan terhapus di database
4. Klik ubah akan menuju T07
5. Klik Tambah Pegawai maka akan menuju T08
Ukuran layar 100 dari layar user
Gambar 3-29. Interface Data Pegawai
T05 Navigasi
Header
Footer
Rekapitulasi Data Pegawai Profile
Keluar
Form Tambah Data
NIP Nama
Simpan Ulangi
Ganti Password
Sidebar
Jenis Kelamin Tingkat Pendidikan
Pangkat Tanggal Lahir
Job Title Mulai Kerja
Direkt Divisi
Bagian Urusan
1. Klik simpan maka akan tersimpan di database
2. Klik ulangi maka form tambah admin akan ter-
reset 3. menu bar memiliki fungsi
yang sama seperti T03 4. Klik Ganti Password maka
akan menuju T09
Ukuran layar 100 dari layar user
Gambar 3-30. Interface Profile Admin
T06 Navigasi
Header
Footer Data Pegawai
Rekapitulasi Data Pegawai
Profile Keluar
Data Pegawai
Sidebar
Gender Usia
Ting. Pend Masa Kerja
Temp Kerja Pangkat
1. Detail pegawai menampilkan data
pegawai yang dipilih detailnya
2. Klik seluruh tombol di sidebar maka akan
tampilannya akan seperti T06
Ukuran layar 100 dari layar user Gambar 3-31. Interface Detail Data Pegawai
T07 Navigasi
Header
Footer
Data pegawai
Profil Tambah
Data Keluar
Form Ubah Data
NIP Nama
Simpan Batal
Jenis Kelamin Tingkat Pendidikan
Pangkat Tanggal Lahir
Job Title Mulai Kerja
Direkt Divisi
Bagian Urusan
1. Klik Simpan maka akan tersimpan di database
2. Klik Batal maka akan kembali ke T04
3. Menu bar memiliki fungsi yang sama seperti
T03
Ukuran layar 100 dari layar user
Gambar 3-32. Interface Ubah Data Pegawai
T08 Navigasi
Header
Footer
Rekapitulasi Data Pegawai
Profile Keluar
Form Tambah Data NIP
Nama
Simpan Ulangi
Jenis Kelamin Tingkat Pendidikan
Pangkat Tanggal Lahir
Job Title Mulai Kerja
Direkt Divisi
Bagian Urusan
1. Klik simpan maka akan tersimpan di database
2. Klik ulangi maka form tambah admin akan ter-
reset 3. Menu bar memiliki fungsi
yang sama seperti T03
Ukuran layar 100 dari layar user
Gambar 3-33. Interface Tambah Data Pegawai
T09 Navigasi
Header
Footer
Rekapitulasi Data Pegawai
Profile Keluar
Form Ganti Password Password Lama
Password Baru Confirm Password
Simpan Ulangi
Ganti Password
Sidebar
4. Klik simpan maka password baru akan
tersimpan di database 5. Klik ulangi maka akan
terreset form ganti password
6. Tombol lainnya sama fungsinya seperti T03
Ukuran layar 100 dari layar user
Gambar 3-34. Interface Ganti Password
3.3.7 Implementasi interface pada system