Perancangan Antar Muka Perancangan Sistem

MPB = Mata Kuliah Perilaku Berkarya MPK = Mata Kuliah Pengembangan Kepribadian e. Kodifikasi untuk mata kuliah MBB0011 = kode kelompok MK, no urut MK, kode jurusan f. Kodifikasi untuk paket E0011 = kode program studi, kode jurusan, kode semester g. Kodifikasi untuk kelas A, B, C, D, dan seterusnya h. Kodifikasi untuk dosen 201 = kode dosen

4.2.5. Perancangan Antar Muka

Perancangan antar muka adalah menjelaskan struktur yang membangun suatu website secara keseluruhan.

4.2.5.1. Struktur Menu

Struktur menu adalah bentuk umum dari website yang dibangun untuk memperjelas bagian – bagian yang ada di dalam website. 1. Halaman Utama Gambar 4.9. Halaman Utama Beranda Profil Dosen Bantuan Informasi LOGIN AKUN Halaman Utama Profil STBA Daftar Dosen Bantuan 2. Akun BAAK Gambar 4.10. Akun Admin Beranda Data Utama Persetujuan Berita Informasi Halaman Utama Petugas Program Studi Daftar Persetujuan Daftar Berita Jurusan Kelompok Mata Kuliah Mata Kuliah Paket Kelas Dosen Mahasiswa Keluar 3. Akun Mahasiswa Gambar 4.11. Akun Mahasiswa 4. Akun Dosen Gambar 4.12. Akun Dosen Beranda Nilai Perkuliahan Persetujuan Informasi Halaman Utama Mahasiswa Daftar Nilai Nilai Nilai Keluar Persetujuan Perkuliahan Beranda Nilai Perkuliahan Persetujuan Informasi Halaman Utama Dosen Nilai Nilai Nilai Keluar Persetujuan Perkuliahan Persetujuan

4.2.5.2. Perancangan Input

Perancangan input adalah perancangan formulir untuk menginputkan data kedalam suatu sistem informasi. Gambar 4.13. Menu Login 1. Akun BAAK Gambar 4.14. Menu Validasi Username Lupa Sandi Validasi Username Username : VALIDASI AKUN Kirim Batal LOGIN AKUN Username : Kata Sandi : Dosen Mahasiswa Gambar 4.15. Menu Validasi Pertanyaan dan Jawaban Gambar 4.16. Menu Validasi Kata Sandi Baru Min. 6 Validasi Kata Sandi Baru Username : VALIDASI AKUN Kirim Batal Kata Sandi Akun Baru: Ulangi Kata Sandi : Pertanyaan : Validasi Pertanyaan dan Jawaban Username : VALIDASI AKUN Kirim Batal Jawaban : Pertanyaan Gambar 4.17. Menu Pendaftaran Akun Gambar 4.18. Menu Ubah Program Studi Ubah Program Studi Nama Program Studi : Simpan Batal Kode Program Studi : Kode Program : daftar program studi Min. 6 karakter Pendaftaran Akun Username : Daftar Batal Kata Sandi Akun : Ulangi Kata Sandi : Jenis Akun : NIPNIM : Pertanyaan : Pertanyaan Jawaban : Dosen Mahasiswa Gambar 4.19. Menu Tambah Program Studi Gambar 4.20. Menu Ubah Jurusan Tambah Program Studi Nama Program Studi : Simpan Batal Kode Program Studi : Kode Program : daftar program studi Ubah Jurusan Simpan Batal Kode Jurusan : Nama Jurusan : daftar jurusan Gambar 4.21. Menu Tambah Jurusan Gambar 4.22. Menu Ubah Kelompok Mata Kuliah Tambah Jurusan Simpan Batal Kode Jurusan : Nama Jurusan : daftar jurusan Ubah Kelompok Mata Kuliah Simpan Batal Kode Kelompok Mata Kuliah : Nama Kelompok Mata Kuliah: daftar kelompok mata kuliah Gambar 4.23. Menu Tambah Kelompok Mata Kuliah Gambar 4.24. Menu Ubah Mata Kuliah Tambah Kelompok Mata Kuliah Simpan Batal Kode Kelompok Mata Kuliah : Nama Kelompok Mata Kuliah: daftar kelompok mata kuliah Ubah Mata Kuliah Simpan Batal Kode Mata Kuliah : Nama Mata Kuliah: daftar mata kuliah Gambar 4.25. Menu Tambah Mata Kuliah Gambar 4.26. Menu Tambah Mata Kuliah Tambah Mata Kuliah Simpan Batal Kode Mata Kuliah : Nama Mata Kuliah : daftar mata kuliah Kelompok Mata Kuliah : Kelompok Mata Kuliah Simpan Batal Jumlah SKS : TAMBAH MATA KULIAH Mata Kuliah : Mata Kuliah Gambar 4.27. Menu Ubah Paket Gambar 4.28. Menu Tambah Paket Tambah Paket Simpan Batal Program Studi : Jurusan : daftar paket Semester : Program Studi Jurusan Semester Ubah Paket Simpan Batal Kode Paket : Nama Paket : daftar paket Gambar 4.29. Menu Tambah Kelas Gambar 4.30. Menu Ubah Dosen Ubah Dosen Simpan Batal NIP : Nama Dosen : daftar dosen Tambah Kelas Simpan Batal Program Studi : Jurusan : daftar kelas Kelas : Program Studi Jurusan Kelas Dosen Wali : Dosen Wali Tahun Angkatan : Gambar 4.31. Menu Tambah Dosen Tambah Dosen Simpan Batal NIP : Jurusan : daftar dosen Nama Dosen : Jenis Kelamin : Tempat Lahir : Tanggal Lahir : Agama : Alamat : Kode Pos : Kota : Telepon : Foto : Dosen Wali Pria Wanita 01 Januari 2014 Agama Choose File No file chosen Gambar 4.32. Menu Ubah Mahasiswa Ubah Mahasiswa Simpan Batal NIM : daftar mahasiswa Nama Mahasiswa : Gambar 4.33. Menu Tambah Mahasiswa Tambah Mahasiswa Simpan Batal NIM : Jurusan : daftar mahasiswa Nama Mahasiswa : Jenis Kelamin : Tempat Lahir : Tanggal Lahir : Agama : Alamat : Kode Pos : Kota : Telepon : Foto : Program studi Pria Wanita 01 Januari 2014 Agama Choose File No file chosen Tahun Angkatan : Program Studi : Kelas : Jurusan Kelas Dosen Wali Gambar 4.34. Menu Ubah Berita Gambar 4.35. Menu Tambah Berita Ubah Berita Simpan Batal daftar berita Judul : Tanggal : Isi : Penulis : 01 Januari 2014 Tambah Berita Simpan Batal daftar berita Judul : Tanggal : Isi : Penulis : 01 Januari 2014 2. Akun mahasiswa Gambar 4.36. Menu Daftar Nilai Gambar 4.37. Menu Pengajuan Perkuliahan Pengajuan Perkuliahan Simpan Batal Tahun Ajaran : Semester : Semester Daftar Nilai Cari Pencarian berdasarkan semester : Semester

4.2.5.3. Perancangan Output

Perancangan output adalah bentuk tabel keluaran yang berfungsi untuk menampilkan data hasil pengolahan. Dengan ini user dapat melihat data apa saja yang sudah disimpan di dalam database dan bisa menggunakan data tersebut sebagaimana mestinya. 1. Akun BAAK Gambar 4.38. Menu Daftar Dosen Gambar 4.39. Menu Daftar Program Studi Daftar Dosen Foto Cari Semua Jurusan Jurusan NIP Nama Dosen Gambar 4.40. Menu Daftar Jurusan Gambar 4.41. Menu Daftar Kelompok Mata Kuliah Gambar 4.42. Menu Daftar Mata Kuliah Gambar 4.43. Menu Daftar Paket Gambar 4.44. Menu Detil Paket Gambar 4.45. Menu Daftar Kelas Detil Paket Total: Kode Mata Kuliah Nama Mata Kuliah Aksi tambah mata kuliah No. SKS Kode Paket : Program Studi : Jurusan : Semester : ubah kembali hapus Gambar 4.46. Menu Detil Dosen Gambar 4.47. Menu Daftar Mahasiswa Detil Dosen Program Studi Kelas Angkatan Jumlah Mahasiswa NIP : Nama Lengkap : Jenis Kelamin : Agama : ubah kembali foto Tempat, Tanggal Lahir : Alamat : Kode Pos : Kota : Telepon : Gambar 4.48. Menu Detil Mahasiswa Gambar 4.49. Menu Daftar Persetujuan Detil Mahasiswa Nama Lengkap : Jenis Kelamin : Agama : ubah kembali foto Tempat, Tanggal Lahir : Alamat : Kode Pos : Kota : Telepon : Informasi Akademik NIM : Tahun Masuk : Program Studi : Kelas : Dosen Wali : Gambar 4.50. Menu Daftar Berita Daftar Berita Tanggal Judul Aksi tambah berita Isi Penulis ubah hapus 2. Akun mahasiswa Gambar 4.51. Menu Daftar Perkuliahan Gambar 4.52. Menu Detil Perkuliahan Detil Perkuliahan Tahun Ajaran : Tanggal Pengajuan : Kelompok Semester : Semester : Jumlah SKS : Total Max. 24 sks kembali Kode Mata Kuliah Nama Mata Kuliah Aksi No. SKS Semester SKS Gambar 4.53. Menu Daftar Nilai Gambar 4.54. Menu Daftar Persetujuan 3. Akun dosen Gambar 4.55. Menu Daftar Nilai Gambar 4.56. Menu Detil Nilai Gambar 4.57. Menu Daftar Perkuliahan Gambar 4.58. Menu Detil Perkuliahan Gambar 4.59. Menu daftar persetujuan

4.2.6. Perancangan Arsitektur Jaringan