Contoh Design Interface Website

2.6 Desain Antar Muka Pengguna

Bentuk rancangan desain antar muka pada sistem informasi raport ini adalah seperti  berikut: 2.6.1 Rancangan Halaman Beranda

Desain antar muka untuk halaman beranda dapat dilihat pada gambar 2.9

Gambar 2. 1 Rancangan Halaman Awal 

2.6.2 Level User Admin 2.6.2.1 Halaman Index

Halaman awal tampilkan login administrator dapat dilihat pada gambar 2.10

Gambar 2. 2 Halaman Login Admin

2.6.2.2 Halaman Das!"ard

Halaman awal tampilan administrator dapat dilihat pada pada gambar 2.11

Gambar 2. 3 Halaman Dashboard Admin

2.6.2.# Halaman In$ut %uru

Halaman untuk menambah guru dapat dilihat pada gambar 2.12

Gambar 2. 4 Halaman Input Guru

2.6.2.& Halaman In$ut 'is(a

Halaman untuk menambah siswa dapat dilihat pada gambar 2.13

Gambar 2. 5 Input iswa

2.6.2.) Halaman In$ut *elas

Halaman untuk menambah kelas dapat dilihat pada gambar 2.1

Gambar 2. ! Input "#las

2.6.2.6 Halaman In$ut Mata Pela+aran

Halaman untuk menambah mata pela!aran dapat dilihat pada gambar 2.1"

Gambar 2. $ Input %ata &#la'aran

2.6.# Level User %uru 2.6.#.1 Halaman Index

Halaman awal tampilkan login user le#el guru dapat dilihat pada gambar 2.1$

Gambar 2. ( Halaman Login Guru

2.6.#.2 Halaman Das!"ard User %uru

Halaman awal dashboard user le#el guru dapat dilihat pada gambar 2.1%

Gambar 2. ) Halaman Dashboard Guru

2.6.#.# Halaman In$ut ,ilai

Halaman input nilai user le#el guru dapat dilihat pada gambar 2.1&

Gambar 2. 1* Halaman Input +ilai

2.6.#.& Halaman Liat ,ilai

Halaman nilai 'ang sudah di input dapat dilihat pada gambar 2.19

Gambar 2. 11 Halaman Lihat +ilai

2.6.#.) Halaman %anti Pass("rd

Halaman ganti password user le#el guru dapat dilihat pada gambar 2.20

Gambar 2. 12 Halaman Ganti &assword 

2.6.& Level User 'is(a 2.6.&.1 Halaman Index

Halaman awal tampilan login user le#el siswa dapat dilihat pada gambar 2.21

Gambar 2. 13 Halaman Login iswa

2.6.&.1 Halaman Das!"ard User 'is(a

Halaman dashboard user le#el siswa dapat dilihat pada gambar 2.22

Gambar 2. 14 Halaman Dashboard iswa

2.6.&.1 Halaman Liat ,ilai

Halaman lihat nilai user le#el siswa dapat dilihat pada gambar 2.23

Gambar 2. 15 Halaman Lihat +ilai iswa

2.6.&.1 Halaman %anti Pass("rd User 'is(a

Halaman ganti password user le#el siswa dapat dilihat pada gambar 2.2

Gambar 2. 1! Halaman Ganti &assword iswa