Contoh : 141510015 Keterangan
= “1415” : tahun ajaran siswa
“1” : angka pemisah antar nomor urut “0015” : nomor urut siswa
4.2 Perancangan Antar Muka
Perancangan antar muka adalah untuk menjelaskan tampilan antar muka perangkat lunak yang di rancang.
4.2.1 Struktur menu
Bentuk umum dari suatu rancangan suatu program yang berguna untuk memudahkan pemakai dalam memilih menu, berikut gambar strukturnya :
1. Perancangan menu admin
Rancangan antar muka admin adalah sebagai berikut :
Gambar 4.8 Struktur Menu Admin
Guru Admin
Login
Mata Pelajaran Siswa
Kelas
Logout Tambah
Data Guru
Tambah Data Mata Pelajaran
Tambah Data Siswa
Tambah Data Kelas
Edit Data Guru
Edit Data Mata Pelajaran
Edit Data Siswa Edit Data Kelas
Hapus Data Guru
Hapus Data Mata Pelajaran
Hapus Data Siswa
Hapus Data Kelas
2. Perancangan menu guru
Perancangan antar muka guru sebagai berikut :
Gambar 4.9 Struktur Menu Guru
3. Perancangan menu siswa
Perancangan antar muka siswa sebagai berikut :
Gambar 4.10 Struktur Menu Siswa
Materi Guru
Login
List Siswa Tugas
Hasil Tugas Siswa
Logout Tambah Materi
Baru Tambah Tugas
Baru File Tugas
Siswa File Materi Baru
File Tugas Baru Beri Nilai
Edit Materi Baru Edit Tugas Baru
Hapus Materi Baru
Hapus Materi Baru
Edit Nilai
Materi Siswa
Login
Tugas Hasil Tugas
Siswa Logout
File Materi Baru
Laporan Nilai Siswa
File Tugas Baru Upload
Hasil Tugas File
Tugas Siswa Hapus Tugas
Siswa
4.2.2 Perancangan input
Rancangan ini dirancang untuk menerima masukan dari pengguna sistem. Rancangan ini harus dapat memberikan penjelasan dari pemakai, baik dari bentuk
maupun dari masukan yang harus di isi. Berikut ini adalah rancangannya. 1.
Antar muka login admin
Gambar 4.11 Antar Muka Login Admin
2. Antar muka login guru dan siswa
Gambar 4.12 Antar Muka Login Guru dan Siswa
E LEARNING
2015 SMA NASIONAL BANDUNG
LOGIN
username password
MASUK
E LEARNING
2015 SMA NASIONAL BANDUNG
LOGIN
Username : Password :
Guru Siswa
login
3. Antar muka menu admin
Gambar 4.13 Antar Muka Menu Admin
4. Antar muka menu admin tambah guru
Gambar 4.14 Antar Muka Menu Admin Tambah Guru
2015 SMA NASIONAL BANDUNG Wakasek Sarana Prasarana Guru Siswa Kelas Mata Pelajaran
Logout
SELAMAT DATANG DI HALAMAN WAKASEK SARANA DAN PRASARANA
NIP Nama
Wali Kelas Alamat
Tempat Lahir Tanggal Lahir
Jenis Kelamin Agama
Email No Telepon
Wakasek Sarana Prasarana Guru Siswa Kelas Mata Pelajaran Logout
NIP Nama
--Pilih Kelas--
Simpan Cancel
Tempat Lahir Tanggal Lahir
Jenis Kelamin Agama
Alamat lengkap
Email No Telepon
… ...
X
2015 SMA NASIONAL BANDUNG
5. Antar muka menu admin tambah siswa
Gambar 4.15 Antar Muka Menu Admin Tambah Siswa
6. Antar muka menu admin tambah kelas
Gambar 4.16 Antar Muka Menu Admin Tambah Kelas
NIS Nama
Wali Kelas Alamat
Tempat Lahir Tanggal Lahir
Jenis Kelamin Agama
Email No Telepon
Wakasek Sarana Prasarana Guru Siswa Kelas Mata Pelajaran Logout
NIS Nama
--Pilih Kelas--
Simpan Cancel
Tempat Lahir Tanggal Lahir
Jenis Kelamin Agama
Alamat lengkap
Email No Telepon
… ...
X
2015 SMA NASIONAL BANDUNG
2015 SMA NASIONAL BANDUNG
Kelas Wali Kelas
Wakasek Sarana Prasarana Guru Siswa Kelas Mata Pelajaran Logout
Kelas --Pilih Wali Kelas--
Simpan Cancel
7. Antar muka menu admin tambah mata pelajaran
Gambar 4.17 Antar Muka Menu Admin Tambah Mata Pelajaran
8. Antar muka halaman admin data guru
Gambar 4.18 Antar Muka Halaman Admin Data Guru
2015 SMA NASIONAL BANDUNG
Mata Pelajaran Kelas
Wali Kelas Ruangan
Jumlah Siswa
Wakasek Sarana Prasarana Guru Siswa Kelas Mata Pelajaran Logout
-- Pilih Kelas -- -- Pilih Guru--
Ruang
Simpan Cancel
Jumlah Siswa Mata Pelajaran
2015 SMA NASIONAL BANDUNG Wakasek Sarana Prasarana Guru Siswa Kelas Mata Pelajaran
Logout NO
NIP Nama
Email Aksi
Hapus Edit
tambah data guru Detail Guru
detail
9. Antar muka halaman admin data siswa
Gambar 4.19 Antar Muka Admin Halaman Data Siswa
10. Antar muka halaman admin data kelas
Gambar 4.20 Antar Muka Admin Halaman Data Kelas
2015 SMA NASIONAL BANDUNG Wakasek Sarana Prasarana Guru Siswa Kelas Mata Pelajaran
Logout NO
NIS Nama
Email Aksi
Hapus Edit
tambah data siswa Detail Siswa
detail Kelas
2015 SMA NASIONAL BANDUNG Wakasek Saran Prasarana Guru Siswa Kelas Mata Pelajaran
Logout NO
Kelas Wali Kelas
Aksi Hapus
Edit
tambah kelas baru
11. Antar muka halaman admin data mata pelajaran
Gambar 4.21 Antar Muka Halaman Admin Data Mata Pelajaran
12. Antar muka halaman guru
Gambar 4.22 Antar Muka Halaman Guru
2015 SMA NASIONAL BANDUNG Wakasek Sarana Prasarana Guru Siswa Kelas Mata Pelajaran
Logout NO Mata Pelajaran
Kelas Ruangan
Aksi Hapus
Edit tambah data mata pelajaran
Jumlah Siswa List Siswa
Guru
2015 SMA NASIONAL BANDUNG GURU Materi Tugas Hasil Tugas Siswa List Siswa
Logout
SELAMAT DATANG DI HALAMAN GURU
13. Antar muka halaman guru tambah materi
Gambar 4.23 Antar Muka Halaman Guru Tambah Materi
14. Antar muka halaman guru tambah tugas
Gambar 4.24 Antar Muka Halaman Guru Tambah Tugas
2015 SMA NASIONAL BANDUNG
Tanggal Materi Pilih Kelas
Judul Materi Data Materi
GURU Materi Tugas Hasil Tugas Siswa List Siswa
Logout
Tanggal Materi ---Pilih Kelas---
Pilih File
Upload Cancel
Ketentuan
… ...
X
Judul Materi
2015 SMA NASIONAL BANDUNG
Tanggal Awal Tanggal Akhir
Pilih Kelas Judul Tugas
Data Materi
GURU Materi Tugas Hasil Tugas Siswa List Siswa
Logout
Tanggal Awal Tugas
---Pilih Kelas--- Pilih File
Upload Cancel
Ketentuan
… ...
X
Judul Tugas Tanggal Akhir Tugas
… ...
X
15. Antar muka halaman guru hasil tugas siswa
Gambar 4.25 Antar Muka Halaman Guru Hasil Tugas Siswa
16. Antar muka halaman guru penilaian tugas siswa
Gambar 4.26 Antar Muka Halaman Guru Penilaian Tugas Siswa
2015 SMA NASIONAL BANDUNG GURU
Materi Tugas Hasil Tugas Siswa List Siswa Logout
NO Nama Siswa
Judul Tugas Siswa Data Tugas Siswa
data tugas Tanggal Diterima Tugas
Nilai siswa beri nilai edit nilai
2015 SMA NASIONAL BANDUNG Nilai
GURU Materi Tugas Hasil Tugas Siswa List Siswa
Logout
nilai simpan
cancel
17. Antar muka halaman guru data materi
Gambar 4.27 Antar Muka Halaman Guru Data Materi
18. Antar muka halaman guru data tugas
Gambar 4.28 Antar Muka Halaman Guru Data Tugas
2015 SMA NASIONAL BANDUNG 2015 SMA NASIONAL BANDUNG
GURU Materi Tugas Hasil Tugas Siswa List Siswa
Logout GURU
Materi Tugas Hasil Tugas Siswa List Siswa Logout
NO Judul Materi
Tanggal Materi Aksi
Data Materi tambah materi baru
tambah materi baru Data materi
Data materi edit
edit hapus
hapus
2015 SMA NASIONAL BANDUNG GURU
Materi Tugas Hasil Tugas Siswa List Siswa Logout
NO Judul Tugas
Tanggal Akhir Tugas Aksi
Data Tugas tambah tugas baru
data tugas edit
hapus Tanggal Awal Tugas
19. Antar muka halaman siswa
Gambar 4.29 Antar Muka Halaman Siswa
20. Antar muka halaman siswa data materi
Gambar 4.30 Antar Muka Halaman Siswa Data Materi
2015 SMA NASIONAL BANDUNG SISWA Materi Tugas Hasil Tugas Siswa
Logout
SELAMAT DATANG DI HALAMAN SISWA
2015 SMA NASIONAL BANDUNG Siswa
Materi Tugas Hasil Tugas Siswa Logout
NO Judul Materi
Data Materi data materi
Tanggal Materi Nama Guru
21. Antar muka halaman siswa data tugas
Gambar 4.31 Antar Muka Halaman Siswa Data Tugas
22. Antar muka halaman siswa hasil tugas siswa
Gambar 4.32 Antar Muka Halaman Siswa Hasil Tugas Siswa
2015 SMA NASIONAL BANDUNG Siswa
Materi Tugas Hasil Tugas Siswa Logout
NO Judul Tugas
Data Materi data materi
Tanggal Akhir Tugas Nama Guru
Upload Hasil Tugas upload
Tanggal Awal Tugas
2015 SMA NASIONAL BANDUNG Siswa
Materi Tugas Hasil Tugas Siswa Logout
NO Nilai Siswa
Keterangan Judul Tugas Siswa
Data Tugas Siswa data tugas
Tanggal Tugas Diupload Aksi
Hapus
23. Antar muka halaman siswa upload tugas siswa
Gambar 4.33 Antar Muka Halaman Siswa Upload Tugas Siswa
24. Antar muka halaman siswa laporan nilai siswa
Gambar 4.34 Antar Muka Halaman Siswa Laporan Nilai Siswa
2015 SMA NASIONAL BANDUNG
Data Tugas Siswa
SISWA Materi Tugas Hasil Tugas Siswa
Logout
Pilih File
Upload Cancel
Ketentuan
2015 SMA NASIONAL BANDUNG Siswa
Materi Tugas Hasil Tugas Siswa Logout
NO Nilai Siswa
Keterangan Judul Tugas Siswa
Data Tugas Siswa data tugas
Tanggal Tugas Diupload Aksi
Hapus
4.2.3 Perancangan output