N.

Rancangan Layar, Form Masukan, dan Rancangan Form Keluaran

1. Rancangan Antar Muka
Rancangan antar muka atau dialog layar merupakan rancang bangun percakapan
antara pengguna dengan komputer yang terdiri dari proses memasukkan data ke sistem
kemudian menampilkan kembali output informasi kepada pengguna dengan uraian sebagai
berikut:

Gambar 4.21. Tampilan

Login
Sumber: Olah Data (2023)

Pada tampilan di atas merupakan rancangan tampilan Menu Login. Menu Login terdiri
dari Nomor Karyawan, dan Password serta terdapat tombol Login, sebagai kunci
sebelum memasuki program utama, agar tidak sembarangan orang yang dapat mengakses
program ini. Apabila pengguna telah memasukkan nomor karyawan dan password
dengan tepat, maka menu utama akan tampil dan siap untuk dioperasikan.

Gambar 4.22. Tampilan Menu & Halaman Utama

Sumber : Olah Data (2023)
 Tampilan di atas merupakan Menu Halaman Utama yang terdiri dari beberapa Menu
diantaranya menu Data Presensi, menu Data Laporan Presensi, menu Data Approval Cuti,
menu Data Approval Lembur, menu Data Gaji Karyawan, menu Data Karyawan, menu Data
Gaji, menu Data Lembur, menu Data Jabatan, menu Data Divisi yang digunakan. Dan
terdapat sub menu My Account dan About.

Gambar 4.23. Tampilan Menu Presensi Masuk dan Presensi Pulang

Sumber : Olah Data (2023)

Tampilan diatas adalah tampilan untuk Presensi Masuk dan Presensi Keluar
karyawan, yang hanya dapat digunakan untuk satu kali klik, setelah klik waktu
otomatis ditampilkan di bar waktu dating dan waktu pulang.

Gambar 4.24 Tampilan Menu Laporan Presensi

 Sumber : Olah Data (2023)
Tampilan diatas adalah tampilan untuk mengetahui jam absensi datang
dan jam absensi pulang.

Gambar 4.25 Tampilan Menu Data Pengajuan Cuti Karyawan

Sumber : Olah Data (2023)

Tampilan di atas adalah Form Data Pengajuan Cuti karyawan yang digunakan
karyawan jika akan mengajukan Cuti, Izin, dan juga Sakit.

Gambar 4.26 Tampilan Menu Data Pengajuan Cuti

Sumber : Olah Data (2023)
Tampilan di atas adalah Form Data Pengajuan Lembur agar Karyawan dapat melihat
tanggal dan lamanya karyawan lembur.

Gambar 4.27 Tampilan Menu Data Gaji Karyawan

Sumber : Olah Data (2023)

Tampilan di atas adalah Form Data Gaji Karyawan yang menampilkan rincian Data
Gaji Karyawan.

Gambar 4.28 Tampilan Menu Data Karyawan

 Sumber : Olah Data (2023)

Tampilan di atas adalah Form Data Karyawan yang menampilkan profil data setiap
karyawan.

Gambar 4.29 Tampilan Menu Data Gaji

Sumber : Olah Data (2023)

Tampilan di atas adalah Form Data Gaji yang menampilkan Id, Kode Gaji, Jumlah
Gaji.
 Gambar 4.30 Tampilan Menu Data Lembur
Sumber : Olah Data (2023)

Tampilan di atas adalah Form Data Lembur yang akan menampilkan Id, Kode
Jabatan, Lama Lembur, dan Uang Lembur Karyawan.

Gambar 4.31 Tampilan Menu Data Jabatan

Sumber : Olah Data (2023)

Tampilan di atas adalah Form Data Jabatan yang menampilkan Id, Nama Jabatan,
Kode Jabatan semua karyawan.
 Gambar 4.32 Tampilan Menu Data Divisi
Sumber : Olah Data (2023)

Tampilan di atas adalah Form Data Divisi yang akan menampilkan Id, Nama Divisi,
Kode Divisi.
 Gambar 4.33 Tampilan Laporan Presensi
Sumber : Olah Data (2023)

Tampilan layar di atas menampilkan hasil laporan presensi dari karyawan, berfungsi
sebagai tanda bukti untuk mengetahui kehadiran para karyawan.
 Gambar 4.34 Tampilan Laporan Data Cuti
Sumber : Olah Data (2023)

Tampilan layar di atas menampilkan hasil laporan data-data cuti karyawan, berfungsi
sebagai tanda bukti untuk di berikan kepada staf kantor.

Gambar 4.35 Tampilan Laporan Data Lembur

 Sumber Data : Olah Data (2023)

Tampilan layar di atas menampilkan hasil laporan data-data lembur karyawan,

berfungsi sebagai tanda bukti untuk di berikan kepada staf kantor.

Gambar 4.36 Tampilan Laporan Data gaji

Sumber Data : Olah Data (2023)

Tampilan layar di atas menampilkan hasil laporan data gaji karyawan, berfungsi
sebagai tanda bukti untuk di berikan kepada staf kantor.