4.3.5 Perancangan Layar 1. Perancangan struktur menu
Lihat Abse nsi
Home
Lihat Nilai
Login Siswa
Ganti Password
Uta ma
MENU UTAM A
Walisiswa Keluar
Lihat Abse nsi
Lihat Nilai
Ganti Password
Keluar
Absensi Rekap Data
Siswa Data Siswa per
Kelas Data
Karyawan Grafik
Instruktur
Kepala Sekolah
Data Kelas
Ganti Password
Keluar
Utama Nilai
Tambah
Na ma Karyawa n
Ta mba h Ganti
Password Keluar
Ubah Hapus
Ubah
Administrasi
Data Karyawan
Data Siswa
Data Kelas
Data Materi
Na ma Siswa
Tambah
Na ma Kelas
Tambah
Hapus Ubah
Hapus Ubah
Hapus
Ganti Password
Keluar
Gambar 4.36 Struktur Menu pada Sistem
Nama kelas
Lihat Nilai
Lihat absen
2. Perancangan Layar Tampilan
Header Home
Login Siswa Wali Siswa
Insruktur Kepala Sekolah
Administrasi
Footer
Gambar 4.37 Menu Utama dan Home
Header Home
Login Siswa Wali Siswa
Insruktur Kepala Sekolah
Administrasi
Footer
Gambar 4.38 Login Siswa
Header I Header II
Header III Informasi
Lihat Absensi Lihat Nilai
Header IV Pengaturan
Ganti Password Keluar
Footer
Gambar 4.39 Halaman Untuk Siswa
Header I Header II
Halaman Utama Lihat Nilai
Header III Pengaturan
Ganti Password Keluar
Footer
Gambar 4.40 Lihat Absensi
Header I
Header II
Halaman Utama Absensi
Header III Pengaturan
Ganti Password Keluar
Footer
Gambar 4.41 Lihat Nilai
Header I Header II
Header III Header IV
Password Lama Input Type
Password Baru Input Type
Password Baru Ulangi Input Type
Ganti Batal
Footer
Gambar 4.42 Ganti Password
Header Home
Login Wali Siswa
Insruktur Kepala Sekolah
Administra Header III
Login Wali Siswa Nama Siswa
Option Type Password
Input Type Login
Header II
Footer
Gambar 4.43 Login Wali Siswa
Header I Header II
Header III Informasi
Lihat Absensi Lihat Nilai
Header IV Pengaturan
Ganti Password Keluar
Footer
Gambar 4.44 Halaman Untuk Wali Siswa
Header I Header II
Halaman Utama Lihat Nilai
Header III Pengaturan
Ganti Password Keluar
Footer
Gambar 4.45 Lihat Absensi
Header I
Header II
Halaman Utama Absensi
Header III Pengaturan
Ganti Password Keluar
Footer
Gambar 4.46 Lihat Nilai
Header I Header II
Header III Header IV
Password Lama Input Type
Password Baru Input Type
Password Baru Ulangi Input Type
Ganti Batal
Footer
Gambar 4.47 Ganti Password
Header IV
Nama Kelas 1.
2. 3.
N.
Header Home
Login Siswa Wali Siswa
Insruktur Kepala Sekolah
Administras Header III
Login Instruktur Nama Siswa
Option Type Password
Input Type Login
Header II
Footer
Gambar 4.48 Login Instruktur
Header I Header II
DATA KELAS 1.
2. 3.
N.
Pengaturan Header III
Ganti Password Keluar
Footer
Gambar 4.49 Halaman Untuk Instruktur
Header I Header II
DATA KELAS Header III
Absensi Nilai
Header IV Data Kelas N
Pengaturan
Ganti Password Keluar
Back Periksa Absensi
Periksa Nilai
Footer
Gambar 4.50 Data Kelas
Header I Header II
DATA KELAS Header III
Daftar Kelas Nilai
Pengaturan Header IV
Kehadiran Per-Session 1-N Kelas N Ganti Password
Keluar
Footer
Gambar 4.51 Absensi
Header I Header II
DATA KELAS Header III
Absensi Nilai
Pengaturan
Ganti Password
Header IV Input Data Absensi Kelas N
Nama Siswa Data Absensi
1. Option Masuk Tidak Masuk
2. 3.
N. Keluar
KIRIM
Footer
Gambar 4.52 Input Data Absensi
Header I Header II
DATA KELAS Header III
Daftar Kelas Absensi
Pengaturan
Ganti Password
Header IV
Daftar Nilai Kelas N Untuk Materi X Link Nilai Per-Harian, Tugas, Tengah SMS,
dan Akhir SMS Keluar
Footer
Gambar 4.53 Nilai
Header I Header II
DATA KELAS Header III
Absensi Nilai
Pengaturan
Ganti Password
Header IV Input Data Nilai Siswa Kelas N
Nama Siswa Data Nilai
1. Option Nilai
2. 3.
N. Keluar
KIRIM
Footer
Gambar 4.54 Input Data Nilai
Header I Header II
Header III Header IV
Password Lama Input Type
Password Baru Input Type
Password Baru Ulangi Input Type
Ganti Batal
Footer
Gambar 4.55 Ganti Password
Header Home
Login Siswa Wali Siswa
Insruktur Kepala Sekolah
Administras Header III
Login Kepala Sekolah User Id
Input Type Password
Input Type Login
Header II
Footer
Gambar 4.56 Login Kepala Sekolah
Header I MENU KEPALA SEKOLAH
Header II
Utama Rekapitulasi Data Siswa
Data Siswa Per Kelas
Header III
Data Karyawan Grafik
Ganti Password Keluar
Footer
Gambar 4.57 Halaman Kepala Sekolah
Header I
MENU KEPALA SEKOLAH
Utama Rekapitulasi Data Siswa
Data Siswa Per Kelas
Nama Alamat
Dll Header II
Tabel Detail Data Siswa
Input Type Int Type
Data Karyawan Grafik
Ganti Password
Tabel Data Siswa
Keluar Nama
Kelas Alamat
Footer
Gambar 4.58 Halaman Rekapitulasi Data Siswa
Header I MENU KEPALA SEKOLAH
Utama Rekapitulasi Data Siswa
Data Siswa Per Kelas Nama Kelas
Data Kelas Jenis
Jumlah Siswa
Data Karyawan Grafik
Ganti Password Keluar
Footer
Gambar 4.59 Halaman Data Kelas
Header I MENU KEPALA SEKOLAH
Utama
Data Kelas ...
Rekapitulasi Data Siswa
No Nama
Jenis Kelamin Alamat
Data Siswa Per Kelas Data Karyawan
Grafik Ganti Password
Keluar
Footer
Gambar 4.60 Halaman Data Siswa Per Kelas
Header I Header II
Tabel Detail Data Karyawan Nama
Input Type
Alamat
Int Type
Dll MENU KEPALA SEKOLAH
Utama Rekapitulasi Data Siswa
Data Siswa Per Kelas Data Karyawan
Grafik Ganti Password
Keluar
Tabel Data Karyawan Kelas
Alamat
Nama
Footer
Gambar 4.61 Halaman Data Karyawan
Header I MENU KEPALA SEKOLAH
Utama Rekapitulasi Data Siswa
Grafik Keadaan Siswa Data Siswa Per Kelas
Data Karyawan Grafik
Ganti Password Keluar
Footer
Gambar 4.62 Halaman Grafik
Header I
MENU KEPALA SEKOLAH Header II
Utama Rekapitulasi Data Siswa
Data Siswa Per Kelas
Password Lama Password Baru
Ganti Password
Input Type Input Type
Data Karyawan
Password Baru Konf.
Input Type Grafik
GANTI PASSWORD Ganti Password
Keluar
Footer
Gambar 4.63 Halaman Ganti Password
Header Home
Login Siswa Wali Siswa
Insruktur Kepala Sekolah
Administrasi Header III
Login Administrator User Id
Option Type Password
Input Type Login
Header II
Footer
Gambar 4.64 Login Administrator
Header I TAMBAH DATA
Header II
Utama Data Karyawan
Data Siswa
Header III
Data Kelas Data Materi
Ganti Password Keluar
Footer
Gambar 4.65 Halaman Administrator
Header I
TAMBAH DATA
Utama Data Karyawan
Data Siswa
Nama Alamat
Dll Header II
Tabel Tambah Data Karyawan
Input Type Int Type
Data Kelas TAMBAH
Data Materi Ganti Password
Tabel Data Karyawan
Keluar Nama Karyawan
Jabatan Alamat
Footer
Gambar 4.66
Halaman Tambah Data Karyawan
Header I
TAMBAH DATA
Utama Data Karyawan
Nama Alamat
Header II Tabel Update Data Karyawan
Input Type Input Type
Data Siswa Data Kelas
Dll
Input Type UBAH
HAPUS Data Materi
Ganti Password
Tabel Data Karyawan
Keluar Nama Karyawan
Jabatan Alamat
Footer
Gambar 4.67
Update Data Karyawan Klik Link Nama Karyawan
Header I
TAMBAH DATA
Utama Data Karyawan
Nama Alamat
Header II Tabel Tambah Data Siswa
Input Type Input Type
ta Siswa Data Kelas
Dll
Input Type TAMBAH
Data Materi Ganti Password
Tabel Data Siswa
Kelua Nama Siswa
Kelas Alamat
Footer
Gambar 4.68
Halaman Tambah Data Siswa
Header I
TAMBAH DATA
Utama Data Karyawan
Nama Alamat
Header II Tabel Update Data Siswa
Input Type Input Type
Data Siswa Data Kelas
Dll
Input Type UBAH
HAPUS Data Materi
Ganti Password
Tabel Data Siswa
Keluar Nama Siswa
Kelas Alamat
Footer
Gambar 4.69
Update Data Siswa Klik Link Nama Siswa
Header I
TAMBAH DATA
Utama Data Karyawan
Nama Kelas Jenis Kelas
Header II Tabel Tambah Data Kelas
Input Type Input Type
Data Siswa Data Kelas
TAMBAH
Data Materi Ganti Password
Tabel Data Kelas
Keluar Nama Kelas
Jenis Status
Footer
Gambar 4.70
Halaman Tambah Data Kelas
Header I
TAMBAH DATA
Utama Data Karyawan
Data Siswa
Nama Kelas Jenis Kelas
Header II Tabel Update Data Kelas
Input Type Input Type
Data Kelas UBAH
HAPUS Data Materi
Ganti Password
Tabel Data Kelas
Keluar Nama Kelas
Jenis Status
Footer
Gambar 4.71
Update Data Kelas Klik Link Nama Kelas
Header I
TAMBAH DATA
Utama Data Karyawan
Nama Materi Instruktur
Header II b mha ti
Input Type Input Type
Data Siswa Data Kelas
Dll
TAMBAH Input Type
Data Materi Ganti Password
Tabel Data Kelas Per-Materi
Keluar Kelas Aktif
Jam Masuk Instruktur Materi
Footer
Gambar 4.72
Halaman Tambah Data Materi
Header I
TAMBAH DATA
Utama Data Karyawan
Nama Materi Instruktur
Header II Tabel Tambah Data Materi
Input Type Input Type
Data Siswa Data Kelas
Dll
UBAH HAPUS
Input Type Lihat Nilai
Lihat Absensi Data Materi
Ganti Password
Tabel Data Kelas Per-Materi
Keluar Kelas Aktif
Jam Masuk Instruktur
Materi
Footer
Gambar 4.73
Update Data Materi Klik Link Kelas Aktif
Header I
TAMBAH DATA Header II
Utama Data Karyawan
Data Siswa
Password Lama Password Baru
Ganti Password
Input Type Input Type
Data Kelas
Password Baru Konf.
Input Type Data Materi
GANTI PASSWORD Ganti Password
Keluar
Footer
Gambar 4.74
Ganti Password Administrator
Header Home
Login Siswa Wali Siswa
Insruktur Kepala Sekolah
Administrasi
Gambar 4.75
Keluar Menu Home
4.4 Pemrograman Coding