Perancangan Antarmuka Admin Perancangan Antarmuka

91

3.2.3.1 Perancangan Antarmuka Admin

1. Login T-01 ADMINISTRATOR LOGIN Username : Password : Klik Login untuk masuk ke T-02 Keterangan : Ukuran : 300 x 200 Background : Biru Gambar 3.28 Perancangan Antarmuka Login 2. Menu Home T-02 1 2 3 4 5 6 7 Logout Klik menu 1 untuk menuju ke T-02 Klik menu 2 untuk menuju ke T-03 Klik menu 3 untuk menuju T-04 Klik menu 4 untuk menuju T-05 Klik menu 5 untuk menuju T-06 Klik menu 6 untuk menuju T-07 Klik menu 7 untuk menuju T-08 Klik menu Logout untuk menuju T-01 Keterangan : Ukuran : 900 x 600 Background : Biru Gambar 3.29 Perancangan Antarmuka Home LOGIN 92 3. Menu User Management T-03 1 2 3 4 5 6 7 Logout Tambah User Baru ID Nama User name Password Telp Aksi Edit | Hapus Hak Akses First Previous Next Last Klik menu 1 untuk menuju ke T- 02 Klik menu 2 untuk menuju ke T- 03 Klik menu 3 untuk menuju T-04 Klik menu 4 untuk menuju T-05 Klik menu 5 untuk menuju T-06 Klik menu 6 untuk menuju T-07 Klik menu 7 untuk menuju T-08 Klik menu Logout untuk menuju T-01 Klik menu Tambah User Baru untuk menuju T-03A Klik menu Edit untuk menuju menu T-03B Klik menu Hapus Hak Akses untuk menghapus hak akses Klik menu First untuk melihat 10 data user pertama Klik menu Previous untuk melihat 10 data user sebelumnya Klik menu Next untuk melihat 10 data user selanjutnya Klik menu Last untuk melihat 10 data user terakhir Keterangan : Ukuran : 900 x 600 Background : Biru Gambar 3.30 Perancangan Antarmuka User Management 4. Submenu Tambah User Baru T-03A 1 2 3 4 5 6 7 Logout 93 Tambah Hak User NIP Pegawai : Detail Data User Username : Password : Klik menu 1 untuk menuju ke T- 02 Klik menu 2 untuk menuju ke T- 03 Klik menu 3 untuk menuju T-04 Klik menu 4 untuk menuju T-05 Klik menu 5 untuk menuju T-06 Klik menu 6 untuk menuju T-07 Klik menu 7 untuk menuju T-08 Klik menu Logout untuk menuju T-01 Klik tombol Input untuk menambahkan data user dan kembali ke T-03 Keterangan : Ukuran : 600 x 400 Background : Biru Gambar 3.31 Perancangan Antarmuka Tambah User Baru 5. Submenu Edit T-03B 1 2 3 4 5 6 7 Logout Edit Data User Detail Data User NIP : Nama Pegawai : Username : Password : Klik menu 1 untuk menuju ke T- 02 Klik menu 2 untuk menuju ke T- 03 Klik menu 3 untuk menuju T-04 Klik menu 4 untuk menuju T-05 Klik menu 5 untuk menuju T-06 Klik menu 6 untuk menuju T-07 Klik menu 7 untuk menuju T-08 Klik menu Logout untuk menuju T-01 Klik tombol Edit Data untuk menyimpan data user yang diedit Keterangan : Ukuran : 600 x 400 Background : Biru INPUT EDIT DATA 94 Gambar 3.32 Perancangan Antarmuka Edit 6. Menu Kepegawaian T-04 1 2 3 4 5 6 7 Logout Cetak Kartu Pegawai Nama Pegawai ID Jabatan Nama alamat telp Detail data aksi View Data Ubah Hapus First Previous Next Last Klik menu 1 untuk menuju ke T- 02 Klik menu 2 untuk menuju ke T- 03 Klik menu 3 untuk menuju T-04 Klik menu 4 untuk menuju T-05 Klik menu 5 untuk menuju T-06 Klik menu 6 untuk menuju T-07 Klik menu 7 untuk menuju T-08 Klik menu Logout untuk menuju T-01 Klik tombol tambah data baru untuk menuju T-04A Klik tombol Cetak Kartu Pegawai untuk menuju T-04B Klik tombol Ubah untuk menuju T-04C Klik tombol View Data untuk menuju T-04D Klik tombol Cari Data untuk menuju T-04E Klik tombol Hapus untuk menghapus data Klik menu First untuk melihat 10 data user pertama Klik menu Previous untuk melihat 10 data user sebelumnya Klik menu Next untuk melihat 10 data user selanjutnya Klik menu Last untuk melihat 10 data user terakhir Keterangan : Ukuran : 900 x 600 Background : Biru Gambar 3.33 Perancangan Antarmuka Kepegawaian Tambah data Cari Data 95 7. Submenu Tambah Data Baru T-04A INPUT DATA KARYAWAN Klik tombol Input Data untuk menyimpan data dan menuju T-04 Keterangan : Ukuran : 600 x 400 Background : Biru Gambar 3.34 Perancangan Antarmuka Tambah Data Baru 8. Submenu Cetak Kartu Pegawai T-04B Cetak Kartu Kepegawaian NIP Karyawan : Klik tombol Cetak Kartu Anggota untuk menuju T- 04B-1 Klik Tombol Batal untuk kembali ke T-04 Keterangan : Ukuran : 600 x 400 Background : Biru Gambar 3.35 Perancangan Antarmuka Cetak Kartu 9. Submenu Cetak Kartu Anggota T-04B INPUT DATA Cetak Kartu Anggota Batal 96 Kartu Pegawai Klik Print File untuk mencetak kartu pegawai Keterangan : Ukuran : 600 x 400 Background : Biru Gambar 3.36 Perancangan Antarmuka Cetak Kartu 10. Submenu Edit Data T-04C EDIT DATA KARYAWAN Klik tombol Edit Data untuk menyimpan data dan menuju T-04 Keterangan : Ukuran : 900 x 600 Background : Abu-abu Gambar 3.37 Perancangan Antarmuka Edit Data 11. Menu View Data T-04D Detail Informasi Karyawan Keterangan : Print File EDIT DATA 97 Ukuran : 900 x 600 Background : Abu-abu Gambar 3.38 Perancangan Antarmuka View Data 12. Menu Cari Data T-04E 1 2 3 4 5 6 7 Logout DATA PENCARIAN PEGAWAI ID Jabatan Nama alamat telp Detail data aksi View Data Ubah Hapus Klik menu 1 untuk menuju ke T- 02 Klik menu 2 untuk menuju ke T- 03 Klik menu 3 untuk menuju T-04 Klik menu 4 untuk menuju T-05 Klik menu 5 untuk menuju T-06 Klik menu 6 untuk menuju T-07 Klik menu 7 untuk menuju T-08 Klik menu Logout untuk menuju T-01 Klik tombol Ubah untuk menuju T-04C Klik tombol View Data untuk menuju T-04D Klik tombol Hapus untuk menghapus data Keterangan : Ukuran : 900 x 600 Background : Biru Gambar 3.39 Perancangan Antarmuka Cari Data 13. Menu Mutasi Unit Kerja T-05 1 2 3 4 5 6 7 Logout 98 MENU OLAH DATA MUTASI Input Pengajuan mutasi Buat Surat Mutasi Cetak Surat Mutasi Data Mutasi Karyawan Klik menu 1 untuk menuju ke T- 02 Klik menu 2 untuk menuju ke T- 03 Klik menu 3 untuk menuju T-04 Klik menu 4 untuk menuju T-05 Klik menu 5 untuk menuju T-06 Klik menu 6 untuk menuju T-07 Klik menu 7 untuk menuju T-08 Klik menu Logout untuk menuju T-01 Klik tombol input pengajuan mutasi untuk menuju T-05A Klik tombol buat surat mutasi untuk menuju T-05B Klik tombol cetak surat mutasi untuk menuju T-05C Keterangan : Ukuran : 900 x 600 Background : Biru Gambar 3.40 Perancangan Antarmuka Mutasi 14. Submenu Input Pengajuan Mutasi T-05A 1 2 3 4 5 6 7 Logout MENU OLAH DATA MUTASI Input Pengajuan mutasi Buat Surat Mutasi Cetak Surat Mutasi Form Pengajuan Mutasi Kerja NIP Pegawai : Detail Data Mutasi Klik menu 1 untuk menuju ke T- 02 Klik menu 2 untuk menuju ke T- 03 Klik menu 3 untuk menuju T-04 Klik menu 4 untuk menuju T-05 Klik menu 5 untuk menuju T-06 Klik menu 6 untuk menuju T-07 Klik menu 7 untuk menuju T-08 Klik menu Logout untuk menuju T-01 Klik tombol input pengajuan mutasi untuk menuju T-05A Klik tombol buat surat mutasi untuk menuju T-05B 99 Klik tombol cetak surat mutasi untuk menuju T-05C Klik tombol Input Pengajuan untuk menyimpan data dan kembali ke T-05 Keterangan : Ukuran : 900 x 600 Background : Biru Gambar 3.41 Perancangan Antarmuka Input Pengajuan Mutasi 15. Submenu Buat Surat Mutasi T-05B Pilih Surat Pengajuan Mutasi No. Surat : Klik tombol Buat Surat untuk menuju T-05B-1 Klik Tombol Batal untuk kembali ke T-05 Keterangan : Ukuran : 600 x 400 Background : Biru Gambar 3.42 Perancangan Antarmuka Buat Surat Mutasi 16. Submenu Isi Surat Mutasi T-05B-1 Surat Mutasi Klik tombol Buat Surat untuk menyimpan sirat dan menuju T-05 Keterangan : Input Pengajuan Buat Surat Batal BUAT SURAT 100 Ukuran : 600 x 400 Background : Biru Gambar 3.43 Perancangan Antarmuka Isi Surat Mutasi 17. Submenu Cetak Surat Mutasi T-05C Pilih Surat Mutasi yang akan dicetak No. Surat Mutasi : Klik tombol Cetak untuk menuju T-05C-1 Klik Tombol Batal untuk kembali ke T-05 Keterangan : Ukuran : 600 x 400 Background : Biru Gambar 3.44 Perancangan Antarmuka Cetak Surat Mutasi 18. Submenu Isi Surat Mutasi T-05C-1 Surat Mutasi Klik tombol Print This Document untuk mencetak surat Keterangan : Ukuran : 600 x 400 Background : Biru Gambar 3.45 Perancangan Antarmuka Isi Surat Mutasi 19. Menu Cuti Kerja Cetak Batal Print This Document 101 T-06 1 2 3 4 5 6 7 Logout MENU OLAH DATA CUTI Input Pengajuan cuti Buat Surat SK Cuti Cetak SK Cuti Data Cuti Karyawan Klik menu 1 untuk menuju ke T- 02 Klik menu 2 untuk menuju ke T- 03 Klik menu 3 untuk menuju T-04 Klik menu 4 untuk menuju T-05 Klik menu 5 untuk menuju T-06 Klik menu 6 untuk menuju T-07 Klik menu 7 untuk menuju T-08 Klik menu Logout untuk menuju T-01 Klik tombol input pengajuan cuti untuk menuju T-06A Klik tombol buat surat SK Cuti untuk menuju T-06B Klik tombol cetak SK Cuti untuk menuju T-06C Keterangan : Ukuran : 900 x 600 Background : Biru Gambar 3.46 Perancangan Antarmuka Cuti Kerja 20. Submenu Input Pengajuan Cuti T-06A 1 2 3 4 5 6 7 Logout 102 MENU OLAH DATA CUTI Input Pengajuan Cuti Buat Surat SK Cuti Cetak Surat SK Cuti Form Pengajuan Cuti Kerja NIP Pegawai : Detail Data Pengajuan Cuti Klik menu 1 untuk menuju ke T- 02 Klik menu 2 untuk menuju ke T- 03 Klik menu 3 untuk menuju T-04 Klik menu 4 untuk menuju T-05 Klik menu 5 untuk menuju T-06 Klik menu 6 untuk menuju T-07 Klik menu 7 untuk menuju T-08 Klik menu Logout untuk menuju T-01 Klik tombol input pengajuan cuti untuk menuju T-06A Klik tombol buat surat SK cuti untuk menuju T-06B Klik tombol cetak SK Cuti untuk menuju T-06C Klik tombol Input Pengajuan untuk menyimpan data dan kembali ke T-06 Keterangan : Ukuran : 900 x 600 Background : Biru Gambar 3.47 Perancangan Antarmuka Input Pengajuan Cuti 21. Submenu Buat Surat SK Cuti T-06B Pilih Surat Pengajuan Cuti No. Surat : Klik tombol Buat SK Cuti untuk menuju T-06B-1 Klik Tombol Batal untuk kembali ke T-06 Keterangan : Ukuran : 600 x 400 Background : Biru Gambar 3.48 Perancangan Antarmuka Buat SK Cuti Input Pengajuan Buat SK Cuti Batal 103 22. Submenu Isi Surat T-06B-1 Surat Cuti Klik tombol Buat Surat untuk menyimpan surat dan menuju T-06 Keterangan : Ukuran : 600 x 400 Background : Biru Gambar 3.49 Perancangan Antarmuka Isi Surat Cuti 23. Submenu Cetak SK Cuti T-06C Pilih Surat Cuti yang akan dicetak No. SK Cuti: Klik tombol Cetak untuk menuju T-06C-1 Klik Tombol Batal untuk kembali ke T-06 Keterangan : Ukuran : 600 x 400 Background : Biru Gambar 3.50 Perancangan Antarmuka Cetak SK Cuti 24. Submenu Isi SK Cuti T-06C-1 BUAT SURAT Cetak Batal 104 Surat Cuti Klik tombol Print This Document untuk mencetak surat Keterangan : Ukuran : 600 x 400 Background : Biru Gambar 3.51 Perancangan Antarmuka Isi SK Cuti 25. Menu Pensiun T-07 1 2 3 4 5 6 7 Logout MENU OLAH DATA PENSIUN KARYAWAN Input Data Pensiun Cetak Surat Pensiun Data Pensiun Karyawan Klik menu 1 untuk menuju ke T- 02 Klik menu 2 untuk menuju ke T- 03 Klik menu 3 untuk menuju T-04 Klik menu 4 untuk menuju T-05 Klik menu 5 untuk menuju T-06 Klik menu 6 untuk menuju T-07 Klik menu 7 untuk menuju T-08 Klik menu Logout untuk menuju T-01 Klik tombol input data pensiun untuk menuju T-07A Klik tombol Cetak Surat Pensiun untuk menuju T-07B Keterangan : Ukuran : 900 x 600 Background : Biru Gambar 3.52 Perancangan Antarmuka Pensiun 26. Submenu Input Data Pensiun Print This Document 105 T-07A 1 2 3 4 5 6 7 Logout MENU OLAH DATA PENSIUN KARYAWAN Input Data Pensiun Cetak Surat Pensiun Input Data Pensiun Karyawan NIP Pegawai : Detail Data Pensiun Klik menu 1 untuk menuju ke T- 02 Klik menu 2 untuk menuju ke T- 03 Klik menu 3 untuk menuju T-04 Klik menu 4 untuk menuju T-05 Klik menu 5 untuk menuju T-06 Klik menu 6 untuk menuju T-07 Klik menu 7 untuk menuju T-08 Klik menu Logout untuk menuju T-01 Klik tombol Input Data Pensiun untuk menuju T-07A Klik tombol Cetak Surat Pensiun untuk menuju T-07B Klik tombol Input Data untuk menyimpan data dan kembali ke T-07 Keterangan : Ukuran : 900 x 600 Background : Biru Gambar 3.53 Perancangan Antarmuka Input Data Pensiun 27. Sbmenu Cetak Surat Pensiun T-07B Pilih Surat Pensiun yang akan dicetak No. Pensiun: Klik tombol Cetak Surat untuk menuju T-07B-1 Klik Tombol Batal untuk kembali ke T-07 Keterangan : Ukuran : 600 x 400 Background : Biru Gambar 3.54 Perancangan Antarmuka Cetak Surat Pensiun Input Data Cetak Surat Batal 106 28. Submenu Isi Surat Pensiun T-07B-1 Surat SK Pensiun Karyawan Klik tombol Print This Document untuk mencetak surat pensiun Keterangan : Ukuran : 600 x 400 Background : Biru Gambar 3.55 Perancangan Antarmuka Isi Surat Pensiun 29. Menu Laporan T-08 1 2 3 4 5 6 7 Logout LAPORAN KEPEGAWAIAN MUTASI CUTI KERJA PENSIUN Pilih Tanggal Tgl Awal : Tgl Akhir: Pilih Tanggal Tgl Awal : Tgl Akhir: Pilih Tanggal Tgl Awal : Tgl Akhir: Pilih Tanggal Tgl Awal : Tgl Akhir: Klik menu 1 untuk menuju ke T- 02 Klik menu 2 untuk menuju ke T- 03 Klik menu 3 untuk menuju T-04 Klik menu 4 untuk menuju T-05 Klik menu 5 untuk menuju T-06 Klik menu 6 untuk menuju T-07 Klik menu 7 untuk menuju T-08 Klik menu Logout untuk menuju T-01 Klik tombol Cetak 1 untuk mencetak laporan kepegawaian dan menuju T-08A Klik tombol Cetak 2 untuk mencetak laporan mutasi dan menuju T-08B Klik tombol Cetak 3 untuk mencetak laporan cuti kerja dan menuju T-08C Klik tombol Cetak 4 untuk mencetak laporan pensiun dan Print This Document CETAK 1 CETAK 2 CETAK 3 CETAK 4 107 menuju ke T-08D Keterangan : Ukuran : 900 x 600 Background : Biru Gambar 3.56 Perancangan Antarmuka Laporan 30. Submenu Laporan Kepegawaian T-08A LAPORAN DATA KEPEGAWAIAN NIP Nama JK Status Tgl Masuk MIU Jab Pend. Terakhir Jur Print Report Klik Print Report untuk mencetak Laporan Keterangan : Ukuran : 600 x 400 Background : Putih Gambar 3.57 Perancangan Antarmuka Laporan Kepegawaian 108 31. Submenu Laporan Mutasi T-08B LAPORAN DATA PEGAWAI YANG MUTASI N I P Nama Tgl Peng ajuan No. Peng ajuan Tgl Surat No Surat Mutasi Lok. Baru Pos. Lama Pos .Baru Print Report Klik Print Report untuk mencetak Laporan Mutasi Keterangan : Ukuran : 600 x 400 Background : Putih Gambar 3.58 Perancangan Antarmuka Laporan Mutasi 32. Submenu Laporan Cuti Kerja T-08C LAPORAN DATA CUTI PEGAWAI NIP Nama Tgl SK Cuti No. SK Cuti Tgl Mulai Cuti Lama Cuti Alasan Cuti Print Report Klik Print Report untuk mencetak Laporan Cuti Pegawai Keterangan : Ukuran : 600 x 400 Background : Putih Gambar 3.59 Perancangan Antarmuka Laporan Cuti Kerja 33. Submenu Laporan Pensiun T-08D 109 LAPORAN DATA PEGAWAI YANG MUTASI NIP Nama Karyawan Umur Tgl. SK Pensiun No. SK Pensiun Print Report Klik Print Report untuk mencetak Laporan Pensiun Keterangan : Ukuran : 600 x 400 Background : Putih Gambar 3.60 Perancangan Antarmuka Laporan Pensiun

3.2.3.2 Perancangan Antarmuka User