3.2.4 Perancangan Antarmuka Interface
Perancangan antarmuka interface menggambarkan bagaimana perangkat lunak berkomunikasi dengan dirinya sendiri, dengan sistem yang berinteroperasi
dengannnya, dan dengan manusia yang menggunakannya.
Beranda LOGO
Forum Profil Sekolah Daftar Siswa
Daftar Guru Login
NIPNIS Password
Guru
Aktivasi
SELAMAT DATANG
· Klik beranda untuk menuju T01
· Klik profil sekolah untuk menuju T02
· Klik daftar siswa untuk menuju T03
· Klik daftar guru untuk menuju T04
· Klik materi untuk menuju T05
· Klik daftar forum untuk menuju T06
· Klik aktivasi untuk menuju T07
· Klik login akan menuju G01 atau S01 sesuai pilihan
login jika login valid, jika nipnis dan password tidak
valid akan muncul pesan P01 atau P02
T01
Keterangan : Ukuran layar : Dinamis
TipeUkuran Font : Times New Roman 14 Warna Latar : Putih Abu
pengumuman
Siswa V
LInk
profil gambar
Siswa
Info jadwal TryOut
Materi
Gambar 3.38 Tampilan Indeks Pengunjung
Beranda
LOGO
Materi Profil Sekolah Daftar Siswa
Daftar Guru Login
NIPNIS Password
Guru
Aktivasi
Profil Sekolah
T02
Keterangan : Ukuran layar : Dinamis
TipeUkuran Font : Times New Roman 14 Warna Latar : Putih Abu
pengumuman
Siswa V
LInk
profil
Siswa
· Klik beranda untuk menuju T01
· Klik profil sekolah untuk menuju T02
· Klik daftar siswa untuk menuju T03
· Klik daftar guru untuk menuju T04
· Klik materi untuk menuju T05
· Klik daftar guru untuk menuju T06
· Klik daftar siswa untuk menuju T07
· Klik lupa password untuk menuju T08
· Klik login akan menuju G01 atau S01 sesuai
pilihan login jika login valid, jika nipnis dan
password tidak valid akan muncul pesan P01
atau P02
Forum
Gambar 3.39 Tampilan Indeks Profil Sekolah
Beranda LOGO
Forum Profil Sekolah
Daftar Siswa Daftar Guru
Login NIPNIS
Password
Guru
Aktivasi
Daftar Siswa Kelas IX
· Klik halaman utama untuk
menuju T01 ·
Klik profil sekolah untuk menuju T02
· KlikDaftar siswa untuk
menuju T03 ·
Klik daftar siswa perkelas untuk menuju T05
· Klik Daftar Guru untuk
menuju T04 ·
Klik Login untuk menuju pengolahan Menu sesuai
hak akses T03
Keterangan : Ukuran layar : Dinamis
TipeUkuran Font : Times New Roman 14 Warna Latar : Putih Abu
pengumuman
Siswa V LInk
profil
Siswa
Masukan nama : cari
No Nis
Nama
Gambar 3.40 Tampilan Daftar Data Siswa
Beranda
LOGO
Forum Profil Sekolah
Daftar Siswa Daftar Guru
Login NIPNIS
Password
Guru
Aktivasi
Daftar Staf pengajar
· Klik halaman utama untuk
menuju T01 ·
Klik profil sekolah untuk menuju T02
· KlikDaftar siswa untuk
menuju T03 ·
Klik daftar siswa perkelas untuk menuju T05
· Klik Daftar Guru untuk
menuju T04 ·
Klik Login untuk menuju pengolahan Menu sesuai
hak akses
T04
Keterangan : Ukuran layar : Dinamis
TipeUkuran Font : Times New Roman 14 Warna Latar : Putih Abu
pengumuman
Siswa V
LInk
Foto Siswa
profil Data Staf Pengajar
Gambar 3.41 Tampilan Daftar Data Guru
Beranda LOGO
Forum Profil Sekolah
Daftar Siswa Daftar Guru
Login NIPNIS
Password
Guru
Aktivasi
Administrator Login
· Klik halaman utama untuk
menuju T01 ·
Klik profil sekolah untuk menuju T02
· KlikDaftar siswa untuk
menuju T03 ·
Klik daftar siswa perkelas untuk menuju T06
· Klik Daftar Guru untuk
menuju T04 ·
Klik Login untuk menuju pengolahan Menu sesuai
hak akses T06
Keterangan : Ukuran layar : Dinamis
TipeUkuran Font : Times New Roman 14 Warna Latar : Putih Abu
pengumuman
Siswa V LInk
Siswa
profil
Username Password
Gambar 3.42 Tampilan Login Administrator
Beranda
LOGO
Forum Profil Sekolah
Daftar Siswa Daftar Guru
Menu Administrator PegawaiTataUsaha
· Klik halaman utama untuk
menuju T01 ·
Klik profil sekolah untuk menuju T02
· KlikDaftar siswa untuk
menuju T03 ·
Klik daftar siswa perkelas untuk menuju T06
· Klik Daftar Guru untuk
menuju T04 ·
Klik Login untuk menuju pengolahan Menu sesuai
hak akses
T07
Keterangan : Ukuran layar : Dinamis
TipeUkuran Font : Times New Roman 14 Warna Latar : Putih Abu
LInk
profil
Menu
Manajemen Edit Profil Manajemen Siswa
Manajemen Pelajaran Manajemen guru
Manajemen Pengumuman
Manajemen TryOut Logout
Gambar 3.43 Tampilan Setelah Login
Beranda LOGO
Forum Profil Sekolah
Daftar Siswa Daftar Guru
Manajemen Siswa
· Klik halaman utama untuk
menuju T01 ·
Klik profil sekolah untuk menuju T02
· KlikDaftar siswa untuk
menuju T03 ·
Klik daftar siswa perkelas untuk menuju T06
· Klik Daftar Guru untuk
menuju T04 ·
Klik Login untuk menuju pengolahan Menu sesuai
hak akses T09
Keterangan : Ukuran layar : Dinamis
TipeUkuran Font : Times New Roman 14 Warna Latar : Putih Abu
pengumuman
LInk
profil Menu
Manajemen Edit Profil Manajemen Siswa
Manajemen Pelajaran Manajemen guru
Manajemen Pengumuman
Pilih berkas Tambah Data
No NIS
NAMA Detail
Logout
Gambar 3.44 Tampilan Manajemen Siswa
Beranda
LOGO
Forum Profil Sekolah
Daftar Siswa Daftar Guru
Manajemen Pelajaran
· Klik halaman utama untuk
menuju T01 ·
Klik profil sekolah untuk menuju T02
· KlikDaftar siswa untuk
menuju T03 ·
Klik daftar siswa perkelas untuk menuju T06
· Klik Daftar Guru untuk
menuju T04 ·
Klik Login untuk menuju pengolahan Menu sesuai
hak akses
T10
Keterangan : Ukuran layar : Dinamis
TipeUkuran Font : Times New Roman 14 Warna Latar : Putih Abu
pengumuman
LInk
profil
Menu
Manajemen Edit Profil Manajemen Siswa
Manajemen Pelajaran Manajemen guru
Manajemen Pengumuman
Tambah Data
No Nama Pelajaran
Kelas Aksi
Logout
Gambar 3.45 Tampilan Manajemen Pelajaran
Beranda LOGO
Forum Profil Sekolah
Daftar Siswa Daftar Guru
Manajemen Guru
· Klik halaman utama untuk
menuju T01 ·
Klik profil sekolah untuk menuju T02
· KlikDaftar siswa untuk
menuju T03 ·
Klik daftar siswa perkelas untuk menuju T06
· Klik Daftar Guru untuk
menuju T04 ·
Klik Login untuk menuju pengolahan Menu sesuai
hak akses T11
Keterangan : Ukuran layar : Dinamis
TipeUkuran Font : Times New Roman 14 Warna Latar : Putih Abu
pengumuman
LInk
profil Menu
Manajemen Edit Profil Manajemen Siswa
Manajemen Pelajaran Manajemen guru
Manajemen Pengumuman
Tambah Data No
NIP Nama
Detail Pelajaran
Gambar 3.46 Tampilan Manajemen Guru
Beranda
LOGO
Forum Profil Sekolah
Daftar Siswa Daftar Guru
Manajemen Pengumuman
· Klik halaman utama untuk
menuju T01 ·
Klik profil sekolah untuk menuju T02
· KlikDaftar siswa untuk
menuju T03 ·
Klik daftar siswa perkelas untuk menuju T06
· Klik Daftar Guru untuk
menuju T04 ·
Klik Login untuk menuju pengolahan Menu sesuai
hak akses
T12
Keterangan : Ukuran layar : Dinamis
TipeUkuran Font : Times New Roman 14 Warna Latar : Putih Abu
pengumuman
LInk
profil
Menu
Manajemen Edit Profil Manajemen Siswa
Manajemen Pelajaran Manajemen guru
Manajemen Pengumuman
Logout
Tambah Data
No
Judul Pengumuman Aksi
Isi Pengumuman
Gambar 3.47 Tampilan Manajemen Pengumuman
Beranda
LOGO
Forum Profil Sekolah
Daftar Siswa Daftar Guru
Keterangan : Ukuran layar : Dinamis
TipeUkuran Font : Times New Roman 14 Warna Latar : Putih Abu
TEKS
Mata pelajaran
Simpan Batal
Judul Materi Isi
File
Upload
Tambah Materi
T13
Gambar 3.48 Tampilan tambah materi
Beranda
LOGO
Forum Profil Sekolah
Daftar Siswa Daftar Guru
Keterangan : Ukuran layar : Dinamis
TipeUkuran Font : Times New Roman 14 Warna Latar : Putih Abu
Pengumuman
Manajemen Banksoal
Oleh: Pelajaran :
Tambah Soal
1. Pertanyaan [edit] A.
B. C.
D. E.
T14
Gambar 3.49 Tambah Soal
Beranda
LOGO
Forum Profil Sekolah
Daftar Siswa Daftar Guru
Keterangan : Ukuran layar : Dinamis
TipeUkuran Font : Times New Roman 14 Warna Latar : Putih Abu
Pengumuman
FORUM PEMBELAJARAN
Forum Topik
Tema Tanggal
Aksi
Lihat T15
Gambar 3.50 Tampilan Forum Pembelajaran
Beranda
LOGO
Forum Profil Sekolah
Daftar Siswa Daftar Guru
Login NIPNIS
Password
Guru
Daftar
Keterangan : Ukuran layar : Dinamis
TipeUkuran Font : Times New Roman 14 Warna Latar : Putih Abu
Counter
V
Pengumuman
DAFTAR REGISTRASI Masukan NIS
Buat Password T16
Gambar 3.51 Tampilan Daftar Aktivasi Siswa
Beranda
LOGO
Forum Profil Sekolah
Daftar Siswa Daftar Guru
Login NIPNIS
Password
Guru
Daftar
Keterangan : Ukuran layar : Dinamis
TipeUkuran Font : Times New Roman 14 Warna Latar : Putih Abu
Counter
V
Pengumuman
PENGUMUMAN Nama
Pengumuman
Isi Pengumuman Download
Tanggal Pengumuman
T17
Gambar 3.52 Tampilan Pengumuman
Beranda
LOGO
Forum Profil Sekolah
Daftar Siswa Daftar Guru
Keterangan : Ukuran layar : Dinamis
TipeUkuran Font : Times New Roman 14 Warna Latar : Putih Abu
Judul Pengumuman
Simpan Isi Pengumuman
Batal
Tambah Data Pengumuman T18
Gambar 3.53 Tampilan Tambah Pengumuman
Beranda
LOGO
Forum Profil Sekolah
Daftar Siswa Daftar Guru
Keterangan : Ukuran layar : Dinamis
TipeUkuran Font : Times New Roman 14 Warna Latar : Putih Abu
Manajemen TryOut Atur Jadwal TryOut
Update
T19
Gambar 3.54 Tampilan Manajemen TryOut
NIS
Beranda
LOGO
Forum Profil Sekolah
Daftar Siswa Daftar Guru
Keterangan : Ukuran layar : Dinamis
TipeUkuran Font : Times New Roman 14 Warna Latar : Putih Abu
Daftar Nilai Tugas
Nama Siswa TEKS
No Mata Pelajaran
nilai TEKS
NIS
Gambar 3.55 Tampilan Daftar Nilai Tugas
3.2.5 Perancangan Pesan
Kategori