Perancangan Antarmuka Back-End Perancangan Antarmuka
W01
· Klik button Log In untuk ke halaman W02
· Klik link Resgister untuk ke halaman W00
Nama : W01 Ukuran Layar : 1024 x 768
Font : Arial
Gambar 3. 49 Perancangan Antarmuka Login
3. Perancangan Antarmuka Menu Beranda Gambar di bawah ini merupakan perancangan antarmuka Menu Beranda
Gambar 3.50.
W02
· Klik button 1 untuk masuk ke halaman W03
· Klik button 2 untuk masuk ke halaman W04
· Klik button 3 untuk masuk ke halaman W05
· Klik button 4 untuk kembali ke halaman
W01
Nama : W02 Ukuran Layar : 1024 x 768
Font : Arial
Gambar 3. 50 Perancangan Antarmuka Beranda
4. Perancangan Antarmuka Pengolahan Siswa Gambar di bawah ini merupakan perancangan antarmuka Pengolahan
Siswa Gambar 3.51.
W03
· Klik button 1 untuk masuk ke halaman W03
· Klik button 2 untuk masuk ke halaman W04
· Klik button 3 untuk masuk ke halaman W05
· Klik button 4 untuk kembali ke halaman
W01 · Klik button Tambah
Siswa untuk ke halaman W03.1
· Klik link Edit untuk ke halaman W03.2
· Klik link Hapus untuk ke halaman W03
Nama : W03 Ukuran Layar : 1024 x 768
Font : Arial
Gambar 3. 51 Perancangan Antarmuka Pengolahan Siswa
5. Perancangan Antarmuka Tambah Siswa Gambar di bawah ini merupakan perancangan antarmuka Tambah Siswa
Gambar 3.52.
W03.1
· Klik button 1 untuk masuk ke halaman W03
· Klik button 2 untuk masuk ke halaman W04
· Klik button 3 untuk masuk ke halaman W05
· Klik button 4 untuk kembali ke halaman
W01 · Klik button Simpan
untuk Masuk ke halaman W03
· Klik button Batal untuk kembali ke halaman
W03
Nama : W03.1 Ukuran Layar : 1024 x 768
Font : Arial
Gambar 3. 52 Perancangan Antarmuka Tambah Siswa
6. Perancangan Antarmuka Edit Siswa Gambar di bawah ini merupakan perancangan antarmuka Hapus Siswa
Gambar 3.53.
W03.2
· Klik button 1 untuk masuk ke halaman W03
· Klik button 2 untuk masuk ke halaman W04
· Klik button 3 untuk masuk ke halaman W05
· Klik button 4 untuk kembali ke halaman
W01 · Klik button Update
untuk Masuk ke halaman W03
· Klik button Batal untuk kembali ke halaman
W03
Nama : W03.2 Ukuran Layar : 1024 x 768
Font : Arial
Gambar 3. 53 Perancangan Antarmuka Edit Siswa
7. Perancangan Antarmuka Evaluasi Gambar di bawah ini merupakan perancangan antarmuka Evaluasi
Gambar 3.54.
W04
· Klik button 1 untuk masuk ke halaman W03
· Klik button 2 untuk masuk ke halaman W04
· Klik button 3 untuk masuk ke halaman W05
· Klik button 4 untuk kembali ke halaman
W01
Nama : W04 Ukuran Layar : 1024 x 768
Font : Arial
Gambar 3. 54 Perancangan Antarmuka Evaluasi
8. Perancangan Antarmuka Pengolahan Soal Gambar di bawah ini merupakan perancangan antarmuka Pengolahan Soal
Gambar 3.55
W05
· Klik button 1 untuk masuk ke halaman W03
· Klik button 2 untuk masuk ke halaman W04
· Klik button 3 untuk masuk ke halaman W05
· Klik button 4 untuk kembali ke halaman
W01 · Klik button Tambah Soal
untuk ke halaman W05.1 · Klik link Edit untuk ke
halaman W05.2 · Klik link Hapus untuk ke
halaman W05
Nama : W05 Ukuran Layar : 1024 x 768
Font : Arial
Gambar 3. 55 Perancangan Antarmuka Pengolahan Soal
9. Perancangan Antarmuka Tambah Soal Gambar di bawah ini merupakan perancangan antarmuka Tambah Soal
Gambar 3.56
W05.1
· Klik button 1 untuk masuk ke halaman W03
· Klik button 2 untuk masuk ke halaman W04
· Klik button 3 untuk masuk ke halaman W05
· Klik button 4 untuk kembali ke halaman
W01 · Klik button button
Simpan untuk ke halaman W05
· Klik button Batal untuk kembali ke halaman
W05
Nama : W05.1 Ukuran Layar : 1024 x 768
Font : Arial
Gambar 3. 56 Perancangan Antarmuka Tambah Soal
10. Perancangan Antarmuka Edit Soal Gambar di bawah ini merupakan perancangan antarmuka Edit Soal
Gambar 3.57.
W05.2
· Klik button 1 untuk masuk ke halaman W03
· Klik button 2 untuk masuk ke halaman W04
· Klik button 3 untuk masuk ke halaman W05
· Klik button 4 untuk kembali ke halaman
W01 · Klik button button
Simpan untuk ke halaman W05
· Klik button Batal untuk kembali ke halaman
W05
Nama : W05.1 Ukuran Layar : 1024 x 768
Font : Arial
Gambar 3. 57 Perancangan Antarmuka Edit Soal