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

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 : 4.1.1 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, elearning

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

73

4.1.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. 4.1.2.1 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

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,

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

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.

77

4.1.2.2 Activity Diagram Sistem yang Diusulkan

Gambar

4.1

Activity

Diagaram

Sistem

Yang

diusulkan

78

4.1.2.3 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 Admin membuat Adanya bahan materi periode tahun ajaran baru yang dimulai Admin melakukan Materi yang upload bahan sudah selesai materi diinput Admin mendata Adanya tahun mata pelajaran ajaran baru yang akan dimulai Admin mendata Adanya tahun siswa dan orang ajaran baru tua Admin guru

mendata Adanya perubahan struktur kerja

Admin jurusan

mendata Adanya pergantian tahun ajaran dan memasuki tahun ajaran baru mendata Adanya pergantian tahun ajaran dan memasuki tahun ajaran baru

Admin kelas

Source Usecase Kepala Membuat Sekolah bahan materi

Response Materi

Destination Siswa, Guru

Kepala Mendata Sekolah bahan materi Kepala Mendata Sekolah mata pelajaran

Materi yang terupload Mata pelajaran

Siswa, Guru

Siswa dan orang tua Guru

Siswa, Guru

Mendata Data siswa dan siswa orang tua

Wali kelas

Mendata guru

Data guru

Wakil kepala sekolah , Kepala sekolah

Mendata jurusan

Data jurusan

Kepala Sekolah, Wakil kepala sekolah Kepala sekolah, wakil kepala sekolah, guru, siswa


Mendata kelas

Data kelas

Kepala sekolah, wakil kepala sekolah, guru,siswa

79

Admin ruang

mendata Adanya pergantian tahun ajaran dan memasuki tahun ajaran baru Admin mendata Adanya jadwal harian pergantian tahun ajaran dan memasukin tahun ajaran baru Admin Adanya mengupload informasi pengumuman akademik yang sudah selesai dibuat Admin mengganti Penggantian password password secara berkala


Mendata ruang

Data ruangan

Kepala sekolah, wakil kepala sekolah, guru, siswa

Wakil kepala sekolah

Mendata jadwal harian

Jadwal harian

Siswa, guru

Kepala sekolah

Mendata pengumu man

Pengumu man

Siswa, guru, orang tua

Admin

Mengganti Password

Revisi Password

Admin

Guru melihat Adanya Admin jadwal pelajaran jadwal pembelajaran yang harus diikuti Guru melakukan Adanya Admin download materi kegiatan pembelajaran yang berlangsung

Melihat jadwal pelajaran

Jadwal Pelajaran

Guru

Download materi

Materi

Siswa

Guru melakukan Adanya Guru upload materi materi support tambahan yang dibutuhkan siswa Guru melakukan Waktu yang Guru upload soal ditentukan guru , dan pada saat akhir materi

Mendata materi support

Materi support

Siswa

Mendata Soal

Soal

Siswa

Guru melakukan Adanya tugas Siswa download tugas yang sudah diupload oleh siswa

Download tugas siswa

Tugas siswa

Guru

80

Guru memeriksa Adanya tugas tugas siswa yang sudah diupload oleh siswa Guru memeriksa Adanya ulangan siswa kegiatan ulangan yang sudah selesai Guru melakukan Proses input nilai siswa pengecekan dan penilaian tugas yang sudah selesai Guru melakukan Karena edit nilai adanya perubahan nilai atau kesalahan dalam menginput Guru mengubah Adanya data data diri diri guru yang berubah Guru mengganti Penggantian password password secara berkala Guru melihat Adanya pengumuman informasi akademik yang tersedia untuk dilihat Siswa melihat Adanya jadwal pelajaran jadwal pembelajaran yang harus diikuti Siswa melakukan Adanya download materi materi yang harus dipelajari dan petunjuk guru Siswa melakukan Adanya soal download soal yang diupload oleh guru Siswa melakukan Adanya tugas upload tugas yang selesai dikerjakan Siswa melihat nilai Adanya nilai tugas/ulangan/ujia yang sudah n diupload oleh

Siswa

Memeriks File tugas Guru a tugas siswa siswa

Siswa

Memeriks Ulangan a ulangan siswa siswa

Guru

Guru

Melakuka Nilai n input siswa nilai siswa

Siswa

Guru

Melakuka n edit nilai

Revisi Nilai

Siswa

Guru

Mengubah data diri

Revisi data diri

Guru

Guru

Mengganti password

Revisi password

Guru

Admin

Melihat pengumu man

Pengumu man

Guru

Admin

Melihat jadwal pelajaran

Jadwal pelajaran

Siswa

Admin

Download materi

Materi

Siswa

Guru

Download Soal

Soal

Siswa

Siswa

Upload tugas

Tugas

Guru

Guru

Melihat Nilai nilai Tugas / Ulangan/

Siswa

81

guru Siswa mengubah Adanya data diri pergantian informasi mengenai data diri siswa Siswa mengubah Adanya password pergantian password secara berkala Siswa melihat Adanya pengumuman informasi akademik yang tersedia untuk dilihat Orang Tua melihat Adanya jadwal pelajaran keinginan orang tua untuk ikut serta dalam kegiatan siswa Orang Melihat Adanya nilai nilai Tugas/ yang sudah Ulangan/ Ujian diupload oleh guru Orang Mengubah Password

Ujian Mengubah data diri

Revisi data diri

Siswa

Siswa

Mengubah password

Revisi password

Siswa

Admin

Melihat Pengumu man

Pengumu man

Siswa

Admin

Melihat Jadwal Pelajaran

Jadwal Pelajaran

Orang Tua

Guru

Melihat nilai Tugas/ Ulangan/ Ujian Mengubah Password

Nilai

Orang Tua

Revisi Password

Orang Tua

Melihat pengumu man

Pengumu man

Orang Tua

Siswa

Tua Adanya Orang pergantian Tua password secara berkala Orang tua melihat Adanya Admin pengumuman informasi akademik yang tersedia untuk dilihat

82

4.1.2.4 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 4.1.2.4.1 Use Case Diagram Admin

Gambar 4.2 Use Case Diagram Admin

83

4.1.2.4.2 Use Case Diagram Guru

Gambar 4.3 Use Case Diagram Guru

84

4.1.2.4.3 Use Case Diagram Siswa

Gambar 4.4 Use Case Diagram Siswa

85

4.1.2.4.4 Use Case Diagram Orang Tua

Gambar 4.5 Use Case Diagram Orang Tua

86

4.1.2.5 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. 4.1.2.5.1 Use Case Description Admin Tabel 4.2 Use Case Description untuk Membuat Bahan Materi

Tabel 4.3 Use Case Description untuk Mendata Bahan Materi

87

Tabel 4.4 Use Case Description untuk Mendata Mata Pelajaran

Tabel 4.5 Use Case Description untuk Mendata Siswa dan Orang Tua

88

Tabel 4.6 Use Case Description untuk Mendata Guru

Tabel 4.7 Use Case Description untuk Mendata Jurusan

89

Tabel 4.8 Use Case Description untuk Mendata Kelas

Tabel 4.9 Use Case Description untuk Mendata Ruang

90

Tabel 4.10 Use Case Description untuk Mendata Jadwal Harian

Tabel 4.11 Use Case Description untuk Mendata Pengumuman

91

Tabel 4.12 Use Case Description untuk Mengganti Password

4.1.2.5.2 Use Case Description Guru Tabel 4.13 Use Case Description untuk Melihat Jadwal Pelajaran

Tabel 4.14 Use Case Description untuk Download Materi

92

Tabel 4.15 Use Case Description untuk Mendata Materi Support

Tabel 4.16 Use Case Description untuk Mendata Soal

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

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

95

Tabel 4.23 Use Case Description untuk Mengganti Password

Tabel 4.24 Use Case Description untuk Melihat Pengumuman

4.1.2.5.3 Use Case Description Siswa Tabel 4.25 Use Case Description untuk Melihat Jadwal Pelajaran

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

97

Tabel 4.29 Use Case Description untuk Melihat Nilai Tugas/Ulangan/Ujian


Tabel 4.31 Use Case Description untuk Mengubah Password

98


4.1.2.5.4 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

99

Tabel 4.35 Use Case Description untuk Mengubah Password



100

4.1.2.6 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. 4.1.2.6.1 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)

101

3. 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)

102

5. 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)

103

7. 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)

104

9. 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)

105

11. 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)

106

13. 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)

107

16. 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)

108

19. 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)

109

22. 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)

110

24. 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)

111

26. 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)

112

28. Mengganti Password

Gambar 4.33 System Sequence Diagram Mengganti Password 1.1.2.5.1 System Sequence Diagram Guru

1.


Gambar 4.34 System Sequence Diagram Melihat Jadwal Pelajaran

2.

Download Materi

Gambar 4.35 System Sequence Diagram Mendownload Materi

113

3.

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)

114

5.

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)

115

7.

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)

116

9.

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

117

11. 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

118


Gambar 4.46 System Sequence Diagram Mengganti Password

14. Melihat Pengumuman

Gambar 4.47 System Sequence Diagram Melihat Pengumuman

119

14.1.2.5.1 System Sequence Diagram Siswa

1.



2.

Download Materi

Gambar 4.49 System Sequence Diagram Mendownload Materi

3.

Download Soal

Gambar 4.50 System Sequence Diagram Mendownload Soal

120

4.

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


121

7.

Mengubah Password

Gambar 4.54 System Sequence Diagram Mengubah Password

8.

Melihat Pengumuman

Gambar 4.55 System Sequence Diagram Melihat Pengumuman 14.1.2.5.2 System Sequence Diagram Orang Tua

1.



122

2.


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


123

5.

Melihat Pengumuman

Gambar 4.60 System Sequence Diagram Melihat Pengumuman

124

4.1.3 Problem Domain Model

Problem domain model adalah suatu model yang rancang untuk mengidentifikasi kebutuhan sistem dan hubungan antara class yang satu dengan yang lain. 4.1.3.1 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

125

4.1.3.2 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, Email, No_Handphone, Tempat_Lahir, Tanggal_Lahir, Alamat, Password, Gambar, Status

Gambar 4.62 Classes Guru

2. Guru Detil Atribut : No_Induk_Guru, ID_Mata_Pelajaran

Gambar 4.63 Classes Guru Detil

126

3. Siswa Atribut : No_Induk_Siswa, Username_Siswa, Nama_Lengkap, Jenis_Kelamin, Tempat_Lahir, Tanggal_Lahir, No_Telepon, No_Handphone, Email, Agama, Alamat, Password, Gambar, Status

Gambar 4.64 Classes Siswa

4. Siswa Detil Atribut : No_Induk_Siswa, ID_Kelas, ID_Ruang, ID_Jurusan

Gambar 4.65 Classes Siswa Detil

127

5. 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

Gambar 4.66 Classes Orang Tua

6. Kelas Atribut : ID_Kelas, Nama_Kelas

Gambar 4.67 Classes Kelas

7. Jurusan Atribut : ID_jurusan, Nama_Jurusan

Gambar 4.68 Classes Jurusan

8. Ruang Atribut : ID_Ruang, Nama_Ruang

Gambar 4.69 Classes Ruang

128

9. 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

129

12. 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

Gambar 4.74 Classes Tugas

14. Jadwal Atribut : ID_Jadwal, ID_Kelas, ID_Jurusan, ID_Ruang

Gambar 4.75 Classes Jadwal

130

15. Jadwal Detil Atribut : ID_Jadwal, No_Induk_Guru, ID_Mata_Pelajaran, Hari, Jam

Gambar 4.76 Classes Jadwal Detil

16. Nilai 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

131

18. Pengumuman Atribut : ID_Pengumuman, Judul_Pengumuman, File_Lampiran, Tanggal_Pengumuman, Isi_Pengumuman

Gambar 4.79 Classes Pengumuman 4.1.3.3. Statechart

Statechart adalah suatu diagram yang dibuat untuk menggambarkan proses demi proses dari tiap class yang terdapat di problem domain model. 1.

Siswa

Gambar 4.80 Statechart Siswa

2.

Guru

Gambar 4.81 Statechart Guru

3.

Orang Tua

Gambar 4.82 Statechart Orang Tua

132

4.

Tugas

Gambar 4.83 Statechart Tugas

5.

Nilai

Gambar 4.84 Statechart Nilai

6.

Pengumuman

Gambar 4.85 Statechart Pengumuman

7.

Soal

Gambar 4.86 Statechart Soal

8.

Ruang

Gambar 4.87 Statechart Ruang

9.

Kelas

Gambar 4.88 Statechart Kelas

133

10. Jurusan

Gambar 4.89 Statechart Jurusan

11. Mata Pelajaran

Gambar 4.90 Statechart Mata Pelajaran

12. Materi

Gambar 4.91 Statechart Materi

13. Materi Support

Gambar 4.92 Statechart Materi Support

14. Jadwal

Gambar 4.93 Statechart Jadwal

134

4.2 Perancangan Sistem Informasi 4.2.1 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. 4.2.2 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. 4.2.3 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.

135

4.2.3.1 Multilayer Design System Sequence Diagram Admin

1.

Mendata Bahan Materi (Add)

Gambar 4.94 Multilayer Sequence Diagram Mendata Bahan Materi (Add)

136

2.

Mendata Bahan Materi (Edit)

Gambar 4.95 Multilayer Sequence Diagram Mendata Bahan Materi (Edit)

137

3.

Mendata Bahan Materi (Delete)

Gambar 4.96 Multilayer Sequence Diagram Mendata Bahan Materi (Delete)

138

4.

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)

139

6.

Mendata Mata Pelajaran (Delete)

Gambar 4.99 Multilayer Sequence Diagram Mendata Mata Pelajaran (Delete)

140

7.

Mendata Siswa dan Orang Tua (Add)

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

141

8.

Mendata Siswa dan Orang Tua (Edit)

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

142

9.

Mendata Siswa dan Orang Tua (Delete)

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

143


Gambar 4.103 Multilayer Sequence Diagram Mendata Guru (Add)

144


Gambar 4.104 Multilayer Sequence Diagram Mendata Guru (Edit)

145


Gambar 4.105 Multilayer Sequence Diagram Mendata Guru (Delete)

146


Gambar 4.106 Multilayer Sequence Diagram Mendata Jurusan (Add)


Gambar 4.107 Multilayer Sequence Diagram Mendata Jurusan (Edit)

147


Gambar 4.108 Multilayer Sequence Diagram Mendata Jurusan (Delete)


Gambar 4.109 Multilayer Sequence Diagram Mendata Ruang (Add)

148


Gambar 4.110 Multilayer Sequence Diagram Mendata Ruang (Edit)


Gambar 4.111 Multilayer Sequence Diagram Mendata Ruang (Delete)

149


Gambar 4.112 Multilayer Sequence Diagram Mendata Kelas (Add)


Gambar 4.113 Multilayer Sequence Diagram Mendata Kelas (Edit)

150


Gambar 4.114 Multilayer Sequence Diagram Mendata Kelas (Delete)

151


Gambar 4.115 Multilayer Sequence Diagram Mendata Jadwal Pelajaran (Add)

152


Gambar 4.116 Multilayer Sequence Diagram Mendata Jadwal Pelajaran (Edit)

153


Gambar 4.117 Multilayer Sequence Diagram Mendata Jadwal Pelajaran (Delete)

154


Gambar 4.118 Multilayer Sequence Diagram Mendata Pengumuman (Add)

155


Gambar 4.119 Multilayer Sequence Diagram Mendata Pengumuman (Edit)

156


Gambar 4.120 Multilayer Sequence Diagram Mendata Pengumuman (Delete)


Gambar 4.121 Multilayer Sequence Diagram Menganti Password

157

4.2.3.2 Multilayer Design System Sequence Diagram Guru

1.


Gambar 4.122 Multilayer Sequence Diagram Melihat Jadwal Pelajaran

158

2.

Download materi

Gambar 4.123 Multilayer Sequence Diagram Download Materi

159

3.

Mendata Materi Support (Add)

Gambar 4.124 Multilayer Sequence Diagram Mendata Materi Support (Add)

160

4.

Mendata Materi Support (Edit)

Gambar 4.125 Multilayer Sequence Diagram Mendata Materi Support (Edit)

161

5.

Mendata Materi Support (Delete)

Gambar 4.126 Multilayer Sequence Diagram Mendata Materi Support (Delete)

162

6.

Mendata Soal (Add)

Gambar 4.127 Multilayer Sequence Diagram Mendata Soal (Add)

163

7.

Mendata Soal (Edit)

Gambar 4.128 Multilayer Sequence Diagram Mendata Soal (Edit)

164

8.


Gambar 4.129 Multilayer Sequence Diagram Mendata Soal (Delete)

165

9.


Gambar 4.130 Multilayer Sequence Diagram Mendownload Tugas Siswa

166


Gambar 4.131 Multilayer Sequence Diagram Melakukan Input Nilai Siswa

167


Gambar 4.132 Multilayer Sequence Diagram Melakukan Edit Nilai

168


Gambar 4.133 Multilayer Sequence Diagram Mengubah Data Diri

169


Gambar 4.134 Multilayer Sequence Diagram Mengganti Password


Gambar 4.135 Multilayer Sequence Diagram Melihat Pengumuman

170

4.2.3.3 Multilayer Design System Sequence Diagram Siswa

1.



171

2.

Download materi

Gambar 4.137 Multilayer Sequence Diagram Download Materi

3.

Download soal

Gambar 4.138 Multilayer Sequence Diagram Download Soal

172

4.

Upload Tugas

Gambar 4.139 Multilayer Sequence Diagram Upload Tugas

173

5.


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

174

6.

Mengubah Data Diri


175

7.

Mengubah Password

Gambar 4.142 Multilayer Sequence Diagram Mengubah Password

8.

Melihat Pengumuman


176

4.2.3.4 Multilayer Design System Sequence Diagram Orang Tua

1. Melihat Jadwal Pelajaran


177

2. Melihat Nilai Tugas / Ulangan / Ujian

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

178



179

4. Mengubah Password

Gambar 4.147 Multilayer Sequence Diagram Mengubah Password



180

4.2.4 Communication Diagram

Berikut adalah communication diagram yang memperlihatkan komunikasi antara aktor yang terdapat pada sekolah SMA Santa Patricia dengan sistem elearning yang berasal dari urutan sekuensial (sequence). 4.2.4.1 Communication Diagram Admin

1.

Mendata Bahan Materi (Add)

Gambar 4.149 Communication Diagram Mendata Bahan Materi (Add)

2.

Mendata Bahan Materi (Edit)

Gambar 4.150 Communication Diagram Mendata Bahan Materi (Edit)

3.

Mendata Bahan Materi (Delete)

Gambar 4.151 Communication Diagram Mendata Bahan Materi (Delete)

181

4.

Mendata Mata Pelajaran (Add)

Gambar 4.152 Communication Diagram Mendata Mata Pelajaran (Add)

5.

Mendata Mata Pelajaran (Edit)

Gambar 4.153 Communication Diagram Mendata Mata Pelajaran (Edit)

6.

Mendata Mata Pelajaran (Delete)

Gambar 4.154 Communication Diagram Mendata Mata Pelajaran (Delete)

182

7.

Mendata Siswa dan Orang Tua (Add)

Gambar 4.155 Communication Diagram Mendata Siswa dan Orang Tua (Add)

8.

Mendata Siswa dan Orang Tua (Edit)

Gambar 4.156 Communication Diagram Mendata Siswa dan Orang Tua (Edit)

9.

Mendata Siswa dan Orang Tua (Delete)

183

Gambar 4.157 Communication Diagram Mendata Siswa dan Orang Tua (Delete)


Gambar 4.158 Communication Diagram Mendata Guru (Add)


Gambar 4.159 Communication Diagram Mendata Guru (Edit)


Gambar 4.160 Communication Diagram Mendata Guru (Delete)

184


Gambar 4.161 Communication Diagram Mendata Jurusan (Add)


Gambar 4.162 Communication Diagram Mendata Jurusan (Edit)


Gambar 4.163 Communication Diagram Mendata Jurusan (Delete)


Gambar 4.164 Communication Diagram Mendata Ruang (Add)

185


Gambar 4.165 Communication Diagram Mendata Ruang (Edit)


Gambar 4.166 Communication Diagram Mendata Ruang (Delete)


Gambar 4.167 Communication Diagram Mendata Kelas (Add)


Gambar 4.168 Communication Diagram Mendata Kelas (Edit)

186


Gambar 4.169 Communication Diagram Mendata Kelas (Delete)


Gambar 4.170 Communication Diagram Mendata Jadwal Pelajaran (Add)


Gambar 4.171 Communication Diagram Mendata Jadwal Pelajaran (Edit)

187


Gambar 4.172 Communication Diagram Mendata Jadwal Pelajaran (Delete)


Gambar 4.173 Communication Diagram Mendata Pengumuman (Add)


Gambar 4.174 Communication Diagram Mendata Pengumuman (Edit)


Gambar 4.175 Communication Diagram Mendata Pengumuman (Delete)

188


Gambar 4.176 Communication Diagram Menganti Password 4.2.4.2 Communication Diagram Guru

1.


Gambar 4.177 Communication Diagram Melihat Jadwal Pelajaran

2.

Download materi

Gambar 4.178 Communication Diagram Download Materi

3.

Mendata Materi Support (Add)

Gambar 4.179 Communication Diagram Mendata Materi Support (Add)

189

4.

Mendata Materi Support (Edit)

Gambar 4.180 Communication Diagram Mendata Materi Support (Edit)

5.

Mendata Materi Support (Delete)

Gambar 4.181 Communication Diagram Mendata Materi Support (Delete)

6.

Mendata Soal (Add)

Gambar 4.182 Communication Diagram Mendata Soal (Add)

7.

Mendata Soal (Edit)

Gambar 4.183 Communication Diagram Mendata Soal (Edit)

190

8.


Gambar 4.184 Communication Diagram Mendata Soal (Delete)

9.


Gambar 4.185 Communication Diagram Mendownload Tugas Siswa


Gambar 4.186 Communication Diagram Melakukan Input Nilai Siswa

191


Gambar 4.187 Communication Diagram Melakukan Edit Nilai


Gambar 4.188 Communication Diagram Mengubah Data Diri


Gambar 4.189 Communication Diagram Mengganti Password


Gambar 4.190 Communication Diagram Melihat Pengumuman

192

4.2.4.3 Communication Diagram Siswa

1. Melihat Jadwal Pelajaran


2. Download materi

Gambar 4.192 Communication Diagram Download Materi

3. Download soal

Gambar 4.193 Communication Diagram Download Soal

4. Upload Tugas

Gambar 4.194 Communication Diagram Upload Tugas

193

5. Melihat Nilai Tugas / Ulangan / Ujian

Gambar 4.195 Communication Diagram Melihat Nilai Tugas / Ulangan / Ujian



7. Mengubah Password

Gambar 4.197 Communication Diagram Mengubah Password



194

4.2.4.4 Communication Diagram Orang Tua

1.



2.


Gambar 4.200 Communication Diagram Melihat Nilai Tugas / Ulangan / Ujian

3.

Mengubah Password

Gambar 4.201 Communication Diagram Mengubah Password

195

4.

Mengubah Data Diri


5.

Melihat Pengumuman


196

4.2.5

Update Design Model Class Diagram

197

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

Gambar 4.205 Package Diagram

198

4.2.7 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_ Nama_ Siswa Lengkap

Jenis_ Kelamin

Tempat_ Tanggal_ Lahir Lahir

No_ No_ Email Agama Alamat Password Gambar Status Telepon Handphone

Tabel 4.39 Persistent Guru No_Induk Username Nama_ _ Guru _ Guru Lengkap

No_ Handphon e

Agama

Status _ Diri

Jenis_ Kelamin

Email

Tempat_ Tanggal_ Alamat Password Gambar Status Lahir Lahir

199

Tabel 4.40 Persistent Orang Tua ID_Orang_ No_Induk_ Nama_ Alamat Username Password Tua Siswa Orang_Tua

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

Status

200

Tabel 4.45 Persistent Mata Pelajaran ID_Mata_Pelajaran Nama_Mata_Pelajaran

Tabel 4.46 Persistent Materi ID_ Materi

No_Mata_ Pelajaran

Deskripsi

ID_ Kelas

File_Size

ID_ Jurusan

Nama_ Materi

Nama_ File_Materi

Waktu_ Upload

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_ Tanggal_Upload_ Siswa Tugas

Pesan_ Tugas

File_ Tugas

201

Tabel 4.49 Persistent Soal ID_ Soal

ID_Mata_ Pelajaran

Keterangan_Soal

No_Induk_ Guru

File_Soal

ID_ Kelas

ID_ Jurusan

ID_ Ruang

Tanggal_Upload

Tabel 4.50 Persistent Jadwal ID_Jadwal

ID_Kelas

ID_Jurusan

ID_Ruang

Tabel 4.51 Persistent Pengumuman ID_Pengumuman Judul

File_ Tanggal_ Lampiran Pengumuman

Isi_ Pengumuman

Judul_ Soal

202

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

Gambar 4.206 Hierarchy Program

203

4.2.9 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 4.207 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

204

4.2.9.1 User Interface Admin 1. Beranda Admin

Gambar 4.208 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

205

11. 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 4.209 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)

206

3.

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 4.210 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

207

6.

Input type textbox untuk melakukan pengisian email 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

208

4. Update Data Guru

Gambar 4.211 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 email guru yang akan diubah

209

7.

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

210

5. Siswa

Gambar 4.212 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

211

6. Insert Data Siswa dan Orang Tua

Gambar 4.213 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 email siswa

7.

Input type textbox untuk melakukan pengisian nomor handphone siswa

212

8.

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

213

7. Update data Siswa

Gambar 4.214 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 email siswa yang akan diubah

214

7.

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

215

8. Update Data Orang Tua

Gambar 4.215 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

216

9. Materi

Gambar 4.216 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

217

10. Insert Materi

Gambar 4.217 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.


218

11. Update Materi

Gambar 4.218 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

219

12. Jadwal

Gambar 4.219 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

220

13. Insert Jadwal ( Checking )

Gambar 4.220 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.


221

14. Insert Jadwal ( Finalize )

Gambar 4.221 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 (07-15 – 15.20) 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.


222

15. Update Jadwal

Gambar 4.222 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 (07-15 – 15.20) 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.


223

16. Mata Pelajaran

Gambar 4.223 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

224

17. Manage Kelas ( Kelas )

Gambar 4.224 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

225

18. Manage Kelas ( Jurusan )

Gambar 4.225 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

226

19. Manage Kelas ( Ruang )

Gambar 4.226 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

227

20. Ganti Password

Gambar 4.227 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

228

21. Manage Event

Gambar 4.228 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

229

22. Insert Pengumuman

Gambar 4.229 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

230

23. Update Pengumuman

Gambar 4.230 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

231

4.2.9.2 User Interface Guru 1. Beranda Guru

Gambar 4.231 Beranda Guru Keterangan : 1.


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.


7.

“Data Diri”, panel yang mengalihkan kepada halaman ganti data diri

8.


9.

Merupakan isi atau content dari pengumuman

10. Merupakan halaman atau paging dari pengumuman 11. Merupakan jquery picture slider yang menjadi display dari event

232

2. Kelas

Gambar 4.232 Kelas Keterangan : 1.

Link yang akan mengalihkan kehalaman materi sesuai dengan mata pelajaran yang terpilih

3. View Materi

Gambar 4.233 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

233

3.

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 4.234 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

234

3.

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 4.235 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

235

5.


6. Manage Soal

Gambar 4.236 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

236

12. Merupakan halaman atau paging dari data soal

7. Upload Soal

Gambar 4.237 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

237

8. Edit Soal

Gambar 4.238 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.


238

9. Tugas

Gambar 4.239 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

239

10. Nilai

Gambar 4.240 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

240

11. Insert Nilai

Gambar 4.241 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

241

12. Edit Nilai

Gambar 4.242 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

242

10. Input type button “back” yang berguna untuk mengalihkan kehalaman sebelumnya yang akan diubah

13. Jadwal

Gambar 4.243 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

243

14. Data Diri

Gambar 4.244 Data Diri Guru Keterangan : 1.

Foto dari guru

2.

Label yang mendefinisikan nama, ulang tahun, agama, email, nomor handphone, dan alamat guru

3.

Input type button update yang berguna untuk melakukan perubahan data diri atau update data diri

244

15. Edit Data Diri Guru

Gambar 4.245 Edit Data Diri Guru Keterangan : 1.

Input type textbox yang berguna untuk memasukan email 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.


245

16. Ganti Password

Gambar 4.246 Ganti Password Guru Keterangan : 1


2


3


4


246

4.2.8.3 User Interface Siswa 1. Beranda Siswa

Gambar 4.247 Beranda Siswa Keterangan : 1


2

“Kelas”, panel yang mengalihkan kepada halaman kelas

3

“Tugas”, panel yang mengalihkan kepada halaman tugas

4


5


6

“Data Diri”, panel yang mengalihkan kepada halaman ganti data diri

7


8


9

Merupakan halaman atau paging dari pengumuman

10 Merupakan jquery picture slider yang menjadi display dari event

247

2. Kelas Siswa

Gambar 4.248 Kelas Siswa Keterangan : 1.

Link yang akan mengalihkan kehalaman materi sesuai dengan mata pelajaran yang terpilih

3. View Materi Siswa

Gambar 4.249 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

248

4.

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 4.250 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

249

6.

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 4.251 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)

250

6.

Input type button “back” berguna untuk mengalihkan ke halaman sebelumnya

6. Update Tugas

Gambar 4.252 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

251

7. Nilai Siswa

Gambar 4.253 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

252

8. Jadwal

Gambar 4.254 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

253

9. Data Diri Siswa

Gambar 4.255 Data Diri Siswa Keterangan : 1.

Foto dari siswa

2.

Label yang mendefinisikan nama, ulang tahun, agama, email, nomor handphone, nomor telepon dan alamat siswa

3.

Input type button update yang berguna untuk melakukan perubahan data diri atau update data diri

254

10. Edit Data Diri Siswa

Gambar 4.256 Edit Data Diri Siswa Keterangan : 1.

Input type textbox yang berguna untuk memasukan email 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.


255

11. Ganti Password Siswa

Gambar 4.257 Ganti Password Siswa Keterangan : 1.


2.


3.


4.


256

4.2.8.4

User Interface Orang Tua

1. Beranda Orang Tua

Gambar 4.258 Beranda Orang Tua Keterangan : 1.


2.


3.


4.

“Data Diri”, panel yang mengalihkan kepada halaman data diri

5.


6.


7.

Merupakan halaman atau paging dari pengumuman

8.

Merupakan jquery picture slider yang menjadi display dari event

257

2. Nilai ( View Orang Tua )

Gambar 4.259 Nilai ( View Orang Tua ) Keterangan : 1.

Kolom Mata Pelajaran yang berisi informasi mengenai mata pelajaran siswa yang ditampilkan untuk orang tua

2.

Kolom Ulangan harian yang berisi informasi mengenai nilai ulangan harian serta nilai ulangan remedial yang ditampilkan untuk orang tua

3.

Kolom Tugas yang berisi informasi mengenai nilai tugas siswa yang ditampilkan untuk orang tua

4.

Kolom UTS yang berisi informasi mengenai nilai UTS siswa serta nilai remedial UTS yang ditampilkan untuk orang tua

5.

Kolom UAS yang berisi informasi mengenai nilai UAS siswa serta nilai remedial UAS yang ditampilkan untuk orang tua

258

3. Jadwal ( View Orang Tua )

Gambar 4.260 Jadwal ( View Orang Tua ) 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

259

4. Data Diri Orang Tua

Gambar 4.261 Data Diri Orang Tua Keterangan : 1.

Label yang mendefinisikan nama, nomor handphone dan alamat dari orang tua

2.

Input type button update untuk dapat mengubah data diri atau melakukan update data diri

5. Edit Data Diri Orang Tua

Gambar 4.262 Edit Data Diri Orang Tua Keterangan : 1.

Input type textbox untuk memasukan nomor handphone yang ingin diubah oleh orang tua

2.

Input type textbox untuk memasukan alamat yang ingin diubah oleh orang tua

3.

Input type button submit untuk menyimpan perubahan yang sudah dilakukan oleh orang tua

260

4.


6. Ganti Password Orang Tua

Gambar 4.263 Ganti Password Orang Tua Keterangan : 1.


2.


3.


4.


261

4.2.9 Software Requirement Software requirement adalah sebuah properti yang harus diperlihatkan atau ditunjukan oleh software untuk menyelesaikan suatu permsalahan yang ada. Merupakan kombinasi rumit dari kebutuhan berbagai orang di bermacam – macam tingkat organisasi dan lingkungan di mana perangkat lunak akan dioperasikan. 4.2.9.1 Equipment Equipment yang dibutuhkan dalam penerapan e-learning ini adalah sebagai berikut : 1.

Komputer yang memiliki spesifikasi

•

Motherboard Intel Pentium IV Core II Duo atau yang lebih tinggi

•

RAM ( random access memory ) dengan setidaknya 1000 mb/ 1 gb atau lebih

•

VGA yang cukup berperan penting dengan setidaknya 512 mb atau lebih

2.

Monitor yang memiliki spesifikasi

•

Berukuran 15inch atau lebih

•

Sebuah Proyektor untuk memancarkan materi atau hal-hal lain yang berbau digital

3.

Sound System seperti microphone dan external electronic speaker

4.2.9.2 System Software Sistem Software yang dibutuhkan dalam penerapan e-learning ini adalah sebagai berikut : 1.

Operating System setidaknya Microsoft Windows XP Home SP2

262

2.

Personal Email Address yang digunakan untuk bisa berkomunikasi dengan siswa

3

Microsoft Office seperti ( word, excel, powerpoint )

4.

Adobe Acrobat yang berguna untuk membuka file dengan format .pdf

5.

Plug-ins seperti flash, quicktime, windows media player, real player dan lain-lain

4.2.9.3 Design Language Design Language yang dipakai dalam menerapkan e-learning pada sekolah SMA Santa Patricia adalah sebagai berikut : 1.

HTML – Hyper text markup language

2.

PHP – Hypertext Preprocessing

3.

jQuery

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

Recommend Documents