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