Perancangan Interface - Perancangan Sistem

BAB III ANALISIS DAN PERANCANGAN

III.3 Perancangan Sistem

III.3.4 Perancangan Interface

Perancangan antarmuka dibuat sebagai tempat tampilan data. Perancangan antarmuka dari e-learning ini dapat dilihat pada gambar berikut.

1. Halaman Login Admin

Username Password

Ukuran Form 1024 X 786, Warna Background Putih, Warna Border Biru, Font Arial, Ukuran 12

- Klik tombol login untuk masuk ke halaman F02

2. Halaman Home Admin

F02

Ukuran Form 1024 X 786, Warna Background Putih, Warna Border Biru, Font Arial, Ukuran 12

E-Learning SMPN 14 Bandung

· Klik Home untuk masuk ke halaman F02

· Klik Data Tahun Akademik untuk masuk ke halaman F04

· Klik Data Mata Pelajaran untuk masuk ke halaman F05

· Klik Data Kelas untuk masuk ke halaman F06

· Klik Data Siswa untuk masuk ke halaman F07

· Klik Data Guru untuk masuk ke halaman F08

· Klik Mengajar untuk masuk ke halaman F09

· Klik Logout untuk masuk ke halaman F01

Copyright @2013 - SMP Negeri 14 Bandung | Created By Usamah Izzaturrahman Home Profil Data Tahun Akademik Data Mata Pelajaran Data Kelas Data Siswa Data GuruData Mengajar Logout Logo

Gambar III.31 Halaman Home Admin

3. Halaman Profil Admin

F03

Ukuran Form 1024 X 786, Warna Background Putih, Warna Border Biru, Font Arial, Ukuran 12

· Klik Home untuk masuk ke halaman F02

· Klik Data Tahun Akademik untuk masuk ke halaman F04

· Klik Data Mata Pelajaran untuk masuk ke halaman F05

· Klik Data Kelas untuk masuk ke halaman F06

· Klik Data Siswa untuk masuk ke halaman F07

· Klik Data Guru untuk masuk ke halaman F08

· Klik Mengajar untuk masuk ke halaman F09

· Klik Logout untuk masuk ke halaman F01

· Klik Edit Profil untuk masuk ke halaman F10

· Klik Ganti Password untuk masuk ke halaman F11

NAMA ALAMAT TELEPON EMAIL

Ubah Profil Ganti Password

E-Learning SMPN 14 Bandung

Logo

Home Profil Data Tahun Akademik Data Mata Pelajaran Data Kelas Data Siswa Data Guru Data Mengajar Logout

4. Halaman Data Tahun Akademik

F04

Ukuran Form 1024 X 786, Warna Background Putih, Warna Border Biru, Font Arial, Ukuran 12

· Klik Home untuk masuk ke halaman F02

· Klik Data Tahun Akademik untuk masuk ke halaman F04

· Klik Data Mata Pelajaran untuk masuk ke halaman F05

· Klik Data Kelas untuk masuk ke halaman F06

· Klik Data Siswa untuk masuk ke halaman F07

· Klik Data Guru untuk masuk ke halaman F08

· Klik Mengajar untuk masuk ke halaman F09

· Klik Logout untuk masuk ke halaman F01

· Klik Mulai Tahun Akademik untuk memulai tahun akademik baru

Daftar Tahun _{Mulai Tahun Akademik}

Id Tahun Tahun Awal Tahun Akhir

E-Learning SMPN 14 Bandung

Logo

Home Profil Data Tahun Akademik Data Mata Pelajaran Data Kelas Data Siswa Data GuruData Mengajar Logout

Gambar III.33 Halaman Data Tahun Akademik

5. Halaman Data Mata Pelajaran F05

Ukuran Form 1024 X 786, Warna Background Putih, Warna Border Biru, Font Arial, Ukuran 12

· Klik Home untuk masuk ke halaman F02

· Klik Data Tahun Akademik untuk masuk ke halaman F04

· Klik Data Mata Pelajaran untuk masuk ke halaman F05

· Klik Data Kelas untuk masuk ke halaman F06

· Klik Data Siswa untuk masuk ke halaman F07

· Klik Data Guru untuk masuk ke halaman F08

· Klik Mengajar untuk masuk ke halaman F09

· Klik Logout untuk masuk ke halaman F01

· Klik Buat Mata Pelajaran untuk masuk ke halaman F12

· Klik Ubah untuk masuk ke halaman F13

· Klik Hapus untuk menghapus data yang dipilih

Buat Mata Pelajaran Mata Pelajaran E-Learning SMPN 14 Bandung Logo Ubah Ubah Hapus Hapus

Home Profil Data Tahun Akademik Data Mata Pelajaran Data Kelas Data Siswa Data GuruData Mengajar Logout

6. Halaman Data Kelas

F06

Ukuran Form 1024 X 786, Warna Background Putih, Warna Border Biru, Font Arial, Ukuran 12

· Klik Home untuk masuk ke halaman F02

· Klik Data Tahun Akademik untuk masuk ke halaman F04

· Klik Data Mata Pelajaran untuk masuk ke halaman F05

· Klik Data Kelas untuk masuk ke halaman F06

· Klik Data Siswa untuk masuk ke halaman F07

· Klik Data Guru untuk masuk ke halaman F08

· Klik Mengajar untuk masuk ke halaman F09

· Klik Logout untuk masuk ke halaman F01

· Klik Buat Kelas untuk masuk ke halaman F14

· Klik Ubah untuk masuk ke halaman F15

· Klik Hapus untuk menghapus data yang dipilih

Daftar Kelas Buat Kelas

Nama Kelas Tahun Ajaran E-Learning SMPN 14 Bandung Logo Ubah Ubah Hapus Hapus Tahun Ajaran

Home Profil Data Tahun Akademik Data Mata Pelajaran Data Kelas Data Siswa Data Guru Data Mengajar Logout

Gambar III.35 Halaman Data Kelas

7. Halaman Data Siswa F07

Ukuran Form 1024 X 786, Warna Background Putih, Warna Border Biru, Font Arial, Ukuran 12

· Klik Home untuk masuk ke halaman F02

· Klik Data Tahun Akademik untuk masuk ke halaman F04

· Klik Data Mata Pelajaran untuk masuk ke halaman F05

· Klik Data Kelas untuk masuk ke halaman F06

· Klik Data Siswa untuk masuk ke halaman F07

· Klik Data Guru untuk masuk ke halaman F08

· Klik Mengajar untuk masuk ke halaman F09

· Klik Logout untuk masuk ke halaman F01

· Klik Buat Data Siswa untuk masuk ke halaman F16

· Klik Import Data Siswa untuk masuk ke halaman F17

· Klik Cari untuk mencari data siswa

· Klik Ubah untuk masuk ke halaman F18

· Klik Hapus untuk menghapus data yang dipilih

Data Siswa TA

Buat Data Siswa

NIS Nama E-Learning SMPN 14 Bandung Logo Ubah Ubah Hapus Hapus Kelas

Import Data Siswa Cari

Cari berdasarkan NIS

Blokir

Home Profil Data Tahun Akademik Data Mata Pelajaran Data Kelas Data Siswa Data GuruData Mengajar Logout

kelas kelas kelas kelas kelas kelas kelas kelas kelas kelas Jumlah Siswa :

8. Halaman Data Guru

F08

Ukuran Form 1024 X 786, Warna Background Putih, Warna Border Biru, Font Arial, Ukuran 12

· Klik Home untuk masuk ke halaman F02

· Klik Data Tahun Akademik untuk masuk ke halaman F04

· Klik Data Mata Pelajaran untuk masuk ke halaman F05

· Klik Data Kelas untuk masuk ke halaman F06

· Klik Data Siswa untuk masuk ke halaman F07

· Klik Data Guru untuk masuk ke halaman F08

· Klik Mengajar untuk masuk ke halaman F09

· Klik Logout untuk masuk ke halaman F01

· Klik Buat Data Guru untuk masuk ke halaman F19

· Klik Import Data Guru untuk masuk ke halaman F20

· Klik Cari untuk mencari data guru

· Klik Ubah untuk masuk ke halaman F21

· Klik Hapus untuk menghapus data yang dipilih

Copyright @2013 - SMP Negeri 14 Bandung | Created By Usamah Izzaturrahman NUPTK Nama E-Learning SMPN 14 Bandung Logo Ubah Ubah Hapus Hapus Jabatan Blokir

Home Profil Data Tahun Akademik Data Mata Pelajaran Data Kelas Data Siswa Data Guru Data Mengajar Logout

Buat Data Guru Import Data Guru Cari

Cari berdasarkan NIP

Data Guru

Gambar III.37 Halaman Data Guru

9. Halaman Data Mengajar

F09

Ukuran Form 1024 X 786, Warna Background Putih, Warna Border Biru, Font Arial, Ukuran 12

· Klik Home untuk masuk ke halaman F02

· Klik Data Tahun Akademik untuk masuk ke halaman F04

· Klik Data Mata Pelajaran untuk masuk ke halaman F05

· Klik Data Kelas untuk masuk ke halaman F06

· Klik Data Siswa untuk masuk ke halaman F07

· Klik Data Guru untuk masuk ke halaman F08

· Klik Mengajar untuk masuk ke halaman F09

· Klik Logout untuk masuk ke halaman F01

· Klik Buat Data Mengajar untuk masuk ke halaman F22

· Klik Cari untuk mencari data mengajar

· Klik Ubah untuk masuk ke halaman F23

· Klik Hapus untuk menghapus data yang dipilih

Daftar Mengajar TA NUPTK Nama E-Learning SMPN 14 Bandung Logo Ubah Ubah Hapus Hapus

Mata Pelajaran Kelas

Home Profil Data Tahun Akademik Data Mata Pelajaran Data Kelas Data Siswa Data GuruData Mengajar Logout

Buat Data Mengajar Cari

Cari berdasarkan NIS

kelas kelas kelas kelas kelas kelas kelas kelas kelas kelas

10.Halaman Ubah Profil Admin

F10

Ukuran Form 1024 X 786, Warna Background Putih, Warna Border Biru, Font Arial, Ukuran 12

· Klik Home untuk masuk ke halaman F02

· Klik Data Tahun Akademik untuk masuk ke halaman F04

· Klik Data Mata Pelajaran untuk masuk ke halaman F05

· Klik Data Kelas untuk masuk ke halaman F06

· Klik Data Siswa untuk masuk ke halaman F07

· Klik Data Guru untuk masuk ke halaman F08

· Klik Mengajar untuk masuk ke halaman F09

· Klik Logout untuk masuk ke halaman F01

· Klik simpan untuk menyimpan data dan masuk ke halaman F03

· Klik Batal dan masuk ke halaman F03

Copyright @2013 - SMP Negeri 14 Bandung | Created By Usamah Izzaturrahman Ubah Profil Nama Lengkap Username Login Alamat Email No.Telp/HP Simpan Batal E-Learning SMPN 14 Bandung Logo

Home Profil Data Tahun Akademik Data Mata Pelajaran Data Kelas Data Siswa Data Guru Data Mengajar Logout

Gambar III.39 Halaman Ubah Profil Admin

11.Halaman Ubah Password F11

Ukuran Form 1024 X 786, Warna Background Putih, Warna Border Biru, Font Arial, Ukuran 12

· Klik Home untuk masuk ke halaman F02

· Klik Data Tahun Akademik untuk masuk ke halaman F04

· Klik Data Mata Pelajaran untuk masuk ke halaman F05

· Klik Data Kelas untuk masuk ke halaman F06

· Klik Data Siswa untuk masuk ke halaman F07

· Klik Data Guru untuk masuk ke halaman F08

· Klik Mengajar untuk masuk ke halaman F09

· Klik Logout untuk masuk ke halaman F01

· Klik simpan untuk menyimpan data dan masuk ke halaman F03

· Klik Batal dan masuk ke halaman F03

Ganti Password Simpan Password Lama Password Baru Ulangi Password Batal E-Learning SMPN 14 Bandung Logo

Home Profil Data Tahun Akademik Data Mata Pelajaran Data Kelas Data Siswa Data GuruData Mengajar Logout

12.Halaman Buat Mata Pelajaran

F12

Ukuran Form 1024 X 786, Warna Background Putih, Warna Border Biru, Font Arial, Ukuran 12

· Klik Home untuk masuk ke halaman F02

· Klik Data Tahun Akademik untuk masuk ke halaman F04

· Klik Data Mata Pelajaran untuk masuk ke halaman F05

· Klik Data Kelas untuk masuk ke halaman F06

· Klik Data Siswa untuk masuk ke halaman F07

· Klik Data Guru untuk masuk ke halaman F08

· Klik Mengajar untuk masuk ke halaman F09

· Klik Logout untuk masuk ke halaman F01

· Klik simpan untuk menyimpan data dan masuk ke halaman F05

· Klik Batal untuk masuk ke halaman F05

Mata Pelajaran

Simpan Batal

E-Learning SMPN 14 Bandung

Logo

Home Profil Data Tahun Akademik Data Mata Pelajaran Data Kelas Data Siswa Data Guru Data Mengajar Logout

Gambar III.41 Halaman Buat Mata Pelajaran

13.Halaman Ubah Mata Pelajaran

F13

Ukuran Form 1024 X 786, Warna Background Putih, Warna Border Biru, Font Arial, Ukuran 12

· Klik Home untuk masuk ke halaman F02

· Klik Data Tahun Akademik untuk masuk ke halaman F04

· Klik Data Mata Pelajaran untuk masuk ke halaman F05

· Klik Data Kelas untuk masuk ke halaman F06

· Klik Data Siswa untuk masuk ke halaman F07

· Klik Data Guru untuk masuk ke halaman F08

· Klik Mengajar untuk masuk ke halaman F09

· Klik Logout untuk masuk ke halaman F01

· Klik simpan untuk mengubah data dan masuk ke halaman F05

· Klik Batal dan masuk ke halaman F05

Ubah Mata Pelajaran

Mata Pelajaran

Simpan Batal

E-Learning SMPN 14 Bandung

Logo

Home Profil Data Tahun Akademik Data Mata Pelajaran Data Kelas Data Siswa Data Guru Data Mengajar Logout

14.Halaman Buat Kelas

F14

Ukuran Form 1024 X 786, Warna Background Putih, Warna Border Biru, Font Arial, Ukuran 12

· Klik Home untuk masuk ke halaman F02

· Klik Data Tahun Akademik untuk masuk ke halaman F04

· Klik Data Mata Pelajaran untuk masuk ke halaman F05

· Klik Data Kelas untuk masuk ke halaman F06

· Klik Data Siswa untuk masuk ke halaman F07

· Klik Data Guru untuk masuk ke halaman F08

· Klik Mengajar untuk masuk ke halaman F09

· Klik Logout untuk masuk ke halaman F01

· Klik simpan untuk menyimpan data dan masuk ke halaman F06

· Klik Batal untuk masuk ke halaman F06

Buat Kelas Tingkatan Simpan Batal E-Learning SMPN 14 Bandung Logo Nama Tahun Ajaran

Home Profil Data Tahun Akademik Data Mata Pelajaran Data Kelas Data Siswa Data GuruData Mengajar Logout

Gambar III.43 Halaman Buat Kelas

15.Halaman Ubah Kelas

F15

Ukuran Form 1024 X 786, Warna Background Putih, Warna Border Biru, Font Arial, Ukuran 12

· Klik Home untuk masuk ke halaman F02

· Klik Data Tahun Akademik untuk masuk ke halaman F04

· Klik Data Mata Pelajaran untuk masuk ke halaman F05

· Klik Data Kelas untuk masuk ke halaman F06

· Klik Data Siswa untuk masuk ke halaman F07

· Klik Data Guru untuk masuk ke halaman F08

· Klik Mengajar untuk masuk ke halaman F09

· Klik Logout untuk masuk ke halaman F01

· Klik simpan untuk menyimpan data dan masuk ke halaman F06

· Klik Batal untuk masuk ke halaman F06

Ubah Kelas

E-Learning SMPN 14 Bandung

Logo

Home Profil Data Tahun Akademik Data Mata Pelajaran Data Kelas Data Siswa Data Guru Data Mengajar Logout

Tingkatan

Simpan Batal

Nama Tahun Ajaran

16.Halaman Buat Data Siswa

F16

Ukuran Form 1024 X 786, Warna Background Putih, Warna Border Biru, Font Arial, Ukuran 12

· Klik Home untuk masuk ke halaman F02 · Klik Data Tahun Akademik

untuk masuk ke halaman F04

· Klik Data Mata Pelajaran untuk masuk ke halaman F05

· Klik Data Kelas untuk masuk ke halaman F06 · Klik Data Siswa untuk

masuk ke halaman F07 · Klik Data Guru untuk

masuk ke halaman F08 · Klik Mengajar untuk

masuk ke halaman F09 · Klik Logout untuk masuk

ke halaman F01 · Klik simpan untuk

menyimpan data dan masuk ke halaman F07 · Klik Batal untuk masuk ke

halaman F07

Buat Siswa Simpan Batal E-Learning SMPN 14 Bandung Logo NIS Nama Lengkap Kelas Alamat Tempat Lahir Tanggal Lahir Jenis Kelamin Agama Nama Ayah/Wali Nama Ibu Email No Telp/HP Blokir Laki-laki Perempuan Y N

Home Profil Data Tahun AkademikData Mata Pelajaran Data Kelas Data Siswa Data GuruData Mengajar Logout

Gambar III.45 Halaman Buat Data Siswa

17.Halaman Import Data Siswa

F17

Ukuran Form 1024 X 786, Warna Background Putih, Warna Border Biru, Font Arial, Ukuran 12

· Klik Home untuk masuk ke halaman F02 · Klik Data Tahun Akademik

untuk masuk ke halaman F04

· Klik Data Mata Pelajaran untuk masuk ke halaman F05

· Klik Data Kelas untuk masuk ke halaman F06 · Klik Data Siswa untuk masuk ke halaman F07 · Klik Data Guru untuk

masuk ke halaman F08 · Klik Mengajar untuk

masuk ke halaman F09 · Klik Logout untuk masuk

ke halaman F01 · Klik Pilih File untuk

memilih file yang akan di import

· Klik import untuk meng-import data dan masuk ke halaman F07 · Klik Batal dan masuk ke

halaman F07

Import Data Siswa

Silahkan Pilih File Excel

Import Batal

E-Learning

SMPN 14 Bandung

Logo

Pilih File

Home Profil Data Tahun Akademik Data Mata Pelajaran Data Kelas Data Siswa Data Guru Data Mengajar Logout

Tidak ada file yang dipilih

18.Halaman Ubah Data Siswa

F18

Ukuran Form 1024 X 786, Warna Background Putih, Warna Border Biru, Font Arial, Ukuran 12

· Klik Home untuk masuk ke halaman F02 · Klik Data Tahun Akademik

untuk masuk ke halaman F04

· Klik Data Mata Pelajaran untuk masuk ke halaman F05

· Klik Data Kelas untuk masuk ke halaman F06 · Klik Data Siswa untuk

masuk ke halaman F07 · Klik Data Guru untuk

masuk ke halaman F08 · Klik Mengajar untuk

masuk ke halaman F09 · Klik Logout untuk masuk

ke halaman F01 · Klik simpan untuk

menyimpan data dan masuk ke halaman F07 · Klik Batal untuk masuk ke

halaman F07

Ubah Siswa

E-Learning

SMPN 14 Bandung

Logo

Home Profil Data Tahun AkademikData Mata Pelajaran Data Kelas Data Siswa Data GuruData Mengajar Logout

Simpan Batal NIS Nama Lengkap Kelas Alamat Tempat Lahir Tanggal Lahir Jenis Kelamin Agama Nama Ayah/Wali Nama Ibu Email No Telp/HP Blokir Laki-laki Perempuan Y N

Gambar III.47 Halaman Ubah Data Siswa

19.Halaman Buat Data Guru F19

Ukuran Form 1024 X 786, Warna Background Putih, Warna Border Biru, Font Arial, Ukuran 12

· Klik Home untuk masuk ke halaman F02

· Klik Data Tahun Akademik untuk masuk ke halaman F04

· Klik Data Mata Pelajaran untuk masuk ke halaman F05

· Klik Data Kelas untuk masuk ke halaman F06

· Klik Data Siswa untuk masuk ke halaman F07

· Klik Data Guru untuk masuk ke halaman F08

· Klik Mengajar untuk masuk ke halaman F09

· Klik Logout untuk masuk ke halaman F01

· Klik simpan untuk menyimpan data dan masuk ke halaman F08

· Klik Batal untuk masuk ke halaman F08

Copyright @2013 - SMP Negeri 14 Bandung | Created By Usamah Izzaturrahman Buat Guru Simpan Batal E-Learning SMPN 14 Bandung Logo NUPTK Nama Lengkap Alamat Tempat Lahir Tanggal Lahir Jenis Kelamin Agama Email No Telp/HP Foto Blokir Laki-laki Perempuan Y N

Jabatan Kepala Sekolah Guru

Website Jabatan

Home Profil Data Tahun Akademik Data Mata Pelajaran Data Kelas Data Siswa Data GuruData Mengajar Logout

Pilih File Tidak ada file yang dipilih

20.Halaman Import Data Guru

F20

Ukuran Form 1024 X 786, Warna Background Putih, Warna Border Biru, Font Arial, Ukuran 12

· Klik Home untuk masuk ke halaman F02

· Klik Data Tahun Akademik untuk masuk ke halaman F04

· Klik Data Mata Pelajaran untuk masuk ke halaman F05

· Klik Data Kelas untuk masuk ke halaman F06

· Klik Data Siswa untuk masuk ke halaman F07

· Klik Data Guru untuk masuk ke halaman F08

· Klik Mengajar untuk masuk ke halaman F09

· Klik Logout untuk masuk ke halaman F01

· Klik Pilih File untuk memilih file yang akan di import

· Klik import untuk meng-import data dan masuk ke halaman F08

· Klik Batal dan masuk ke halaman F08

Import Data Guru

E-Learning SMPN 14 Bandung

Logo

Home Profil Data Tahun AkademikData Mata Pelajaran Data Kelas Data Siswa Data Guru Data Mengajar Logout

Silahkan Pilih File Excel

Import Batal

Pilih File Tidak ada file yang dipilih

Gambar III.49 Halaman Import Data Guru

21.Halaman Ubah Data Guru F21

Ukuran Form 1024 X 786, Warna Background Putih, Warna Border Biru, Font Arial, Ukuran 12

· Klik Home untuk masuk ke halaman F02

· Klik Data Tahun Akademik untuk masuk ke halaman F04

· Klik Data Mata Pelajaran untuk masuk ke halaman F05

· Klik Data Kelas untuk masuk ke halaman F06

· Klik Data Siswa untuk masuk ke halaman F07

· Klik Data Guru untuk masuk ke halaman F08

· Klik Mengajar untuk masuk ke halaman F09

· Klik Logout untuk masuk ke halaman F01

· Klik simpan untuk menyimpan data dan masuk ke halaman F08

· Klik Batal untuk masuk ke halaman F08

E-Learning SMPN 14 Bandung

Logo

Home Profil Data Tahun Akademik Data Mata Pelajaran Data Kelas Data Siswa Data GuruData Mengajar Logout

Simpan Batal NUPTK Nama Lengkap Alamat Tempat Lahir Tanggal Lahir Jenis Kelamin Agama Email No Telp/HP Foto Blokir Laki-laki Perempuan Y N

Jabatan Kepala Sekolah Guru

Website Jabatan

Pilih File Tidak ada file yang dipilih

22.Halaman Buat Data Mengajar

F22

Ukuran Form 1024 X 786, Warna Background Putih, Warna Border Biru, Font Arial, Ukuran 12

· Klik Home untuk masuk ke halaman F02 · Klik Data Tahun Akademik

untuk masuk ke halaman F04

· Klik Data Mata Pelajaran untuk masuk ke halaman F05

· Klik Data Kelas untuk masuk ke halaman F06 · Klik Data Siswa untuk

masuk ke halaman F07 · Klik Data Guru untuk

masuk ke halaman F08 · Klik Mengajar untuk

masuk ke halaman F09 · Klik Logout untuk masuk

ke halaman F01 · Klik simpan untuk

menyimpan data dan masuk ke halaman F09 · Klik Batal untuk masuk ke

halaman F09

Buat Data Mengajar

Kelas Simpan Batal E-Learning SMPN 14 Bandung Logo Mata Pelajaran Nama Guru

Home Profil Data Tahun Akademik Data Mata Pelajaran Data Kelas Data Siswa Data Guru Data Mengajar Logout

Gambar III.51 Halaman Buat Data Mengajar

23.Halaman Ubah Data Mengajar

F23

Ukuran Form 1024 X 786, Warna Background Putih, Warna Border Biru, Font Arial, Ukuran 12

· Klik Home untuk masuk ke halaman F02

· Klik Data Tahun Akademik untuk masuk ke halaman

Dalam dokumen Pembangunan e-learning di SMP Negeri 14 Bandung (Halaman 147-183)