Tampilan Admin Perancangan Antar Muka

55

3.7 Perancangan Antar Muka

3.7.1 Tampilan Admin

T01 jika tombol “masuk” di klik dan username serta password benar maka tampilan menuju T01.1 apabila username dan password salah maka akan muncul pesan M01 Keterangan : Tampilan : T01 Ukuran : 900x700 Font : 12px Jenis Huruf : arial LOGO Masuk Batal Username : Password : Gambar 3.11. Tampilan Log In T01.1 jika tombol “lihat” di klik maka tampilan menuju T01.2 jika kolom “search” di isi misalnya di isikan nama Dewa Putu Gede, Bc.IP, SH, MH dan mengkilk tombol “cari” maka tampilan menuju ke T01.3 jika tombol “tambah” di klik maka tampilan akan menuju T02 Keterangan : Tampilan : T01.1 Ukuran : 900x700 Font : 12px Jenis Huruf : arial LOGO search Cari Lihat Tambah Gambar 3.12. Tampilan Home Admin 56 T01.2 jika salah satu nama di klik, misalnya nama “Dewa Putu Gede, Bc.IP, SH, MH ” maka akan menuju tampilan T02.2 jika tombol “next di klik maka akan menuju tampilan T01.2.1 jika tombol “home” di klik maka akan kembali ke tampilan T01.1 Keterangan : Tampilan : T01.2 Ukuran : 900x700 Font : 12px Jenis Huruf : arial Dewa Putu Gede, Bc.IP, SH, MH Enceng Suherman, SH Didik Budi Waluyo, SH, M.Si Dra. Leny Puspasari Rosyidin, Bc.IP,SH Saiful Sahri, Amd.IP, S.Sos, MH Drs. Moch. Kond Bedraningrat,M.Si Inna Imaniati S.Psi, M.Si Toni Kurniawan, AKS, Msi Drs. Bratadinata, M.Si Next Home Gambar 3.13. List Data Pegawai T01.2.1 jika tombol “next di klik maka akan menuju tampilan lanjutannya yg memperlihatkan list data pegawai seperti tampilan ini Dan mengklik nama untuk bisa melihat detail data pegawai jika tombol “back” di klik maka akan kembali ke tampilan T01.2 Keterangan : Tampilan : T01.2a Ukuran : 900x700 Font : 12px Jenis Huruf : arial Gunadi Iredana, S.Sos Bagus Endro Sucahyo, MPS.Sp Engkes Sukaesih, SP.d dr. Chaerul Dawam drg. Nurul Widiatresna Yusti Astra Pertiwi, ST Fauzen, Amd.IP, S.Sos Yulius Jum Hertanto, A.Md.IP, SH Donny Yudha Pratama, Amd.IP Fitri Wulandari, A.Md.IP, SH Next Back Gambar 3.14. List Data Pegawai lanjutan 57 T01.3 jika nama Dewa Putu Gede, Bc.IP, SH, MH di klik maka akan menuju ke tampilan T02,2 jika tombol “back” di klik maka akan kembali ke tampilan T01.1 Keterangan : Tampilan : T01.9 Ukuran : 900x700 Font : 12px Jenis Huruf : arial Dewa Putu Gede, Bc.IP, SH, MH Back Gambar 3.15. Tampilan Hasil Search Gambar 3.16. Tampilan Data Pribadi Pegawai 58 T02.1 tampilan detail data pribadi disini admin dapat menghapus dan mengedit data pribadi pegawai. Jika tombol “hapus” di klik maka akan menampilkan message M02 jika tombol “edit” di klik maka akan menampilkan tampilan T02.2 jika tombol “kembali” di klik maka akan kembali ke tampilan T02 Keterangan : Tampilan : T02.1 Ukuran : 900x700 Font : 12px Jenis Huruf : arial Data Pribadi Dewa Putu Gede Bc.IP. SH. MH Nama : Hapus Edit Kembali No. Telepon : Alamat 022 7271211 Komp. LP Sukamiskin jl. A. H.Nasution No. 114 Bandung Jabatan : Kepala UPT Jenis Kelamin : Agama : Tempat Tanggal Lahir : Status Perkawinan : Pendidikan akhir : PangkatGOL : Laki-laki Hindu Bali , 3 Oktober 1959 Menikah Pasca Sarjana PembinaTk. IIVb NIP : 19591003 198403 1 001 Gambar 3.17. Tampilan Detail Data Pribadi Pegawai T02.4 tampilan edit data pribadi disini akan dilakukan perubahan, misalnya dari single menjadi menikah. jika data yang dimasukan benar dan di klik tombol “simpani” maka daa akan tersimpan jika tombol “kembali” di klik maka akan kembali menuju T02.2 Keterangan : Tampilan : T02.2 Ukuran : 900x700 Font : 12px Jenis Huruf : arial Dewa Putu Gede Bc.IP. SH. MH Nama : Data Pribadi Jenis Kelamin : Agama : Tempat Tanggal Lahir : Status Perkawinan : Alamat : No. Telepon : Kode Pos : Laki-laki Hindu Bali Menikah Komp. LP Sukamiskin jl. A. H.Nasution No. 114 Bandung 022 7271211 40293 Simpan Kembali Tglblnthn: 3101959 Gambar 3.18. Tampilan Edit Data Pribadi 59 Gambar 3.19. Tampilan Diklat Pegawai T03.3 tampilan detail data diklat ketika tombol “hapus” di klik maka akan ada message M03 tombol edit digunakan apabila data terdapat kesalahan jika tombol “edit” akan menuju pada tampilan T03.4 jika tombol “kembali” di klik maka akan kembali ke T03.2 Keterangan : Tampilan : T03.3 Ukuran : 900x700 Font : 12px Jenis Huruf : arial ADUM Nama Diklat : Data Diklat Pegawai Hapus Edit Kembali Jumlah Jam : 500 1996 Departemen Kehakiman Tahun Diklat : Penyelengggara : Tempat : Jakarta Gambar 3.20. Tampilan Detail Data Diklat Pegawai 60 T03.4 tampilan edit data diklat untuk admin apabila data sudah selesai di edit dan dimasukan dengan benar kemudian klik tombol “simpani” maka tampilan akan tersimpan jika tombol “kembali” di klik maka akan menuju T03.2 Keterangan : Tampilan : T03.4 Ukuran : 900x700 Font : 12px Jenis Huruf : arial ADUM Nama Diklat : Data Diklat Pegawai Simpan Kembali Jumlah Jam : 500 1996 Departemen Kehakiman Tahun Diklat : Penyelengggara : Tempat : Jakarta Gambar 3.21. Tampilan Edit Data Diklat Pegawai Gambar 3.22. Tampilan Data Keluarga Pegawai 61 T04.3 Tampilan detail data keluarga ketika tombol “hapus” di klik maka akan ada message M06 tombol edit digunakan untuk mengedit apabila terdapat kesalahan jika tombol “edit” di klik akan menuju pada tampilan T04.4 jika tombol “kembali” di klik akan menuju ke T04.2 Keterangan : Tampilan : T04.3 Ukuran : 900x700 Font : 12px Jenis Huruf : arial Bunga Citra Lestari Nama : Data Keluarga Jenis Kelamin : Agama : Tempat lahir : Tanggal Lahir : Pekerjaan : Keterangan : Perempuan Hindu Jakarta 25 desember 1965 wiraswasta Istri Hapus Edit Kembali Gambar 3.23. Tampilan Detail Data Keluarga Pegawai T04.4 Tampilan editl data keluarga apabila data sudah selesai dimasukan dengan benar dan klik tombol “simpani” maka tampilan akan tersimpan jika tombol “kembali” di klik maka akan menuju T04.2 Keterangan : Tampilan : T04.4 Ukuran : 900x700 Font : 12px Jenis Huruf : arial Bunga Citra Lestari Nama : Data Keluarga Jenis Kelamin : Agama : Tempat lahir : Tanggal Lahir : Pekerjaan : Keterangan : Perempuan Hindu Jakarta 25 desember 1965 wiraswasta Istri Simpan Kembali Gambar 3.24. Tampilan Edit Data Keluarga Pegawai 62 Gambar 3.25. Tampilan Data Absensi Pegawai T05.3 Tampilan detail data absensi ketika tombol “hapus” di klik maka akan ada message M07 jika tombol “edit” di klik akan menuju pada tampilan T05.4 jika tombol “kembali” di klik maka akan menuju ke T05.2 jika klik “print laporan” maka akan mengeprint laporan absensi Keterangan : Tampilan : T05.3 Ukuran : 900x700 Font : 12px Jenis Huruf : arial Alasan tidak masuk kerja Data Absensi Pegawai Cuti : Izin : Sakit : Dinas Keluar : Jumlah : Keterangan : Ya 30 Diklat Hapus Edit Kembali Print laporan Gambar 3.26. Tampilan Detail Data Absensi Pegawai 63 Gambar 3.27. Tampilan Edit Data Absensi Pegawai Gambar 3.28. Tambah data Pegawai Baru 64 T02.1 tampilan untuk mengiisi data pribadi pegawai baru jika data yang dimasukan benar dan di klik tombol “simpani” maka data akan tersimpan jika klik “kembali” maka akan kembali ke T02 Keterangan : Tampilan : T02.1 Ukuran : 900x700 Font : 12px Jenis Huruf : arial Nama : Data Pribadi Jenis Kelamin : Agama : Tempat Tanggal Lahir : Status Perkawinan : Alamat : No. Telepon : Kode Pos : simpan Kembali Tglblnthn: Gambar 3.29. Tampilan Isi Data Pegawai Gambar 3.30. Tambah Data Diklat Pegawai 65 T05.1 tampilan untuk mengisi data diklat untuk admin apabila data sudah selesai di dimasukan dan mengklik tombolsimpan maka data akan tersimpan jika mnegklik tombol “kembali” maka akan kembali ke T06.1 Keterangan : Tampilan : T05.1 Ukuran : 900x700 Font : 12px Jenis Huruf : arial Nama Diklat : Data Diklat Pegawai Simpan Kembali Jumlah Jam : Tahun Diklat : Penyelengggara : Tempat : Gambar 3.31. Tampilan Isi Data Diklat Pegawai Gambar 3.32. Tambah Data Keluarga Pegawai 66 T06.1 Tampilan untuk mengisi data keluarga apabila data sudah selesai dimasukan dan klik tombol simoan maka data akan tersimpan jika tombol “kembali di klik maka akan kembali ke T06 Keterangan : Tampilan : T06.1 Ukuran : 900x700 Font : 12px Jenis Huruf : arial Nama : Data Keluarga Jenis Kelamin : Agama : Tempat lahir : Tanggal Lahir : Pekerjaan : Keterangan : simpan Kembali Gambar 3.33. Tampilan Isi Data Keluarga Pegawai Gambar 3.34. Tambah Data Absensi Pegawai 67 T07.1 Tampilan untuk mengisi data absensi disini data di input apabila pegawai tidak masuk kerja. Ada untuk menginputkan keterangannya. apabila data sudah selesai diinputkan dengan benar dan klik tombol “simpan” maka tampilan akan tersimpan jika klik tombol kembali maka akan kembali ke T07 Keterangan : Tampilan : T07.1 Ukuran : 900x700 Font : 12px Jenis Huruf : arial Alasan tidak masuk kerja Data Absensi Pegawai Cuti : Izin : Sakit : Dinas Keluar : Jumlah : Keterangan : simpan kembali Gambar 3.35. Tampilan Isi Data Absensi Pegawai Maaf Username dan Password salah Silahkan ulangi OK Gambar 3.36. Pesan Login gagal Anda yakin akan menghapus data pegawai ? OK Cancel Gambar 3.38. Pesan Hapus Data Pegawai 68 Anda yakin akan menghapus data keluarga pegawai ? OK Cancel Gambar 3.39. Pesan Hapus Data Keluarga Pegawai Anda yakin akan menghapus data absensi pegawai ? OK Cancel Gambar 3.40. Pesan Hapus Data Absensi Pegawai Anda yakin akan keluar? OK Cancel Gambar 3.41. Pesan Logout 69

3.7.2 Tampilan User