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 Sistem Monitoring Presensi TCP/IP
Modem Provider SMS Gateway Internet
Scanner QR Code
SMS Gateway Client
Keterangan a. b. c. d. e. f.
Scanner QR Code merupakan data inputan QR Code pada proses Presensi TCP/IP komunikasi internal antara sistem presensi pusat Sistem Monitoring Presensi merupakan server pusat sebagai komunikasi data presensi Modem Provider SMS Gateway merupakan provider komunikasi SMS Gateway Client merupakan admin yang dapat mengakses sistem monitoring presensi pegawai SMS Gateway merupakan sarana komunikasi yang akan mengirimkan informasi Presensi kepada pihak ke tiga yaitu kepala sekolah sebagai pihak rekanan.
70 http://digilib.mercubuana.ac.id/
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
3.
a.
Menu Presensi
b.
Menu Laporan
Kabag PIC a.
Menu Data (Data Presensi, Data Pegawai, Data Sekolah)
b.
Menu Laporan.
71 http://digilib.mercubuana.ac.id/
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 http://digilib.mercubuana.ac.id/
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 http://digilib.mercubuana.ac.id/
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 http://digilib.mercubuana.ac.id/
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 http://digilib.mercubuana.ac.id/
http://digilib.mercubuana.ac.id/
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 http://digilib.mercubuana.ac.id/
http://digilib.mercubuana.ac.id/
http://digilib.mercubuana.ac.id/
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 Edit Nomor Telepon
Masukan Nomor Telepon Nama
Nama
Nomor
SIMPAN
Nomor 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 http://digilib.mercubuana.ac.id/
KEMBALI
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
BALAS
Waktu Pesan
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. 2. 3. 4. 5. 6.
Input box nama untuk manampilkan nama pengirim pesan Input box waktu pesan untuk menampilkan waktu pesan masuk Input box pesan untuk menampilkan isi pesan Button box balas untuk membalas pesan Button box hapus untuk menghapus pesan Button box kembali untuk kembali ke form sebelumnya form pesan masuk
81 http://digilib.mercubuana.ac.id/
15) Rancangan Tampilan Kirim Pesan Tunggal Kirim Pesan Pilihan Kirim
Banyak Nomor
Tunggal
Nomor Tujuan Isi Pesan
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. 2. 3. 4. 5. 6.
tombol option tunggal untuk memilih mengirim pesan pada 1 nomor tombol option banyak nomor untuk memilih mengirim pesan pada banyak nomor input box nomor tujuan untuk diisi nomor telp yang dituju input box isi pesan untuk mengisi pesan button box Kirim Pesan untuk mengirim pesan button box kembali untuk kembali ke form menu utama
16) Rancangan Tampilan Form Kirim Pesan Banyak Nomor Kirim Pesan Pilihan Kirim
Banyak Nomor
Tunggal
Nomor Tujuan
Isi Pesan Kirim Pesan
Kembali
Gambar 4.15 User Interface Form Kirim Pesan Banyak Nomor
82 http://digilib.mercubuana.ac.id/
Rancangan form pengiriman pesan tunggal terdapat 2 tombol option, 2 input box dan 2 button box 1. 2. 3. 4. 5. 6.
tombol option tunggal untuk memilih mengirim pesan pada 1 nomor tombol option banyak nomor untuk memilih mengirim pesan pada banyak nomor input box nomor tujuan untuk diisi nomor telp yang dituju input box isi pesan untuk mengisi pesan button box Kirim Pesan untuk mengirim pesan 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
Masukan Tanggal Bulan dan Tahun
Laporan Presensi
NIK
Nama
Sekolah
Tanggal
Jam Datang
Jam Pulang
Keterangan
EXIT Gambar 4.17 Rancangan User Interface Form Laporan Harian 83 http://digilib.mercubuana.ac.id/
Rancangan tampilan form Laporan harian terdapat 1 button box exit untuk keluar dan kembali ke menu utama 19) Rancangan Tampilan Form Laporan Bulanan
Masukan Bulan dan Tahun
Laporan Presensi
TanggalBulanTahun
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 http://digilib.mercubuana.ac.id/
