BAB 4 ANALISIS DAN PERANCANGAN SISTEM INFORMASI E-LEARNING BERBASIS WEB PADA SMA SANTA PATRICIA

Transkripsi

1 BAB 4 ANALISIS DAN PERANCANGAN SISTEM INFORMASI E-LEARNING BERBASIS WEB PADA SMA SANTA PATRICIA 4.1 Analisis Sistem Informasi Adapun yang menjadi analisa dalam rancang bangun sistem informasi e-learning pada Sekolah SMA Santa Patricia meliputi beberapa hal sebagai berikut : Purpose Sistem informasi e-learning yang dikembangkan pada SMA Santa Patricia mempunyai tujuan untuk memberikan kemudahan dalam pertukaran informasi antara sekolah dengan siswa maupun orangtua. Pertukaran informasi yang dimaksud adalah materi, nilai tugas, nilai ujian, pengumuman dan jadwal. Materi yang pada awalnya hanya didapatkan setiap pertemuan kelas saja menjadi dapat didapatkan kapan saja dengan adanya e-learning. Terkadang informasi mengenai pengumuman penting hanya dapat didapatkan melalui papan pengumuman, e- learning yang dikembangkan pada SMA Santa Patricia bertujuan untuk memberikan kemudahan dalam mengetahui pengumuman akademis sekolah yang tersedia. Nilai tugas dan nilai ujian yang diumumkan menjadi lebih mudah untuk dilihat tanpa harus ada pertemuan tatap muka melalui media e-learning ini. Media e-learning ini juga memberikan kemudahan dalam informasi mengenai jadwal mengajar guru, jadwal mata pelajaran siswa dan jadwal siswa yang dapat dilihat oleh orang tua. Secara keseluruhan, e-learning ini bertujuan untuk mendukung proses pembelajaran yang dapat diakses tidak hanya saat jam sekolah saja melainkan bisa kapan saja. 72

2 System Definiton System Definition berisi deskripsi proses bisnis yang diusulkan, activity diagram proses bisnis yang diusulkan dan gambaran dari proses bisnis sekolah SMA Santa Patricia Proses Bisnis yang Diusulkan Setiap pada awal tahun ajaran baru, siswa melakukan pendaftaran pada sekolah Santa Patricia. Siswa diharuskan memberikan data dirinya sebagai hal yang dimasukan kedalam form pendaftaran. Form pendaftaran yang berisi data diri siswa diterima oleh bagian tata usaha, tata usaha menyimpan data siswa, setelah itu tata usaha memberikan data siswa tersebut kepada wakil kepala sekolah. Pada saat yang bersamaan, wakil kepala sekolah meminta persetujuan kepada kepala sekolah dan menentukan kurikulum tahun ajaran baru, lalu kepala sekolah memutuskan untuk menerima murid yang mendaftar atau tidak, jika tidak maka akan diberikan konfirmasi kepada orang tua. Lalu wakil kepala sekolah menentukan mata pelajaran yang akan diajarkan, lalu admin mendata mata pelajaran sesuai dengan mata pelajaran yang ditentukan oleh wakil kepala sekolah. Lalu wakil kepala sekolah mengadakan pertemuan guru untuk melakukan pendataan ulang guru. Melalui pendataan ulang guru, admin mendata guru baik secara input, update maupun delete data guru. Lalu wakil kepala sekolah menentukan wali kelas setiap kelasnya dan membuat jadwal pelajaran tahun ajaran baru. Melalui jadwal pelajaran tahun ajaran baru yang sudah dibuat, admin mendata jadwal pelajaran tersebut kedalam sistem. Kemudian admin membuat bahan materi pelajaran dan setelah materi tersebut dibuat admin meng-upload bahan materi tersebut. Jika

3 74 pendaftaran siswa disetujui, wakil kepala sekolah menerima data siswa beserta dengan data orang tua dan menyimpan data tersebut kedalam arsip serta memberikan data siswa baru kepada wali kelas. Pada saat yang bersamaan wali kelas menerima data siswa dan admin mendata kelas, ruang, jurusan dan siswa. Pada waktu tertentu wakepsek membuat pengumuman dan Admin mendata pengumuman tersebut ke dalam sistem yang dimana siswa, guru serta orang tua dapat melihat pengumuman tersebut. Wali kelas mulai memasuki tahun ajaran baru dan pada saat yang bersamaan siswa serta guru melihat jadwal pelajaran dan melakukan download terhadap materi yang ingin dipelajari, serta orang tua juga dapat melihat jadwal pelajaran siswa. Kemudian guru memberikan pengarahan terhadap materi yang sudah didownload siswa di dalam kelas. Pada setiap akhir pertemuan kelas, guru meng-upload soal ke sistem. Soal yang sudah di upload oleh guru kemudian di download oleh siswa dan dikerjakan oleh siswa. Setelah soal sudah selesai dikerjakan, siswa melakukan upload tugas ke sistem. Kemudian guru men-download tugas siswa, memeriksa tugas siswa, menilai tugas siswa dan menginput nilai tugas siswa yang kemudian siswa dan orang tua dapat melihat nilai tugas tersebut. Pada akhir materi yang disampaikan, guru mengadakan ulangan harian yang ditujukan kepada siswa, siswa mengerjakan ulangan tersebut dan mengumpulkannya kepada guru, kemudian guru menerima ulangan siswa dan memeriksa ulangan siswa. Kemudian guru melakukan input nilai ke sistem yang dimana nilai tersebut, siswa serta orang tua dapat melihatnya. Apabila nilai ulangan siswa yang didapatkan kurang baik,

4 75 maka guru akan mengadakan ujian perbaikan atau remedial dan hanya bisa dilakukan sekali saja. Jika siswa tersebut belum melakukan ulangan remedial, siswa akan menerima ulangan remedial, mengerjakan ulangan remedial tersebut dan mengumpulkan ulangan remedial untuk diterima oleh guru untuk diperiksa dan dinilai. Lalu nilai remedial tersebut diinput ke dalam sistem oleh guru. Jika siswa sudah melakukan ulangan remedial, maka siswa tersebut tidak bisa mendapatkan kesempatan ulangan remedial untuk kedua kalinya. Pada setiap per-triwulan atau setiap tiga bulan sekali, wakil kepala sekolah mengadakan ujian sekolah untuk keseluruhan sekolah SMA Santa Patricia, lalu wakil kepala sekolah membuat jadwal ujian, kemudian admin mendata jadwal ujian tersebut kedalam sistem. Kemudian siswa melihat jadwal ujian yang berasal dari sistem. Sesuai tanggal ujian yang tertera dari sistem, siswa menerima ujian sekolah dan mengerjakan ujian sekolah serta mengumpulkan ujian sekolah kepada guru. Kemudian guru menerima ujian siswa, memeriksa ujian siswa dan meng-input nilai ujian kedalam sistem. Lalu siswa dan orang tua yang ingin mengetahui nilainya dapat melihat nilai ujian tersebut dari sistem. Apabila nilai ujian siswa mendapatkan nilai yang rendah, maka guru melakukan ujian remedial, siswa menerima ujian remedial lalu mengerjakan ujian remedial tersebut. Kemudian siswa mengumpulkan ujian remedial tersebut untuk dinilai oleh guru dan guru meng-input nilai ujian remedial tersebut kedalam sistem yang disertai dengan guru menyusun daftar nilai siswa. Guru memberikan daftar nilai siswa kepada wali kelas masing-masing kelas. Wali kelas menerima daftar nilai siswa tersebut dan menyusun rapot siswa

5 76 berdasarkan nilai siswa tersebut. Setelah itu wali kelas memberikan rapot siswa kepada orang tua siswa yang bersangkutan dan rapot tersebut diterima oleh orang tua.

6 Activity Diagram Sistem yang Diusulkan Gambar 4.1 Activity Diagaram Sistem Yang diusulkan

7 Event Table Berikut adalah event table dirancang untuk menjabarkan kegiatan atau event yang terjadi dalam sistem e-learning di sekolah SMA Santa Patricia. Terdiri dari event, trigger, source, usecase, response dan destination. Tabel 4.1 Event Table Event Trigger Source Usecase Response Destination Admin membuat Adanya Kepala Membuat Materi Siswa, Guru bahan materi periode tahun Sekolah bahan ajaran baru materi yang dimulai Admin melakukan Materi yang Kepala Mendata Materi Siswa, Guru upload bahan sudah selesai Sekolah bahan yang materi diinput materi terupload Admin mendata Adanya tahun Kepala Mendata Mata Siswa, Guru mata pelajaran ajaran baru Sekolah mata pelajaran yang akan pelajaran dimulai Admin mendata Adanya tahun Siswa Mendata Data Wali kelas siswa dan orang tua ajaran baru dan orang siswa dan orang tua siswa Admin guru Admin jurusan Admin kelas mendata mendata mendata Adanya perubahan struktur kerja Adanya pergantian tahun ajaran dan memasuki tahun ajaran baru Adanya pergantian tahun ajaran dan memasuki tahun ajaran baru tua Guru Wakil kepala sekolah, Kepala sekolah Wakil kepala sekolah, Kepala sekolah Mendata guru Mendata jurusan Mendata kelas Data guru Data jurusan Data kelas Kepala Sekolah, Wakil kepala sekolah Kepala sekolah, wakil kepala sekolah, guru, siswa Kepala sekolah, wakil kepala sekolah, guru,siswa

8 79 Admin ruang mendata Admin mendata jadwal harian Admin mengupload pengumuman Admin mengganti password Adanya pergantian tahun ajaran dan memasuki tahun ajaran baru Adanya pergantian tahun ajaran dan memasukin tahun ajaran baru Adanya informasi akademik yang sudah selesai dibuat Penggantian password secara berkala Wakil kepala sekolah, Kepala sekolah Wakil kepala sekolah Kepala sekolah Admin Mendata ruang Mendata jadwal harian Mendata pengumu man Mengganti Password Data ruangan Jadwal harian Pengumu man Revisi Password Kepala sekolah, wakil kepala sekolah, guru, siswa Siswa, guru Siswa, guru, orang tua Admin Guru melihat jadwal pelajaran Guru melakukan download materi Adanya jadwal pembelajaran yang harus diikuti Adanya kegiatan pembelajaran yang berlangsung Admin Admin Melihat jadwal pelajaran Download materi Jadwal Pelajaran Materi Guru Siswa Guru melakukan upload materi support Guru melakukan upload soal Adanya materi tambahan yang dibutuhkan siswa Waktu yang ditentukan guru, dan pada saat akhir materi Guru Guru Mendata materi support Mendata Soal Materi support Soal Siswa Siswa Guru melakukan download tugas Adanya tugas yang sudah diupload oleh siswa Siswa Download tugas siswa Tugas siswa Guru

9 80 Guru memeriksa tugas siswa Guru memeriksa ulangan siswa Guru melakukan input nilai siswa Guru melakukan edit nilai Guru mengubah data diri Guru mengganti password Guru melihat pengumuman Siswa melihat jadwal pelajaran Siswa melakukan download materi Siswa melakukan download soal Siswa melakukan upload tugas Siswa melihat nilai tugas/ulangan/ujia n Adanya tugas yang sudah diupload oleh siswa Adanya kegiatan ulangan yang sudah selesai Proses pengecekan dan penilaian tugas yang sudah selesai Karena adanya perubahan nilai atau kesalahan dalam menginput Adanya data diri guru yang berubah Penggantian password secara berkala Adanya informasi akademik yang tersedia untuk dilihat Adanya jadwal pembelajaran yang harus diikuti Adanya materi yang harus dipelajari dan petunjuk guru Adanya soal yang diupload oleh guru Adanya tugas yang selesai dikerjakan Adanya nilai yang sudah diupload oleh Siswa Siswa Guru Guru Guru Guru Admin Admin Admin Guru Siswa Guru Memeriks a tugas siswa Memeriks a ulangan siswa Melakuka n input nilai siswa Melakuka n edit nilai Mengubah data diri Mengganti password Melihat pengumu man Melihat jadwal pelajaran Download materi Download Soal Upload tugas Melihat nilai Tugas / Ulangan/ File tugas siswa Ulangan siswa Nilai siswa Revisi Nilai Revisi data diri Revisi password Pengumu man Jadwal pelajaran Materi Soal Tugas Nilai Guru Guru Siswa Siswa Guru Guru Guru Siswa Siswa Siswa Guru Siswa

10 81 Siswa mengubah data diri Siswa mengubah password Siswa melihat pengumuman Orang Tua melihat jadwal pelajaran Orang Melihat nilai Tugas/ Ulangan/ Ujian Orang Mengubah Password Tua Orang tua melihat pengumuman guru Adanya pergantian informasi mengenai data diri siswa Adanya pergantian password secara berkala Adanya informasi akademik yang tersedia untuk dilihat Adanya keinginan orang tua untuk ikut serta dalam kegiatan siswa Adanya nilai yang sudah diupload oleh guru Adanya pergantian password secara berkala Adanya informasi akademik yang tersedia untuk dilihat Siswa Siswa Admin Admin Guru Orang Tua Admin Ujian Mengubah data diri Mengubah password Melihat Pengumu man Melihat Jadwal Pelajaran Melihat nilai Tugas/ Ulangan/ Ujian Mengubah Password Melihat pengumu man Revisi data diri Revisi password Pengumu man Jadwal Pelajaran Nilai Revisi Password Pengumu man Siswa Siswa Siswa Orang Tua Orang Tua Orang Tua Orang Tua

11 Use Case Diagram Berikut adalah use case yang berisi interaksi antara aktor yang terdapat pada sekolah SMA Santa Patricia dengan sistem e-learning yang terdapat pada sekolah SMA Santa Patricia Use Case Diagram Admin Gambar 4.2 Use Case Diagram Admin

12 Use Case Diagram Guru Gambar 4.3 Use Case Diagram Guru

13 Use Case Diagram Siswa Gambar 4.4 Use Case Diagram Siswa

14 Use Case Diagram Orang Tua Gambar 4.5 Use Case Diagram Orang Tua

15 Use Case Description Berikut adalah use case description yang berisi penjelasan mengenai interaksi antara aktor yang terdapat pada sekolah SMA Santa Patricia dengan sistem e-learning yang terdapat pada sekolah SMA Santa Patricia Use Case Description Admin Tabel 4.2 Use Case Description untuk Membuat Bahan Materi Tabel 4.3 Use Case Description untuk Mendata Bahan Materi

16 87 Tabel 4.4 Use Case Description untuk Mendata Mata Pelajaran Tabel 4.5 Use Case Description untuk Mendata Siswa dan Orang Tua

17 88 Tabel 4.6 Use Case Description untuk Mendata Guru Tabel 4.7 Use Case Description untuk Mendata Jurusan

18 89 Tabel 4.8 Use Case Description untuk Mendata Kelas Tabel 4.9 Use Case Description untuk Mendata Ruang

19 90 Tabel 4.10 Use Case Description untuk Mendata Jadwal Harian Tabel 4.11 Use Case Description untuk Mendata Pengumuman

20 91 Tabel 4.12 Use Case Description untuk Mengganti Password Use Case Description Guru Tabel 4.13 Use Case Description untuk Melihat Jadwal Pelajaran Tabel 4.14 Use Case Description untuk Download Materi

21 92 Tabel 4.15 Use Case Description untuk Mendata Materi Support Tabel 4.16 Use Case Description untuk Mendata Soal

22 93 Tabel 4.17 Use Case Description untuk Download Tugas Siswa Tabel 4.18 Use Case Description untuk Memeriksa Tugas Siswa Tabel 4.19 Use Case Description untuk Memeriksa Ulangan Siswa

23 94 Tabel 4.20 Use Case Description untuk Menginput Nilai Siswa Tabel 4.21 Use Case Description untuk Mengedit Nilai Siswa Tabel 4.22 Use Case Description untuk Mengubah Data Diri

24 95 Tabel 4.23 Use Case Description untuk Mengganti Password Tabel 4.24 Use Case Description untuk Melihat Pengumuman Use Case Description Siswa Tabel 4.25 Use Case Description untuk Melihat Jadwal Pelajaran

25 96 Tabel 4.26 Use Case Description untuk Download Materi Tabel 4.27 Use Case Description untuk Download Soal Tabel 4.28 Use Case Description untuk Upload Tugas

26 97 Tabel 4.29 Use Case Description untuk Melihat Nilai Tugas/Ulangan/Ujian Tabel 4.30 Use Case Description untuk Mengubah Data Diri Tabel 4.31 Use Case Description untuk Mengubah Password

27 98 Tabel 4.32 Use Case Description untuk Melihat Pengumuman Use Case Description Orang Tua Tabel 4.33 Use Case Description untuk Melihat Jadwal Pelajaran Tabel 4.34 Use Case Description untuk Melihat Nilai Tugas / Ulangan / Ujian

28 99 Tabel 4.35 Use Case Description untuk Mengubah Password Tabel 4.36 Use Case Description untuk Mengubah Data Diri Tabel 4.37 Use Case Description untuk Melihat Pengumuman

29 System Sequence Diagram Berikut adalah system sequence diagram yang menjelaskan urutan urutan yang dilakukan actor di sekolah SMA Santa Patricia dengan sistem informasi e-learning di sekolah SMA Patricia System Sequence Diagram Admin 1. Mendata Bahan Materi (Add) Gambar 4.6 System Sequence Diagram Mendata Bahan Materi (Add) 2. Mendata Bahan Materi (Edit) Gambar 4.7 System Sequence Diagram Mendata Bahan Materi (Edit)

30 Mendata Bahan Materi (Delete) Gambar 4.8 System Sequence Diagram Mendata Bahan Materi (Delete) 4. Mendata Mata Pelajaran (Add) Gambar 4.9 System Sequence Diagram Mendata Mata Pelajaran (Add)

31 Mendata Mata Pelajaran (Edit) Gambar 4.10 System Sequence Diagram Mendata Mata Pelajaran (Edit) 6. Mendata Mata Pelajaran (Delete) Gambar 4.11 System Sequence Diagram Mendata Mata Pelajaran (Delete)

32 Mendata Siswa dan Orang Tua (Add) Gambar 4.12 System Sequence Diagram Mendata Siswa dan Orang Tua (Add) 8. Mendata Siswa dan Orang Tua (Edit) Gambar 4.13 System Sequence Diagram Mendata Siswa dan Orang Tua (Edit)

33 Mendata Siswa dan Orang tua (Delete) Gambar 4.14 System Sequence Diagram Mendata Siswa dan Orang Tua (Delete) 10. Mendata Guru (Add) Gambar 4.15 System Sequence Diagram Mendata Guru (Add)

34 Mendata Guru (Edit) Gambar 4.16 System Sequence Diagram Mendata Guru (Edit) 12. Mendata Guru (Delete) Gambar 4.17 System Sequence Diagram Mendata Guru (Delete)

35 Mendata Jurusan (Add) Gambar 4.18 System Sequence Diagram Mendata Jurusan (Add) 14. Mendata Jurusan (Edit) Gambar 4.19 System Sequence Diagram Mendata Jurusan (Edit) 15. Mendata Jurusan (Delete) Gambar 4.20 System Sequence Diagram Mendata Jurusan (Delete)

36 Mendata Ruang (Add) Gambar 4.21 System Sequence Diagram Mendata Ruang (Add) 17. Mendata Ruang (Edit) Gambar 4.22 System Sequence Diagram Mendata Ruang (Edit) 18. Mendata Ruang (Delete) Gambar 4.23 System Sequence Diagram Mendata Ruang (Delete)

37 Mendata Kelas (Add) Gambar 4.24 System Sequence Diagram Mendata Kelas (Add) 20. Mendata Kelas (Edit) Gambar 4.25 System Sequence Diagram Mendata Kelas (Edit) 21. Mendata Kelas (Delete) Gambar 4.26 System Sequence Diagram Mendata Kelas (Delete)

38 Mendata Jadwal Pelajaran (Add) Gambar 4.27 System Sequence Diagram Mendata Jadwal Pelajaran (Add) 23. Mendata Jadwal Pelajaran (Edit) Gambar 4.28 System Sequence Diagram Mendata Jadwal Pelajaran (Edit)

39 Mendata Jadwal Pelajaran (Delete) Gambar 4.29 System Sequence Diagram Mendata Jadwal Pelajaran(Delete) 25. Mendata Pengumuman (Add) Gambar 4.30 System Sequence Diagram Mendata Pengumuman (Add)

40 Mendata Pengumuman (Edit) Gambar 4.31 System Sequence Diagram Mendata Pengumuman (Edit) 27. Mendata Pengumuman (Delete) Gambar 4.32 System Sequence Diagram Mendata Pengumuman (Delete)

41 Mengganti Password Gambar 4.33 System Sequence Diagram Mengganti Password System Sequence Diagram Guru 1. Melihat Jadwal Pelajaran Gambar 4.34 System Sequence Diagram Melihat Jadwal Pelajaran 2. Download Materi Gambar 4.35 System Sequence Diagram Mendownload Materi

42 Mandata Materi Support (Add) Gambar 4.36 System Sequence Diagram Mendata Materi Support (Add) 4. Mandata Materi Support (Edit) Gambar 4.37 System Sequence Diagram Mendata Materi Support (Edit)

43 Mandata Materi Support (Delete) Gambar 4.38 System Sequence Diagram Mendata Materi Support (Delete) 6. Mendata Soal (Add) Gambar 4.39 System Sequence Diagram Mendata Soal (Add)

44 Mendata Soal (Edit) Gambar 4.40 System Sequence Diagram Mendata Soal (Edit) 8. Mendata Soal (Delete) Gambar 4.41 System Sequence Diagram Mendata Soal (Delete)

45 Download Tugas Siswa Gambar 4.42 System Sequence Diagram Mendownload Tugas Siswa 10. Melakukan Input Nilai Siswa Gambar 4.43 System Sequence Diagram Input Nilai Siswa

46 Melakukan Edit Nilai Gambar 4.44 System Sequence Diagram Edit Nilai Siswa 12. Mengubah Data Diri Gambar 4.45 System Sequence Diagram Mengubah Data Diri

47 Mengganti Password Gambar 4.46 System Sequence Diagram Mengganti Password 14. Melihat Pengumuman Gambar 4.47 System Sequence Diagram Melihat Pengumuman

48 System Sequence Diagram Siswa 1. Melihat Jadwal Pelajaran Gambar 4.48 System Sequence Diagram Melihat Jadwal Pelajaran 2. Download Materi Gambar 4.49 System Sequence Diagram Mendownload Materi 3. Download Soal Gambar 4.50 System Sequence Diagram Mendownload Soal

49 Upload Tugas Gambar 4.51 System Sequence Diagram Upload Tugas 5. Melihat Nilai Tugas / Ulangan / Ujian Gambar 4.52 System Sequence Diagram Melihat Nilai Tugas/Ulangan/Ujian 6. Mengubah Data Diri Gambar 4.53 System Sequence Diagram Mengubah Data Diri

50 Mengubah Password Gambar 4.54 System Sequence Diagram Mengubah Password 8. Melihat Pengumuman Gambar 4.55 System Sequence Diagram Melihat Pengumuman System Sequence Diagram Orang Tua 1. Melihat Jadwal Pelajaran Gambar 4.56 System Sequence Diagram Melihat Jadwal Pelajaran

51 Melihat Nilai Tugas / Ulangan / Ujian Gambar 4.57 System Sequence Diagram Melihat Nilai Tugas/Ulangan/Ujian 3. Mengubah Password Gambar 4.58 System Sequence Diagram Mengubah Password 4. Mengubah Data Diri Gambar 4.59 System Sequence Diagram Mengubah Data Diri

52 Melihat Pengumuman Gambar 4.60 System Sequence Diagram Melihat Pengumuman

53 Problem Domain Model Problem domain model adalah suatu model yang rancang untuk mengidentifikasi kebutuhan sistem dan hubungan antara class yang satu dengan yang lain Domain Model Class Diagram Berikut adalah domain model class diagram yang menjabarkan hubungan antara class yang terdapat pada sistem e-learning SMA Santa Patricia. Gambar 4.61 Domain Model Class Diagram

54 Classes Berikut adalah daftar class yang merupakan penjabaran dari class diagram yang ada. Classes menjabarkan class demi class yang ada pada problem domain model dari sistem e-learning SMA Santa Patricia. 1. Guru Atribut : No_Induk_Guru, Username_Guru, Nama_Lengkap, Agama, Status_Diri, Jenis_Kelamin, , No_Handphone, Tempat_Lahir, Tanggal_Lahir, Alamat, Password, Gambar, Status 2. Guru Detil Gambar 4.62 Classes Guru Atribut : No_Induk_Guru, ID_Mata_Pelajaran Gambar 4.63 Classes Guru Detil

55 Siswa Atribut : No_Induk_Siswa, Username_Siswa, Nama_Lengkap, Jenis_Kelamin, Tempat_Lahir, Tanggal_Lahir, No_Telepon, No_Handphone, , Agama, Alamat, Password, Gambar, Status 4. Siswa Detil Gambar 4.64 Classes Siswa Atribut : No_Induk_Siswa, ID_Kelas, ID_Ruang, ID_Jurusan Gambar 4.65 Classes Siswa Detil

56 Orang tua Atribut : ID_Orang_Tua, No_Induk_Siswa, Nama_Orang_Tua, No_Handphone_orang_tua, alamat_orang_tua, username_orang_tua, password_orang_tua, status 6. Kelas Gambar 4.66 Classes Orang Tua Atribut : ID_Kelas, Nama_Kelas 7. Jurusan Gambar 4.67 Classes Kelas Atribut : ID_jurusan, Nama_Jurusan 8. Ruang Gambar 4.68 Classes Jurusan Atribut : ID_Ruang, Nama_Ruang Gambar 4.69 Classes Ruang

57 Mata Pelajaran Atribut : ID_Mata_Pelajaran, Nama_Mata_Pelajaran Gambar 4.70 Classes Mata Pelajaran 10. Materi Atribut : ID_materi, ID_Mata_Pelajaran, ID_Kelas, ID_Jurusan, Nama_Materi, Nama_File_Materi, Waktu_Upload, Deskripsi, File_Size, File_Tipe, Link_Materi Gambar 4.71 Classes Materi 11. Materi Support Atribut : ID_Materi_Support, ID_Materi, No_Induk_Guru, File_Materi_Support, Link_materi_support Gambar 4.72 Classes Materi Support

58 Soal Atribut : ID_Soal, ID_Mata_Pelajaran, No_Induk_Guru, ID_Kelas, ID_Jurusan, ID_Ruang, Judul_Soal, Keterangan_Soal, File_Soal, Tanggal_Upload Gambar 4.73 Classes Soal 13. Tugas Atribut : ID_tugas, ID_soal, No_Induk_Siswa, Tanggal_Upload_Tugas, Pesan_Tugas, File_Tugas 14. Jadwal Gambar 4.74 Classes Tugas Atribut : ID_Jadwal, ID_Kelas, ID_Jurusan, ID_Ruang Gambar 4.75 Classes Jadwal

59 Jadwal Detil Atribut : ID_Jadwal, No_Induk_Guru, ID_Mata_Pelajaran, Hari, Jam 16. Nilai Gambar 4.76 Classes Jadwal Detil Atribut : ID_Nilai, No_Induk_Siswa Gambar 4.77 Classes Nilai 17. Nilai Detil Atribut : ID_Nilai, ID_Mata_Pelajaran, Uh1, Uh2, Uh3, Uh4, Uhr1, Uhr2, Uhr3, Uhr4, Tgs1, Tgs2, Tgs3, UTS, UTSr, UAS, UASr Gambar 4.78 Classes Nilai Detil

60 Pengumuman Atribut : ID_Pengumuman, Judul_Pengumuman, File_Lampiran, Tanggal_Pengumuman, Isi_Pengumuman Gambar 4.79 Classes Pengumuman Statechart Statechart adalah suatu diagram yang dibuat untuk menggambarkan proses demi proses dari tiap class yang terdapat di problem domain model. 1. Siswa 2. Guru Gambar 4.80 Statechart Siswa 3. Orang Tua Gambar 4.81 Statechart Guru Gambar 4.82 Statechart Orang Tua

61 Tugas Gambar 4.83 Statechart Tugas 5. Nilai 6. Pengumuman Gambar 4.84 Statechart Nilai 7. Soal Gambar 4.85 Statechart Pengumuman 8. Ruang Gambar 4.86 Statechart Soal 9. Kelas Gambar 4.87 Statechart Ruang Gambar 4.88 Statechart Kelas

62 Jurusan 11. Mata Pelajaran Gambar 4.89 Statechart Jurusan 12. Materi Gambar 4.90 Statechart Mata Pelajaran 13. Materi Support Gambar 4.91 Statechart Materi 14. Jadwal Gambar 4.92 Statechart Materi Support Gambar 4.93 Statechart Jadwal

63 Perancangan Sistem Informasi Support Service Architecture dan Deployment Environment Pada Sekolah SMA Santa Patricia ini menggunakan Centralized Architecture karena servernya berada pada satu tempat dan tidak mempunyai anak cabang. Anak cabang yang dimaksud adalah cabang SMA Santa Patricia, SMA Santa Patricia hanya satu sekolah saja di tangerang Software Architecture Karena Sekolah SMA Santa Patricia memiliki jumlah pemakai yang tergolong banyak, maka SMA Santa Patricia hanya menggunakan two-tier yang aplikasi dan databasenya berada pada satu server yang sama Multilayer Design System Sequence Diagram Berikut adalah multilayer design system sequence diagram yang memjabarkan urutan sekuensial dari suatu interaksi antara actor yang terdapat pada sekolah SMA Santa Patricia dengan sistem e-learning.

64 Multilayer Design System Sequence Diagram Admin 1. Mendata Bahan Materi (Add) Gambar 4.94 Multilayer Sequence Diagram Mendata Bahan Materi (Add)

65 Mendata Bahan Materi (Edit) Gambar 4.95 Multilayer Sequence Diagram Mendata Bahan Materi (Edit)

66 Mendata Bahan Materi (Delete) Gambar 4.96 Multilayer Sequence Diagram Mendata Bahan Materi (Delete)

67 Mendata Mata Pelajaran (Add) Gambar 4.97 Multilayer Sequence Diagram Mendata Mata Pelajaran (Add) 5. Mendata Mata Pelajaran (Edit) Gambar 4.98 Multilayer Sequence Diagram Mendata Mata Pelajaran (Edit)

68 Mendata Mata Pelajaran (Delete) Gambar 4.99 Multilayer Sequence Diagram Mendata Mata Pelajaran (Delete)

69 Mendata Siswa dan Orang Tua (Add) Gambar Multilayer Sequence Diagram Mendata Siswa dan Orang Tua (Add)

70 Mendata Siswa dan Orang Tua (Edit) Gambar Multilayer Sequence Diagram Mendata Siswa dan Orang Tua (Edit)

71 Mendata Siswa dan Orang Tua (Delete) Gambar Multilayer Sequence Diagram Mendata Siswa dan Orang Tua (Delete)

72 Mendata Guru (Add) Gambar Multilayer Sequence Diagram Mendata Guru (Add)

73 Mendata Guru (Edit) Gambar Multilayer Sequence Diagram Mendata Guru (Edit)

74 Mendata Guru (Delete) Gambar Multilayer Sequence Diagram Mendata Guru (Delete)

75 Mendata Jurusan (Add) Gambar Multilayer Sequence Diagram Mendata Jurusan (Add) 14. Mendata Jurusan (Edit) Gambar Multilayer Sequence Diagram Mendata Jurusan (Edit)

76 Mendata Jurusan (Delete) Gambar Multilayer Sequence Diagram Mendata Jurusan (Delete) 16. Mendata Ruang (Add) Gambar Multilayer Sequence Diagram Mendata Ruang (Add)

77 Mendata Ruang (Edit) Gambar Multilayer Sequence Diagram Mendata Ruang (Edit) 18. Mendata Ruang (Delete) Gambar Multilayer Sequence Diagram Mendata Ruang (Delete)

78 Mendata Kelas (Add) Gambar Multilayer Sequence Diagram Mendata Kelas (Add) 20. Mendata Kelas (Edit) Gambar Multilayer Sequence Diagram Mendata Kelas (Edit)

79 Mendata Kelas (Delete) Gambar Multilayer Sequence Diagram Mendata Kelas (Delete)

80 Mendata Jadwal Pelajaran (Add) Gambar Multilayer Sequence Diagram Mendata Jadwal Pelajaran (Add)

81 Mendata Jadwal Pelajaran (Edit) Gambar Multilayer Sequence Diagram Mendata Jadwal Pelajaran (Edit)

82 Mendata Jadwal Pelajaran (Delete) Gambar Multilayer Sequence Diagram Mendata Jadwal Pelajaran (Delete)

83 Mendata Pengumuman (Add) Gambar Multilayer Sequence Diagram Mendata Pengumuman (Add)

84 Mendata Pengumuman (Edit) Gambar Multilayer Sequence Diagram Mendata Pengumuman (Edit)

85 Mendata Pengumuman (Delete) Gambar Multilayer Sequence Diagram Mendata Pengumuman (Delete) 28. Mengganti Password Gambar Multilayer Sequence Diagram Menganti Password

86 Multilayer Design System Sequence Diagram Guru 1. Melihat Jadwal Pelajaran Gambar Multilayer Sequence Diagram Melihat Jadwal Pelajaran

87 Download materi Gambar Multilayer Sequence Diagram Download Materi

88 Mendata Materi Support (Add) Gambar Multilayer Sequence Diagram Mendata Materi Support (Add)

89 Mendata Materi Support (Edit) Gambar Multilayer Sequence Diagram Mendata Materi Support (Edit)

90 Mendata Materi Support (Delete) Gambar Multilayer Sequence Diagram Mendata Materi Support (Delete)

91 Mendata Soal (Add) Gambar Multilayer Sequence Diagram Mendata Soal (Add)

92 Mendata Soal (Edit) Gambar Multilayer Sequence Diagram Mendata Soal (Edit)

93 Mendata Soal (Delete) Gambar Multilayer Sequence Diagram Mendata Soal (Delete)

94 Download Tugas Siswa Gambar Multilayer Sequence Diagram Mendownload Tugas Siswa

95 Melakukan Input Nilai Siswa Gambar Multilayer Sequence Diagram Melakukan Input Nilai Siswa

96 Melakukan Edit Nilai Gambar Multilayer Sequence Diagram Melakukan Edit Nilai

97 Mengubah Data Diri Gambar Multilayer Sequence Diagram Mengubah Data Diri

98 Mengganti Password Gambar Multilayer Sequence Diagram Mengganti Password 14. Melihat Pengumuman Gambar Multilayer Sequence Diagram Melihat Pengumuman

99 Multilayer Design System Sequence Diagram Siswa 1. Melihat Jadwal Pelajaran Gambar Multilayer Sequence Diagram Melihat Jadwal Pelajaran

100 Download materi Gambar Multilayer Sequence Diagram Download Materi 3. Download soal Gambar Multilayer Sequence Diagram Download Soal

101 Upload Tugas Gambar Multilayer Sequence Diagram Upload Tugas

102 Melihat Nilai Tugas / Ulangan / Ujian Gambar Multilayer Sequence Diagram Melihat Nilai Tugas / Ulangan / Ujian

103 Mengubah Data Diri Gambar Multilayer Sequence Diagram Mengubah Data Diri

104 Mengubah Password Gambar Multilayer Sequence Diagram Mengubah Password 8. Melihat Pengumuman Gambar Multilayer Sequence Diagram Melihat Pengumuman

105 Multilayer Design System Sequence Diagram Orang Tua 1. Melihat Jadwal Pelajaran Gambar Multilayer Sequence Diagram Melihat Jadwal Pelajaran

106 Melihat Nilai Tugas / Ulangan / Ujian Gambar Multilayer Sequence Diagram Melihat Nilai Tugas / Ulangan / Ujian

107 Mengubah Data Diri Gambar Multilayer Sequence Diagram Mengubah Data Diri

108 Mengubah Password Gambar Multilayer Sequence Diagram Mengubah Password 5. Melihat Pengumuman Gambar Multilayer Sequence Diagram Melihat Pengumuman

109 Communication Diagram Berikut adalah communication diagram yang memperlihatkan komunikasi antara aktor yang terdapat pada sekolah SMA Santa Patricia dengan sistem e- learning yang berasal dari urutan sekuensial (sequence) Communication Diagram Admin 1. Mendata Bahan Materi (Add) Gambar Communication Diagram Mendata Bahan Materi (Add) 2. Mendata Bahan Materi (Edit) Gambar Communication Diagram Mendata Bahan Materi (Edit) 3. Mendata Bahan Materi (Delete) Gambar Communication Diagram Mendata Bahan Materi (Delete)

110 Mendata Mata Pelajaran (Add) Gambar Communication Diagram Mendata Mata Pelajaran (Add) 5. Mendata Mata Pelajaran (Edit) Gambar Communication Diagram Mendata Mata Pelajaran (Edit) 6. Mendata Mata Pelajaran (Delete) Gambar Communication Diagram Mendata Mata Pelajaran (Delete)

111 Mendata Siswa dan Orang Tua (Add) Gambar Communication Diagram Mendata Siswa dan Orang Tua (Add) 8. Mendata Siswa dan Orang Tua (Edit) Gambar Communication Diagram Mendata Siswa dan Orang Tua (Edit) 9. Mendata Siswa dan Orang Tua (Delete)

112 Gambar Communication Diagram Mendata Siswa dan Orang Tua (Delete) 10. Mendata Guru (Add) 183 Gambar Communication Diagram Mendata Guru (Add) 11. Mendata Guru (Edit) Gambar Communication Diagram Mendata Guru (Edit) 12. Mendata Guru (Delete) Gambar Communication Diagram Mendata Guru (Delete)

113 Mendata Jurusan (Add) Gambar Communication Diagram Mendata Jurusan (Add) 14. Mendata Jurusan (Edit) Gambar Communication Diagram Mendata Jurusan (Edit) 15. Mendata Jurusan (Delete) Gambar Communication Diagram Mendata Jurusan (Delete) 16. Mendata Ruang (Add) Gambar Communication Diagram Mendata Ruang (Add)

114 Mendata Ruang (Edit) Gambar Communication Diagram Mendata Ruang (Edit) 18. Mendata Ruang (Delete) Gambar Communication Diagram Mendata Ruang (Delete) 19. Mendata Kelas (Add) Gambar Communication Diagram Mendata Kelas (Add) 20. Mendata Kelas (Edit) Gambar Communication Diagram Mendata Kelas (Edit)

115 Mendata Kelas (Delete) Gambar Communication Diagram Mendata Kelas (Delete) 22. Mendata Jadwal Pelajaran (Add) Gambar Communication Diagram Mendata Jadwal Pelajaran (Add) 23. Mendata Jadwal Pelajaran (Edit) Gambar Communication Diagram Mendata Jadwal Pelajaran (Edit)

116 Mendata Jadwal Pelajaran (Delete) Gambar Communication Diagram Mendata Jadwal Pelajaran (Delete) 25. Mendata Pengumuman (Add) Gambar Communication Diagram Mendata Pengumuman (Add) 26. Mendata Pengumuman (Edit) Gambar Communication Diagram Mendata Pengumuman (Edit) 27. Mendata Pengumuman (Delete) Gambar Communication Diagram Mendata Pengumuman (Delete)

117 Mengganti Password Gambar Communication Diagram Menganti Password Communication Diagram Guru 1. Melihat Jadwal Pelajaran Gambar Communication Diagram Melihat Jadwal Pelajaran 2. Download materi Gambar Communication Diagram Download Materi 3. Mendata Materi Support (Add) Gambar Communication Diagram Mendata Materi Support (Add)

118 Mendata Materi Support (Edit) Gambar Communication Diagram Mendata Materi Support (Edit) 5. Mendata Materi Support (Delete) Gambar Communication Diagram Mendata Materi Support (Delete) 6. Mendata Soal (Add) Gambar Communication Diagram Mendata Soal (Add) 7. Mendata Soal (Edit) Gambar Communication Diagram Mendata Soal (Edit)

119 Mendata Soal (Delete) Gambar Communication Diagram Mendata Soal (Delete) 9. Download Tugas Siswa Gambar Communication Diagram Mendownload Tugas Siswa 10. Melakukan Input Nilai Siswa Gambar Communication Diagram Melakukan Input Nilai Siswa

120 Melakukan Edit Nilai Gambar Communication Diagram Melakukan Edit Nilai 12. Mengubah Data Diri Gambar Communication Diagram Mengubah Data Diri 13. Mengganti Password Gambar Communication Diagram Mengganti Password 14. Melihat Pengumuman Gambar Communication Diagram Melihat Pengumuman

121 Communication Diagram Siswa 1. Melihat Jadwal Pelajaran Gambar Communication Diagram Melihat Jadwal Pelajaran 2. Download materi Gambar Communication Diagram Download Materi 3. Download soal Gambar Communication Diagram Download Soal 4. Upload Tugas Gambar Communication Diagram Upload Tugas

122 Melihat Nilai Tugas / Ulangan / Ujian Gambar Communication Diagram Melihat Nilai Tugas / Ulangan / Ujian 6. Mengubah Data Diri Gambar Communication Diagram Mengubah Data Diri 7. Mengubah Password Gambar Communication Diagram Mengubah Password 8. Melihat Pengumuman Gambar Communication Diagram Melihat Pengumuman

123 Communication Diagram Orang Tua 1. Melihat Jadwal Pelajaran Gambar Communication Diagram Melihat Jadwal Pelajaran 2. Melihat Nilai Tugas / Ulangan / Ujian Gambar Communication Diagram Melihat Nilai Tugas / Ulangan / Ujian 3. Mengubah Password Gambar Communication Diagram Mengubah Password

124 Mengubah Data Diri Gambar Communication Diagram Mengubah Data Diri 5. Melihat Pengumuman Gambar Communication Diagram Melihat Pengumuman

125 4.2.5 Update Design Model Class Diagram 196

126 Package Diagram Berikut adalah package diagram yang berisi tiga layer yaitu view layer, domain layer dan data access layer yang didapatkan dari urutan sekuensial multilayer design sistem sequence diagram. Gambar Package Diagram

127 Persistent Object Berikut adalah persistent object sistem yang berasal dari data yang diambil dari urutan sekuensial (sequence) dan merupakan representasi dari table database e-learning SMA Santa Patricia. Tabel 4.38 Persistent Siswa No_Induk_ Siswa Username_ Siswa Nama_ Lengkap Jenis_ Kelamin Tempat_ Lahir Tanggal_ Lahir No_ Telepon No_ Handphone Agama Alamat Password Gambar Status Tabel 4.39 Persistent Guru No_Induk _ Guru Username _ Guru Nama_ Lengkap Agama Status _ Diri Jenis_ Kelamin No_ Handphon e Tempat_ Lahir Tanggal_ Lahir Alamat Password Gambar Status

128 199 Tabel 4.40 Persistent Orang Tua ID_Orang_ Tua No_Induk_ Siswa Nama_ Orang_Tua Alamat Username Password Status Tabel 4.41 Persistent Nilai ID_Nilai No_Induk_Siswa Tabel 4.42 Persistent Ruang ID_Ruang Nama_Ruang Tabel 4.43 Persistent Kelas ID_Kelas Nama_Kelas Tabel 4.44 Persistent Jurusan ID_Jurusan Nama_Jurusan

129 200 Tabel 4.45 Persistent Mata Pelajaran ID_Mata_Pelajaran Nama_Mata_Pelajaran Tabel 4.46 Persistent Materi ID_ Materi No_Mata_ Pelajaran ID_ Kelas ID_ Jurusan Nama_ Materi Nama_ File_Materi Waktu_ Upload Deskripsi File_Size File_Tipe Link_Materi Tabel 4.47 Persistent Materi Support ID_Materi_ Support ID_ Materi No_Induk_ Guru Nama_File_ Materi_Support Link_Materi_ Support Tabel 4.48 Persistent Tugas ID_Tugas ID_Soal No_Induk_ Siswa Tanggal_Upload_ Tugas Pesan_ Tugas File_ Tugas

130 201 Tabel 4.49 Persistent Soal ID_ Soal ID_Mata_ Pelajaran No_Induk_ Guru ID_ Kelas ID_ Jurusan ID_ Ruang Judul_ Soal Keterangan_Soal File_Soal Tanggal_Upload Tabel 4.50 Persistent Jadwal ID_Jadwal ID_Kelas ID_Jurusan ID_Ruang Tabel 4.51 Persistent Pengumuman ID_Pengumuman Judul File_ Lampiran Tanggal_ Pengumuman Isi_ Pengumuman

131 Hierarchy Program Hierarki website ini menggambarkan urutan atau hierarki dari website yang ada untuk website e-learning SMA Santa Patricia Gambar Hierarchy Program

132 User Interface Berikut adalah user interface atau desain tatap muka yang memberikan tampilan secara tidak langsung mengenai program website yang dikembangkan pada SMA Santa Patricia. Gambar Login Page Keterangan : 1. Input type berupa textbox untuk memasukan Username Admin, Guru, Siswa dan Orang tua 2. Input type berupa password untuk memasukan Password 3. Input type button submit untuk melakukan validasi username dan password

133 User Interface Admin 1. Beranda Admin Gambar Beranda Admin Keterangan : 1. Beranda, panel yang mengalihkan kepada halaman beranda 2. Guru, panel yang mengalihkan kepada halaman guru 3. Siswa, panel yang mengalihkan kepada halaman siswa 4. Materi, panel yang mengalihkan kepada halaman materi 5. Jadwal, panel yang mengalihkan kepada halaman jadwal 6. Mata Pelajaran, panel yang mengalihkan kepada halaman mata pelajaran 7. Manage Kelas, panel yang mengalihkan kepada halaman manage kelas 8. Ganti Password, panel yang mengalihkan kepada halaman ganti password 9. Input type button yang berguna untuk dapat melakukan manage event 10. Input type button yang berguna untuk dapat melakukan insert pengumuman

134 Input type textbox beserta button yang dapat digunakan untuk melakukan pencarian terhadap pengumuman 12. Merupakan isi atau content dari pengumuman 13. Merupakan tombol untuk melakukan perubahan terhadap pengumuman 14. Merupakan tombol untuk melakukan penghapusan terhadap pengumuman 15. Merupakan halaman atau paging dari pengumuman 16. Merupakan jquery picture slider yang menjadi display dari event yang sudah diatur pada point (9) 2. Guru Gambar Manage Guru Keterangan : 1. Input type button insert yang berguna untuk melakukan input data guru yang baru 2. Merupakan combo box yang digunakan untuk menjadi filterisasi dalam pencarian di point (3)

135 Input type textbox beserta button untuk melakukan pencarian terhadap data guru sesuai dengan filterisasi yang dilakukan pada point (2) 4. Table yang berisi informasi mengenai guru dan manage guru ( update / delete ) 5. Merupakan halaman atau paging dari data guru 3. Insert Data Guru Gambar Insert Data Guru Keterangan : 1. Input type textbox untuk melakukan pengisian nomor induk guru 2. Input type textbox untuk melakukan pengisian nama lengkap guru 3. Combo box untuk memilih agama yang tertera pada program ( Islam, Kristen, Katolik, Buddha dan Hindu) 4. Combo box untuk memilih jenis Status yang tertera pada program 5. Combo box untuk memilih jenis kelamin yang tertera pada program

136 Input type textbox untuk melakukan pengisian guru 7. Input type textbox untuk melakukan pengisian nomor handphone guru 8. Input type textbox untuk melakukan pengisian tempat lahir guru 9. Combo box untuk memilih tanggal lahir guru 10. Combo box untuk memilih bulan lahir guru 11. Combo box untuk memilih tahun lahir guru 12. Input type textbox untuk melakukan pengisian alamat guru 13. Combo box untuk memilih mata pelajaran yang akan menjadi peminatan guru 14. Combo box untuk memilih mata pelajaran yang akan menjadi peminatan guru ( jika satu guru dapat mengajar dua mata pelajaran ) 15. Input type file untuk dapat melakukan browsing file yang akan dijadikan photo guru 16. Input type button submit yang digunakan untuk menyimpan semua field data yang sudah diisi 17. Input type button back yang berfungsi untuk mengalihkan ke panel sebelumnya 18. Input type button reset yang digunakan untuk melakukan reset terhadap semua field yang tertera pada program

137 Update Data Guru Gambar Update Data Guru Keterangan : 1. Input type textbox untuk melakukan pengisian nomor induk guru yang akan diubah 2. Input type textbox untuk melakukan pengisian nama lengkap guru yang akan diubah 3. Combo box untuk memilih agama yang tertera pada program ( Islam, Kristen, Katolik, Buddha dan Hindu) yang akan diubah 4. Combo box untuk memilih jenis Status yang tertera pada program yang akan diubah 5. Combo box untuk memilih jenis kelamin yang tertera pada program yang akan diubah 6. Input type textbox untuk melakukan pengisian guru yang akan diubah

138 Input type textbox untuk melakukan pengisian nomor handphone guru yang akan diubah 8. Input type textbox untuk melakukan pengisian tempat lahir guru yang akan diubah 9. Combo box untuk memilih tanggal lahir guru yang akan diubah 10. Combo box untuk memilih bulan lahir guru yang akan diubah 11. Combo box untuk memilih tahun lahir guru yang akan diubah 12. Input type textbox untuk melakukan pengisian alamat guru yang akan diubah 13. Combo box untuk memilih mata pelajaran yang akan menjadi peminatan guru yang akan diubah 14. Combo box untuk memilih mata pelajaran yang akan menjadi peminatan guru ( jika satu guru dapat mengajar dua mata pelajaran ) yang akan diubah 15. Input type file untuk dapat melakukan browsing file yang akan dijadikan photo guru yang akan diubah 16. Input type button submit yang digunakan untuk menyimpan semua field data yang sudah diisi yang akan diubah 17. Input type button back yang berfungsi untuk mengalihkan ke panel sebelumnya yang akan diubah 18. Input type button reset yang digunakan untuk melakukan reset terhadap semua field yang tertera pada program yang akan diubah

139 Siswa Gambar Manage Siswa Keterangan : 1. Input type button insert yang berguna untuk melakukan input data siswa yang baru 2. Merupakan combo box yang digunakan untuk menjadi filterisasi dalam pencarian di point (3) 3. Input type textbox beserta button untuk melakukan pencarian terhadap data siswa sesuai dengan filterisasi yang dilakukan pada point (2) 4. Table yang berisi informasi mengenai guru dan manage guru ( update / delete ) 6. Merupakan halaman atau paging dari data siswa

140 Insert Data Siswa dan Orang Tua Gambar Insert Data Siswa dan Orang Tua Keterangan : 1. Input type textbox untuk melakukan pengisian nomor induk siswa 2. Input type textbox untuk melakukan pengisian nama lengkap siswa 3. Combo box untuk memilih agama yang tertera pada program ( Islam, Kristen, Katolik, Buddha dan Hindu) 4. Combo box untuk memilih jenis Status yang tertera pada program 5. Combo box untuk memilih jenis kelamin yang tertera pada program 6. Input type textbox untuk melakukan pengisian siswa 7. Input type textbox untuk melakukan pengisian nomor handphone siswa

141 Input type textbox untuk melakukan pengisian tempat lahir siswa 9. Combo box untuk memilih tanggal lahir siswa 10. Combo box untuk memilih bulan lahir siswa 11. Combo box untuk memilih tahun lahir siswa 12. Input type textbox untuk melakukan pengisian alamat siswa 13. Input type textbox untuk melakukan pengisian nama orang tua siswa 14. Input type textbox untuk melakukan pengisian nomor handphone orang tua siswa 15. Input type textbox untuk melakukan pengisian alamat orang tua siswa 16. Combo box untuk memilih kelas untuk siswa 17. Combo box untuk memilih ruang untuk siswa 18. Combo box untuk memilih jurusan untuk siswa 19. Input type file untuk dapat melakukan browsing file yang akan dijadikan photo siswa 20. Input type button submit yang digunakan untuk menyimpan semua field data yang sudah diisi yang akan diubah 21. Input type button reset yang digunakan untuk melakukan reset terhadap semua field yang tertera pada program 22. Input type button back yang berfungsi untuk mengalihkan ke panel sebelumnya

142 Update data Siswa Gambar Update Data Siswa Keterangan : 1. Input type textbox untuk melakukan pengisian nomor induk siswa yang akan diubah 2. Input type textbox untuk melakukan pengisian nama lengkap siswa yang akan diubah 3. Combo box untuk memilih agama yang tertera pada program ( Islam, Kristen, Katolik, Buddha dan Hindu) yang akan diubah 4. Combo box untuk memilih jenis Status yang tertera pada program yang akan diubah 5. Combo box untuk memilih jenis kelamin yang tertera pada program yang akan diubah 6. Input type textbox untuk melakukan pengisian siswa yang akan diubah

143 Input type textbox untuk melakukan pengisian nomor handphone siswa yang akan diubah 8. Input type textbox untuk melakukan pengisian tempat lahir siswa yang akan diubah 9. Combo box untuk memilih tanggal lahir siswa yang akan diubah 10. Combo box untuk memilih bulan lahir siswa yang akan diubah 11. Combo box untuk memilih tahun lahir siswa yang akan diubah 12. Input type textbox untuk melakukan pengisian alamat siswa yang akan diubah 13. Combo box untuk memilih kelas untuk siswa yang akan diubah 14. Combo box untuk memilih ruang untuk siswa yang akan diubah 15. Combo box untuk memilih jurusan untuk siswa yang akan diubah 16. Input type file untuk dapat melakukan browsing file yang akan dijadikan photo siswa yang akan diubah 17. Input type button submit yang digunakan untuk menyimpan semua field data yang sudah diisi yang akan diubah 18. Input type button reset yang digunakan untuk melakukan reset terhadap semua field yang tertera pada program 19. Input type button back yang berfungsi untuk mengalihkan ke panel sebelumnya

144 Update Data Orang Tua Gambar Update Data Orang Tua Keterangan : 1. Input type textbox nama lengkap orang tua yang akan diubah 2. Input type textbox nomor handphone orang tua yang akan diubah 3. Input type textbox alamat orang tua yang akan diubah 4. Input type button submit untuk melakukan validasi terhadap perubahan yang sudah dilakukan 5. Input type button reset untuk melakukan reset terhadap semua field yang tertera pada program 6. Input type button back untuk mengalihkan kepada halaman sebelumnya

145 Materi Gambar Manage Materi Keterangan : 1. Input type button insert yang berguna untuk melakukan input data materi yang baru 2. Merupakan combo box yang digunakan untuk menjadi filterisasi dalam pencarian di point (3) 3. Input type textbox beserta button untuk melakukan pencarian terhadap data materi sesuai dengan filterisasi yang dilakukan pada point (2) 4. Table yang terdiri dari beberapa field yang berisi informasi mengenai materi( nama, nama file materi, waktu upload deskripsi, ukuran file dan tipe file) dan manage materi ( update / delete ) 5. Merupakan halaman atau paging dari data materi

146 Insert Materi Gambar Insert Materi Keterangan : 1. Combo box untuk memilih mata pelajaran yang akan diisi dengan materi 2. Combo box untuk memilih kelas yang sesuai dengan materi 3. Combo box untuk memilih jurusan yang sesuai dengan materi 4. Input type textbox untuk memberikan penamaan terhadap materi 5. Input type textbox untuk memberikan deskripsi tentang materi 6. Input type file untuk mengambil file yang akan dijadikan materi 7. Input type button submit yang digunakan untuk menyimpan materi yang sudah di-input 8. Input type button reset untuk melakukan reset terhadap semua field yang tertera pada program 9. Input type button back untuk mengalihkan kepada halaman sebelumnya

147 Update Materi Gambar Update Materi Keterangan : 1. Merupakan label yang mendefinisikan mata pelajaran, kelas dan jurusan yang dimana materi akan diubah 2. Input type textbox untuk merubah nama materi 3. Input type textbox untuk merubah deskripsi mengenai materi 4. Input type file yang digunakan untuk merubah file materi menjadi baru dari sebelumnya 5. Input type button submit untuk melakukan validasi perubahan terhadap materi 6. Input type button back untuk mengalihkan kehalaman sebelumnya

148 Jadwal Gambar Jadwal Keterangan : 1. Combo box yang berisi pilihan-pilihan yang menjadi filterisasi saat akan melakukan pencarian jadwal pada point (2) 2. Input type textbox beserta button untuk melakukan pencarian terhadap jadwal 3. Kolom dari table jadwal yang bernama Kelas 4. Kolom dari table jadwal yang bernama Jurusan 5. Kolom dari table jadwal yang bernama Ruang 6. Button untuk dapat melihat jadwal yang terpilih 7. Button untuk dapat mengubah jadwal yang terpilih 8. Button untuk dapat menghapus jadwal yang terpilih 9. Input type button insert yang berguna untuk melakukan input data jadwal yang baru 10. Merupakan halaman atau paging dari data jadwal

149 Insert Jadwal ( Checking ) Gambar Insert Jadwal ( Checking ) Keterangan : 1. Combo box untuk memilih kelas yang akan dimasukan jadwal 2. Combo box untuk memilih jurusan dari kelas yang akan dimasukan jadwal 3. Combo box untuk memilih ruangan dari kelas serta jurusan yang akan dimasukan jadwal 4. Input type button untuk memulai input jadwal terhadap kelas, jurusan, dan ruang yang sudah terpilih 5. Input type button back untuk mengalihkan kepada halaman sebelumnya

150 Insert Jadwal ( Finalize ) Gambar Insert Jadwal ( Finalize ) Keterangan : 1. Label yang mendefinisikan kelas, jurusan dan ruang yang akan dimasukan jadwal 2. Combo box untuk mengisi jadwal perharinya ( senin, selasa, rabu, kamis, jumat) dan perjamnya ( ) dengan mata pelajaran. Terdapat juga jadwal yang sudah mutlak seperti waktu upacara dan istirahat 3. Input type button submit untuk menyimpan jadwal yang sudah dimasukan 4. Input type button back untuk mengalihkan kehalaman sebelumnya

151 Update Jadwal Gambar Update Jadwal Keterangan : 1. Label yang mendefinisikan kelas, jurusan dan ruang yang akan dimasukan jadwal yang akan diubah dengan yang baru 2. Combo box untuk mengubah jadwal perharinya ( senin, selasa, rabu, kamis, jumat) dan perjamnya ( ) dengan mata pelajaran. Terdapat juga jadwal yang sudah mutlak seperti waktu upacara dan istirahat yang tidak bisa diubah 3. Input type button submit untuk menyimpan jadwal baru yang sudah dimasukan 4. Input type button back untuk mengalihkan kehalaman sebelumnya

152 Mata Pelajaran Gambar Manage Mata Pelajaran Keterangan : 1. Input type textbox beserta button yang dapat memasukan mata pelajaran yang baru 2. Input type textbox beserta button untuk melakukan pencarian mata pelajaran yang tertera pada program 3. Kolom dari table mata pelajaran yang bernama mata pelajaran serta baris berisikan nama mata pelajaran 4. Button untuk menghapus mata pelajaran yang terpilih 5. Button untuk melakukan update atau perubahan terhadap mata pelajaran terpilih, akan muncul suatu pop-up pada point (6) yang akan meminta user memasukan data yang baru. 6. Merupakan pop-up yang meminta user memasukan data kelas yang baru 7. Merupakan halaman atau paging dari data mata pelajaran

153 Manage Kelas ( Kelas ) Gambar Manage Kelas ( Kelas ) Keterangan : 1. Input type textbox beserta button yang dapat memasukan data kelas yang baru 2. Input type textbox beserta button untuk melakukan pencarian kelas yang tertera pada program 3. Kolom dari table kelas yang bernama kelas serta baris berisikan nama kelas 4. Button untuk menghapus kelas yang terpilih 5. Button untuk melakukan update atau perubahan terhadap kelas terpilih, akan muncul suatu pop-up pada point (6) yang akan meminta user memasukan data yang baru. 6. Merupakan pop-up yang meminta user memasukan data kelas yang baru 7. Merupakan halaman atau paging dari data kelas

154 Manage Kelas ( Jurusan ) Gambar Manage Kelas ( Jurusan ) Keterangan : 1. Input type textbox beserta button yang dapat memasukan data jurusan yang baru 2. Input type textbox beserta button untuk melakukan pencarian jurusan yang tertera pada program 3. Kolom dari table jurusan yang bernama jurusan serta baris berisikan nama jurusan 4. Button untuk menghapus jurusan yang terpilih 5. Button untuk melakukan update atau perubahan terhadap jurusan terpilih, akan muncul suatu pop-up pada point (6) yang akan meminta user memasukan data jurusan yang baru. 6. Merupakan pop-up yang meminta user memasukan data jurusan yang baru 7. Merupakan halaman atau paging dari data jurusan

155 Manage Kelas ( Ruang ) Gambar Manage Kelas ( Ruang ) Keterangan : 1. Input type textbox beserta button yang dapat memasukan data ruang yang baru 2. Input type textbox beserta button untuk melakukan pencarian ruang yang tertera pada program 3. Kolom dari table ruang yang bernama ruang serta baris berisikan nama ruang 4. Button untuk menghapus ruang yang terpilih 5. Button untuk melakukan update atau perubahan terhadap ruang terpilih, akan muncul suatu pop-up pada point (6) yang akan meminta user memasukan data ruang yang baru. 6. Merupakan pop-up yang meminta user memasukan data ruang yang baru 7. Merupakan halaman atau paging dari data ruang

156 Ganti Password Gambar Ganti Password Admin Keterangan : 1. Input type textbox yang digunakan untuk mengisi password lama 2. Input type textbox yang digunakan untuk mengisi password baru 3. Input type textbox yang digunakan untuk konfirmasi ulang password baru 4. Input type button submit untuk melakukan validasi ganti password

157 Manage Event Gambar Manage Event Keterangan : 1. Merupakan kolom gambar yang berisi gambar event 2. Merupakan kolom tanggal post yang berisi tanggal terjadinya aktifitas post event 3. Merupakan kolom nama file yang berisi nama file 4. Button delete yang berguna untuk menghapus event yang terpilih 5. Input type file yang berguna untuk mengambil file yang diperlukan 6. Input type button submit yang berguna untuk menyimpan event yang terbaru setelah point (5) dilakukan 7. Merupakan halaman atau paging dari data event 8. Input type button back yang berguna untuk mengalihkan kehalaman sebelumnya

158 Insert Pengumuman Gambar Insert Pengumuman Keterangan : 1. Input type textbox yang digunakan untuk mengisi judul dari pengumuman 2. Input type textbox yang digunakan untuk mengisi isi dari pengumuman 3. Input type file yang digunakan untuk memberikan file lampiran untuk pengumuman 4. Input type button submit yang digunakan untuk menyimpang pengumuman 5. Input type button back yang digunakan untuk mengalihkan kehalaman sebelumnya

159 Update Pengumuman Gambar Update Pengumuman Keterangan : 1. Input type textbox yang digunakan untuk mengisi judul dari pengumuman yang akan diubah 2. Input type textbox yang digunakan untuk mengisi isi dari pengumuman yang akan diubah 3. Input type file yang digunakan untuk memberikan file lampiran untuk pengumuman yang akan diubah 4. Input type button submit yang digunakan untuk menyimpang pengumuman yang sudah dirubah 5. Input type button back yang digunakan untuk mengalihkan kehalaman sebelumnya

160 User Interface Guru 1. Beranda Guru Gambar Beranda Guru Keterangan : 1. Beranda, panel yang mengalihkan kepada halaman beranda 2. Kelas, panel yang mengalihkan kepada halaman kelas 3. Soal, panel yang mengalihkan kepada halaman soal 4. Tugas, panel yang mengalihkan kepada halaman tugas 5. Nilai, panel yang mengalihkan kepada halaman nilai 6. Jadwal, panel yang mengalihkan kepada halaman jadwal 7. Data Diri, panel yang mengalihkan kepada halaman ganti data diri 8. Ganti Password, panel yang mengalihkan kepada halaman ganti password 9. Merupakan isi atau content dari pengumuman 10. Merupakan halaman atau paging dari pengumuman 11. Merupakan jquery picture slider yang menjadi display dari event

161 Kelas Gambar Kelas Keterangan : 1. Link yang akan mengalihkan kehalaman materi sesuai dengan mata pelajaran yang terpilih 3. View Materi Gambar View Materi Keterangan : 1. Merupakan kolom nama materi yang berisi nama materi dari pelajaran yang terpilih 2. Merupakan kolom ukurang file yang berisi daya atau ukuran file materi

162 Merupakan kolom tipe file yang berisi tipe dari file materi 4. Merupakan kolom deskripsi yang berisi deskripsi mengenai materi 5. Merupakan kolom download yang berguna untuk mengunggah file materi 6. Merupakan kolom materi support yang berisi materi tambahan yang dapat ditambahkan oleh guru pada point (7) 7. Merupakan kolom link support yang berguna untuk memberi materi tambahan 8. Button delete yang berguna untuk menghapus materi 9. Button edit yang berguna untuk melakukan perubahan atau update materi 10. Merupakan halaman atau paging dari data materi 11. Input type button back yang berguna untuk mengalihkan kehalaman sebelumnya 4. Insert Materi Support Gambar Insert Materi Support Keterangan : 1. Label yang mendefinisikan nama materi, mata pelajaran dan kelas yang terpilih 2. Input type textbox yang berguna untuk memasukan link materi tambahan

163 Input type file yang berguna untuk mengambil file menjadi lampiran dalam materi support 4. Input type button submit yang berguna untuk menyimpan materi support yang sudah diisi 5. Input type button back yang berguna untuk mengalihkan ke halaman sebelumnya 5. Edit Materi Support Gambar Edit Materi Support Keterangan : 1. Label yang mendefinisikan nama materi, mata pelajaran dan kelas yang terpilih yang akan diubah 2. Input type textbox yang berguna untuk memasukan link materi tambahan yang akan diubah 3. Input type file yang berguna untuk mengambil file menjadi lampiran dalam materi support yang akan diubah 4. Input type button submit yang berguna untuk menyimpan materi support yang sudah diisi yang sudah diubah

164 5. Input type button back yang berguna untuk mengalihkan ke halaman sebelumnya Manage Soal Gambar Manage Soal Keterangan : 1. Input type button Upload Soal yang berguna untuk meng-upload soal 2. Input type textbox beserta button yang digunakan untuk mencari soal 3. Kolom bernama Judul Soal yang berisi soal 4. Kolom keterangan yang berisi perincian keterangan dari soal 5. Kolom Tanggal Upload yang berisi tanggal jelas saat dilakukanya proses upload 6. Kolom Kelas yang berisi kelas yang berhubungan dengan soal 7. Kolom Jurusan yang berisi jurusan yang berhubungan dengan soal 8. Kolom Ruang yang berisi ruangan dari kelas serta jurusan yang berhubungan dengan soal 9. Button untuk melakukan edit soal 10. Button untuk download soal 11. Button untuk melakukan delete soal

165 Merupakan halaman atau paging dari data soal 7. Upload Soal Gambar Upload Soal Keterangan : 1. Input type textbox yang berguna untuk memberi nama terhadap judul soal 2. Combo box yang terdiri dari kelas yang tersedia untuk diberikan soal 3. Input type textbox yang berguna untuk memberikan keterangan seputar soal 4. Input type file yang berguna untuk mengambil file tertentu untuk menjadi lampiran pada soal 5. Input type button submit yang berguna untuk menyimpan dan langsung melakukan upload soal 6. Input type button reset yang berguna untuk melakukan reset terhadap semua field yang tertera pada program 7. Input type button back berguna untuk mengalihkan kepada halaman sebelumnya

166 Edit Soal Gambar Edit Soal Keterangan : 1. Label yang mendefinisikan nama judul soal, kelas dan kelas yang jurusan yang terkait dengan soal 2. Input type textbox yang berguna untuk memasukan keterangan soal tambahan yang akan diubah 3. Input type file yang berguna untuk mengambil file menjadi lampiran dalam soal yang akan diubah 4. Input type button submit yang berguna untuk menyimpan soal yang sudah diubah 5. Input type button back yang berguna untuk mengalihkan ke halaman sebelumnya

167 Tugas Gambar Tugas Keterangan : 1. Combo box yang berisi pilihan soal yang sudah dikumpulkan oleh siswa 2. Kolom No. Induk yang berisi nomor induk siswa 3. Kolom Nama Siswa yang berisi informasi berupa nama siswa 4. Kolom Tanggal Upload yang berisi waktu upload tugas yang dilakukan oleh siswa 5. Kolom Pesan yang berisi catatan kecil yang dibuat oleh siswa untuk dapat dibaca oleh guru 6. Kolom Manage dengan button download yang berguna untuk dapat mengunggah tugas siswa 7. Kolom Manage dengan button delete yang berguna untuk dapat menghapus tugas siswa

168 Nilai Gambar Nilai Keterangan : 1. Combo box serta button yang berguna untuk memilih kelas untuk mengetahui nilai siswa di dalam kelas tersebut 2. Kolom No. Induk siswa yang berisi informasi nomor induk siswa 3. Kolom Nama Siswa yang berisi informasi mengenai nama siswa 4. Kolom Ulangan Harian yang berisi informasi mengenai nilai ulangan harian beserta nilai remedial 5. Kolom Tugas yang berisi informasi mengenai nilai tugas 6. Kolom UTS yang berisi informasi mengenai nilai UTS beserta nilai remedial UTS 7. Kolom UAS yang berisi informasi mengenai nilai UAS beserta nilai remedial UAS

169 Insert Nilai Gambar Insert Nilai Keterangan : 1. Label yang mendefinisikan nomor induk siswa yang bersangkutan terhadap nilai yang akan dimasukan 2. Label yang mendefinisikan nama siswa yang bersangkutan terhadap nilai yang akan dimasukan 3. Label yang mendefinisikan mata pelajaran yang bersangkutan terhadap nilai yang akan dimasukan 4. Input type textbox untuk memasukan nilai ulangan harian 5. Input type textbox untuk memasukan nilai remedial ulangan harian 6. Input type textbox untuk memasukan nilai tugas 7. Input type textbox untuk memasukan nilai UTS dan nilai remedial UTS 8. Input type textbox untuk memasukan nilai UAS dan nilai remedial UAS 9. Input type button submit untuk menyimpan nilai yang sudah dimasukan 10. Input type button back yang berguna untuk mengalihkan kehalaman sebelumnya

170 Edit Nilai Gambar Edit Nilai Keterangan : 1. Label yang mendefinisikan nomor induk siswa yang bersangkutan terhadap nilai yang akan dimasukan 2. Label yang mendefinisikan nama siswa yang bersangkutan terhadap nilai yang akan dimasukan 3. Label yang mendefinisikan mata pelajaran yang bersangkutan terhadap nilai yang akan dimasukan 4. Input type textbox untuk memasukan nilai ulangan harian yang akan diubah 5. Input type textbox untuk memasukan nilai remedial ulangan harian yang akan diubah 6. Input type textbox untuk memasukan nilai tugas yang akan diubah 7. Input type textbox untuk memasukan nilai UTS dan nilai remedial UTS yang akan diubah 8. Input type textbox untuk memasukan nilai UAS dan nilai remedial UAS yang akan diubah 9. Input type button submit untuk menyimpan nilai yang sudah dimasukan yang akan diubah

171 10. Input type button back yang berguna untuk mengalihkan kehalaman sebelumnya yang akan diubah Jadwal Gambar Jadwal Keterangan : 1. Kolom Jam yang berisi waktu mengajar guru 2. Kolom hari senin yang berisi jadwal mengajar guru 3. Kolom hari selasa yang berisi jadwal mengajar guru 4. Kolom hari rabu yang berisi jadwal mengajar guru 5. Kolom hari kamis yang berisi jadwal mengajar guru 6. Kolom hari jumat yang berisi jadwal mengajar guru

172 Data Diri Gambar Data Diri Guru Keterangan : 1. Foto dari guru 2. Label yang mendefinisikan nama, ulang tahun, agama, , nomor handphone, dan alamat guru 3. Input type button update yang berguna untuk melakukan perubahan data diri atau update data diri

173 Edit Data Diri Guru Gambar Edit Data Diri Guru Keterangan : 1. Input type textbox yang berguna untuk memasukan guru yang akan diubah 2. Input type textbox yang berguna untuk memasukan nomor telepon guru yang akan diubah 3. Input type textbox yang berguna untuk memasukan nomor handphone guru yang akan diubah 4. Input type textbox yang berguna untuk memasukan alamat guru yang akan diubah 5. Input type file yang berguna untuk memasukan file foto guru yang akan diubah 6. Input type button submit yang berguna untuk menyimpan perubahan yang sudah dilakukan 7. Input type button back yang berguna untuk mengalihkan kehalaman sebelumnya

174 Ganti Password Gambar Ganti Password Guru Keterangan : 1 Input type textbox yang digunakan untuk mengisi password lama 2 Input type textbox yang digunakan untuk mengisi password baru 3 Input type textbox yang digunakan untuk konfirmasi ulang password baru 4 Input type button submit untuk melakukan validasi ganti password

175 User Interface Siswa 1. Beranda Siswa Gambar Beranda Siswa Keterangan : 1 Beranda, panel yang mengalihkan kepada halaman beranda 2 Kelas, panel yang mengalihkan kepada halaman kelas 3 Tugas, panel yang mengalihkan kepada halaman tugas 4 Nilai, panel yang mengalihkan kepada halaman nilai 5 Jadwal, panel yang mengalihkan kepada halaman jadwal 6 Data Diri, panel yang mengalihkan kepada halaman ganti data diri 7 Ganti Password, panel yang mengalihkan kepada halaman ganti password 8 Merupakan isi atau content dari pengumuman 9 Merupakan halaman atau paging dari pengumuman 10 Merupakan jquery picture slider yang menjadi display dari event

176 Kelas Siswa Gambar Kelas Siswa Keterangan : 1. Link yang akan mengalihkan kehalaman materi sesuai dengan mata pelajaran yang terpilih 3. View Materi Siswa Gambar View Materi Siswa Keterangan : 1. Kolom Nama Materi yang berisi informasi mengenai nama materi 2. Kolom Ukuran File yang berisi informasi mengenai ukuran file materi 3. Kolom Tipe File yang berisi informasi mengenai tipe dari file materi

177 Kolom deskripsi yang berisi informasi mengenai deskripsi materi 5. Kolom Download yang berisi button download untuk dapat mengunggah file materi yang tersedia 6. Kolom Materi Support yang berisi materi tambahan pembelajaran 7. Kolom Link Support yang berisi link menuju materi tambahan 4. Tugas Gambar Tugas Siswa Keterangan : 1. Input type textbox beserta button untuk melakukan pencarian terhadap tugas yang tertera pada program 2. Kolom Tanggal post yang berisi informasi mengenai tanggal tugas yang di-post oleh guru 3. Kolom Judul Soal yang berisi informasi mengenai judul soal dari tugas 4. Kolom Mata Pelajaran yang berisi informasi mengenai mata pelajaran yang bersangkutan dengan tugas 5. Kolom Keterangan yang berisi informasi berupa keterangan dari tugas

178 Kolom Tanggal Upload yang berisi informasi berupa waktu upload yang dilakukan oleh siswa 7. Kolom Manage download yang berisi button download untuk mendapatkan file tugas 8. Kolom Manage upload yang berisi button upload untuk melakukan upload tugas 5. Upload Tugas Gambar Upload Tugas Keterangan : 1. Input type textbox yang sudah langsung menampilkan judul soal sesuai dengan pilihan tugas 2. Input type textbox yang sudah langsung menampilkan mata pelajaran sesuai dengan pilihan tugas 3. Input type textbox yang berguna untuk memberikan pesan 4. Input type file yang berguna untuk mengambil file yang akan menjadi lampiran tugas saat proses upload 5. Input type button submit yang berguna untuk menyimpan dan melakukan upload tugas yang terlampir dari point (4)

179 6. Input type button back berguna untuk mengalihkan ke halaman sebelumnya Update Tugas Gambar Update Tugas Keterangan : 1. Input type textbox yang sudah langsung menampilkan judul soal sesuai dengan pilihan tugas yang akan diubah 2. Input type textbox yang sudah langsung menampilkan mata pelajaran sesuai dengan pilihan tugas yang akan diubah 3. Input type textbox yang berguna untuk memberikan pesan yang akan diubah 4. Input type file yang berguna untuk mengambil file yang akan diubah menjadi lampiran tugas baru saat proses upload 5. Input type button submit yang berguna untuk menyimpan dan melakukan upload tugas yang terlampir dari point (4) 6. Input type button back berguna untuk mengalihkan ke halaman sebelumnya

180 Nilai Siswa Gambar Nilai Siswa Keterangan : 1. Kolom Mata Pelajaran yang berisi informasi mengenai mata pelajaran siswa 2. Kolom Ulangan harian yang berisi informasi mengenai nilai ulangan harian serta nilai ulangan remedial 3. Kolom Tugas yang berisi informasi mengenai nilai tugas siswa 4. Kolom UTS yang berisi informasi mengenai nilai UTS siswa serta nilai remedial UTS 5. Kolom UAS yang berisi informasi mengenai nilai UAS siswa serta nilai remedial UAS

181 Jadwal Gambar Jadwal Siswa Keterangan : 1. Kolom Jam yang berisi informasi mengenai jam pelajaran selama satu hari 2. Kolom Hari senin yang berisi informasi jadwal pelajaran yang harus dihadiri oleh siswa 3. Kolom Hari selasa yang berisi informasi jadwal pelajaran yang harus dihadiri oleh siswa 4. Kolom Hari rabu yang berisi informasi jadwal pelajaran yang harus dihadiri oleh siswa 5. Kolom Hari kamis yang berisi informasi jadwal pelajaran yang harus dihadiri oleh siswa 6. Kolom Hari jumat yang berisi informasi jadwal pelajaran yang harus dihadiri oleh siswa

182 Data Diri Siswa Gambar Data Diri Siswa Keterangan : 1. Foto dari siswa 2. Label yang mendefinisikan nama, ulang tahun, agama, , nomor handphone, nomor telepon dan alamat siswa 3. Input type button update yang berguna untuk melakukan perubahan data diri atau update data diri

183 Edit Data Diri Siswa Keterangan : Gambar Edit Data Diri Siswa 1. Input type textbox yang berguna untuk memasukan siswa yang akan diubah 2. Input type textbox yang berguna untuk memasukan nomor telepon siswa yang akan diubah 3. Input type textbox yang berguna untuk memasukan nomor handphone siswa yang akan diubah 4. Input type textbox yang berguna untuk memasukan alamat siswa yang akan diubah 5. Input type file yang berguna untuk memasukan file foto siswa yang akan diubah 6. Input type button submit yang berguna untuk menyimpan perubahan yang sudah dilakukan 7. Input type button back yang berguna untuk mengalihkan kehalaman sebelumnya

184 Ganti Password Siswa Gambar Ganti Password Siswa Keterangan : 1. Input type textbox yang digunakan untuk mengisi password lama 2. Input type textbox yang digunakan untuk mengisi password baru 3. Input type textbox yang digunakan untuk konfirmasi ulang password baru 4. Input type button submit untuk melakukan validasi ganti password

185 User Interface Orang Tua 1. Beranda Orang Tua Gambar Beranda Orang Tua Keterangan : 1. Beranda, panel yang mengalihkan kepada halaman beranda 2. Nilai, panel yang mengalihkan kepada halaman nilai 3. Jadwal, panel yang mengalihkan kepada halaman jadwal 4. Data Diri, panel yang mengalihkan kepada halaman data diri 5. Ganti Password, panel yang mengalihkan kepada halaman ganti password 6. Merupakan isi atau content dari pengumuman 7. Merupakan halaman atau paging dari pengumuman 8. Merupakan jquery picture slider yang menjadi display dari event