Perancangan Struktur Menu Perancangan Antar Muka

50 NIP

3.2.2 Perancangan Struktur Menu

Perancangan menu dibuat dengan harapan agar pemakai dapat menggunakannya tanpa kesulitan, sehingga memudahkan pemakai dalam memilih menu dari aplikasi yang sedang berjalan. Untuk lebih jelas tentang bentuk rancangan menu dapat dilihat pada gambar dibawah ini : MENU UTAMA ADMIN ABSENSI EXIT LOGIN MENU UTAMA ADMIN DATA PEGAWAI DATA JABATAN LOGOUT LAPORAN DATA PEGAWAI LAPORAN ABSENSI PEGAWAI LAPORAN GAJI PEGAWAI ABSEN MASUK KELUAR Gambar 3.11 Struktur Menu

3.2.3 Perancangan Antar Muka

Perancangan antarmuka atau interface merupakan tampilan dari sebuah program atau aplikasi yang berperan sebagai media komunikasi yang digunakan sebagai sarana dialog antara program dengan user. Sistem yang akan dibangun diharapkan menyediakan interface yang sesuai dengan kebutuhan dan karakteristik user. Perancangan interface untuk aplikasi Sistem Informasi Pengolahan Data Kepegawaian Berbasis Desktop adalah sebagai berikut : 51 1. Perancangan Antarmuka Menu Utama  Klik ABSENSI, untuk menuju F02.  Klik LOGIN, untuk menuju F03. F01 Ukuran 904 x 574 pixel. ABSENSI LOGIN TENTANG PROGRAM Gambar 3.12 Perancangan Menu Utama 52 2. Perancangan Antarmuka Absensi Pegawai  Klik Menu Utama, untuk menuju F01.  Isi NIP dengan NIP Pegawai, kemudian klik Cari, secara otomatis Nama Lengkap, Jabatan dan Tanggal Absen akan terisi.  Klik Absen Masuk, untuk menyimpan data Absen Masuk.  Klik Absen Keluar, untuk menyimpan data Absen Keluar.  Klik Refresh, untuk mengulang. F02 Ukuran 1108 x 628 pixel. Absen Masuk Absen Keluar N I P Nama Lengkap Jabatan Tanggal Absen Cari Refresh Menu Utama Gambar 3.13 Perancangan Absensi Pegawai 3. Perancangan Antarmuka Login  Klik Menu Utama, menuju F01.  Klik Masuk, menuju M01.  Klik Batal, untuk mengulang. F03 Ukuran 1108 x 628 pixel. Masuk Batal Password Menu Utama Username Gambar 3.14 Perancangan Form Login 53 4. Perancangan Antarmuka Menu Utama Admin  Klik DATA PEGAWAI, untuk menuju F05.  Klik DATA JABATAN, untuk menuju F07.  Klik LAPORAN PEGAWAI, untuk menuju F08.  Klik LAPORAN ABSENSI, untuk menuju F09.  Klik LAPORAN PENGGAJIAN, untuk menuju F09.  Klik LOGOUT, untuk menuju F01. F04 Ukuran 904 x 574 pixel. DATA JABATAN LAPORAN PEGAWAI LAPORAN ABSENSI DATA PEGAWAI LAPORAN PENGGAJIAN LOGOUT Gambar 3.15 Perancangan Menu Utama Admin 5. Perancangan Antarmuka Data Pegawai  Klik Menu Utama, untuk menuju F01.  Klik Tambah, untuk menuju F06.  Klik Hapus, maka record yang di pilih pada tabel akan terhapus.  Klik Perbarui. Sebelumnya pilih record pada tabel yang akan di perbarui, kemudian rubah field- field yang akan Anda perbarui.  Klik Refresh, untuk mengulang.  Klik Cari. Sebelumnya isi NIP atau Nama Lengkap yang akan di cari, maka data yang di cari akan tampil pada tabel.  Klik Cetak, untuk mencetak data pegawai sesuai dengan pencarian. F05 Ukuran 1108 x 628 pixel. Tambah N I P Nama Lengkap Tanggal Lahir Jenis Kelamin Refresh Menu Utama Agama Alamat No. TeleponHP. E-mail Jabatan Pria Perempuan N I P Nama Lengkap Pencarian Cari Hapus Perbarui Cetak Gambar 3.16 Perancangan Data Pegawai 54 6. Perancangan Antarmuka Input Data Pegawai  Isi NIP dengan NIP pegawai.  Isi Nama Lengkap dengan nama lengkap pegawai.  Pilih Tanggal Lahir.  Isi Jenis Kelamin sesuai dengan jenis kelamin pegawai.  Isi Agama sesuai dengan agama pegawai.  Isi Alamat dengan alamat pegawai.  Isi No. TeleponHP. dengan no. telepon pegawai.  Isi E-mail dengan E-mail pegawai.  Pilih Jabatan sesuai dengan jabatan pegawai.  Klik Simpan, untuk menyimpan data yang telah di inputkan.  Klik Ulang, untuk mengulang. F06 Ukuran 412 x 529 pixel. Simpan N I P Nama Lengkap Tanggal Lahir Jenis Kelamin Agama Alamat No. TeleponHP. E-mail Jabatan Pria Perempuan Ulang Gambar 3.17 Perancangan Input Data Pegawai 7. Perancangan Antarmuka Input Data Jabatan  Isi Jabatan dengan jabatan yang ada.  Isi UpahJam dengan upahjam yang sesuai dengan jabatan.  Klik Simpan, untuk menyimpan data yang telah di inputkan.  Klik Perbarui. Sebelumnya pilih record pada tabel yang akan di perbarui, kemudian rubah field- field yang akan Anda perbarui.  Klik Ulang, untuk mengulang. F07 Ukuran 412 x 529 pixel. Perbarui Jabatan UpahJam Rp. Ulang Simpan Gambar 3.18 Perancangan Input Data Jabatan 55 8. Perancangan Antarmuka View Data Pegawai  Klik Menu Admin, untuk menuju F04.  Klik Refresh, untuk mengulang.  Klik Cari. Sebelumnya isi NIP atau Nama Lengkap yang akan di cari, maka data yang di cari akan tampil pada tabel.  Klik Cetak, untuk menuju F11. F08 Ukuran 1108 x 628 pixel. Menu Admin N I P Nama Lengkap Pencarian Cari Cetak Refresh Gambar 3.19 Perancangan View Data Pegawai 9. Perancangan Antarmuka View Data Absensi  Klik Menu Admin, untuk menuju F04.  Klik Refresh, untuk mengulang.  Klik Cari. Sebelumnya isi NIP atau nama lengkap dan tanggal yang akan di cari, maka data yang di cari akan tampil pada tabel.  Klik Cetak, untuk mencetak data absensi pegawai sesuai dengan pencarian. F09 Ukuran 1108 x 628 pixel. Menu Admin N I P Tanggal Pencarian Cari Cetak Refresh sd Gambar 3.20 Perancangan View Data Absensi 56 10. Perancangan Antarmuka View Data Gaji  Klik Menu Admin, untuk menuju F04.  Klik Refresh, untuk mengulang.  Klik Cari. Sebelumnya isi NIP atau nama lengkap dan tanggal yang akan di cari, maka data yang di cari akan tampil pada tabel.  Klik Hitung, untuk mencari total hari kerja dan total gaji  Klik Cetak, untuk mencetak data absensi pegawai sesuai dengan pencarian. F10 Ukuran 1108 x 628 pixel. Menu Admin N I P Tanggal Pencarian Cari Cetak Refresh sd Total Hari Kerja Total Gaji Rp. XXX Hari. Hitung Gambar 3.21 Perancangan View Data Gaji 11. Perancangan Antarmuka Laporan Data Pegawai  Klik Back, untuk menuju F08. L01 Ukuran 1108 x 628 pixel. LAPORAN DATA PEGAWAI Kembali NIP NAMA LENGKAP JENIS KELAMIN TGL. LAHIR AGAMA ALAMAT NO. TELP E-MAIL JABATAN Gambar 3.22 Perancangan Laporan Data Pegawai 57 12. Perancangan Antarmuka Laporan Data Absensi  Klik Back, untuk menuju F08. L02 Ukuran 1108 x 628 pixel. LAPORAN ABSENSI PEGAWAI Kembali NIP NAMA LENGKAP JABATAN TANGGAL JAM MASUK JAM KELUAR JUMLAH JAM KERJA Gambar 3.23 Perancangan Laporan Data Absensi 13. Perancangan Antarmuka Laporan Data Gaji  Klik Back, untuk menuju F08. L03 Ukuran 1108 x 628 pixel. LAPORAN GAJI PEGAWAI Kembali NIP NAMA LENGKAP JABATAN TANGGAL JAM MASUK JAM KELUAR JUMLAH JAM KERJA UPAH HARIAN TOTAL HARI KERJA TOTAL GAJI Rp. : XXX HARI : XXXXXXXXX Gambar 3.24 Perancangan Laporan Data Gaji 58

3.2.4 Perancangan Pesan