BAB IV
ANALISA PERANCANGAN DESAIN
4.1 User Interface
Pada bab ini di gambarkan mengenai user interface dari sistem yang akan di buat, yang merupakan bentuk tampilan grafis yang berhubungan langsung dengan pengguna. Antar muka atau User Interface berfungsi untuk menghubungkan antara pengguna dengan siste oprasi, sehingga sistem tersebut dapat berguna
4.2 Struktur Tampilan
4.2.1 Struktur Tampilan Menu Admin
4.2.2 Struktur Tampilan Menu Guru
Gambar 4.2 Struktur Tampilan Menu Guru
4.2.3 Struktur Tampilan Menu Siswa
4.3 Rancangan Layar
4.3.1 Rancangan Layar Beranda
Tampilan Layar Beranda, pada tampilan ini terdapat menu utama yaitu Home, Profil, Galeri, Berita, Pendaftaran, Kontak Kami, dan Masuk. kemudian terdapat menu Pencarian, Banner, Peta Lokasi, Pengumuman, dan Agenda. Pada bagian tengah terdapat slideshow, dan Berita.
Gambar 4.4 Rancangan Layar Beranda
4.3.2 Rancangan Layar Profil
Rancangan Layar Profil, Tampilan ini adalah tampilan dari menu profil yang menjelaskan tentang Sejarah, visi dan misi, Sifat dan karakteristik dari Pondok Pesantren Daar El Qolam.
4.3.3 Rancangan Layar Galeri
Tampilan ini adalah tampilan galeri foto kegiatan yang berlangsung di Pondok Pesantren Daar El Qolam.
Gambar 4.6 Rancangan Layar Galeri
4.3.4 Rancangan Layar Berita
Pada tampilan ini berisi berita terbaru yang berkaitan dari Pondok Pesantren Daar El Qolam dan dunia pendidikan secara umum.
4.3.5 Rancangan Layar Pendaftaran
Pada tampilan ini, terdapat formulir pendaftaran bagi calon siswa baru.
Gambar 4.8 Rancangan Layar Pendaftaran
4.3.6 Rancangan Layar Hasil Seleksi
Tampilan ini adalah tampilan hasil seleksi dari calon siswa yang telah mendaftar ke Pondok Pesantren Daar El Qolam.
4.3.7 Rancangan Layar Kontak Kami
Tampilan ini adalah tampilan Kontak kami. Pada tampilan ini user form pertanyaan melalui email, alamat, nomor telepon dan peta lokasi Pondok Pesantren Daar El Qolam.
Gambar 4.10 Rancangan Layar Kontak Kami
4.3.8 Rancangan Layar Login
Tampilan ini adalah tampilan menu log in untuk para user ( admin, guru dan siswa ). Pada halaman ini para user harus melakukan log in untuk masuk ke halaman utama user (admin, guru, siswa).
4.3.9 Rancangan Layar Home Admin
Tampilan ini adalah tampilan menu utama admin. Pada tampilan ini terdapat menu utama yaitu Home (Admin, Data Pendaftar), Data Master (Data Guru, Data Siswa, Data Kelas), Jadwal (Jadwal Pelajaran, Jadwal Mengajar), Laporan (Data Guru, Data Siswa, Data Absensi, Data Nilai).
Gambar 4.12 Rancangan Layar Home Admin
4.3.10 Rancangan Layar Table Admin
Tampilan ini adalah tampilan managemen admin. Pada tampilan ini admin dapat merubah detail user admin dan menambahkan admin baru dengan memilih tombol tambah.
4.3.11 Rancangan Layar Data Pendaftar
Tampilan ini adalah tampilan data pendaftaran calon siswa baru yang telah mengisi formulir pendaftaran siswa baru.
Gambar 4.14 Rancangan Layar Data Pendaftar
4.3.12 Rancangan Layar Tabel Hasil Seleksi Pendaftaran
Tampilan ini adalah tampilan yang menampilkan tabel hasil seleksi pendaftaran.
4.3.13 Rancangan Layar Input Hasil Seleksi Pendaftaran
Pada tampilan ini admin dapat menginput hasil seleksi pendaftaran. Pada tampilan ini admin dapat menginput hasil seleksi pendaftaran baru
Gambar 4.16 Rancangan Layar Input Hasil Seleksi Pendaftaran
4.3.14 Rancangan Layar Data Siswa
Pada tampilan ini admin dapat melihat data siswa dengan memilih menu data siswa terlebih dahulu, kemudian admin dapat merubah data siswa dengan memeilih tombol aksi, dan admin juga dapat menambah data siswa baru.
4.3.15 Rancangan Layar Input Data Siswa
Tampilan ini adalah tampilan untuk memasukan data siswa baru baru untuk admin. Pada halaman ini, sistem akan menampilkan tampilan data siswa yang harus diisi dengan mengisi kolom yang disediakan, kemudian klik tombol Simpan untuk menyimpan ke data base atau reset untuk menghapus semua kolom yang sudah diisi.
Gambar 4.18 Rancangan Input Layar Data Siswa
4.3.16 Rancangan Layar Data Guru
Pada halaman ini admin yang ingin mengelola data guru, harus masuk ke dalam menu master, dan memilih data guru di sebelah kiri. Setelah admin memilih opsi data guru akan muncul tabel data guru.
4.3.17 Rancangan Layar Input Data Guru
Tampilan ini adalah tampilan untuk memasukkan data guru baru untuk admin. Pada halaman ini, setelah admin mengklik masukkan data guru, sistem akan menampilkan tampilan data guru yang haru diisi. Seperti, NIP, nama lengkap, jenis kelamin, dll. Setelah itu klik simpan agar data masuk ke dalam database. Dan data guru baru ditambahkan.
Gambar 4. 20 Rancangan Layar Input Data Guru
4.3.18 Rancangan Layar Data Kelas
Tampilan ini adalah tampilan kelola data kelas untuk admin. Pada halaman ini admin yang ingin mengelola data kelas, harus masuk ke dalam menu master, dan memilih opis data kelas di sebelah kiri. Setelah admin memilih opsi data kelas akan muncul tabel data guru. Dengan mengklik masukkan data kelas, admin bisa menambahkan data kelas, di edit dan dihapus dari sistem.
Gambar 4.21 Rancangan Layar Data Kelas
4.3.19 Rancangan Layar Input Data Kelas
Tampilan ini adalah tampilan untuk memasukkan data kelas baru untuk admin. Pada halaman ini, setelah admin mengklik masukkan data kelas, sistem akan menampilkan tampilan data kelas yang haru diisi. Seperti, kode kelas dan nama kelas. Setelah itu klik simpan agar data masuk ke dalam database. Dan kelas baru ditambahkan.
4.3.20 Rancangan Layar Jadwal Pelajaran
Tampilan ini adalah tampilan kelola jadwal pelajaran untuk admin. Pada halaman ini admin yang ingin jadwal pelajaran, harus masuk ke dalam menu memilih opsi jadwal pelajaran dan memilih jadwal kelas yang akan ditampilkan. Setelah admin memilih kelas maka sistem akan memunculkan tabel jadwal pelajaran. Dengan mengklik masukkan jadwal pelajaran, admin bisa menambahkan jadwal pelajaran baru.
Gambar 4.23 Rancangan Layar Jadwal Pelajaran
4.3.21 Rancangan Layar Input Jadwal Pelajaran
Tampilan ini adalah tampilan untuk memasukkan jadwal pelajaran baru untuk admin. Pada halaman ini, setelah admin mengklik jadwal pelajaran, sistem akan menampilkan tampilan data jadwal pelajaran yang haru diisi. Seperti, kode jadwal, Tahun Ajaran, Nama Pelajaran, Nama Kelas, Nama Guru, dan Hari. Setelah itu klik simpan agar data masuk ke dalam database. Dan jadwal pelajaran ditambahkan.
Gambar 4.24 Rancangan Layar Input Jadwal Pelajaran
4.3.22 Rancangan Layar Jadwal Mengajar
Tampilan ini adalah tampilan kelola jadwal mengajar untuk admin. Pada halaman ini admin yang ingin melihat jadwal mengajar, harus memilih opsi jadwal mengajar dan memilih jadwal kelas yang akan ditampilkan. Setelah admin memilih kelas maka sistem akan memunculkan tabel jadwal mengajar. Dengan mengklik masukkan jadwal mengajar, admin bisa menambahkan jadwal mengajar baru.
4.3.23 Rancangan Layar Input Jadwal Mengajar
Tampilan ini adalah tampilan untuk memasukkan jadwal mengajar baru untuk admin. Pada halaman ini, setelah admin mengklik jadwal mengajar, sistem akan menampilkan tampilan data jadwal mengajar yang haru diisi. Seperti, kode jadwal, Tahun Ajaran, Nama Pelajaran, Nama Kelas, Nama Guru, dan Hari. Setelah itu klik simpan agar data masuk ke dalam database. Dan jadwal mengajar ditambahkan.
Gambar 4.26 Rancangan Layar Input Jadwal Mengajar
4.3.24 Rancangan Layar Laporan Data Siswa
Tampilan ini adalah tampilan untuk admin melihat dan membuat laporan data siswa. Pada tampilan ini admin harus terlebih dahulu memilih menu laporan data siswa, setelah itu sistem akan menampilkan tabel data siswa. Untuk mencetak laporan admin harus mengklik tombol cetak yang ada dibagian atas tabel data siswa, setelah itu sistem akan mencetak laporan data siswa
Gambar 4.27 Rancangan Layar Laporan Data Siswa
4.3.25 Rancangan Layar Laporan Data Guru
Tampilan ini adalah tampilan untuk admin melihat dan membuat laporan data guru. Pada tampilan ini admin harus terlebih dahulu memilih menu laporan data guru, setelah itu sistem akan menampilkan tabel data guru. Untuk mencetak laporan admin harus mengklik tombol cetak yang ada dibagian atas tabel data guru, setelah itu sistem akan mencetak laporan data guru.
4.3.26 Rancangan Layar Laporan Nilai
Tampilan ini adalah tampilan untuk admin melihat dan membuat laporan data nilai mata pelajaran. Pada tampilan ini admin harus terlebih dahulu memilih menu laporan data nilai. Untuk melihat laporan admin harus memilih kelas dan mata pelajaran yang ingin ditampilkan, kemudian sistem akan menampilkan laporan tabel data nilai yang telah dipilih, kemudian admin dapat mencetak laporan dengan mengklik tombol cetak yang ada dibagian atas tabel data nilai, setelah itu sistem akan mencetak laporan data nilai.
Gambar 4.29 Rancangan Layar Laporan Nilai
4.3.27 Rancangan Layar Laporan Absensi
Tampilan ini adalah tampilan untuk admin melihat dan membuat laporan absensi siswa perkelas. Pada tampilan ini admin harus terlebih dahulu memilih menu laporan absensi. Untuk melihat laporan admin harus memilih kelas dan periode laporan yang ingin ditampilkan, kemudian sistem akan menampilkan laporan absensi kelas yang telah dipilih, kemudian admin dapat mencetak laporan dengan mengklik tombol cetak yang ada dibagian atas tabel data absensi, setelah itu sistem akan mencetak laporan absensi kelas.
Gambar 4.30 Rancangan Layar Profil Guru
4.3.28 Rancangan Layar Profil Guru
Tampilan ini adalah tampilan menu utama profil guru. Pada menu utam guru ini terdapat menu utama yang berada disebelah kiri yaitu, Home (Profil Guru dan Jadwal Mengajar,) Absensi (Absensi Siswa dan Lihat Absensi), Nilai (Nilai Siswa dan Lihat Nilai Siswa) dan terdapat tombol keluar pada bagian kiri atas.
4.3.29 Rancangan Layar Jadwal Mengajar
Tampilan ini adalah tampilan lihat jadwal mengajar untuk guru. Pada tampilan ini guru harus terlebih dahulu memilih menu jadwal mengajar kemudian sistem akan menampilakan jadwal mengajar guru.
Gambar 4.32 Rancangan Layar Jadwal Mengajar
4.3.30 Rancangan Layar Absensi Siswa
Tampilan ini adalah tampilan input absensi siswa untuk guru. Pada tampilan ini guru harus terlebih dahulu memilih menu absensi siswa kemudian memilih kelas dan tanggal absensi kemudian sistem akan menampilakan absensi siswa pada kelas yang telah dipilih. Untuk melakukan absensi guru tinggal memberikan tanda ceklis keterangan Hadir, Sakit, Izin, dan Alfa, atau guru tinggal mengklik tombol “Check
All” untuk memberikan tanda hadir pada semua siswa dan tombol
“Uncheck All” untuk menghilangkan semua tanda. Setelah melakukan absensi kemudian guru tinggal mengklik tombol Ok, kemudian sistem akan menyimpan data absensi ke database.
Gambar 4.33 Rancangan Layar Absensi Siswa
4.3.31 Rancangan Layar Lihat Absensi Siswa
Tampilan ini adalah tampilan lihat absensi siswa untuk guru. Pada tampilan ini guru harus terlebih dahulu memilih menu lihat absensi kemudian memilih kelas yang diinginkan kemudian sistem akan menampilkan tabel input absensi dari kelas yang telah telah dipilih
4.3.32 Rancangan Layar Nilai Siswa
Tampilan ini adalah tampilan input nilai siswa untuk guru. Pada tampilan ini guru harus terlebih dahulu memilih menu nilai siswa kemudian memilih kelas dan mata pelajaran yang diinginkan kemudian sistem akan tabel nilai yang terdiri dari NIS, Nama Siswa, dan kolom nilai yang harus diinput. Setelah guru selesai mengisi nilai kemudian guru mengklik tombol simpan untuk menyimpan data nilai ke database.
Gambar 4.35 Rancangan Layar Input Nilai Siswa
4.3.33 Rancangan Layar Lihat Nilai Siswa
Tampilan ini adalah tampilan untuk guru melihat nilai siswa perkelas. Pada tampilan ini guru harus terlebih dahulu memilih menu lihat nilai siswa kemudian sistem akan menampilkan tabel data nilai perkelas.
Gambar 4.36 Rancangan Layar Lihat Nilai Siswa
4.3.34 Rancangan Layar Profil Siswa
Tampilan ini adalah tampilan menu utama profil siswa. Sebelum masuk ke menu utama siswa harus login terlebih dahulu melalui halaman login sistem informasi akademik Pondok Pesantren Daar El Qolam. Pada menu utama siswa ini terdapat menu utama yang berada disebelah kiri yaitu, Home (Profil Guru dan Jadwal Pelajaran,) Absensi (Lihat Absensi), Nilai (Lihat Nilai Siswa) dan terdapat tombol keluar pada bagian kanan atas.
4.3.35 Rancangan Layar Jadwal Pelajaran Siswa
Tampilan ini adalah tampilan untuk siswa melihat jadwal pelajaran. Pada tampilan ini siswa harus memilih menu Jadwal Pelajaran kemudian sistem akan menampilkan tabel jadwal pelajaran, terdapat tombol previous dan next untuk meliahat jadwal pelajarn pada halaman selanjutnya.
Gambar 4.38 Rancangan Layar Jadwal Pelajaran Siswa
4.3.36 Rancangan Layar Lihat Absensi Siswa
Tampilan ini adalah tampilan untuk siswa melihat absensi siswa secara keseluruhan. Pada tampilan ini siswa harus memilih menu lihat absensi kemudian sistem akan menampilkan tabel absensi dari siswa tersebut.
Gambar 4.39 Rancangan Layar Lihat Absensi Siswa
4.3.37 Rancangan Layar Lihat Nilai Siswa
Tampilan ini adalah tampilan untuk siswa melihat nilai siswa secara keseluruhan. Pada tampilan ini siswa harus memilih menu lihat nilai kemudian sistem akan menampilkan tabel nilai dari siswa tersebut.
