78

BAB 4

PERANCANGAN SISTEM

Berikut adalah perancangan E- Learning pada STK 1 yang diusulkan dengan menggunakan

notasi UML dengan prinsip OOAD:

4.1 Class Diagram

Gambar 4.1 Class Diagram

79

Pada class diagram ini menggambarkan hubungan dari setiap class yang ada,

mulai dari user melakukan log in dan proses – proses yang di lakukan dalam sistem

dari notifikasi hingga pengerjaan tugas dan ujian.

4.2 Use Case Pelajar dan Guru

Gambar 4.2 Use Case Login and Profile Management Subsystem

Pada usecase ini murid dan guru melakukan kegiatan login, mengubah

password, profile serta logout.

80

Gambar 4.3 Use Case Update Status Subsystem

Pada usecase ini murid dan guru melakukan kegiatan update status.

Gambar 4.4 Use Case Forum Subsystem

Pada usecase ini murid dan guru melakukan kegiatan pada forum dengan

membuat ,menjawab dan melihat thread yang ada.

81

Gambar 4.5 Use Case Friendship Subsystem

Pada usecase ini murid dan guru dapat melihat profile lain dan menambahkan teman.

Gambar 4.6 Use Case Score Subsystem

Pada usecase ini menggambarkan murid dan guru dalam kegiatan melihat dan

memberi nilai.

82

Gambar 4.7 Use Case Class Subsystem

Pada usecase ini murid dan guru melakukan kegiatan di dalam sistem.

Gambar 4.8 Use Case Exam Subsystem

83

Pada usecase ini menggambarkan bahwa pelajar mengikuti ujian dan guru

mengupload ujian.

4.3 Use Case Admin

Gambar 4.9 Use Case Student Management Subsystem

Usecase ini menggambarkan admin dalam kegiatannya menambahkan,

mengubah, menghapus dan memasukan pelajar.

Gambar 4.10 Use Case Subject Management Subsystem

84

Usecase ini menggambarkan admin dalam menambahkan dan mengubah data

pelajaran.

4.4 Activity Diagram Pelajar dan Guru

Gambar 4.11 Activity Diagram Login

85

Dalam activity diagram diatas menggambarkan kegiatan interaksi user dengan

sistem, untuk melakukan login kedalam website.

Gambar 4.12 Activity Diagram Status

86

Dalam activity diagram diatas menggambarkan kegiatan interaksi user dengan

sistem, untuk melakukan comment pada status.

Gambar 4.13 Activity Diagram Forum

87

Dalam activity diagram diatas menggambarkan kegiatan interaksi user dengan

sistem, untuk membuat,melihat,dan menjawab thread forum.

Gambar 4.14 Activity Diagram Tugas

88

Dalam activity diagram diatas menggambarkan kegiatan interaksi guru dengan

sistem dan pelajar, untuk membuat,melihat,dan menjawab tugas.

Gambar 4.15 Activity Diagram Ujian

89

Dalam activity diagram diatas menggambarkan kegiatan interaksi guru dengan

sistem dan pelajar, untuk membuat,melihat,dan menjawab ujian.

4.5 Activity Diagram Admin

Gambar 4.16 Activity Diagram Manajemen Pelajar

90

Dalam activity diagram diatas menggambarkan kegiatan interaksi admin

dengan sistem, untuk menginput data – data pelajar.

Gambar 4.17 Activity Diagram Manajemen Pelajaran

91

Dalam activity diagram diatas menggambarkan kegiatan interaksi admin

dengan sistem, untuk menginput pelajaran - pelajaran.

Gambar 4.18 Activity Diagram Anggota Kelas

92

Dalam activity diagram diatas menggambarkan kegiatan interaksi admin

dengan sistem, untuk menambahkan dan menghapus anggota kelas.

4.6 Entity Relationship Diagram

Gambar 4.19 ERD

93

4.7 System Sequence Diagram Pelajar dan Guru

Dibawah ini adalah System Sequence Diagram pelajar dan untuk

perancangan E-Learning STK I.

Gambar 4.20 System Sequence Diagram Log In

Gambar 4.21 System Sequence Diagram Upload Tugas (Guru)

94

Gambar 4.22 System Sequence Diagram Upload Jawaban (Murid)

Gambar 4.23 System Sequence Diagram Update Status

95

Gambar 4.24 System Sequence Diagram Membuat Thread

Gambar 4.25 System Sequence Diagram Menjawab Thread

96

Gambar 4.26 System Sequence Diagram Upload Ujian

Gambar 4.27 System Sequence Diagram Mengikuti Ujian

97

4.8 System Sequence Diagram Admin

Di bawah ini adalah System Sequence Diagram Admin untuk perancangan E-

Learning STK I.

Gambar 4.28 System Sequence Diagram Tambah Pelajar

Gambar 4.29 System Sequence Diagram Edit Pelajar

98

Gambar 4.30 System Sequence Diagram Tambah Pelajaran

Gambar 4.31 System Sequence Diagram Edit Pelajaran

99

Gambar 4.32 System Sequence Diagram Tambah Anggota Kelas

Gambar 4.33 System Sequence Diagram Hapus Anggota Kelas

100

4.9 Sequence Diagram Pelajar dan Guru

Dibawah ini adalah Sequence Diagram pelajar dan guru untuk perancangan

E-Learning STK I.

Gambar 4.34 Sequence Diagram Log In

101

Gambar 4.35 Sequence Diagram Status

102

Gambar 4.36 Sequence Diagram Upload Jawaban Tugas

103

Gambar 4.37 Sequence Diagram Upload Tugas Untuk Guru

104

Gambar 4.38 Sequence Diagram Forum

105

Gambar 4.39 Sequence Diagram Ujian Untuk Guru

106

Gambar 4.40 Sequence Diagram Ujian Untuk Pelajar

107

4.10 Sequence Admin

Gambar 4.41 Sequence Diagram Management Pelajar Untuk Admin

108

Gambar 4.42 Sequence Diagram Management Pelajaran Untuk Admin

109

4.11 State Machine Diagram Guru dan Pelajar

Gambar 4.43 State Machine Diagram Upload Jawaban Pelajar

Gambar 4.44 State Machine Diagram Upload Tugas Guru

110

Gambar 4.45 State Machine Diagram Status

Gambar 4.46 State Machine Diagram Buat Thread Baru

Gambar 4.47 State Machine Diagram Jawab Thread

111

Gambar 4.48 State Machine Diagram Upload Ujian

Gambar 4.49 State Machine Diagram Ikut Ujian

112

Gambar 4.50 State Machine Diagram Tambah Pelajar Baru

4.12 State Machine Diagram Admin

Gambar 4.51 State Machine Diagram Edit Data Pelajar

113

Gambar 4.52 State Machine Diagram Tambah Pelajaran

Gambar 4.53 State Machine Diagram Edit Pelajaran

114

Gambar 4.54 State Machine Diagram Tambah Anggota Kelas

Gambar 4.55 State Machine Diagram Hapus Anggota Kelas

115

4. 13 User Interface

Berikut ini adalah rancangan user interface E-Learning berbasis Social

Media yang diusulkan :

1. Layar Utama (Halaman Login)

Gambar 4.56 Halaman Login

Halaman login muncul ketika user dan admin ingin menjalankan aplikasi.

Pada saat login ini username dan password akan divalidasi.

116

2. Halaman Home

Gambar 4.57 Halaman Home

Halaman ini adalah halaman home, pada halaman home pada website E-

Learning STK1 di hi siswa, guru/user dapat melakukan update status dan bisa juga

dapat melakukan like,comment pada status user lain nya. Serta user dapat

memposting video pada halaman home tersebut. Pada setiap halaman selalu terdapat

menu navigasi Home, Profile, Notifications, Message, Change Password, My class,

Forum, Exam dan Logout .

117

3. Halaman Profile

Gambar 4.58 Halaman Profile

Halaman ini adalah halaman profile, pada halaman profile ini terdapat data

diri user seperti Name, Birthday Date and Place, Gender, Address, Phone Number,

dan Religion. Selain itu, user dapat mengubah data diri yang ada pada profile user

tersebut apabila terdapat kesalahan di dalamnya. Fitur dalam profile, juga dimiliki

oleh pengajar dan admin.

118

4. Halaman My Class (Course)

Gambar 4.59 My Class (Course)

Pada halaman My Class (Course) ini menampilakan mata pelajaran dari user

yang sedang berjalan.

119

5. My Class (Schedule)

Gambar 4.60 My Class (Schedule)

Pada halaman My Class (Schedule) ini menampilakan kelas dan jadwal mata

pelajaran dari user yang sedang berjalan.

120

6. Password

Gambar 4.61 Password

Pada halaman password ini berfungsi untuk mengubahh password user. Dan

digunakan untuk mencegah terjadinya kejadian lupa password.

121

7. Chat

Gambar 4.62 Chat

Pada halaman chat ini berfungsi untuk melakukan obrolan antar user, dan

pada halaman chat ini dibuat agar murid dapat saling berkomunikasi dan mengenal

temannya juga untuk berkomunikasi secara langsung dengan pengajar.

122

8. Message

Gambar 4.63 Message

Pada halaman message ini berfungsi untuk mengirim pesan antar user, dan

pada halaman message ini dibuat agar murid/user dapat secara langsung

mendapatkan informasi dan pemebritahuan penting baik dari admin ataupun user lain.

123

9. Forum

Gambar 4.64 Forum

Pada halaman forum ini berfungsi untuk user dapat melakukan diskusi antar

user, dan pada halaman forum ini user dapat membuat thread dengan judul

pembahasan yang diinginkan dan user juga dapat melakukan replay di dalam thread

yang sudah di buat.

124

10. Exam / Exercise (Take Exam)

Gambar 4.65 Exam

Pada halaman take exam ini berfungsi untuk murid agar dapat melakukan

latihan soal yang diberikan oleh guru bidang studi sesuai materi yang diajarkan. Dan

apabila guru belum mengupload latihan soal,maka akan muncul pengumuman there

is no exam schedule for you now.

125

11. Exam (View Score)

Gambar 4.66 Exam (View Score)

Pada halaman ini berfungsi untuk murid agar dapat melihat nilai ujian

setelah selesai menjalankan fitur take exam.

126

12. Upload Exam (Guru)

Gambar 4.67 Upload Exam (Guru)

Pada halaman upload exam ini berfungsi untuk guru agar dapat melakukan

latihan soal terhadap murid.

127

13. Add Student (Admin)

Gambar 4.68 Add Student

Pada halaman add student hanya dapat diakses oleh admin, semua murid pada

STK1 hanya dapat login setelah admin melakukan add student dan menginput

username serta password setelah di atur oleh admin. Murid tidak dapat melakukan

registrasi secara mandiri.

128

14. Edit Student Data

Gambar 4.69 Edit Student Data

Pada halaman edit student data hanya dapat diakses oleh admin, pada

halaman ini admin menginput biodata dari semua murid pada STK 1.

129

15. Add Class Member

Gambar 4.70 Add Class Member

Pada halaman add class member hanya dapat diakses oleh admin, pada

halaman ini admin menginput kelas untuk semua murid di STK1 dengan memilih

kelas dan menginput ID murid tersebut, dan setelah admin menekan tombol submit

maka secara otomatis murid akan masuk kedalam kelas yang telah diinput oleh

admin.

130

16. Delete Class Member

Gambar 4.71 Delete Class Member

Pada halaman delete class member hanya dapat diakses oleh admin, pada

halaman ini admin memiliki kewenangan untuk men-delete murid. Apabila murid

tersebut melakukan pelanggaran pada peraturan sekolah dan juga apabila murid sudah

lulus dari STK 1.

131

17. Add New Class

Gambar 4.72 Add New Class

Pada halaman add new class hanya dapat diakses oleh admin, pada halaman

ini admin memiliki kewenangan untuk membuat kelas baru. Admin akan membuat

kelas dengan guru wali kelas yang sudah di pilih.