BAB IV ANALISA PERANCANGAN DESAIN

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 Gambar 4.1 Struktur Tampilan Menu Admin 89

4.2.2 Struktur Tampilan Menu Guru Gambar 4.2 Struktur Tampilan Menu Guru 4.2.3 Struktur Tampilan Menu Siswa Gambar 4.3 Struktur Tampilan Menu Siswa 90

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. Gambar 4.5 Rancangan Layar Profil 91

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. Gambar 4.7 Rancangan Layar Berita 92

4.3.5 Rancangan Layar Pendaftaran baru. Pada tampilan ini, terdapat formulir pendaftaran bagi calon siswa 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. Gambar 4.9 Rancangan Layar Hasil Seleksi 93

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). Gambar 4.11 Rancangan Layar Login 94

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. Gambar 4.13 Rancangan Layar Table Admin 95

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. Gambar 4.15 Rancangan Layar Hasil Seleksi Pendaftaran 96

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. Gambar 4.17 Rancangan Layar Data Siswa 97

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. Gambar 4.19 Rancangan Layar Data Guru 98

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. 99

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. Gambar 4.22 Rancangan Layar Input Data Kelas 100

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. 101

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. Gambar 4.25 Rancangan Layar Jadwal Mengajar 102

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 103

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. Gambar 4.28 Rancangan Layar Laporan Data Guru 104

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. 105

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. Gambar 4.31 Rancangan Layar Profil Guru 106

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. 107

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 Gambar 4.34 Rancangan Layar Lihat Absensi Siswa 108

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. 109

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. Gambar 4.37 Rancangan Layar Profil Siswa 110

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. 111

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. Gambar 4.40 Rancangan Layar Lihat Nilsi Siswa 112