Perancangan Interface Perancangan Sistem

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