34
3.2.2 Desain Antar Muka Design Interface
Desain antar muka merupakan rancangan halaman yang digunakan oleh pengguna sistem dalam memasukkan atau menampilkan data-data dari sistem
sehingga terjadi interaksi di keduanya. Desain untuk user dirancang memudahkan penggunaan sehingga pemakai dapat mengerti langkah demi
langkah dalam pengoperasiannya dalam menampilkan, menginputkan atau mengolah data-data yang berhubungan dengan sistem. Pada sistem informasi
pengelolaan data absensi ini, rancangan sistem antar muka yang akan dibuat adalah sebagai berikut:
3.2.2.1 Form Login
--ussername--
User Name Pasword
LOGIN
Gambar 3.8 Form Login
Pada saat awal sistem dibuka maka muncul halaman tersebut. User diminta untuk memasukan username dan password dan menekan tombol
35 login untuk masuk dapat masuk ke dalam form admin. Saat proses login,
sistem akan melakukan pengecekan ke dalam database apakah username dan password yang dimasukkan telah sesuai atau tidak. Jika data inputan
yang dimasukkan tidak sesuai maka muncul pesan bahwa username atau pasword tidak sesuai dengan data username yang tersimpan dalam
database berupa tampilan pesan kesalahan dan untuk dapat kembali harus menekan tombol „OK‟ dan kembali kehalaman sebelumnya.
Maaf, password salah.
OK
Gambar 3.9 Pesan kesalahan
36
3.2.2.2 Form Admin
LOGO
SELAMAT DATANG
INPUT ABSENSI LIHAT ABSENSI
TAMBAH SISWA TAMBAH KELAS
LOGOUT
Gambar 3.10 Form Admin
Form admin adalah halaman awal setelah login. Di halaman ini admin dapat memilih menu yang ada sesuai yang dibutuhkan. Jika
admin akan memasukkan data absensi maka admin menekan tombol absensi. Tombol data absensi digunakan untuk menuju halaman
rekap_absensi, yaitu halaman untuk menampilkan data absensi siswa. Tombol tambah siswa digunakan untuk menuju halaman siswa, yaitu
halaman untuk menginput data siswa. Tombol tambah kelas digunakan untuk menuju halaman kelas, yaitu halaman untuk
menginput kelas baru. Tombol logout digunakan ketika admin akan logout.
37
3.2.2.3 Form Absensi
LOGO
ABSENSI
INPUT ABSENSI LIHAT ABSENSI
TAMBAH SISWA TAMBAH KELAS
LOGOUT
Nama Kelas Jumlah Siswa
Input Absen ….
…. ….
….
input input
Gambar 3.11 Form Data Siswa
Dalam form absensi ini akan ditampilkan kolom nama kelas, jumlah siswa dan input absen. Bila admin akan memasukkan data
absensi siswa, maka admin dapat menekan tombol “Input” yang ada
di kolom Input Absen sesuai kelas yang akan diinput data absensinya.
38
3.2.2.4 Form Input_Absensi
LOGO
INPUT ABSENSI
INPUT ABSENSI LIHAT ABSENSI
TAMBAH SISWA TAMBAH KELAS
LOGOUT
NIS NAMA
HADIR ….
…. ….
…. IJIN
…. ….
…. ….
…. ….
…. ….
…. ….
…. ….
SUBMIT tanggal
Gambar 3.12 Form Input_Absensi
Form Input_Absensi digunakan untuk menginput absen siswa. Di halaman ini terdapat kolom NIS, nama, hadir dan ijin.
Untuk memasukkan data absensi, admin terlebih dahulu mengatur tanggal. Setelah tanggal diatur, admin mengisi option yang ada di
kolom hadir dan ijin. Option ini mengkondisikan bahwa user hanya dapat memilih satu kondisi hadirijin dari setiap data siswa.
Setelah semua data absensi pada kolom hadir dan ijin diisi, user menekan tombol submit untuk menyimpan data absensi ke dalam
database.
39
3.2.2.5 Form Rekap_Absensi
LOGO
DATA ABSENSI
INPUT ABSENSI LIHAT ABSENSI
TAMBAH SISWA TAMBAH KELAS
LOGOUT
NIS NAMA
HADIR ….
…. ….
…. IJIN
5 ….
…. 6
1 ….
…. 5
2 ….
…. 6
1 ….
…. 6
1 ….
…. 6
1 ….
…. 6
1 5
2 2
Tanggal Tanggal
tampilkan KELAS
sampai
Gambar 3.13 Popup Lihat Rekap_Absensi
Form Rekap_Absensi ini digunakan untuk melihat data absensi siswa yang sudah terekam dalam database. Admin
memilih tanggal dan kelas. Admin dapat mengatur tanggal untuk melihat data absensi siswa sesuai rentang waktu yang diinginkan.
Setelah tanggal dan kelas diisi dengan benar, admin menekan tombol tampilkan, dan data absensi siswa dapat ditampilkan. Di
kolom hadir ditampilkan jumlah hadir siswa. Sedangkan di kolom ijin menampilkan jumlah ijin siswa.
40
3.2.2.6 Form Siswa
Kategori