72
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, 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.
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
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,
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
berdasarkan nilai siswa tersebut. Setelah itu wali kelas memberikan rapot siswa kepada orang tua siswa yang bersangkutan dan rapot tersebut diterima oleh orang tua.
4.1.2.2 Activity Diagram Sistem yang Diusulkan
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 Source Usecase Response Destination Admin membuat bahan materi Adanya periode tahun ajaran baru yang dimulai Kepala Sekolah Membuat bahan materi
Materi Siswa, Guru
Admin melakukan upload bahan materi Materi yang sudah selesai diinput Kepala Sekolah Mendata bahan materi Materi yang terupload Siswa, Guru Admin mendata mata pelajaran Adanya tahun ajaran baru yang akan dimulai Kepala Sekolah Mendata mata pelajaran Mata pelajaran Siswa, Guru Admin mendata siswa dan orang tua Adanya tahun ajaran baru Siswa dan orang tua Mendata siswa dan orang tua Data siswa Wali kelas Admin mendata guru Adanya perubahan struktur kerja Guru Mendata guru
Data guru Kepala Sekolah, Wakil kepala sekolah Admin mendata jurusan Adanya pergantian tahun ajaran dan memasuki tahun ajaran baru Wakil kepala sekolah , Kepala sekolah Mendata jurusan Data jurusan Kepala sekolah, wakil kepala sekolah, guru, siswa Admin mendata kelas Adanya pergantian tahun ajaran dan memasuki tahun ajaran baru Wakil kepala sekolah , Kepala sekolah Mendata kelas Data kelas Kepala sekolah, wakil kepala sekolah, guru,siswa
Admin mendata ruang Adanya pergantian tahun ajaran dan memasuki tahun ajaran baru Wakil kepala sekolah , Kepala sekolah Mendata ruang Data ruangan Kepala sekolah, wakil kepala sekolah, guru, siswa Admin mendata jadwal harian Adanya pergantian tahun ajaran dan memasukin tahun ajaran baru Wakil kepala sekolah Mendata jadwal harian Jadwal harian Siswa, guru Admin mengupload pengumuman Adanya informasi akademik yang sudah selesai dibuat Kepala sekolah Mendata pengumu man Pengumu man Siswa, guru, orang tua Admin mengganti password Penggantian password secara berkala Admin Mengganti Password Revisi Password Admin Guru melihat jadwal pelajaran Adanya jadwal pembelajaran yang harus diikuti Admin Melihat jadwal pelajaran Jadwal Pelajaran Guru Guru melakukan download materi Adanya kegiatan pembelajaran yang berlangsung Admin Download materi Materi Siswa Guru melakukan upload materi support Adanya materi tambahan yang dibutuhkan siswa Guru Mendata materi support Materi support Siswa Guru melakukan upload soal Waktu yang ditentukan guru , dan pada saat akhir materi Guru Mendata Soal Soal Siswa Guru melakukan download tugas Adanya tugas yang sudah diupload oleh siswa Siswa Download tugas siswa Tugas siswa Guru
Guru memeriksa tugas siswa Adanya tugas yang sudah diupload oleh siswa Siswa Memeriks a tugas siswa File tugas siswa Guru Guru memeriksa ulangan siswa Adanya kegiatan ulangan yang sudah selesai Siswa Memeriks a ulangan siswa Ulangan siswa Guru Guru melakukan input nilai siswa
Proses pengecekan dan penilaian tugas yang sudah selesai Guru Melakuka n input nilai siswa Nilai siswa Siswa Guru melakukan edit nilai Karena adanya perubahan nilai atau kesalahan dalam menginput Guru Melakuka n edit nilai Revisi Nilai Siswa Guru mengubah data diri Adanya data diri guru yang berubah Guru Mengubah data diri Revisi data diri Guru Guru mengganti password Penggantian password secara berkala Guru Mengganti password Revisi password Guru Guru melihat pengumuman Adanya informasi akademik yang tersedia untuk dilihat Admin Melihat pengumu man Pengumu man Guru Siswa melihat jadwal pelajaran Adanya jadwal pembelajaran yang harus diikuti Admin Melihat jadwal pelajaran Jadwal pelajaran Siswa Siswa melakukan download materi Adanya materi yang harus dipelajari dan petunjuk guru Admin Download materi Materi Siswa Siswa melakukan download soal Adanya soal yang diupload oleh guru Guru Download Soal Soal Siswa Siswa melakukan upload tugas Adanya tugas yang selesai dikerjakan Siswa Upload tugas Tugas Guru
Siswa melihat nilai tugas/ulangan/ujia n Adanya nilai yang sudah diupload oleh Guru Melihat nilai Tugas / Ulangan/ Nilai Siswa
guru Ujian Siswa mengubah data diri Adanya pergantian informasi mengenai data diri siswa Siswa Mengubah data diri Revisi data diri Siswa Siswa mengubah password Adanya pergantian password secara berkala Siswa Mengubah password Revisi password Siswa Siswa melihat pengumuman Adanya informasi akademik yang tersedia untuk dilihat Admin Melihat Pengumu man Pengumu man Siswa
Orang Tua melihat jadwal pelajaran Adanya keinginan orang tua untuk ikut serta dalam kegiatan siswa Admin Melihat Jadwal Pelajaran Jadwal Pelajaran Orang Tua Orang Melihat nilai Tugas/ Ulangan/ Ujian Adanya nilai yang sudah diupload oleh guru Guru Melihat nilai Tugas/ Ulangan/ Ujian
Nilai Orang Tua
Orang Tua Mengubah Password Adanya pergantian password secara berkala Orang Tua Mengubah Password Revisi Password Orang Tua
Orang tua melihat pengumuman Adanya informasi akademik yang tersedia untuk dilihat Admin Melihat pengumu man Pengumu man Orang Tua
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
4.1.2.4.2 Use Case Diagram Guru
4.1.2.4.3 Use Case Diagram Siswa
4.1.2.4.4 Use Case Diagram Orang Tua
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.4 Use Case Description untuk Mendata Mata Pelajaran
Tabel 4.6 Use Case Description untuk Mendata Guru
Tabel 4.8 Use Case Description untuk Mendata Kelas
Tabel 4.10 Use Case Description untuk Mendata Jadwal Harian
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.15 Use Case Description untuk Mendata Materi Support
Tabel 4.17 Use Case Description
Tabel 4.18 Use Case Description
Tabel 4.19 Use Case Description
Use Case Description untuk Download Tugas Siswa
Use Case Description untuk Memeriksa Tugas Siswa
Use Case Description untuk Memeriksa Ulangan Siswa Tugas Siswa
untuk Memeriksa Tugas Siswa
Tabel 4.20 Use Case Description untuk Menginput Nilai Siswa
Tabel 4.21 Use Case Description untuk Mengedit Nilai Siswa
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.26 Use Case Description untuk Download Materi
Tabel 4.27 Use Case Description untuk Download Soal
Tabel 4.29 Use Case Description untuk Melihat Nilai Tugas/Ulangan/Ujian
Tabel 4.30 Use Case Description untuk Mengubah Data Diri
Tabel 4.32 Use Case Description untuk Melihat Pengumuman
4.1.2.5.4 Use Case Description Orang Tua
Tabel 4.33 Use Case Description untuk Melihat Jadwal Pelajaran
Tabel 4.35 Use Case Description untuk Mengubah Password
Tabel 4.36 Use Case Description untuk Mengubah Data Diri
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)
3. Mendata Bahan Materi (Delete)
Gambar 4.8 System Sequence Diagram Mendata Bahan Materi (Delete)
4. Mendata Mata Pelajaran (Add)
5. Mendata Mata Pelajaran (Edit)
Gambar 4.10 System Sequence Diagram Mendata Mata Pelajaran (Edit)
6. Mendata Mata Pelajaran (Delete)
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)
9. Mendata Siswa dan Orang tua (Delete)
Gambar 4.14 System Sequence Diagram Mendata Siswa dan Orang Tua (Delete)
10. Mendata Guru (Add)
11. Mendata Guru (Edit)
Gambar 4.16 System Sequence Diagram Mendata Guru (Edit)
12. Mendata Guru (Delete)
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)
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)
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)
22. Mendata Jadwal Pelajaran (Add)
Gambar 4.27 System Sequence Diagram Mendata Jadwal Pelajaran (Add)
23. Mendata Jadwal Pelajaran (Edit)
24. Mendata Jadwal Pelajaran (Delete)
Gambar 4.29 System Sequence Diagram Mendata Jadwal Pelajaran(Delete)
25. Mendata Pengumuman (Add)
26. Mendata Pengumuman (Edit)
Gambar 4.31 System Sequence Diagram Mendata Pengumuman (Edit)
27. Mendata Pengumuman (Delete)
28. Mengganti Password
Gambar 4.33 System Sequence Diagram Mengganti Password
1.1.2.5.1 System Sequence Diagram Guru 1. Melihat Jadwal Pelajaran
Gambar 4.34 System Sequence Diagram Melihat Jadwal Pelajaran
2. Download Materi
3. Mandata Materi Support (Add)
Gambar 4.36 System Sequence Diagram Mendata Materi Support (Add)
4. Mandata Materi Support (Edit)
5. Mandata Materi Support (Delete)
Gambar 4.38 System Sequence Diagram Mendata Materi Support (Delete)
6. Mendata Soal (Add)
7. Mendata Soal (Edit)
Gambar 4.40 System Sequence Diagram Mendata Soal (Edit)
8. Mendata Soal (Delete)
9. Download Tugas Siswa
Gambar 4.42 System Sequence Diagram Mendownload Tugas Siswa
10. Melakukan Input Nilai Siswa
11. Melakukan Edit Nilai
Gambar 4.44 System Sequence Diagram Edit Nilai Siswa
12. Mengubah Data Diri
13. Mengganti Password
Gambar 4.46 System Sequence Diagram Mengganti Password
14. Melihat Pengumuman
14.1.2.5.1System 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
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
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.2System Sequence Diagram Orang Tua 1. Melihat Jadwal Pelajaran
2. 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
5. Melihat Pengumuman
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.
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
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
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
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
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
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
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
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
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
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.
4.2.3.1 Multilayer Design System Sequence Diagram Admin 1. Mendata Bahan Materi (Add)
2. Mendata Bahan Materi (Edit)
3. Mendata Bahan Materi (Delete)
4. Mendata Mata Pelajaran (Add)
Gambar 4.97 Multilayer Sequence Diagram Mendata Mata Pelajaran (Add) 5. Mendata Mata Pelajaran (Edit)
6. Mendata Mata Pelajaran (Delete)
7. Mendata Siswa dan Orang Tua (Add)
Gambar 4.100 Multilayer Sequence Diagram Mendata Siswa dan Orang Tua (Add)
8. Mendata Siswa dan Orang Tua (Edit)
Gambar 4.101 Multilayer Sequence Diagram Mendata Siswa dan Orang Tua (Edit)
9. Mendata Siswa dan Orang Tua (Delete)
Gambar 4.102 Multilayer Sequence Diagram Mendata Siswa dan Orang Tua (Delete)
10. Mendata Guru (Add)
11. Mendata Guru (Edit)
12. Mendata Guru (Delete)
13. Mendata Jurusan (Add)
Gambar 4.106 Multilayer Sequence Diagram Mendata Jurusan (Add) 14. Mendata Jurusan (Edit)
15. Mendata Jurusan (Delete)
Gambar 4.108 Multilayer Sequence Diagram Mendata Jurusan (Delete) 16. Mendata Ruang (Add)
17. Mendata Ruang (Edit)
Gambar 4.110 Multilayer Sequence Diagram Mendata Ruang (Edit) 18. Mendata Ruang (Delete)
19. Mendata Kelas (Add)
Gambar 4.112 Multilayer Sequence Diagram Mendata Kelas (Add) 20. Mendata Kelas (Edit)
21. Mendata Kelas (Delete)
22. Mendata Jadwal Pelajaran (Add)
23. Mendata Jadwal Pelajaran (Edit)
24. Mendata Jadwal Pelajaran (Delete)
25. Mendata Pengumuman (Add)
26. Mendata Pengumuman (Edit)
27. Mendata Pengumuman (Delete)
Gambar 4.120 Multilayer Sequence Diagram Mendata Pengumuman (Delete) 28. Mengganti Password
4.2.3.2 Multilayer Design System Sequence Diagram Guru 1. Melihat Jadwal Pelajaran
2. Download materi
3. Mendata Materi Support (Add)
4. Mendata Materi Support (Edit)
5. Mendata Materi Support (Delete)
6. Mendata Soal (Add)
7. Mendata Soal (Edit)
8. Mendata Soal (Delete)
9. Download Tugas Siswa
10. Melakukan Input Nilai Siswa
11. Melakukan Edit Nilai
12. Mengubah Data Diri
13. Mengganti Password
Gambar 4.134 Multilayer Sequence Diagram Mengganti Password 14. Melihat Pengumuman
4.2.3.3 Multilayer Design System Sequence Diagram Siswa 1. Melihat Jadwal Pelajaran
2. Download materi
Gambar 4.137 Multilayer Sequence Diagram Download Materi 3. Download soal
4. Upload Tugas
5. Melihat Nilai Tugas / Ulangan / Ujian
Gambar 4.140 Multilayer Sequence Diagram Melihat Nilai Tugas / Ulangan / Ujian
6. Mengubah Data Diri
7. Mengubah Password
Gambar 4.142 Multilayer Sequence Diagram Mengubah Password 8. Melihat Pengumuman
4.2.3.4 Multilayer Design System Sequence Diagram Orang Tua 1. Melihat Jadwal Pelajaran
2. Melihat Nilai Tugas / Ulangan / Ujian
Gambar 4.145 Multilayer Sequence Diagram Melihat Nilai Tugas / Ulangan / Ujian
3. Mengubah Data Diri
4. Mengubah Password
Gambar 4.147 Multilayer Sequence Diagram Mengubah Password 5. Melihat Pengumuman
4.2.4 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).
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)
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)
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)
Gambar 4.157 Communication Diagram Mendata Siswa dan Orang Tua (Delete) 10. Mendata Guru (Add)
Gambar 4.158 Communication Diagram Mendata Guru (Add) 11. Mendata Guru (Edit)
Gambar 4.159 Communication Diagram Mendata Guru (Edit) 12. Mendata Guru (Delete)
13. Mendata Jurusan (Add)
Gambar 4.161 Communication Diagram Mendata Jurusan (Add) 14. Mendata Jurusan (Edit)
Gambar 4.162 Communication Diagram Mendata Jurusan (Edit) 15. Mendata Jurusan (Delete)
Gambar 4.163 Communication Diagram Mendata Jurusan (Delete) 16. Mendata Ruang (Add)
17. Mendata Ruang (Edit)
Gambar 4.165 Communication Diagram Mendata Ruang (Edit) 18. Mendata Ruang (Delete)
Gambar 4.166 Communication Diagram Mendata Ruang (Delete) 19. Mendata Kelas (Add)
Gambar 4.167 Communication Diagram Mendata Kelas (Add) 20. Mendata Kelas (Edit)
21. Mendata Kelas (Delete)
Gambar 4.169 Communication Diagram Mendata Kelas (Delete) 22. Mendata Jadwal Pelajaran (Add)
Gambar 4.170 Communication Diagram Mendata Jadwal Pelajaran (Add) 23. Mendata Jadwal Pelajaran (Edit)
24. Mendata Jadwal Pelajaran (Delete)
Gambar 4.172 Communication Diagram Mendata Jadwal Pelajaran (Delete) 25. Mendata Pengumuman (Add)
Gambar 4.173 Communication Diagram Mendata Pengumuman (Add) 26. Mendata Pengumuman (Edit)
Gambar 4.174 Communication Diagram Mendata Pengumuman (Edit) 27. Mendata Pengumuman (Delete)
28. Mengganti Password
Gambar 4.176 Communication Diagram Menganti Password 4.2.4.2 Communication Diagram Guru
1. Melihat Jadwal Pelajaran
Gambar 4.177 Communication Diagram Melihat Jadwal Pelajaran 2. Download materi
Gambar 4.178 Communication Diagram Download Materi 3. Mendata Materi Support (Add)
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)
8. Mendata Soal (Delete)
Gambar 4.184 Communication Diagram Mendata Soal (Delete) 9. Download Tugas Siswa
Gambar 4.185 Communication Diagram Mendownload Tugas Siswa 10. Melakukan Input Nilai Siswa
11. Melakukan Edit Nilai
Gambar 4.187 Communication Diagram Melakukan Edit Nilai 12. Mengubah Data Diri
Gambar 4.188 Communication Diagram Mengubah Data Diri 13. Mengganti Password
Gambar 4.189 Communication Diagram Mengganti Password 14. Melihat Pengumuman
4.2.4.3 Communication Diagram Siswa 1. Melihat Jadwal Pelajaran
Gambar 4.191 Communication Diagram 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
5. Melihat Nilai Tugas / Ulangan / Ujian
Gambar 4.195 Communication Diagram Melihat Nilai Tugas / Ulangan / Ujian 6. Mengubah Data Diri
Gambar 4.196 Communication Diagram Mengubah Data Diri 7. Mengubah Password
Gambar 4.197 Communication Diagram Mengubah Password 8. Melihat Pengumuman
4.2.4.4 Communication Diagram Orang Tua 1. Melihat Jadwal Pelajaran
Gambar 4.199 Communication Diagram Melihat Jadwal Pelajaran 2. Melihat Nilai Tugas / Ulangan / Ujian
Gambar 4.200 Communication Diagram Melihat Nilai Tugas / Ulangan / Ujian 3. Mengubah Password
4. Mengubah Data Diri
Gambar 4.202 Communication Diagram Mengubah Data Diri 5. Melihat Pengumuman
4.2.6 Package Diagram Berikut adalah domain layer dan
multilayer design sistem sequence diagram Package Diagram
Berikut adalah package diagram yang berisi tiga layer yaitu
dan data access layer yang didapatkan dari urutan sekuensial sistem sequence diagram.
Gambar 4.205 Package Diagram
yang berisi tiga layer yaitu view layer, an dari urutan sekuensial
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_ Siswa Nama_ Lengkap Jenis_ Kelamin Tempat_ Lahir Tanggal_ Lahir No_ Telepon No_ Handphone
Email Agama Alamat Password Gambar Status
Tabel 4.39 Persistent Guru No_Induk _ Guru Username _ Guru Nama_ Lengkap Agama Status _ Diri Jenis_ Kelamin Email No_ Handphon e Tempat_ Lahir Tanggal_ Lahir
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
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
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
4.2.8 Hierarchy Program
Hierarki website ini menggambarkan urutan atau hierarki dari website yang ada untuk website e-learning SMA Santa Patricia
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
4.2.9.1User 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
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)
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
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
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
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
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. 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
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
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
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
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
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 )
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
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
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
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
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. Input type button “back” untuk mengalihkan kehalaman sebelumnya
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. Input type button “back” untuk mengalihkan kehalaman sebelumnya
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
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
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
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
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
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
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
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
4.2.9.2User Interface Guru 1. Beranda Guru
Gambar 4.231 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
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
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
