Sebelum mengimplementasikan, sistem harus didesainkan terlebih dulu karena dengan adanya perancangan antarmuka dapat membantu proses pengembangan dan interaksi pengguna dengan komputer. Perancangan ini dapat berupa input data maupun output data untuk menampilkan informasi kepada pengguna.
Kebutuhan antarmuka yang dibuat pada pengisian form akademik bersifat user friendly (mudah digunakan) dengan tujuan agar program yang telah dibangun dapat digunakan dengan mudah oleh pengguna.
3.7.1 Rancangan Antarmuka Form Login
Perancangan tampilan login merupakan syarat untuk dapat memamfaatkan sistem secara keseluruhan, di mana yang menggunakan aplikasi ini adalah mahasiswa, dosen, dan bagian akademik yang memiliki otoritas yang telah ditentukan. Tampilan
form login dapat dilihat pada Gambar 3.10
Gambar 3.10 Form Login
Rancangan antarmuka Form Login berfungsi menampilkan tombol yang digunakan masuk kedalam menu utama baik itu
Mahasiswa, Dosen maupun Bagian Akademik. Text Box digunakan untuk memasukkan data, label dan tombol. Berikut ini tombol yang ada pada perancangan Form Login (Gambar 3.10):
1. Label 1 : Berfungsi untuk menampilkan judul Aplikasi 2. Label 2 : Berfungsi menampilkan judul login bagi user
3. Text Box 3 : berfungsi untuk memasukkan User Name Pengguna. 4. Text Box 4 : Berfungsi untuk memasukkan password pengguna. 5. Tombol 5 : Berfungsi untuk menampilkan menu utama dari
pengguna.
6. Label 6 : Berfungsi untuk mereset password dan username
3.7.2 Rancangan Antarmuka Tampilan Menu Utama
Mahasiswa
Rancangan antarmuka tampilan menu utama mahasiswa ditunjukkan pada Gambar 3.11
Gambar 3.11 Menu Utama Mahasiswa
Rancangan antarmuka tampilan menu utama mahasiswa berfungsi untuk menampilkan tombol yang akan digunakan untuk membuka tampilan sub-program yang dibutuhkan. Pada tampilan
digunakan label dan tombol. Berikut ini tombol yang ada pada perancangan menu utama mahasiswa (Gambar 3.11)
1. Label 1 : Judul Sistem
2. Label 2 : berfungsi untuk menampilkan menu utama 3. Label 3 : berfungsi untuk menampilkan form jadwal kuliah 4. Tombol 4 : berfungsi untuk menampilkan form daftar kelas 5. Tombol 5 : berfungsi untuk menampilkan form transkrip nilai 6. Tombol 6 : berfungsi untuk menampilkan form daftar matakuliah 7. Tombol 7 : berfungsi untuk menampilkan form ganti password 8. Tombol 8 : berfungsi untuk keluar dari aplikasi
3.7.3 Rancangan Antarmuka Tampilan Menu Utama Dosen
Rancangan antarmuka tampilan menu utama mahasiswa ditunjukkan pada Gambar 3.12
Gambar 3.12 Menu Utama Dosen
Rancangan antarmuka tampilan menu utama dosen berfungsi untuk menampilkan tombol yang akan digunakan unutk membuka tampilan sub-prgram yang dibutuhkan. Pada tampilan ini digunakan
label dan tombol Berikut ini tombol yang ada pada perancangan
menu utama mahasiswa (Gambar 3.12) 1. Label 1 : berfungsi untuk judul sistem
2. Label 2 : berfungsi untuk menampilkan menu utama. 3. Label 3 : berfungsi untuk menampilkan form lihat jadwal. 4. Tombol 4 : berfungsi untuk menampilkan form ganti password 5. Tombol 5 : berfungsi untuk keluar dari aplikasi
3.7.4 Rancangan Antarmuka Tampilan Menu Bag. Akademik 1
Rancangan antarmuka tampilan menu utama bagian akademik 1 ditunjukkan pada Gambar 3.13
Gambar 3.13 Menu Utama Bagian Akademik 1
Rancangan antarmuka tampilan menu utama bagian akademik 1 berfungsi untuk menampilkan tombol yang akan digunakan untuk membuka tampilan sub-program yang dibutuhkan. Pada tampilan ini digunakan label dan tombol. Berikut ini tombol yang ada pada perancangan menu utama mahasiswa (Gambar 3.13)
1. Label 1 : berfungsi untuk menampilkan judul aplikasi 2. Label 2 : berfungsi untuk menampilkan menu utama
3. Label 3 : berfungsi untuk menampilkan form manajemen progdi. 4. Tombol 4 : berfungsi untuk menampilkan form manajemen dosen 5. Tombol 5 : berfungsi untuk menampilkan form manajemen
mahasiswa
6. Tombol 6 : berfungsi untuk menampilkan form manajemen matakuliah
7. Tombol 7 : berfungsi untuk menampilkan form manajemen ruang 8. Tombol 8 : berfungsi untuk menampilkan form manajemen
jadwal
9. Tombol 9 : berfungsi untuk menampilkan form ganti password 10.Tombol 10 : berfungsi untuk menampilkan laporan kartu
mahasiswa.
3.7.5 Rancangan Antarmuka Tampilan Menu Bag. Akademik 2
Rancangan antarmuka tampilan menu utama bagian akademik 1 ditunjukkan pada Gambar 3.14
Gambar 3.14 Menu Utama Bagian Akademik 2
Rancangan antarmuka tampilan menu utama bagian akademik 1 berfungsi untuk menampilkan tombol yang akan digunakan untuk membuka tampilan sub-program yang dibutuhkan. Pada tampilan ini
digunakan label dan tombol. Berikut ini tombol yang ada pada perancangan menu utama mahasiswa (Gambar 3.14)
1. Label 1 : berfungsi untuk menampilkan judul aplikasi 2. Label 2 : berfungsi untuk menampilkan menu utama
3. Label 3 : berfungsi untuk menampilkan form manajemen nilai. 4. Tombol 4 : berfungsi untuk menampilkan form cetak kartu studi 5. Tombol 5 : berfungsi untuk menampilkan form cetak transkrip 6. Tombol 6 : berfungsi untuk menampilkan form cetak peserta 7. Tombol 7 : berfungsi untuk menampilkan form ganti password 8. Tombol 8 : berfungsi untuk keluar dari aplikasi
3.7.6 Rancangan Antarmuka Tampilan Form Daftar
Matakuliah
Rancangan antarmuka tampilan form registrasi matakuliah ditunjukkan pada Gambar 3.15
Gambar 3.15 Form Daftar Matakuliah
Rancangan antarmuka tampilan form daftar matakuliah berfungsi menampilkan tombol yang digunakan untuk membuka tampilan sub-program yang dibutuhkan. Pada tampilan ini digunakan label dan tombol untuk memilih data yang diinginkan,
label, dan tombol. Berikut ini tombol yang ada pada perancangan form daftar matakuliah (Gambar 3.15)
1. Label 1 : berfungsi untuk menampilkan judul form 2. Label 2 : berfungsi untuk menampilkan nomor
3. Label 3 : berfungsi untuk menampilkan kode matakuliah 4. Label 4 : berfungsi untuk menampilkan nama matakuliah 5. Tombol 5 : berfungsi untuk menampilkan form daftar jadwal
matakuliah
3.7.7 Rancangan Antarmuka Tampilan Form Daftar Jadwal
Matakuliah
Rancangan antarmuka tampilan form daftar jadwal matakuliah dapat dilihat pada Gambar 3.16
Gambar 3.16 Form Daftar Jadwal Matakuliah
Rancangan antarmuka tampilan form registrasi matakuliah berfungsi menampilkan tombol yang digunakan untuk membuka tampilan sub-program yang dibutuhkan. Pada tampilan ini label dan tombol. Berikut ini tombol yang ada pada perancangan form jadwal matakuliah (Gambar 3.16)
1. Label 1 : berfungsi untuk menampilkan judul form 2. Label 2 : berfungsi untuk menampilkan nomor
3. Label 3 : berfungsi untuk menampilkan nama matakuliah 4. Label 4 : berfungsi untuk menampilkan ruang matakuliah
5. Label 5 : berfungsi untuk menampilkan hari matakuliah 6. Label 6 : berfungsi untuk menampilkan waktu matakuliah 7. Label 7 : berfungsi untuk menampilkan dosen matakuliah 8. Label 8 : berfungsi untuk menampilkan kapasitas ruang
9. Label 9 : berfungsi untuk menampilkan jumlah kursi yang tersisa 10.Tombol 10 : berfungsi untuk menampilkan daftar peserta
matakuliah
10.Tombol 11 : berfungsi untuk menambah matakuliah
3.7.8 Rancangan Antarmuka Tampilan Form Input Data
Mahasiswa
Rancangan antarmuka tampilan form input data mahasiswa dapat dilihat pada Gambar 3.17
Gambar 3.17 Form Input Data Mahasiswa
Rancangan antarmuka tampilan form input data mahasiswa berfungsi menampilkan tombol yang digunakan untuk membuka
tampilan sub-program yang dibutuhkan. Pada tampilan ini label,
drop down dan tombol. Berikut ini tombol yang ada pada
perancangan form input data mahasiswa (Gambar 3.17)
1. Label 1 : berfungsi untuk menampilkan judul form 2. Drop Down 2 : berfungsi untuk menampilkan progdi 3. Label 3 : berfungsi untuk mengisi kode mahasiswa 4. Label 4 : berfungsi untuk mengisi nama mahasiswa 5. Label 5 : berfungsi untuk mengisi sekolah asal mahasiswa 6. Label 6 : berfungsi untuk mengisi alamat mahasiswa 7. Label 7 : berfungsi untuk mengisi kota mahasiswa
8. Label 8 : berfungsi untuk mengisi propinsi asal mahasiswa 9. Label 9 : berfungsi untuk mengisi kode pos mahasiswa 10.Label 10 : berfungsi untuk mengisi tanggal lahir mahasiswa 11.Label 11 : berfungsi untuk mengisi tempat lahir mahasiswa 12.Drop Dwon 12 : berfungsi untuk mengisi jenis kelamin
mahasiswa
13.Label 13 : berfungsi untuk mengisi agama mahasiswa 14.Label 14 : berfungsi untuk mengisi telepon mahasiswa 15.Label 15 : berfungsi untuk mengisi email mahasiswa 16.Label 16 : berfungsi untuk mengisi password mahasiswa 17.Label 17 : berfungsi untuk mengisi angkatan mahasiswa 18.Label 18 : berfungsi untuk input data agama mahasiswa
3.7.9 Rancangan Antarmuka Tampilan Form Input Data Ruang
Rancangan antarmuka tampilan form input data kelas dapat dilihat pada Gambar 3.18
Gambar 3.18 Form Input Data Kelas
Rancangan antarmuka tampilan form input data kelas berfungsi menampilkan tombol yang digunakan untuk membuka tampilan sub-program yang dibutuhkan. Pada tampilan ini label dan tombol. Berikut ini tombol yang ada pada perancangan form input data kelas (Gambar 3.18)
1. Label 1 : berfungsi untuk menampilkan judul form 2. Label 2 : berfungsi untuk mengisi kode ruang 3. Label 3 : berfungsi untuk mengisi nama ruang 4. Label 4 : berfungsi untuk mengisi kapasitas ruang 5. Tombol 5 : berfungsi untuk input data kelas
3.7.10 Rancangan Antarmuka Tampilan Form Input Data
Matakuliah
Rancangan antarmuka tampilan form input data matakuliah dapat dilihat pada Gambar 3.19
Rancangan antarmuka tampilan form input matakuliah ruang berfungsi menampilkan tombol yang digunakan untuk membuka tampilan sub-program yang dibutuhkan. Pada tampilan ini label dan tombol. Berikut ini tombol yang ada pada perancangan form input data matakuliah (Gambar 3.19)
1. Label 1 : berfungsi untuk menampilkan judul form 2. Drop Dwon 2 : berfungsi untuk mengisi nama progdi 3. Label 3 : berfungsi untuk mengisi kode matakuliah 4. Label 4 : berfungsi untuk mengisi nama matakuliah 5. Label 5 : berfungsi untuk mengisi semester
6. Label 6 : berfungsi untuk mengisi SKS ambil 7. Label 7 : berfungsi untuk mengisi SKS bayar 8. Tombol 8 : berfungsi untuk input data matakuliah
3.7.11 Rancangan Antarmuka Tampilan Form Input Data Dosen
Rancangan antarmuka tampilan form input data dosen dapat dilihat pada Gambar 3.20
Rancangan antarmuka tampilan form input data dosen berfungsi menampilkan tombol yang digunakan untuk membuka tampilan sub-program yang dibutuhkan. Pada tampilan ini label dan tombol. Berikut ini tombol yang ada pada perancangan form input data dosen (Gambar 3.20)
1. Label 1 : berfungsi untuk menampilkan judul form 2. Label 2 : berfungsi untuk mengisi kode dosen 3. Label 3 : berfungsi untuk mengisi nama dosen 4. Label 4 : berfungsi untuk mengisi alamat dosen 5. Label 5 : berfungsi untuk mengisi kota dosen
6. Label 6 : berfungsi untuk mengisi propinsi asal dosen 7. Label 7 : berfungsi untuk mengisi kode pos
8. Label 8 : berfungsi untuk mengisi keterangan dosen 9. Label 9 : berfungsi untuk mengisi gelar dosen
10.Label 10 : berfungsi untuk mengisi tanggal lahir mahasiswa 11.Label 11 : berfungsi untuk mengisi tempat lahir mahasiswa 12.Label 12 : berfungsi untuk mengisi agama dosen
13.Label 13 : berfungsi untuk mengisi telepon dosen 14.Label 14 : berfungsi untuk mengisi email dosen 15.Label 15 : berfungsi untuk mengisi password dosen 16.Tombol 16 : berfungsi untuk input data dosen
3.7.12 Rancangan Antarmuka Tampilan Form Ganti Password
Rancangan antarmuka tampilan form ganti password dapat dilihat pada Gambar 3.2
Gambar 3.21 Form Ganti Password
Rancangan antarmuka tampilan form ganti password berfungsi menampilkan tombol yang digunakan untuk membuka tampilan
sub-program yang dibutuhkan. Pada tampilan ini label dan tombol.
Berikut ini tombol yang ada pada perancangan form input data kelas (Gambar 3.21)
6. Label 1 : berfungsi untuk menampilkan judul form 7. Label 2 : berfungsi untuk mengisi password lama 8. Label 3 : berfungsi untuk mengisi password baru 9. Label 4 : berfungsi untuk mengisi konfirmasi password 10.Tombol 5 : berfungsi untuk input data password baru