BAB IV PERANCANGAN USER INTERFACE 4.1 Perancangan Arsitektur Sistem Perancangan arsitektur adalah pola keterhubungan antara spesifikasi hardware dan komunikasi data yang terjadi dalam sistem. Berikut digambarkan perancangan arsitektur pada sistem pada perancangan monitoring presensi TCP/IP Sistem Monitoring Presensi Internet Modem Provider SMS Gateway Scanner QR Code Client SMS Gateway Keterangan a. Scanner QR Code merupakan data inputan QR Code pada proses Presensi b. TCP/IP komunikasi internal antara sistem presensi pusat c. Sistem Monitoring Presensi merupakan server pusat sebagai komunikasi data presensi d. Modem Provider SMS Gateway merupakan provider komunikasi SMS Gateway e. Client merupakan admin yang dapat mengakses sistem monitoring presensi pegawai f. SMS Gateway merupakan sarana komunikasi yang akan mengirimkan informasi Presensi kepada pihak ke tiga yaitu kepala sekolah sebagai pihak rekanan. 70
4.2 Perancangan User Interface Perancangan antar muka pada aplikasi monitoring kehadiran pegawai ini meliputi 3 level user yaitu PIC sebagai admin, Kabag PIC, dan instruktur/assisten komputer sebagai user biasa. Halaman pertama yang akan ditampilkan yaitu halaman utama aplikasi, halaman ini menampilkan kata depan (sambutan) dari web PT. Bangun Satya Wacana. Untuk mengakses menu-menu yang berkaitan dengan level user dan apabila ingin mengakses menu pada web tersebut maka user diharuskan login terlebih dahulu. Pada perancangan ini PIC sebagai admin/user utama disediakan ruang khusus untuk mengakses manajemen data-data secara leluasa yang terdapat di database Aplikasi Monitoring Kehadiran Pegawai ini. Berikut ini perancangan halaman yang dapat dipergunakan user sesuai dengan level dari user. 1. PIC (admin utama) a. Menu Data b. Menu SMS Gateway c. Menu Laporan 2. Instruktur dan Assisten Komputer a. Menu Presensi b. Menu Laporan 3. Kabag PIC a. Menu Data (Data Presensi, Data Pegawai, Data Sekolah) b. Menu Laporan. 71
4.3 Rancangan Antarmuka Halaman Utama 1) Rancangan Tampilan Form Menu Layar Login Gambar 4.1 User Interface Menu Layar Utama Monitoring Presensi Pegawai (Instruktur dan Asisten Komputer) Pada Rancangan Tampilan Menu Utama terdapat 2 button menu : 1. button Login untuk masuk ke Form Menu Login 2. button Logout untuk keluar dari Sistem Aplikasi Presensi 2) Rancangan Tampilan Form Login Gambar 4.2 User Interface Form Login Monitoring Presensi Pegawai (Instruktur dan Asisten Komputer) 72
Pada Rancangan Tampilan Form Login terdapat 2 input menu dan 2 button menu 1. input box User Name untuk mengisi hak akses user dengan mengisi username pada saat melakukan login. 2. Input box password untuk mengisi hak akses user dengan mengisi password pada saat melakukan login 3. Button Login untuk memverifkasi hak akses pengguna pada sistem presensi dan untuk dapat masuk ke Form Menu Utama 4. Button Logout untuk keluar dari sistem presensi 3) Rancangan Tampilan Form Menu Utama Gambar 4.3 User Interface Menu Utama Monitoring Presensi Pegawai (Instruktur dan Asisten Komputer) Pada rancangan tampilan Form Menu Utam a terdapat menu-menu dan sub menu antara lain : 1. Menu Presensi hanya dapat digunakan oleh instruktur dan assisten komputer pada saat melakukan presensi datang dan pulang terdiri dari : a. sub menu presensi datang untuk melakukan presensi pada saat datang b. sub menu presensi pulang untuk melakukan presensi pada saat pulang 2. Menu Data menu ini merupakan menu yang dapat digunakan oleh PIC saja sebagai Admin terdiri dari : a. sub menu Data Pegawai untuk menginput dan menampilkan data pegawai. 73
b. Sub menu Data User untuk menginput dan menampilkan data user c. Sub menu Data Presensi untuk menampilkan data presensi instruktur dan asisten komputer d. Sub menu Data Sekolah untuk menginput dan menampilkan data sekolah. 3. Menu SMS Gateway menu ini hanya dapat diakses oleh PIC sebagai Admin dalam pengiriman dan penerimaan pesan terdiri dari : a. sub menu Phonebook untuk penyimpanan nomor-nomor kepala sekolah dan pegawai. b. Sub menu Inbox untuk menampilkan data pesan masuk c. Sub menu Outbox untuk menampilkan data pesan terkirim d. Sub menu Sent Message untuk mengirim pesan. 4. Menu Laporan menu ini dapat dilihat oleh seluruh user (Kabag PIC, PIC dan Instruktur dan Assisten Komputer) terdiri dari a. Sub menu Laporan Presensi Harian menampilkan daftar presensi harian b. Sub menu Laporan Presensi Bulanan menampilkan daftar presensi bulanan c. Sub menu Cetak Laporan untuk mencetak laporan presensi. 4) Rancangan Tampilan Form Presensi Datang Gambar 4.4 User Interface Menu Utama Monitoring Presensi Datang 74
Pada rancangan tampilan Form Presensi datang terdapat 1 aplikasi pembaca kode QR Code dan 2 button box 1. Aplikasi pembaca QR code sebagai alat input untuk memasukan NIP dan Nama pegawai. 2. Button box Presensi untuk menampilkan waktu presensi datang. 3. Button box Logout untuk keluar dari aplikasi 4. 5) Rancangan Form Presensi Pulang Pegawai Gambar 4.5 User Interface Menu Utama Monitoring Presensi Pulang Pada rancangan tampilan Form Presensi pulang terdapat 1 aplikasi pembaca kode QR Code dan 2 button box 1. Aplikasi pembaca QR code sebagai alat input untuk memasukan NIP dan Nama pegawai. 2. Button box Presensi untuk menampilkan waktu presensi pulang. 3. Button box Logout untuk keluar dari aplikasi 75
7) Rancangan Tampilan Form Data User Gambar 4.7 Rancangan Tampilan User Interface Input Data User Pada rancangan tampilan Form input data user terdapat 5 input box dan 4 button box 1. input box kode pegawai diisi dengan kode pegawai 2. input box NIK diisi dengan nomor induk karyawan 3. input box nama diisi dengan nama karyawan 4. input box uername diisi dengan NIK pegawai 5. input box password didisi dengan password pegawai 6. Button box save untuk menyimpan data yang sudah diisi 7. Button box edit untuk memperbaiki kesalahan dalam penginputan data pegawai. 8. Button box delete untuk menghapus data pegawai 9. Button box exit untuk keluar dari form Input Data User 77
10) Rancangan Tampilan Form Phonebook DAFTAR NOMOR TELEPON + Tambah Baru DELETE Gambar 4.10 Rancangan Tampilan User Interface Form Phonebook Pada rancangan tampilan From Phonebook terdapat 2 button box 1. button box tambah baru untuk menambahkan nomor telepon 2. button box delete untuk menghapus nomor telepon 11) Rancangan Tampilan Form Detail Phonebook Masukan Nomor Telepon Edit Nomor Telepon Nama Nomor Nama Nomor SIMPAN KEMBALI UPDATE KEMBALI Gambar 4.11 User Interface Form Detail Phonebook Rancangan tampilan form Detail Phone book terdapat 4 button box 1. button box simpan untuk menyimpan nomor telp yang sudah diinput. 2. Button box update untuk mengedit nomor telp yang sudah diinput 3. Button box kembali untuk kembali ke form utama 80
12) Rancangan Tampilan Form Kotak Masuk Kotak Masuk HAPUS Gambar 4.12 User Interface Form Kotak Masuk Rancangan tampilan form Kotak Masuk terdapat 1 button box Hapus untuk menghapus pesan yang masuk dan sudah tidak diperlukan. 13) Rancangan Tampilan Detail Pesan Masuk Detail Pesan Masuk Nama Waktu Pesan BALAS HAPUS Pesan KEMBALI Gambar 4.13 User Interface Form Detail Pesan Masuk Rancangan tampilan form Detail Pesan Masuk terdapat 3 input box dan 3 button box 1. Input box nama untuk manampilkan nama pengirim pesan 2. Input box waktu pesan untuk menampilkan waktu pesan masuk 3. Input box pesan untuk menampilkan isi pesan 4. Button box balas untuk membalas pesan 5. Button box hapus untuk menghapus pesan 6. Button box kembali untuk kembali ke form sebelumnya form pesan masuk 81
15) Rancangan Tampilan Kirim Pesan Tunggal Kirim Pesan Pilihan Kirim Nomor Tujuan Isi Pesan Tunggal Banyak Nomor Kirim Pesan Kembali Gambar 4.14 User Interface Form Kirim Pesan Tunggal Rancangan form pengiriman pesan tunggal terdapat 2 tombol option, 2 input box dan 2 button box 1. tombol option tunggal untuk memilih mengirim pesan pada 1 nomor 2. tombol option banyak nomor untuk memilih mengirim pesan pada banyak nomor 3. input box nomor tujuan untuk diisi nomor telp yang dituju 4. input box isi pesan untuk mengisi pesan 5. button box Kirim Pesan untuk mengirim pesan 6. button box kembali untuk kembali ke form menu utama 16) Rancangan Tampilan Form Kirim Pesan Banyak Nomor Kirim Pesan Pilihan Kirim Nomor Tujuan Tunggal Banyak Nomor Isi Pesan Kirim Pesan Kembali Gambar 4.15 User Interface Form Kirim Pesan Banyak Nomor 82
Rancangan form pengiriman pesan tunggal terdapat 2 tombol option, 2 input box dan 2 button box 1. tombol option tunggal untuk memilih mengirim pesan pada 1 nomor 2. tombol option banyak nomor untuk memilih mengirim pesan pada banyak nomor 3. input box nomor tujuan untuk diisi nomor telp yang dituju 4. input box isi pesan untuk mengisi pesan 5. button box Kirim Pesan untuk mengirim pesan 6. button box kembali untuk kembali ke form menu utama 17) Rancangan Tampilan Form Pesan Terkirim Pesan Terkirim HAPUS KEMBALI Gambar 4.16 User Interface Form Pesan Terkirim Rancangan tampilan form pesan terkirim terdapat 2 button box 1. button box hapus untuk menghapus pesan yang terkirim 2. button box kembali untuk kembali ke form menu utama 18) Rancangan Tampilan Form Laporan Harian Laporan Presensi Masukan Tanggal Bulan dan Tahun NIK Nama Sekolah Tanggal Jam Datang Jam Pulang Keterangan EXIT Gambar 4.17 Rancangan User Interface Form Laporan Harian 83
Rancangan tampilan form Laporan harian terdapat 1 button box exit untuk keluar dan kembali ke menu utama 19) Rancangan Tampilan Form Laporan Bulanan Laporan Presensi Masukan Bulan dan Tahun Tanggal- Bulan- Tahun NIK Nama Sekolah Jumlah Presensi Jumlah Sakit Jumlah Absensi Jumlah Izin EXIT Gambar 4.18 User Interface Form Laporan Bulanan Rancangan tampilan form Laporan bulanan terdapat 1 button box exit untuk keluar dan kembali ke menu utama 84