F. Sequence Diagram Wali Kelas
3.4.5 Desain Interface
Desain interface ini dibuat dengan tujuan untuk memudahkan user atau pengguna dalam mengoperasikan aplikasi berbasis website yang dibuat. Dan memudahkan pengguna dalam memasukkan data apa saja yang akan dimasukkan sehingga nantinya akan menghasilkan laporan atau informasi yang diperlukan terdiri dari :
Halaman Utama
Login User
Home
Halaman Siswa
Nilai Mata Pelajaran
Nilai Ekstrakurikuler
Nilai Kepribadian
Logout/Keluar
Halaman Admin/Urusan Kesiswaan
Data Staff
Data Siswa
Data Guru Mata Pelajaran
Data Guru Ekstrakurikuler
Data Wali Kelas
Logout/Keluar
Halaman User Guru Mata Pelajaran
Penilaian Nilai Hasil Belajar Siswa
Nilai Siswa
Logout/Keluar
Halaman User Wali Kelas
Penilaian Perilaku Siswa
Nilai Siswa
Logout/Keluar
Halaman User Guru Ekstrakurikuler
Penilaian Ekstrakurikuler Siswa
Nilai Siswa
A. Pembuatan Login User
Login User digunakan untuk membuka koneksi ke Menu Utama User,
Menu user akan disediakan berdasarkan level user
Icon Login
SMK YMIK Joglo Jakarta Barat
Login Username : Password:
Gambar 3.20 Desain Layar Login User
1. Login : untuk membuka koneksi ke Menu Utama.
B. Pembuatan Halaman Utama
Menu Utama digunakan untuk mengakses Raport Online Berbasis Website pada SMK YMIK.
1 2 4 Logo Isi Content 3
Gambar 3.21 Desain Layar Menu Utama
1. Header : Header yang berisikan logo SMK YMIK
3. Content : Menampilkan konten yang dipanggil sesuai perintah
4. Footer : Untuk menulis sebuah alamat sekolah
C. Pembuatan Dialog Input Data Siswa
Dialog ini digunakan untuk menambah,menghapus dan merubah data siswa sesuai dengan yang di inginkan
Data Murid
2 1
Data yang di input nama, tahun ajaran, semester, kelas Program keahlian, nama orang tua
Gambar 3.22 Desain Layar Murid
1. Buttom Simpan : Simpan Data
2. Buttom Batal : Membatalkan Pengisian Data
D. Pembuatan Dialog Input Guru Mapel
Dialog Data Guru Mata Pelajaran digunakan untuk menambah, merubah, dan menghapus data Guru Mata Pelajaran SMK YMIK.
Guru mapel
2 1
Data yang di input nama guru mapel, alamat, kelas, mapel, tahun ajaran, semester, keterangan
Gambar 3.23 Desain Layar guru mapel
3. Buttom Simpan : Simpan Data
4. Buttom Batal : Membatalkan Pengisian Data
Dialog data wali kelas digunakan untuk menambah, merubah, dan menghapus wali kelas SMK YMIK.
Wali Kelas
2 1
Data yang di input kelas, guru, tahun ajaran, semester
Gambar 3.24 Desain Layar Wali Kelas
1. Buttom Simpan : Simpan Data
2. Buttom Batal : Membatalkan Pengisian Data
F. Pembuatan Dialog User
Dialog data User digunakan untuk menambah, merubah, dan menghapus data User SMK YMIK.
Input data user
2 1
Data yang di input nama, username,password, status hak akses
Gambar 3.25 Desain Layar Data User
1. Buttom Simpan : Simpan Data
2. Buttom Batal : Membatalkan Pengisian Data
G. Pembuatan Dialog Input Tahun Ajaran
Dialog Layar Data Tahun Pelajaran digunakan untuk menambah, merubah, dan menghapus Data Tahun Pelajaran.
Tahun ajaran
2 1
Data yang di input tahun ajaran
Gambar 3.26 Desain Layar Tahun Ajaran
3. Buttom Simpan : Simpan Data
4. Buttom Batal : Membatalkan Pengisian Data
H. Pembuatan Dialog Input Semester
Dialog Layar Data semester digunakan untuk menambah, merubah, dan menghapus Data semester.
Semester
2 1
Data yang di input kode semester, nama semester
Gambar 3.27 Desain Layar Semester
1. Buttom Simpan : Simpan Data
2. Buttom Batal : Membatalkan Pengisian Data
I. Pembuatan Dialog Input Kelas
Dialog Layar Input Kelas digunakan untuk menambah, merubah, dan menghapus Data Kelas.
Kelas
2 1
Data yang di input nama kelas dan keterangan
Gambar 3.28 Desain Layar Kelas
1. Buttom Simpan : Simpan Data
2. Buttom Batal : Membatalkan Pengisian Data
J. Pembuatan Dialog Input Mata Pelajaran
Dialog Layar Input Data Mapel Tahun Pelajaran digunakan untuk menambah, merubah, dan menghapus Data Mata Pelajaran.
Mapel
2 1
Data yang di input Kategori pelajaran, kode pelajaran, nama pelajaran Keriteria Ketuntasan Minimal (KKM), keterangan
Gambar 3.29 Desain Layar Mapel
1. Buttom Simpan : Simpan Data
2. Buttom Batal : Membatalkan Pengisian Data
K. Pembuatan Dialog Input Ekskul
Dialog Layar Input Data Ekskul digunakan untuk menambah, merubah, dan menghapus Data Ekskul.
Ekskul
2 1
Data yang di input Nama Ekstrakulikuler
Gambar 3.30 Desain Layar Ekskul
1. Buttom Simpan : Simpan Data
2. Buttom Batal : Membatalkan Pengisian Data
L. Pembuatan Dialog Input Kepribadian
Dialog Layar Data Kepribadian digunakan untuk menambah, merubah, dan menghapus Data Kepribadian.
Kepribadian
2 1
Data yang di input Nama Kepribadian
Gambar 3.31 Desain Layar Kepribadian
1. Buttom Simpan : Simpan Data
2. Buttom Batal : Membatalkan Pengisian Data
M. Pembuatan Dialog Input Program Keahlian
Dialog Layar Data Program Keahlian digunakan untuk menambah, merubah, dan menghapus Data Program Keahlian.
Program keahlian
2 1
Data yang di input Nama program keahlian
Gambar 3.32 Desain Layar Program Keahlian
1. Buttom Simpan : Simpan Data
2. Buttom Batal : Membatalkan Pengisian Data
N. Pembuatan Dialog Input Nilai Mapel
Dialog Layar Nilai Mapel digunakan untuk mengisi nilai dari setiap siswa/i dari masing-masing mata pelajaran.
Nilai Mapel
2 1
Data yang di input Nilai Mapel dari masing-masing guru bidang studi
Gambar 3.33 Desain Layar Nilai Mapel
1. Buttom Simpan : Simpan Data
2. Buttom Batal : Membatalkan Pengisian Data
O. Pembuatan Dialog Input Nilai Kepribadian
Dialog Layar Nilai Mapel digunakan untuk mengisi nilai dari setiap siswa/i dari masing-masing mata pelajaran.
Nilai Kepribadian
2 1
Data yang di input Kepribadian dari setiap siswa
Gambar 3.34 Desain Layar Nilai Kepribadian
1. Buttom Simpan : Simpan Data
2. Buttom Batal : Membatalkan Pengisian Data
P . Pembuatan Dialog Input Nilai Ekstrakulikuler
Dialog Layar Nilai Mapel digunakan untuk mengisi nilai dari setiap siswa/i dari masing-masing mata pelajaran.
Nilai Ekstrakulikuler
2 1
Data yang di input Nilai Ekstrakulikuler
Gambar 3.35 Desain Layar Nilai Ekstrakulikuler
1. Buttom Simpan : Simpan Data
3. Buttom Batal : Membatalkan Pengisian Data
Q. Pembuatan Dialog Input Absensi
Dialog Layar Absensi digunakan untuk menngisi kehadiran siswa dari masing-masing mata pelajaran.
Absensi
2 1
Data yang di input Kehadiaran siswa/i dalam mata Setiap mata pelajaran
Gambar 3.36 Desain Layar Absensi
2. Buttom Simpan : Simpan Data
4. Buttom Batal : Membatalkan Pengisian Data
3.4.6 Perancangan Output
Hasil dari perancang output dari pembuatan program aplikasi
Raport SMK YMIK dapat dilihat dari gambar dibawah ini :
Pilih Nilai Berdasarkan
NIS
Nama Pilih Nama Kelas Pilih Kelas Semester Pilih Semester Tahun Ajaran Pilih Tahun Ajaran Program Keahlian Pilih Program Keahlian No Program Pendidikan & Mata Diklat KKM Hasil Penilaian Tugas Harian UTS UAS Rata-rata Kehadian Keterangan I. Normatif 1 2 II. Adaptif 1 2 III. Produktif 1 2
No Kepribadian Predikat Keterangan
1
2
No Ekstrakulikuler Rata-rata Predikat
1
2
Catatan Untuk Siswa :
Catatan: Data yang di isi
Jakarta 26 Juli 2015 Orang Tua/Wali Siswa Wali Kelas
(……….) (Nyono Kolik)
Gambar 3.37 Desain Layar Output