Perancangan Antarmuka - Perancangan Sistem

BAB 3 ANALISIS DAN PERANCANGAN SISTEM

3.2 Perancangan Sistem

3.2.4 Perancangan Antarmuka

T01

Logo ^{HALAMAN UTAMA} ^{DAFTAR KELAS ONLINE} ^{DAFTAR GURU}

Pengertian Elearning

Berita sekolah

11pt

- Jika klik Halaman Utama maka akan menuju T01

- Jika tipe Guru dan username, password benar maka akan menuju T28

- Jika tipe Siswa dan username, password benar maka akan menuju T43 DAFTAR SISWA

E-Learning SMA YPKKP BANDUNG

Visi dan Misi

Jam

Alamat Sekolah

Nama Form : T01

Ukuran Form : 1000 x 500 pixel

Font : Times New Roman

Warna : Biru, Putih, Ungu

DESIGN By TEAM E-Learning SMA YPKKP BANDUNG Halaman Utama | Daftar Kelas Online | Daftar Guru | Daftar Siswa

Gambar Error! No text of specified style in document..33 Halaman Utama

T01

Logo ^{HALAMAN UTAMA} ^{DAFTAR KELAS ONLINE} ^{DAFTAR GURU}

Berita sekolah

11pt

- Jika klik Halaman Utama maka akan menuju T01

- Jika tipe Guru dan username, password benar maka akan menuju T28

- Jika tipe Siswa dan username, password benar maka akan menuju T43 DAFTAR SISWA

E-Learning SMA YPKKP BANDUNG

Visi dan Misi

Jam

Alamat Sekolah

Nama Form : T01

Ukuran Form : 1000 x 500 pixel

Font : Times New Roman

Warna : Biru, Putih, Ungu

Sebagai : Guru Siswa Login

DESIGN By TEAM E-Learning SMA YPKKP BANDUNG Halaman Utama | Daftar Kelas Online | Daftar Guru | Daftar Siswa

123 T50 Mata Pelajaran + Tahun Ajaran + Mengajar + Berita Sekolah + Siswa + Kelas + Guru + Detail Kelas + Informasi Admin Logout Welcome Admin | Nama Form : T50 Ukuran Form : 1000 x 500 pixel Font : Times New Roman Warna : Biru, Putih, Ungu

- Klik Daftar Guru, menuju T51 - Klik Tambah Guru, menuju T52 - Klik Daftar Siswa, menuju T53 - Klik Tambah Siswa, menuju T54 - Klik Daftar Kelas, menuju T55 - Klik Tambah kelas, menuju T56 - Klik Daftar matapelajaran, menuju T57 - Klik Tambah matapelajaran, menuju T58 - Klik Daftar Tahun Ajaran, menujuT59 - Klik Tambah Tahun Ajaran, menuju T60 - Klik Daftar Berita, menuju T61 - Klik Tambah Berita, menuju T62 - Klik Daftar Mengajar, menuju T63 - Klik Tambah Mengjar, menuju T64 - Klik Daftar Detail kelas, menuju T65 - Klik Tambah Detail Kelas, menuju T66 - Klik Daftar KBM, menuju T67 - Klik Tambah KBM, menuju T68 - Klik Loguot, menuju T69 - Klik Ubah, menuju T70 - Klik Hapus, menuju T71

Gambar Error! No text of specified style in document..35 Halaman Utama Admin

Halaman Utama Akun Daftar kelas online Daftar Guru Daftar Siswa SELAMAT DATANG Logo Logout Tabel Pengumuman Nama Form : T10 Ukuran Form : 1000 x 500 pixel Font : Times New Roman Warna : Putih dan Biru

- Klik data pengumuman, menuju T11 - Klik data materi, menuju T12 - Klik data tugas, menuju T13 - Klik data latihan, menuju T14 - Klik halaman diskusi, menuju T15 - Klik forum diskusi baru menuju T16 - Klik forum komentar menuju T17 - Klik ubah password menuju T18 - Klik ubah profil menuju T19 - Klik Logout, menuju T01 - Klik daftar kelas online, menuju T06 - Klik daftar guru, menuju T07 - Klik daftar siswa T08 T10

Data Akun

Foto

Info User

Kelas yang anda ikuti

MATA PELAJARAN

Forum Diskusi

Jumlah Siswa Jumlah Pengumuman

Jumlah Materi Jumlah Latihan Pengumuman Materi Tugas Latihan

Jumlah tugas Aktifitas anda di e-learning ini

Kelas Peumuman Materi Tugas Latihan

Gambar Error! No text of specified style in document..36 Halaman Utama Utama guru

Halaman Utama Akun Daftar kelas online Daftar Guru Daftar Siswa SELAMAT DATANG

Logo

Logout Tabel Pengumuman

Nama Form : T20 Ukuran Form : 1000 x 500 pixel Font : Times New Roman Warna : Putih dan Biru

- Klik Daftar pengumuman, menuju T21 - Klik Daftar materi, menuju T22 - Klik Daftar tugas, menuju T23 - Klik kirim tugas, menuju T24 - Klik Daftar latihan, menuju T25 - Klik Tambah soal latihan, menuju T26 - Klik Daftar forum, menuju T27 - Klik Tambah komentar, menuju T28 - Klik ubah data akun, menuju T29 - Klik ubah password, menuju T30 - Klik Logout, menuju T01 - Klik daftar kelas online, menuju T06 - Klik daftar guru, menuju T07 - Klik daftar siswa T08 T20

Data Akun Foto

Info User

Kelas yang anda ikuti MATA PELAJARAN

Forum Diskusi

Jumlah Siswa Jumlah Pengumuman

Jumlah Materi Jumlah Latihan Pengumuman Materi Tugas Latihan

Jumlah tugas Aktifitas anda di e-learning ini

Kelas Peumuman Materi Tugas Latihan

Nama Guru

Gambar Error! No text of specified style in document..37 Halaman Utama Siswa

125

Halaman Utama Akun Daftar kelas online Daftar Guru Daftar Siswa SELAMAT DATANG

Logo

Tabel Pengumuman

Nama Form : T11

Ukuran Form : 1000 x 500 pixel Font : Times New Roman Warna : Putih dan Biru

- klik halaman utama guru, menuju T10 - Klik ubah password menuju T18 - Klik ubah profil menuju T19 - Klik Logout, menuju T01 - Klik daftar kelas online, menuju T06 - Klik daftar guru, menuju T07 - Klik daftar siswa T08

T11

Aktifitas anda di e-learning ini

Form Pengumuman Judul Pengumuman Isi Pengumuman Logout Simpan Daftar Pengumuman

Tanggal Judul Isi Aksi Edit Hapus Kelas Peumuman Materi Tugas Latihan

Gambar Error! No text of specified style in document..38 Halaman pengumuman (Guru)

Halaman Utama Akun Daftar kelas online Daftar Guru Daftar Siswa SELAMAT DATANG

Logo

Tabel Pengumuman

Nama Form : T12

Ukuran Form : 1000 x 500 pixel Font : Times New Roman Warna : Putih dan Biru

T12

Aktifitas anda di e-learning ini

Form Materi Judul Materi Deskripsi Materi Logout Simpan Daftar Materi

Tanggal Judul Deskripsi Aksi Edit Hapus Download File Materi ^Browse

Kelas Peumuman Materi Tugas Latihan

Gambar Error! No text of specified style in document..39 Halaman Materi (Guru)

Halaman Utama Akun Daftar kelas online Daftar Guru Daftar Siswa SELAMAT DATANG

Logo

Tabel Pengumuman

Nama Form : T13

Ukuran Form : 1000 x 500 pixel Font : Times New Roman Warna : Putih dan Biru

T13

Aktifitas anda di e-learning ini

Form Tugas Judul Tugas Deskripsi Tugas; Logout Simpan Daftar Tugas

Tanggal Judul Deskripsi Aksi

Edit Hapus Daftar SIswa Download File Tugas ^Browse

Kelas Peumuman Materi Tugas Latihan

Gambar Error! No text of specified style in document..40 Halaman Tugas (Guru)

Halaman Utama Akun Daftar kelas online Daftar Guru Daftar Siswa SELAMAT DATANG

Logo

Tabel Pengumuman

Nama Form : T14

Ukuran Form : 1000 x 500 pixel Font : Times New Roman Warna : Putih dan Biru

T14

Aktifitas anda di e-learning ini

Form Latihan Judul Latihan Isi Latihan Logout Simpan Daftar Tugas

Tanggal Judul Isi Aksi

Ubah Judul Tmabah Judul Ubah Soal Hapus Kelas Peumuman Materi Tugas Latihan

Gambar Error! No text of specified style in document..41 Halaman Latihan (Guru)

127

Halaman Utama Akun Daftar kelas online Daftar Guru Daftar Siswa SELAMAT DATANG

Logo

Nama Form : T15

Ukuran Form : 1000 x 500 pixel Font : Times New Roman Warna : Putih dan Biru

T15

Aktifitas anda di e-learning ini

Form Diskusi

Logout Data Akun

Foto

Info User

Buat Forum Diskusi Baru Tanggal Judul Isi Diskusi Aksi

Komentar Masuk Diskusi ini Kelas Peumuman Materi Tugas Latihan

Gambar Error! No text of specified style in document..42 Halaman Diskusi (Guru)

Halaman Utama Akun Daftar kelas online Daftar Guru Daftar Siswa SELAMAT DATANG

Logo

Nama Form : T16

Ukuran Form : 1000 x 500 pixel Font : Times New Roman Warna : Putih dan Biru

- Klik halaman utama guru, menuju T10 - Klik ubah password menuju T18 - Klik ubah profil menuju T18 - Klik Logout, menuju T01 - Klik daftar kelas online, menuju T06 - Klik daftar guru, menuju T07 - Klik daftar siswa T08

T16

Aktifitas anda di e-learning ini

Form Diskusi

Logout Data Akun

Foto

Info User

Kelas Peumuman Materi Tugas Latihan

Judul Isi

Simpan Reset

Gambar Error! No text of specified style in document..43 Halaman Forum Diskusi Baru (Guru)

Halaman Utama Akun Daftar kelas online Daftar Guru Daftar Siswa SELAMAT DATANG

Logo

Nama Form : T17

Ukuran Form : 1000 x 500 pixel Font : Times New Roman Warna : Putih dan Biru

- Klik halaman utama guru, menuju T10 - Klik ubah password menuju T18 - Klik ubah profil menuju T19 - Klik Logout, menuju T01 - Klik daftar kelas online, menuju T06 - Klik daftar guru, menuju T07 - Klik daftar siswa T08

T17

Aktifitas anda di e-learning ini

Form Diskusi

Logout Data Akun

Foto

Info User

Kelas Peumuman Materi Tugas Latihan

Judul Isi

Simpan Reset

Judul Pesan Komentar

Tanggal Nama Judul Komentar

Gambar Error! No text of specified style in document..44 Halaman Forum Diskusi komentar (Guru)

Halaman Utama Akun Daftar kelas online Daftar Guru Daftar Siswa SELAMAT DATANG

Logo

Nama Form : T18

Ukuran Form : 1000 x 500 pixel Font : Times New Roman Warna : Putih dan Biru

T18

Aktifitas anda di e-learning ini

Masukan Password Lama Masukan Password Baru Ulangi Password Baru

Kelas Peumuman Materi Tugas Latihan

Gambar Error! No text of specified style in document..45 Halaman Ubah Password (Guru)

129

Halaman Utama Akun Daftar kelas online Daftar Guru Daftar Siswa SELAMAT DATANG

Logo

Logout Tabel Pengumuman

Nama Form : T19

Ukuran Form : 1000 x 500 pixel Font : Times New Roman Warna : Putih dan Biru

T19

Data Akun

Foto

Info User

NIP

Aktifitas anda di e-learning ini

Data Pribadi

Nama Lengkap Tanggal Lahir Email Foto Sekarang

Upload Foto Baru

Foto

Browse Ubah Data

Kelas Peumuman Materi Tugas Latihan

Gambar Error! No text of specified style in document..46 Halaman Ubah Profil (Guru)

Halaman Utama Akun Daftar kelas online Daftar Guru Daftar Siswa SELAMAT DATANG

Logo

Nama Form : T21

Ukuran Form : 1000 x 500 pixel Font : Times New Roman Warna : Putih dan Biru

- Klik halaman utama, menuju T20 - Klik ubah data akun, menuju T29 - Klik ubah password, menuju T30 - Klik Logout, menuju T01 - Klik daftar kelas online, menuju T06 - Klik daftar guru, menuju T07 - Klik daftar siswa T08

T21

Tanggal

Aktifitas anda di e-learning ini

Judul Isi

Kelas Peumuman Materi Tugas Latihan

Kelas : Datar Pengumuman

Logout

Kembali

Gambar Error! No text of specified style in document..47 Halaman Daftar Pengumuman (Siswa)

Halaman Utama Akun Daftar kelas online Daftar Guru Daftar Siswa SELAMAT DATANG

Logo

Nama Form : T22

Ukuran Form : 1000 x 500 pixel Font : Times New Roman Warna : Putih dan Biru

T22

Tanggal

Aktifitas anda di e-learning ini

Judul Deskripsi

Kelas Peumuman Materi Tugas Latihan

Kelas : Daftar Materi Logout Kembali Aksi Download

Gambar Error! No text of specified style in document..48 Halaman Daftar Materi (Siswa)

Halaman Utama Akun Daftar kelas online Daftar Guru Daftar Siswa SELAMAT DATANG

Logo

Nama Form : T23

Ukuran Form : 1000 x 500 pixel Font : Times New Roman Warna : Putih dan Biru

T23

Tanggal

Aktifitas anda di e-learning ini

Judul Deskripsi

Kelas Peumuman Materi Tugas Latihan

Kelas : Daftar Tugas Logout Kembali Aksi Download Nilai

Gambar Error! No text of specified style in document..49 Halaman Daftar Tugas (Siswa)

131

Halaman Utama Akun Daftar kelas online Daftar Guru Daftar Siswa SELAMAT DATANG

Logo

Nama Form : T24

Ukuran Form : 1000 x 500 pixel Font : Times New Roman Warna : Putih dan Biru

T24

Tanggal

Aktifitas anda di e-learning ini

Judul Deskripsi

Kelas Peumuman Materi Tugas Latihan Kelas : Daftar Tugas Logout Aksi Download Nilai Nama Tugas

File Tugas Browse Simpan Tugas

Gambar Error! No text of specified style in document..50 Halaman Kirim Tugas (Siswa)

Halaman Utama Akun Daftar kelas online Daftar Guru Daftar Siswa SELAMAT DATANG

Logo

Nama Form : T25

Ukuran Form : 1000 x 500 pixel Font : Times New Roman Warna : Putih dan Biru

T25

Tanggal

Aktifitas anda di e-learning ini

Judul Deskripsi

Kelas Peumuman Materi Tugas Latihan Kelas : Daftar Latihan Logout Aksi Nilai Judul Latihan Isi Latihan Simpan Latihan Tabel Pengumuman

Gambar Error! No text of specified style in document..51 Halaman Daftar Latihan (Siswa)

Halaman Utama Akun Daftar kelas online Daftar Guru Daftar Siswa SELAMAT DATANG

Logo

Nama Form : T26

Ukuran Form : 1000 x 500 pixel Font : Times New Roman Warna : Putih dan Biru

T26

Aktifitas anda di e-learning ini

Kelas Peumuman Materi Tugas Latihan Soal Latihan : No Pertanyaan Sebelumnya 1 Jawaban A B C D E Berikutnya Selesai

Gambar Error! No text of specified style in document..52 Halaman Tambah Soal Latihan (Siswa)

Halaman Utama Akun Daftar kelas online Daftar Guru Daftar Siswa SELAMAT DATANG

Logo

Nama Form : T27

Ukuran Form : 1000 x 500 pixel Font : Times New Roman Warna : Putih dan Biru

T27

Aktifitas anda di e-learning ini

Form Diskusi

Logout Data Akun

Foto

Info User

Buat Forum Diskusi Baru Tanggal Judul Isi Diskusi Aksi

Komentar Masuk Diskusi ini Kelas Peumuman Materi Tugas Latihan

Gambar Error! No text of specified style in document..53 Halaman Forum Diskusi (Siswa)

133

Halaman Utama Akun Daftar kelas online Daftar Guru Daftar Siswa SELAMAT DATANG

Logo

Nama Form : T28

Ukuran Form : 1000 x 500 pixel Font : Times New Roman Warna : Putih dan Biru

T28

Aktifitas anda di e-learning ini

Form Diskusi

Logout Data Akun

Foto

Info User

Kelas Peumuman Materi Tugas Latihan

Judul Isi

Simpan Reset

Judul Pesan Komentar

Tanggal Nama Judul Komentar

Gambar Error! No text of specified style in document..54 Halaman Tambah Komentar (Siswa)

Halaman Utama Akun Daftar kelas online Daftar Guru Daftar Siswa SELAMAT DATANG

Logo

Logout Tabel Pengumuman

Nama Form : T29

Ukuran Form : 1000 x 500 pixel Font : Times New Roman Warna : Putih dan Biru

T29

Data Akun Foto

Info User

NIS

Aktifitas anda di e-learning ini

Data Pribadi

Nama Lengkap Tanggal Lahir Email Foto Sekarang

Upload Foto Baru

Foto

Browse Ubah Data

Kelas Peumuman Materi Tugas Latihan

Gambar Error! No text of specified style in document..55 Halaman Ubah akun (Siswa)

Halaman Utama Akun Daftar kelas online Daftar Guru Daftar Siswa SELAMAT DATANG

Logo

Nama Form : T30

Ukuran Form : 1000 x 500 pixel Font : Times New Roman Warna : Putih dan Biru

T30

Aktifitas anda di e-learning ini

Masukan Password Lama Masukan Password Baru Ulangi Password Baru

Kelas Peumuman Materi Tugas Latihan

Gambar Error! No text of specified style in document..56 Halaman Ubah Password (Siswa) T51 Mata Pelajaran + Tahun Ajaran + Mengajar + Detail Kelas + Berita Sekolah + Siswa + Kelas + Guru +

NIP Nama Tempat Lahir

Tambah Guru Daftar Guru

Tempat Lahir Status akun Delete

footer

Logout Welcome Admin |

Nama Form : T51 Ukuran Form : 1000 x 500 pixel Font : Times New Roman Warna : Biru, Putih, Ungu

Pencarian Daftar Guru

Pencarian Urut Berdasarkan

nip

nip Proses

Tabel Daftar Guru

Gambar Error! No text of specified style in document..57 Halaman Daftar Guru (Admin)

135 T52 Mata Pelajaran + Tahun Ajaran + Mengajar + Berita Sekolah + Siswa + Kelas + Guru + Detail Kelas + Tambah Guru Daftar Guru

Upload Data Guru

Logout Welcome Admin |

Nama Form : T52 Ukuran Form : 1000 x 500 pixel Font : Times New Roman Warna : Biru, Putih, Ungu

Form Guru

donwload

Proses Form Guru

Gambar Error! No text of specified style in document..58 Halaman Tambah Guru (Admin)

T53 Siswa + Mata Pelajaran + Tahun Ajaran + Mengajar + Berita Sekolah + Kelas + Guru + Detail Kelas +

NIS Nama Tempat Lahir Delete

Tambah Siswa Tempat Lahir Status akun

Daftar Siswa

footer

Logout Welcome Admin |

Nama Form : T53 Ukuran Form : 1000 x 500 pixel Font : Times New Roman Warna : Biru, Putih, Ungu

Pencarian Daftar Siswa

Pencarian Urut Berdasarkan

nis

nis Proses

Tabel Daftar Siswa

Gambar Error! No text of specified style in document..59 Halaman Daftar Siswa (Admin)

137 T54 Siswa + Mata Pelajaran + Tahun Ajaran + Mengajar + Berita Sekolah + Kelas + Guru + Detail Kelas + Tambah Siswa Daftar Siswa footer

Upload Data Guru

Logout Welcome Admin |

Nama Form : T54 Ukuran Form : 1000 x 500 pixel Font : Times New Roman Warna : Biru, Putih, Ungu

donwload

Proses Form Siswa

Gambar Error! No text of specified style in document..60 Halaman Tambah Siswa (Admin)

T55 Siswa + Mata Pelajaran + Tahun Ajaran + Mengajar + Berita Sekolah + Guru + Detail Kelas +

Kelas + _No _{Nama Kelas} _Edit

Hapus Tambah kelas Daftar Kelas footer Logout Welcome Admin | Nama Form : T55 Ukuran Form : 1000 x 500 pixel Font : Times New Roman Warna : Biru, Putih, Ungu

- Klik Daftar Guru, menuju T51 - Klik Tambah Guru, menuju T52 - Klik Daftar Siswa, menuju T53 - Klik Tambah Siswa, menuju T54 - Klik Daftar Kelas, menuju T55 - Klik Tambah kelas, menuju T56

Dalam dokumen Pembangunan e-learning berbasis web di SMA YPKKP Bandung (Halaman 139-168)