BAB 4
RANCANGAN SISTEM YANG DIUSULKAN
4.1 Hasil Analisa Sistem yang Berjalan Dari hasil analisa yang dilakukan terhadap sistem yang sedang berjalan di SMA Negeri 90 Jakarta,maka dapat disimpulkan bahwa sistem pembelajaran yang berjalan sudah berjalan dengan baik akan tetapi sistem tersebut belum berjalan secara maksimal. Hal tersebut dapat dilihat dari hasil kuisioner yang disebarkan dengan responden nya adalah siswa/i kelas X SMA Negeri 90 Jakarta. Dimana sistem pembelajaran yang berjalan masih bersifat teacher centered, yaitu pembelajaran dimana Teacher memgang peran sangat penting dalam terjadinya proses KBM (Kegiatan Belajar Mengajar). Hal tersebut dikarenakan sumber materi yang didapat hanya berfokus pada Teacher dan buku yang ada. Selain itu belum adanya fasilitas yang dapat dimanfaatkan untuk memperoleh materi dari sumber lain. Maka dari itu, diharapkan pembelajaran di SMA Negeri 90 Jakarta dapat mengarah ke multi channel learning dimana siswa dapat memperoleh materi pembelajaran kapan saja serta dari mana saja yang tidak hanya terfokus pada Teacher, khususnya dapat diperoleh dari e-learning. Sehingga untuk mengatasi hal tersebut,maka di usulkan perancangan sistem pembelajaran yang tidak terkait ruang dan waktu bagi siswa dan Teacher di SMA Negeri 90 Jakarta. Adapun sistem pembelajaran yang diusulkan adalah sistem pembelajaran yang difokuskan kepada e-learning yaitu pembelajaran yang didukung oleh web yang bisa digunakan dalam kelas maupun kelas virtual (Turban 2005,p118). Akan tetapi pada 103
104
perancangan e-learning yang akan dirancang untuk SMA Negeri 90 Jakarta, akan lebih difokuskan kepada latihan soal-soal (bisa disebut dengan KUIS) yang akan diberikan secara online yang dimaksud selain untuk menunjang proses KBM (Kegiatan Belajar Mengajar) juga untuk menghemat biaya yang dikeluarkan (kertas). Maka dengan perancangan sistem tersebut,diharapkan dapat meminimalkan bahkan menutup kemungkinan munculnya permasalahan-permasalahan yang sedang dan akan dihadapi oleh siswa maupun para Teacher serta mendukung proses KBM (Kegiatan Belajar Mengajar), dapat meningkatkan daya saing dan prestasi yang diraih oleh SMA Negeri 90 Jakarta, dan meningkatkan mutu pendidikan di SMA Negeri 90 Jakarta.
105
4.2 Perancangan Sistem 4.2.1 Rich Picture yang Diusulkan
Gambar 4.1 Rich Picture yang diusulkan
106
keterangan gambar : fokus rich picture yang diusullkan pada rich picture yang diberi kotak (yang berinteraksi lansung dengan e-learning). 1. Pemerintah mengeluarkan standar curriculum bagi sekolah-sekolah yang ada di Indonesia, dan kepala sekolah sebagai perantaranya. 2. Kepala sekolah melakukan sosialisasi standar curriculum yang diterima dari pemerintah untuk dikembangkan lagi. 3. Melakukan pendekatan curriculum lebih mendalam kepada masing-masing Teacher mata pelajaran untuk menyusun curriculumnya sendiri, dengan standar pelatihan yang di berikan sekolah kepada Teacher tiap bidang. 4. Setiap Teacher mata pelajaran wajib memberikan RPP (rancangan paket pembelajaran) kepada kepala sekolah / ketua bidang curriculum untuk ditinjau kembali apakah sudah sesuai dengan standar curriculum yang diberikan pemerintah. 5. Setiap Teacher mata pelajaran memberikan jadwal pelajarannya kepada bagian kesiswaan agar dapat disesuaikan dengan jadwal kelas siswa. 6. Dari RPP tersebut bagian kesiswaan akan meberikan jadwal mata pelajaran untuk setiap masing-masing Teacher sesuai mata pelajarannya. 7. Admin login untuk dapat mengakses website sosial e-learning. 8. Admin mencreate account agar user terdaftar sehingga user dapat mengakses sosial e-learning.
107
9. A. Setiap Teacher yang ingin mengakses website sosial e-learning terlebih dahulu harus melakukan login. B .Setiap Student yang ingin mengakses website sosial e-learning terlebih dahulu harus melakukan login. C. currciculum yang ingin mengakses website sosial e-learning terlebih dahulu harus melakukan login. 10. Teacher Mengupload materi ke website sosial e-learning. 11.Curricullum Approve materi yang diupload oleh Teacher kemudian selanjutnya agar dapat diakses oleh user. 12. a. Teacher dapat mendownload materi yang tersedia pada websiter sosial elearning. b. Student dapat mendownload materi yang tersedia pada websiter sosial e-learning. c. Curriculum dapat mendownload materi yang tersedia pada websiter sosial elearning. 13. a. Teacher dapat menposting komentar seputar materi yang dibahas pada websiter sosial e-learning. b. Student dapat menposting komentar seputar materi yang dibahas pada websiter sosial e-learning. c. Curriculum dapat menposting komentar seputar materi yang dibahas pada websiter sosial e-learning.
108
14. a. Teacher dapat mendelete postingan yang telah diposting sebelumnya. b. Student dapat mendelete postingan yang telah diposting sebelumnya. c. Curriculum dapat mendelete postingan yang telah diposting sebelumnya. 15. a.
Teacher memilih untuk bersosialisasi dengan sesama Teacher atau Student pada forum sosial.
b. Student memilih untuk bersosialisasi dengan sesama Student atau Teacher pada forum sosial. c. Curriculum memilih untuk bersosialisasi dengan sesama Teacher atau Student pada forum sosial.. d. Admin memilih untuk bersosialisasi dengan sesama Teacher atau Student pada forum sosial. 16. a. Setelah Teacher memilih akan bersosialisasi dengan forum mana pada forum sosial,selanjutnya Teacher dapat mecreate (membuat) topik baru pada forum yang dipilih. b. Setelah Student memilih akan bersosialisasi dengan forum mana pada forum sosial,selanjutnya Student dapat mecreate (membuat) topik baru pada forum yang dipilih.. c. Setelah Curriculum memilih akan bersosialisasi dengan forum mana pada forum sosial,selanjutnya Curriculum dapat mecreate (membuat) topik baru pada forum yang dipilih.
109
d. Setelah Admin memilih akan bersosialisasi dengan forum mana pada forum sosial,selanjutnya Admin dapat mecreate (membuat) topik baru pada forum yang dipilih. 17. a. Teacher dapat mereply topik yang ada pada forum yang dipilihnya. b. Student dapat mereply topik yang ada pada forum yang dipilihnya. c. Curriculum dapat mereply topik yang ada pada forum yang dipilihnya. d. Admin dapat mereply topik yang ada pada forum yang dipilihnya. 18. a. Jika ada komentar yang ingin dihapus, maka Teacher dapat menghapus komentar yang telah di post olehnya. b. Jika ada komentar yang ingin dihapus, maka Student dapat menghapus komentar yang telah di post olehnya. c. Jika ada komentar yang ingin dihapus, maka Curriculum dapat menghapus komentar yang telah di post olehnya. d. Jika ada komentar yang ingin dihapus, maka Admin dapat menghapus komentar yang telah di post olehnya. 19.Teacher Membuat soal untuk kuis yang nantinya akan diberikan kepada Student. 20. Teacher mengupload kuis yang akan diberikan dan dikerjakan oleh Student. 21. Student mengerjakan soal kuis yang diberikan. 22. Student mendapatkan nilai kuis berdasarkan jawaban benar dari soal kuis. 23. a. Teacher dapat mengupdate profil mereka. b. Student dapat mengupdate profil mereka.
110
c. Curriculum dapat mengupdate profil mereka. d. Admin dapat mengupdate profil mereka. 24. a. Teacher dapat mengirim pesan kepada user lain yang dituju. b. Student dapat mengirim pesan kepada user lain yang dituju. c. Curriculum dapat mengirim pesan kepada user lain yang dituju. d. Admin dapat mengirim pesan kepada user lain yang dituju.
25. a. Teacher meReply pesan yang masuk. b. Student meReply pesan yang masuk. c. Curriculum meReply pesan yang masuk. d. d.Admin meReply pesan yang masuk. 26. Sewaktu – waktu jika dibutuhkan, Curriculum dapat mengupdate subject dari mata pelajaran yang sudah ada. Misalnya jika Curriculum ingin menambah subject baru atau menghapus subject tersebut. 27. sewaktu-waktu, admin dapat menon-aktifkan user jika dibutuhkan. 28. Jika tiba saat ujian akhir semester, Teacher meberikan contoh / bentuk soal ujian kepada curriculum untuk ditinjau kembali apa sudah sesuai standar curriculum yang berlaku. 29. Setiap soal ujian yang telah disetujui oleh curriculum akan diserahkan kepada pengawas ujian untuk nantinya akan diberikan ke Student. 30. Pengawas ujian memberikan soal ujian yang sudah disetujui oleh curriculum kepada Student untuk dikerjakan.
111
31. Student yang telah selesai mengerjakan semua soal ujian yang diberikan, wajib menyerahkan hasil jawaban soal ujian kepada pengawas. 32. Pengawas ujian yang telah mendapatkan jawaban ujian yang di kerjakan oleh siswa memberikan kembali kepada tiap Teacher mata pelajaran untuk nantinya di koreksi. 33. Setelah mendapatkan semua hasil nilai ujian dari masing-masing Teacher, Teacher wali kelas mengisi raport yang nantinya akan di berikan kepada wali student sebagai hasil pembelajaran. 34. Setiap Teacher wali kelas melakukan rapat dewan Teacher untuk mendiskusikan kelayakan atas hasi nilai Student yang nantinya akan diberikan kepada wali student. 35. Dari hasil rapat dewan Teacher dapat di tentukan setiap student yang berhak naik kelas atau pun tidak naik kelas. 36. Pada periode tertentu sekolah akan mengadakan pengambilan raport student dimana Teacher wali kelas akan memberikan hasil pembelajaran student setiap periodennya kepada wali siswa untuk bukti hasil belajar.
112
4.2.2 Use Case Diagram Dalam merancang Use Case diagram ini penulis merancang design Use Case berdasarkan Rich Picture yang diusulkan. Dimana fokus pada rich picture yang diusulkan adalah hanya pada proses bisnis yang berinteraksi lansung dengan sistem. Dimana terdapat 4 aktor yaitu (Curriculum,Teacher,Student dan Admin). Serta untuk proses bisnis nya sendiri berfokus pada proses bisnis yang berinteraksi secara langsung dengan e-learning dan dirancanglah padadesign use case dibawah ini.
113
Gambar 4.2 Use Case
114
Penjelasan Use case : Create Account Use case
Digunakan saat ada user yang akan ditambahkan ke dalam sistem
Object
Admin
function
createAccount Tabel 4.1 Penjelasan Use Case Create Account
Non-Aktifkan Account Use case
Digunakan saat ada user (account) yang akan di non-aktifkan.
Object
Admin
function
Non-aktifkan Tabel 4.2 Penjelasan Use Case Non-Aktifkan Account
Delete Komentar Use case
Digunakan saat ada Komentar pada slide maupun komentar pada forum sosial yang ingin di hapus oleh user yang menpost komentar tersebut.
Object
Admin, Student, Teacher, Curriculum
function
Delete Tabel 4.3 Penjelasan Use Case delete Posting
115
Create topik Use case
Pada forum sosial, user dapat mencreate topik baru (seperti update status pada facebook,dimana
user
lainnya
dapat
mengomentari status tersebut nantinya). Object
Student, Teacher, Curriculum
Function
Create Tabel 4.4 Penjelasan Use Case Create topik
Reply topik Use case
Pada forum sosial, user mereply topik yang tersedia (yang sudah di create).
Object
Student, Teacher, Curriculum
Function
Reply Tabel 4.5 Penjelasan Use Case Reply topik
Komentar slide Use case
User dapat mengomentari slide yang ada. Serta jg digunakan jika ada kmentar yang ingin dihapus (komentar yang di post oleh user itu sendiri)
Object
Student, Teacher, Curriculum
Function
Comment, delete Tabel 4.6 Penjelasan Use Case Komentar slide
116
Block komentar slide dan reply topik Use case
Digunakan
saat
admin
menblock
komentar slide ataupun reply topik. Object
Admin
function
block Tabel 4.7 Penjelasan Use Case Block komentar slide dan reply topik
Buat Soal Use case
Digunakan saat teacher akan membuat soal yang nantinya akan digunakan dan diberikan kepada student dalam bentuk kuis.
Object
Teacher
function
addQuestion Tabel 4.8 Penjelasan Use case Buat soal
Upload Kuis Use case
Digunakan saat teacher akan mengupload kuis yang akan diberikan kepada student.
Object
Teacher
function
publishQuiz Tabel 4.9 Penjelasan Use Case Upload Kuis
117
Mengerjakan Kuis Use case
Saat student akan mengerjakan kuis yang diberikan oleh teacher.
Object
Student
function
submitAnswer Tabel 4.10 Penjelasan Use Case Mengerjakan Kuis
Update profil Use case
Saat
user
ingin
mengupdate
profil
mereka. Seperti mengganti profil picture atau
mengganti
informasi
mengenai
profil mereka. Object
Admin, Teacher, Student, Curriculum
function
Update Tabel 4.11 Penjelasan Use Case Update profil
Upload materi Use case
Digunakan saat teacher akan mengupload materi
Object
Teacher
function
Upload Tabel 4.12 Penjelasan Use Case Mengupload materi
118
Approve materi Use case
Saat materi yang telah diupload oleh Teacher terlebih dahulu harus disetujui / diterima oleh curriculum agar dapat diakses oleh user.
Object
Curriculum
function
approveMaterial Tabel 4.13 Penjelasan Use Case Approve materi
Download material Use case
Use case ini berjalan ketika user akan mendwonload materi yang tersedia.
Object
Teacher, Student, Curriculum
Function
downloadMaterial Tabel 4.14 Penjelasan Use Case Download materi
Send message Use case
Use case digunakan saat user ingin mengirim message kepada user lainnya
Object
Admin, Teacher, Student, Curriculum
fuction
sendMessage Tabel 4.15 Penjelasan Use Case Send Message
119
Reply message Use case
Use case digunakan saat user ingin mereply message (pesan masuk).
Object
Admin, Teacher, Student, Curriculum
fuction
new Tabel 4.16 Penjelasan Use Case Reply message
Update subject Use case
Use case digunakan saat Curriculum ingin mengupdate menambahkan
nama
subject,
subject
baru
maunpun maupun
menghapus subject yang sudah ada. Object
Curriculum
fuction
Update,add,delete Tabel 4.17 Penjelasan Use Case Update Subject
120
4.2.3 Class Diagram Dalam merancang class diagram ini berdasarkan pada use case yang ada. Dimana berdasarkan use case yang ada,maka ditentukanlah class-class yang ada dalam design class diagram.serta hubungan-hubungan antar class yang satu dengan class yang lain. Pada design class diagram ini, account merupakan super class dari class admin,curriculum,teacher,dan student. Sedangkan untuk material,topic dan quis merupakan generalisasi dari super class post. Dan untuk conversation sendiri adalah class yang berisikan postingan yang dilakukan user baik postingan pada slide maupun pada forum sosial.
121
Gambar 4.3 Class Diagram
122
4.2.4 Statechart Diagram 4.2.4.1 Admin 4.2.4.1.1 Definition Berisi informasi mengenai user SMA NEGERI 90 JAKARTA yang login ke website social e-learning. 4.2.4.1.2 Behavioral Pattern Event Trace : login,updateProfile, sendMessage,
replyMessage,
createAccount,
replyTopic,
blockCommentSlide,
delete,
cretaeTopic,
blockReplyTopic,
deleteAccount, logout, Behavioral Pattern : login+, updateProfile+, sendMessage+, replyMessage+, replyTopic+, delete+, cretaeTopic+, createAccount+,
blockCommentSlide+,
deleteAccount+, logout+,
blockReplyTopic+,
123
Gambar 4.4 Statechart Admin Event
Attribute
Login createAccount deleteAccount
Username, type,
password,
fullname,
accestype, updateProfil sendMessage replyMessage replyTopic createTopic deleteCommentSlide blockCommentSlide blockReplyTopic deleteCommentTopic logout
Tabel 4.18 Event Admin
sex,
brithday, session
124
4.2.4.2 Curriculum 4.2.4.2.1 Definition Berisi informasi mengenai user SMA NEGERI 90 JAKARTA yang login ke website social e-learning. 4.2.4.2.2 Behavioral Pattern Event Trace : login, updateProfile, sendMessage,
replyMessage,
approveMaterial,
addSubject,
replyTopic,
delete,
deleteSubject,
cretaeTopic,
commentSlide,
downloadMateri, logout,
Behavioral Pattern : login+, updateProfile+, sendMessage+, replyMessage+, replyTopic+, delete+, cretaeTopic+, approveMaterial+, addSubject+, deleteSubject+, commentSlide+, downloadMateri+,logout+,
125
Gambar 4.5 Statechart curriculum Event
Attribute
Login updateProfil
Username, password, brithday, type, fullname, sex, session accestype,
sendMessage replyMessage replyTopic createTopic newCommentSlide deleteCommentSlide approveMaterial addSubject deleteSubject downloadMateri delteCommentTopic logout Tabel 4.19 Event curriculum
126
4.2.4.3 Teacher 4.2.4.3.1 definition Berisi informasi mengenai user SMA NEGERI 90 JAKARTA yang login ke website social e-learning. 4.2.4.3.2 Behavioral Pattern Event trace : login, updateProfile, sendMessage, replyMessage, replyTopic, delete, cretaeTopic, uploadMateri,
addQuestion,
uploadQuiz,
commentSlide,
downloadMateri, logout,
Behavioral Pattern : login+, updateProfile+, sendMessage+, cretaeTopic+,
replyMessage+, uploadMateri+,
replyTopic+,
addQuestion+,
commentSlide+, downloadMateri+,logout+,
delete+,
uploadQuiz+,
127
Gambar 4.6 Statechart Teacher Event
Attribute
Login updateProfil sendMessage
Username, type,
fullname,
accestype, replyMessage replyTopic createTopic commentSlide deleteCommentSlide uploadMaterial addQuestion uploadQuiz downloadMateri deleteCommentTopic Logout
password, sex,
brithday, session
128
Tabel 4.20 Event Teacher 4.2.4.4 Student 4.2.4.4.1 definition Berisi informasi mengenai user SMA NEGERI 90 JAKARTA yang login ke website social e-learning. 4.2.4.4.2 Behavioral Pattern Event trace : login, updateProfile, sendMessage, replyMessage, replyTopic, delete, createTopic, submitAnswer, commentSlide, downloadMateri, logout,
Behavioral Pattern : login+, updateProfile+, sendMessage+,
replyMessage+,
createTopic+,
submitAnswer+,
downloadMateri+,logout+,
replyTopic+,
delete+,
commentSlide+,
129
Gambar 4.7 Statechart Student
Event
Attribute
Login updateProfil sendMessage replyMessage
Username, password, brithday, type, fullname, sex, session accestype,
replyTopic createTopic commentSlide deleteCommentSlide submitAnswer downloadMateri deleteCommentTopic Logout Tabel 4.21 Event Student
130
4.2.4.5 Subject 4.2.3.5.1 definition Berisi informasi mengenai subject dari mata pelajaran 4.2.3.5.2 Behavioral Pattern Event trace : addSubject , deleteSubject Behavioral Pattern : addSubject + , deleteSubject +
Gambar 4.8 Statechart Subject Event
Attribute
addSubject
Id, text, description, date_modified, date_started
deleteSubject Tabel 4.22 Event Subject
131
4.2.4.6 Class 4.2.4.6.1 definition Berisi informasi mengenai student- student yang ada dalam kelas tersebut 4.2.4.6.2 Behavioral Pattern Event trace : new , delete Behavioral Pattern : new + , delete +
Gambar 4.9 Statechart Class
Event
Attribute
Add
Id , name
Delete Tabel 4.23 Event Class
132
4.2.4.7 Subject_topic_material 4.2.4.7.1 definition Berisi informasi mengenai materi yang sudah di approve oleh wakil kepala sekolah bidang curriculum. Materi yang sudah di approve selanjutanya dapat diakses oleh Teacher maupun siswa. 4.2.4.7.2 Behavioral Pattern Event trace : uploadMateri, approveMaterial, downloadMateri Behavioral
Pattern
:
uploadMateri+,
approveMaterial+,
downloadMateri+,
Gambar 4.10 Statechart Subject_topic_material
133
Event
Attribute
UploadMaterial
Id,
resource_address,
subject,
subject_topic, approveMaterial
Author, title, date_upload, isApprove
downloadMaterial Tabel 4.24 Event Subject_topic_material
4.2.4.8 Subject_topic 4.2.4.8.1 definition Berisi informasi mengenai topic yang dapat diakses oleh user 4.2.4.8.2 Behavioral Pattern Event trace : addSubjectTopic, deleteSubjectTopic Behavioral Pattern : addSubjectTopic+, deleteSubjectTopic+,
134
Gambar 4.11 Statechart Subject_topic
Event
Attribute
addSubjectTopic
Id,
subject_topic,
series,
text,
text_description, date_modified, deleteSubjectTopic
Date_added Tabel 4.25 Event Subject_topic
4.2.4.9 Subject_topic_kuis 4.2.4.9.1 definition Berisi informasi mengenai Kuis yang akan diikuti oleh student beserta waktu mempublish kuis tersebut serta timelimit yang diberikan kepada student untuk mengerjakan kuis tersebut. 4.2.4.9.2 Behavioral Pattern Event trace : uploadQuiz, Behavioral Pattern : uploadQuiz+,
135
Gambar 4.12 Statechart Subject_topic_kuis
Event
Attribute
uploadQuiz
Id, date_created, subject_topic, Title, duration,author,used Tabel 4.26 Event Subject_topic_kuis
4.2.4.10 Subject_topic_kuis_question 4.2.4.10.1 definition Berisi informasi mengenai hasil (nilai) yang didapat oleh student setelah mereka mengerjakan soal kuis yang diberikan beserta jawaban dari kuis tersebut. 4.2.4.10.2 Behavioral Pattern Event trace : submitAnswer Behavioral Pattern : submitAnswer +
Gambar 4.13 Statechart Subject_topic_kuis_question
136
Event
Attribute
submitAnswer
Score,titleQuiz,
authorizationId,
answeresd Tabel 4.27 Event Subject_topic_kuis_question 4.2.4.11 Topic_Forum 4.2.4.11.1 definition Berisi informasi mengenai topik apa saja yang tersedia (yang telah di create oleh user lain) beserta user dapat menambahkan komentar pada form tersebut dengan menklik reply dan dapat pula menghapus komentar yang ditulis dengan menklik delete. 4.2.4.11.2 Behavioral Pattern Event
trace
:
createnewTopic,
replyTopic,
delete,
blockReplyTopic, Behavioral Pattern : createnewTopic+, replyTopic+, delete+, blockReplyTopic+,
137
Gambar 4.14 Statechart Topic_Forum
Event
Attribute
createTopic
Id, author, date, room, text, comment
replyTopic DeleteCommentTopic blockReplyTopic Tabel 4.28 Event Topic_Forum
4.2.4.12 Comment_Slide 4.2.4.12.1 definition Berisi informasi mengenai informasi yang tersedia pada saat user memanfaatkan fasilitas comment slide yang diharapakan dapat membantu user dalam memahami dan berdiskusi secara lebih efektif mengenai materi yang dibahas. 4.2.4.12.2 Behavioral Pattern Event trace : new , delete, block_post
138
Behavioral Pattern : new + , delete +, block_post+,
Gambar 4.15 Statechart Comment_Slide
Event
Attribute
newCommetSlide
Id , author, date, subject_topic
deleteCommentSlide Block_post Tabel 4.29 Event Comment_Slide
4.2.4.13 Message 4.2.4.13.1 definition Berisi informasi mengenai informasi yang tersedia pada saat user memanfaatkan fasilitas message (pesan) dimana user dapat mengirim pesan kepada user lain maupun dapat membalas pesan dari user lain. 4.2.4.13.2 Behavioral Pattern Event trace : send, reply
139
Behavioral Pattern : send+, reply+,
Gambar 4.16 Statechart Message Event
Attribute
Send
Id, from, to, date, text
reply Tabel 4.30 Event Message 4.2.4.14 Subject_topic_question 4.2.4.14.1 definition Berisi informasi mengenai informasi yang tersedia pada saat teacher akan membuat soal yang anntinya akan digunakan untuk mengadakan kuis yang ditujukan untuk student. 4.2.4.14.2 Behavioral Pattern Event trace : addQuestion, Behavioral Pattern : addQuestion+,
140
Gambar 4.17 Statechart Subject_topic_question Event
Attribute
addQuestion
Id, subject_topic, date_created, author, text, answer1, answer2, answer3, answer4, answer4, used, answered, answered_correctly Tabel 4.31 Event Subject_topic_question
141
2.5 Navigation Diagram Dalam merancang design navigation diagram ini berdasarkan dari hasil rancangan class diagram yang telah dirancang sebelumnya. Dimana pada navigation ini digambarkan apa saja aktivitas yang dapat dilakukan oleh user. Dan pada rancangan navigation ini penulis mengelompokkan mana bagian e-learning dan yang mana bagian sosial yang dimaksudkan untuk memudahkan user dalam memahami dan mengoperasikan sistem yang akan digunakan serta interface yang user friendly.
142
4.2.5.1 Navigation Admin
Gambar 4.18 navigation Admin
143
4.2.5.2 Navigation Student
Gambar 4.19 Navigation Student
144
4.2.5.3 Navigation Teacher
Gambar 4.20 Navigation Teacher
145
4.2.5.4 Navigation Curriculum
Gambar 4.21 Navigation Curriculum
146
4.2.6 Rancangan Layar 4.2.6.1 Rancangan Layar Admin 4.2.6.1.1 Login
Gambar 4.22 Rancangan Layar Login Admin
Gambar 4.22 menjelaskan bahwa sebelum Admin dapat mengakses social e-learning SMA Negeri 90 Jakarta, Admin terlebih dahulu harus melakukan Login dengan memasukkan Nama pengguna berserta kata sandi.
147
4.2.6.1.2 Halaman Home
Gambar 4.23 Rancangan Layar Home Admin
Gambar 4.23 Menjelaskan tampilan layar HOME Admin yang menjelaskan menumenu yang dapat diakses oleh Admin.
148
4.2.6.1.3 Halaman akun (Tambah User)
Gambar 4.24 Rancangan Layar Halaman Akun Admin (Tambah User) Keterangan : xy
= tipe user (student , teacher , curricullum)
xxx
= jenis kelamin (laki-laki , perempuan)
x
= kelas (x-1,x-2,x-3,x-4,x-5,x-6,x-7,x-8,x-9)
AB
= username saat user melakukan login
BC
= type dari user (admin , teacher , curricullum, admin)
DE
= nama user saat mendaftar
EF
= button untuk menghapus / meremove user
149
Gambar 4.24 menggambarkan bagaimana Admin dapat Menambah user baru serta menggambarkan bagaimana Admin dapat menghapus user tersebut.
4.2.6.1.4 Halaman kelas
Gambar 4.25 Rancangan Layar Halaman Kelas Keterangan : Ki
= no urut
Ku
= kelas (x-1,x-2,x-3,x-4,x-5,x-6,x-7,x-8,x-9)
Kt
= jumlah student dalam satu kelas
Ka
= button untuk menghapus / meremove kelas
Gambar 4.25 menggambarkan bahwa Admin dapat menambahkan kelas , misalnya kelas yang sudah ada sebelumnya ada 9 kelas,dan Admin menambahkan 1 kelas lagi menjadi 10 kelas.
150
4.2.6.1.5 Halaman profil admin
Gambar 4.26 Rancangan Layar Profil Admin Keterangan : XX
= nama Admin
XY
= jenis kelamin Admin
XXY
= -
Gambar 4.26 menggambarkan tampilan dari halaman profil Admin, dimana berisi informasi mengenai nama dari Admin, jenis kelamin , informasi mengenai alamat Email, account Facebook serta account Twitter.
151
4.2.6.1.6 update profil
Gambar 4.27 Rancangan Layar Update profil Keterangan : XX
= nama Admin
XY
= jenis kelamin Admin
XXY
= -
Gambar
4.27
Menggambarkan
halaman
Admin
ketika
ingin
mengupdate
(memperbaharui) halaman profil nya. Admin dapat mengganti photo profil maupun keterangan / informasi Admin lainnya.
152
4.2.6.1.7 Halaman Pesan Masuk
Gambar 4.28 Rancangan Layar Pesan masuk Keterangan : Xyz = isi pesan Gambar 4.28 Menggambarkan keadaan saat ada pesan yang masuk ke halaman Admin.
153
4.2.6.1.8 Reply pesan masuk
Gambar 4.29 Rancangan Layar Reply pesan masuk Keterangan : Xxx = nama pengirim pesan Xyz = isi pesan Gambar 4.29 Menggambarkan keadaan saat Admin ingin mreply pesan yang masuk dengan terlebih dahulu menklik button balas pada halaman sebelumnya (pesan masuk) setelah itu,Admin dapat mereply pesan yang masuk tersebut.
154
4.2.6.1.9 Halaman sosial admin dengan Teacher
Gambar 4.30 Rancangan Layar Halaman sosial Admin dengan Teacher Keterangan : Xxy = topik yang telah di post Gambar 4.30 Menggambarkan keadaan bagaimana Admin dapat berkomunikasi dan bersosialisasi secara tidak tatap muka dengan para pengajar yang sedang online (mengakses e-learning) pada halaman tersebut.
155
4.2.6.1.10 Halaman sosial admin dengan student
Gambar 4.31 Rancangan Layar Halaman sosialisai Admin dengan Student Keterangan : Xx = kelas (x-1,x-2,x-3,x-4,x-5,x-6,x-7,x-8,x-9) Xxy = topik yang telah di post Gambar 4.31 Menggambarkan keadaan bagaimana Admin dapat berkomunikasi dan bersosialisasi secara tidak tatap muka dengan para student yang sedang online (mengakses e-learning) pada halaman tersebut.
156
4.2.6.1.11 Halaman sosial admin dengan Curriculum
Gambar 4.32 Rancangan Layar Halaman sosial Admin dengan Curriculum Keterangan : Xx = kelas (x-1,x-2,x-3,x-4,x-5,x-6,x-7,x-8,x-9) Xxy = topik yang telah di post Gambar 4.32 Menggambarkan keadaan bagaimana Admin dapat berkomunikasi dan bersosialisasi secara tidak tatap muka dengan Curriculum yang sedang online (mengakses e-learning) pada halaman tersebut.
157
4.2.6.1.12 Halaman sosial admin
Gambar 4.33 Rancangan Layar Halaman sosialisai Admin Keterangan : Xx = kelas (x-1,x-2,x-3,x-4,x-5,x-6,x-7,x-8,x-9) Xxy = topik yang telah di post Gambar 4.33 Menggambarkan keadaan bagaimana Admin dapat berkomunikasi dan bersosialisasi secara tidak tatap muka dengan Student kelas X, Teacher kelas X, dan Curriculum.
158
4.2.6.1.13 Delete user
Gambar 4.34 Rancangan Layar Delete user Keterangan : Xx
= nama user
Xy = jenis kelamin Xxy = kelas (x-1,x-2,x-3,x-4,x-5,x-6,x-7,x-8,x-9) Gambar 4.34 Menggambarkan keadaan saat Amin ingin mendelete user dengan menklik button (non-aktifkan).
159
4.2.6.1.14 Send Message
Gambar 4.35 Rancangan Layar Send Message Keterangan : Xx
= nama user
Xy = jenis kelamin Xxy = kelas (x-1,x-2,x-3,x-4,x-5,x-6,x-7,x-8,x-9) Gambar 4.35 Menggambarkan keadaan dimana Admin dapat mengirimkan pesan kepada user yang dituju dengan mengklik button kirim-pesan.
160
4.2.6.1.15 Halaman reply message
Gambar 4.36 Rancangan Layar Halaman reply message Keterangan : Xxx = nama user yg dituju Xyz = isi message Gambar 4.36
Menggambarkan keadaan dimana Admin menuliskan balasan pesan
kepada user dengan menulis isi pesan kemudian menklik button kirim.
161
4.2.6.1.16 Halaman block CommentSlide dan ReplyTopic
Gambar 4.37 Rancangan Layar Halaman block CommentSlide dan ReplyTopic Gambar 4.37 Menggambarkan keadaan saat admin akan melakukan block terhadap komentar-komentar (commentSlide ataupun ReplyTopic).
162
4.2.6.2 Rancangan Layar Student 4.2.6.2.1 Login
Gambar 4.38 Rancangan Layar Login Student Gambar 4.38 menjelaskan bahwa sebelum student dapat mengakses social e-learning SMA Negeri 90 Jakarta, student terlebih dahulu harus melakukan Login dengan memasukkan Nama pengguna berserta kata sandi
163
4.2.6.2.2 Home
Gambar 4.39 Rancangan Layar Home Student Gambar 4.39 Menjelaskan tampilan layar HOME Student yang menjelaskan menumenu yang dapat diakses oleh Student
.
164
4.2.6.2.3 Materi
Gambar 4.40 Rancangan Layar Materi Student
Gambar 4.40 meggambarkan keadaan dimana berisi tampilan dan informasi materi yang dapat diakses oleh student.
165
4.2.6.2.4 Halaman materi (pilih mata pelajaran)
Gambar 4.41 Rancangan Layar Materi (pilih mata pelajaran) Student Keterangan : Xxy = mata pelajaran Xxz = topik yang tersedia Gambar 4.41
Menggambarkan keadaan dimana halaman awal jika student ingin
mendownload materi.
166
4.2.6.2.5 halaman Download Materi (klik dwonload)
Gambar 4.42 Rancangan Layar Download Materi Student Keterangan : Xxy = mata pelajaran Xxz = topik yang dipilih Zzz = Teacher yang mengupload materi Gambar 4.42
Menggambarkan keadaan ketika student ingin mendownload materi
yang tersedia dengan menklik button download.
167
4.2.6.2.6 Posting slide
Gambar 4.43 Rancangan Layar Posting Slide Student Keterangan : Xyz = topik yang dipilih X = urutan slide Xy = user yang menpost Gambar 4.43 Menggambarkan keadaan dimana student dapat mengomentari materi yang diberikan oleh pengajar dalam bentuk slide.
168
4.2.6.2.7 Halaman profil
Gambar 4.44 Rancangan Layar Profil Student Keterangan : XX
= nama student
XY
= jenis kelamin student
XXY
= = kelas (x-1,x-2,x-3,x-4,x-5,x-6,x-7,x-8,x-9)
Gambar 4.44 menggambarkan tampilan dari halaman profil student, dimana berisi informasi mengenai nama dari student, jenis kelamin , informasi mengenai alamat Email, account Facebook serta account Twitter.
169
4.2.6.2.8 Update profil Sosial
Username
Kelas
E-Learning
Pesan
Beranda
Profil >> Edit
Keluar
Kabar Terbaru
Materi Photo Profil
Kuis
Browser
Unggah
Nilai Sosial Pribadi Kurikulum Guru X-1 X-2 X-3 X-4 X-5 X-6 X-7 X-8 X-9
Nama Jenis Kelamin Kelas
: : :
Email Facebook Twitter
: : :
XX XY XXy
Simpan
Social E-Learning - SMAN 90 LMS v0.4 Alpha © 2011 | Adimas Duvitra, Loranita, Zulfikar Rachmatullah.
Admin
Gambar 4.45 Rancangan Layar Update profil student Keterangan : XX
= nama student
XY
= jenis kelamin student
XXY
= kelas (x-1,x-2,x-3,x-4,x-5,x-6,x-7,x-8,x-9)
Gambar
4.45
Menggambarkan
halaman
student
ketika
ingin
mengupdate
(memperbaharui) halaman profil nya. student dapat mengganti photo profil maupun keterangan / informasi student lainnya.
170
4.2.6.2.9 Pesan Masuk
Gambar 4.46 Rancangan Layar Pesan masuk Keterangan : Xyz = isi pesan Gambar 4.46 student.
Menggambarkan keadaan saat ada pesan yang masuk ke halaman
171
4.2.6.2.10 Reply pesan
Gambar 4.47 Rancangan Layar Reply pesan masuk Keterangan : Xxx = nama pengirim pesan Xyz = isi pesan Gambar 4.47 Menggambarkan keadaan saat student ingin mreply pesan yang masuk dengan terlebih dahulu menklik button balas pada halaman sebelumnya (pesan masuk) setelah itu,student dapat mereply pesan yang masuk tersebut.
172
4.2.6.2.11 Forum komunikasi sosial student dengan Teacher
Gambar 4.48 Rancangan Layar Forum komunikasi sosial student dengan Teacher Keterangan : Xxy = topik yang telah di post Gambar 4.48 Menggambarkan keadaan bagaimana student dapat berkomunikasi dan bersosialisasi secara tidak tatap muka dengan para pengajar yang sedang online (mengakses e-learning) pada halaman tersebut.
173
4.2.6.2.12 Forum Komunikasi sosial dengan kelas lain
Gambar 4.49 Rancangan Layar Forum komunikasi sosial student dengan kelas lain Keterangan : Xxy = topik yang telah di post Gambar 4.49 Menggambarkan keadaan bagaimana student dapat berkomunikasi dan bersosialisasi secara tidak tatap muka dengan sesama student dari kelas lain yang sedang online (mengakses e-learning) pada halaman tersebut
174
4.2.6.2.13 Forum komunikasi sosial dengan satu kelas
Gambar 4.50 Rancangan Layar forum komunikasi sosial dengan satu kelas Keterangan : Xxy = topik yang telah di post Gambar 4.50 Menggambarkan keadaan bagaimana student dapat berkomunikasi dan bersosialisasi secara tidak tatap muka dengan para pengajar yang sedang online (mengakses e-learning) pada halaman tersebut
175
4.2.6.2.14 Forum komunikasi sosial dengan Curriculum
Gambar 4.51 Rancangan Layar forum komunikasi sosial dengan Curriculum Keterangan : Xxy = topik yang telah di post Gambar 4.51 Menggambarkan keadaan bagaimana student dapat berkomunikasi dan bersosialisasi secara tidak tatap muka dengan Curriculum yang sedang online (mengakses e-learning) pada halaman tersebut
176
4.2.6.2.15 Forum komunikasi sosial dengan Admin
Gambar 4.52 Rancangan Layar forum komunikasi sosial dengan Admin Keterangan : Xxy = topik yang telah di post Gambar 4.52 Menggambarkan keadaan bagaimana student dapat berkomunikasi dan bersosialisasi secara tidak tatap muka dengan Admin yang sedang online (mengakses elearning) pada halaman tersebut
177
4.2.6.2.16 Send Massage
Gambar 4.53 Rancangan Layar Send Message Keterangan : Xx
= nama user
Xy = jenis kelamin Xxy = kelas (x-1,x-2,x-3,x-4,x-5,x-6,x-7,x-8,x-9) Gambar 4.53 Menggambarkan keadaan dimana student dapat mengirimkan pesan kepada user yang dituju dengan mengklik button kirim-pesan.
178
4.2.6.2.17 Halaman reply message
Gambar 4.54 Rancangan Layar Halaman reply message Keterangan : Xxx = nama user yg dituju Xyz = isi message Gambar 4.54 Menggambarkan keadaan dimana student menuliskan pesan kepada user dengan menklik button kirim-pesan pada halaman sebelumnya
179
4.2.6.2.18 Halaman Kuis
Gambar 4.55 Rancangan Layar Halaman Kuis Keterangan : XYZ = Topik Kuis Gambar 4.55 Rancangan Layar Halaman Kuis Menggambarkan keadaan saat Student mengerjakan kuis yang diberikan oleh teacher.
180
4.2.6.2.19 Halaman Nilai
Gambar 4.56 Rancangan Layar Halaman Nilai Keterangan : XYZ “ Topik Kuis Gambar 4.56 Menggambarkan keadaan saat student melihat nilai (score) dari kuis yang telah diikuti.
181
4.2.6.3. Rancangan Layar Teacher 4.2.6.3.1 Login
Gambar 4.57 Rancangan Layar Login Teacher
Gambar 4.57 menggambarkan keadaan saat awal Teacher akan login. Teacher harus memasukkan nama pengguna beserta kata sandi agar dapat mengkases e-learning.
182
4.2.6.3.2 Home Teacher Username
Kurikulum
E-Learning
Pesan
Beranda Home
Keluar
Kabar Terbaru
Kurikulum Materi Kuis Soal Nilai Sosial Pribadi Kurikulum Guru X-1 X-2 X-3 X-4 X-5 X-6 X-7 X-8 X-9 Admin
Social E-Learning - SMAN 90 LMS v0.4 Alpha © 2011 | Adimas Duvitra, Loranita, Zulfikar Rachmatullah.
Gambar 4.58 Rancangan Layar home Teacher
Gambar 4.58 Menggambarkan keadaan tampilan layar home dari halaman Teacher setelah login.
183
4.2.6.3.3 Halaman Kurikulum
Gambar 4.59 Rancangan Layar Halaman Kurikulum
Gambar 4.59 menggambarkan keadaan dimana teacher dapat mengetahui mata pelajaran yang tersedia.
184
4.2.6.3.4 Halaman Upload Materi
Gambar 4.60 Rancangan Layar Halaman upload Materi
Gambar 4.60 Menggambarkan keadaan saat Teacher akan mengupload materi sesuai dengan mata pelajaran serta topik yang akan di upload.
185
4.2.6.3.5 Halaman Subject
Gambar 4.61 Rancangan Layar Halaman Subject Gambar 4.61 Menggambarkan keadaan mengenai informasi dari topik apa saja yang tersedia pada tiap masing-masing subject (mata pelajaran).
186
4.2.6.3.6 download materi
Gambar 4.62 Rancangan Layar Download Materi Keterangan : Xxy = mata pelajaran Xxz = topik yang dipilih Zzz = Teacher yang mengupload materi Gambar 4.62
Menggambarkan keadaan ketika Teacher ingin mendownload materi
yang tersedia dengan menklik button download.
187
4.2.6.3.7 Posting slide
Gambar 4.63 Rancangan Layar posting slide Keterangan : Xyz = topik yang dipilih X = urutan slide Xy = user yang menpost Gambar 4.63 Menggambarkan keadaan dimana Teacher dapat mengomentari materi yang diberikan oleh pengajar dalam bentuk slide.
188
4.2.6.3.8 Halaman kuis
Gambar 4.64 Rancamgan Layar Halaman Kuis
Gambar 4.64 Menggambarkan keadaan awal mengenai kuis-kuis yang tersedia.
189
4.2.6.3.9 Halaman Buat kuis
Gambar 4.65 Rancangan Layar Halaman Buat Kuis
Gambar 4.65 Menggambarkan keadaan dimana saat Teacher akan membuat kuis baru. Dimana topik beserta tanggal dibuat telah sesuai dengan topik yang dipilih pada halaman sebelumnya. Setelah itu,Teacher dapat menentukan berapa durasi yang dimiliki oleh siswa untuk setiap soal yang akan dikerjakan. Dan untuk soal yang akan digunakan Teacher pun dapat memilih soal yang sudah tersedia kemudian menklik button simpan. Akan tetapi jika Teacher ingin menggunakan soal lain yang belum tersedia, maka Teacher diharuskan untuk membuat soal baru dengan menklik “soal”.
190
4.2.6.3.10 .Halaman soal Teacher
Gambar 4.66 Rancangan Layar Halaman Soal Teacher
Gambar 4.66 Menggambarkan keadaan yang berisi informasi soal-soal yang ada beserta button untuk membat soal baru.
191
4.2.6.3.11 Halaman buat soal
se Gambar 4.67 Rancangan Layar Halaman Buat soal
Gambar 4.67 Menggambarkan keadaan dimana saat Teacher akan membuat soal
192
4.2.6.3.12 Halaman profil Teacher
Gambar 4.68 Rancangan Layar Halaman Profil Teacher Keterangan : XX
= nama Teacher
XY
= jenis kelamin Teacher
XXY
= -
Gambar 4.68 menggambarkan tampilan dari halaman profil Teacher, dimana berisi informasi mengenai nama dari Teacher, jenis kelamin , informasi mengenai alamat Email, account Facebook serta account Twitter serta materi pembelajaran yang diajarkan oleh Teacher tersebut..
193
4.2.6.3.13 Update profil
Gambar 4.69 Rancangan Layar Update profil Keterangan : XX
= nama Teacher
XY
= jenis kelamin Teacher
XXY
= -
Gambar
4.69
Menggambarkan
halaman
Teacher
ketika
ingin
mengupdate
(memperbaharui) halaman profil nya. Teacher dapat mengganti photo profil maupun keterangan / informasi Teacher lainnya.
194
4.2.6.3.14 Pesan Masuk
Gambar 4.70 Rancangan Layar Pesan Masuk Keterangan : Xyz = isi pesan Gambar 4.70 Menggambarkan keadaan saat ada pesan yang masuk ke halaman Teacher
195
4.2.6.3.15 Reply pesan
Gambar 4.71 Rancangan Layar Reply Pesan Keterangan : Xxx = nama pengirim pesan Xyz = isi pesan Gambar 4.71 Menggambarkan keadaan saat Teacher ingin mereply pesan yang masuk dengan terlebih dahulu menklik button balas pada halaman sebelumnya (pesan masuk) setelah itu,Teacher dapat mereply pesan yang masuk tersebut.
196
4.2.6.3.16 Send message
Gambar 4.72 Rancangan Layar Send Message Xx
= nama user
Xy = jenis kelamin Xxy = kelas (x-1,x-2,x-3,x-4,x-5,x-6,x-7,x-8,x-9) Gambar 4.72 Menggambarkan keadaan dimana Teacher dapat mengirimkan pesan kepada user yang dituju dengan mengklik button kirim-pesan.
197
4.2.6.3.17 Reply send Message
Gambar 4.73 Rancnagan Layar Reply send message Keterangan : Xxx = nama pengirim pesan Xyz = isi pesan Gambar 4.73 Menggambarkan keadaan saat Teacher ingin mreply pesan yang masuk dengan terlebih dahulu menklik button balas pada halaman sebelumnya (pesan masuk) setelah itu,Teacher dapat mereply pesan yang masuk tersebut
198
4.2.6.3.18 Halaman sosial Teacher dengan student
Gambar 4.74 Rancangan Layar Halaman sosial Teacher dengan student Keterangan : Xx = kelas yang dituju Gambar 4.74 Menggambarkan keadaan bagaimana Teacher dapat berkomunikasi dan bersosialisasi secara tidak tatap muka dengan para student (mengakses e-learning) pada halaman tersebut.
yang sedang online
199
4.2.6.3.19 Halaman sosial Teacher dengan Teacher
Gambar 4.75 Rancangan Layar Halaman sosial Teacher dengan Teacher
Gambar 4.75 Menggambarkan keadaan bagaimana Teacher dapat berkomunikasi dan bersosialisasi secara tidak tatap muka dengan sesama Teacher kelas X yang sedang online (mengakses e-learning) pada halaman tersebut.
200
4.2.6.3.20 Halaman sosial Teacher dengan Curriculum
Gambar 4.76 Rancangan Layar Halaman sosial Teacher dengan Curriculum
Gambar 4.76 Menggambarkan keadaan bagaimana Teacher dapat berkomunikasi dan bersosialisasi secara tidak tatap muka dengan curriculum (mengakses e-learning) pada halaman tersebut.
yang sedang online
201
4.2.6.3.21 Halaman sosial Teacher dengan Admin
Gambar 4.77 Rancangan Layar Halaman sosial Teacher dengan Admin
Gambar 4.77 Menggambarkan keadaan bagaimana Teacher dapat berkomunikasi dan bersosialisasi secara tidak tatap muka dengan Admin yang sedang online (mengakses elearning) pada halaman tersebut.
202
4.2.6.4 Rancangan Layar Curiculum 4.2.5.4.1 Login
Gambar 4.78 Rancangan Layar Login
Gambar 4.78 Menggambarkan keadaan pada saat curriculum ingin mengakses e-learning maka terlebih dahulu harus melakukan login dengan memasukan nama pengguna dan kata sandi.
203
4.2.6.4.2 Halaman Home
Gambar 4.79 Rancangan Layar home
Gambar 4.79 Menggambarkan keadaan pada saaat awal masuk ke tampilan website elearning.
204
4.2.6.4.3 Halaman Subject (tambah atau hapus)
Gambar 4.80 Rancangan Layar Subject (tambah atau hapus)
Gambar 4.80 Menggambrakan tentang keadaan pada saat ada subject (mata pelajaran) yang akan ditambahkan atau di hapus oleh curriculum.
205
4.2.6.4.4 Halaman Materi
Gambar 4.81 Rancangan Layar Halaman Materi
Gambar 4.81 Mengambarkan tampilan layar materi pada halaman materi curriculum. Dimana pada halaman tersebut terdapat daftar dari mata pelajaran, topik, materi, tanggal upload, penulis beserta status.
206
4.2.6.4.5 Halaman Approve Materi 4.2.6.4.5.1 Halaman Approve Materi (awal)
Gambar 4.82 Rancangan Layar Approve Material Keterangan : Xy = Mata Pelajaran Gambar 4.82 Menggambarkan keadaan awal pada saat curriculum akan menapprove materi yang akan disampaikan oleh Teacher,dengan menklik topik dari masteri yang akan di approve.
207
4.2.6.4.5.2 Halaman Approve Materi (lanjutan)
Gambar 4.83 Rancangan Layar Halaman Approve Materi (Lanjutan) Keterangan : Xy = Mata Pelajaran Xxy = Topik dari materi yang dipilih Xxx = penulis Gambar 4.83 Menggambarkan keadaan saat curriculum akan mengapprove materi. Selanjutnya curriculum menklik edit untuk mengapprove materi.
208
4.2.6.4.5.3 Halaman Approve Materi (akhir)
Gambar 4.84 Rancangan Layar Halaman Approve Materi (akhir) Keterangan : Xy = Mata Pelajaran Xxy = Topik dari Materi yang dipilih Xxx = penulis Gambar 4.84 Menggambarkan keadaan saat curriculum akan mengapprove materi yang akan di publish dengan mencentang pada ceklis disamping kanan dari penulis sesuai dengan materi yang akan akan di approve.
209
4.2.6.4.6 Halaman sosial curriculum dengan Teacher
Gambar 4.85 Rancangan Layar Halaman Sosial curriculum dengan Teacher Keterangan : Xxy = topik yang telah di post Gambar 4.85 Menggambarkan keadaan bagaimana curriculum dapat berkomunikasi dan bersosialisasi secara tidak tatap muka dengan para pengajar kelas X yang sedang online (mengakses e-learning) pada halaman tersebut.
210
4.2.6.4.7 Halaman sosial curriculum dengan student
Gambar 4.86 Rancangan Layar Halaman Sosial curriculum dengan student Keterangan : Xxy = topik yang telah di post Gambar 4.86 Menggambarkan keadaan bagaimana curriculum dapat berkomunikasi dan bersosialisasi secara tidak tatap muka dengan para student yang sedang online (mengakses e-learning) pada halaman tersebut.
211
4.2.6.4.8 Halaman sosial curriculum dengan Admin
Gambar 4.87 Rancangan Layar Halaman Sosial curriculum dengan student Keterangan : Xxy = topik yang telah di post Gambar 4.87 Menggambarkan keadaan bagaimana curriculum dapat berkomunikasi dan bersosialisasi secara tidak tatap muka dengan Admin yang sedang online (mengakses e-learning) pada halaman tersebut.
212
4.2.6.4.9 Halaman sosialisasi curriculum
Gambar 4.88 Rancangan Layar Halaman sosialisasi curriculum Keterangan : Xxy = topik yang telah di post Gambar 4.88 Menggambarkan keadaan bagaimana curriculum dapat berkomunikasi dan bersosialisasi secara tidak tatap muka dengan admin,teacher kelas x student kelas x yang sedang online (mengakses e-learning) pada halaman tersebut.
213
4.2.6.4.10 Halaman Profil
Gambar 4.89 Rancangan Layar Halaman Profil Keterangan : XX
= nama Admin
XY
= jenis kelamin Admin
XXY
= -
Gambar 4.89 Menggambarkan tampilan dari halaman profil curriculum, dimana berisi informasi mengenai nama dari curriculum, jenis kelamin , informasi mengenai alamat Email, account Facebook serta account Twitter
214
4.2.6.4.11 Halaman Update profil
Gambar 4.90 Rancangan Layar Update profil Keterangan : XX
= nama curriculum
XY
= jenis kelamin curriculum
XXY
= -
Gambar 4.90 Menggambarkan halaman curriculum ketika ingin mengupdate (memperbaharui) halaman profil nya. curriculum dapat mengganti photo profil maupun keterangan / informasi curriculum lainnya.
215
4.2.6.4.12 Halmaan pesan masuk
Gambar 4.91 Rancangan Layar halaman Pesan Masuk Keterangan : Xyz = isi pesan Gambar 4.91 Menggambarkan keadaan saat ada pesan yang masuk ke halaman curriculum
216
4.2.6.4.13 Reply pesan masuk
Gambar 4.92 Rancangan Layar Reply pesan masuk Keterangan : Xxx = nama pengirim pesan Xyz = isi pesan Gambar 4.92 Menggambarkan keadaan saat curricullum ingin mreply pesan yang masuk dengan terlebih dahulu menklik button balas pada halaman sebelumnya (pesan masuk) setelah itu,curriculum dapat mereply pesan yang masuk tersebut.
217
4.2.6.4.14 Send Message
Gambar 4.93 Rancangan Layar Send Message Keterangan : Xx
= nama user
Xy = jenis kelamin Xxy = kelas (x-1,x-2,x-3,x-4,x-5,x-6,x-7,x-8,x-9) Gambar 4.93 Menggambarkan keadaan dimana Curriculum dapat mengirimkan pesan kepada user yang dituju dengan mengklik button kirim-pesan.
218
4.2.6.4.15 Halaman reply message
Gambar 4.94 Rancangan Layar Halaman reply message Keterangan : Xxx = nama user yg dituju Xyz = isi message Gambar 4.94 Menggambarkan keadaan dimana curriculum menuliskan pesan kepada user dengan menklik button kirim-pesan pada halaman sebelumnya.
219
4.2.7 Sequence Diagram 4.2.7.1 Sequence Admin 4.2.7.1.1 Sequence Login
Gambar 4.95 Sequence Login Gambar 4.95 Menggambarkan urutan (langkah-langkah) saat Admin akan melakukan login untuk dapat masuk dan memgakses website sosial e-learning dengan memasukan nama pengguna beserta kata sandi setalah itu, kemudian menklik button login.
220
4.2.7.1.2 Sequence Home
Gambar 4.96 Sequence Home Gambar 4.96 Menggambarkan urutan (langkah-langkah) saat Admin memasuki halaman Home pada website sosial e-learning. Pada gambar diatas dijelaskan apa saja yang dapat dilakukan oleh Admin saat berada pada halaman Home.
221
4.2.7.1.3 Sequence Akun (tambah user)
Gambar 4.97 Sequence Akun (tambah user) Gambar 4.97 Menggambaarkan urutan (langkah-langkah) saat Admin akan menambahkan user kedalam database. Kemudian user yang baru ditambahkan akan disimpan datanya kedalam database account dan akan muncul pada grid akun.
222
4.2.7.1.4 Sequence kelas
Gambar 4.98 Sequence kelas Gambar 4.98 Menggambarkan urutan (langkah-langkah) saat Admin akan menambahkan jumlah kelas kedalam database. Kemudian data yang telah dimasukkan oleh adin akan disimpan kedalam database class dan akan muncul pada grid ruang kelas.
223
4.2.7.1.5 Sequence Profil
Gambar 4.99 Sequence Profil Gambar 4.99 Menggambarkan urutan (langkah-langkah) saat admin memasuki halaman profil. Dimana pada halaman tersebut admin dapat mengupdate profilnya dengan menklik edit, dan jika ada pesan yang masuk ke account admin, admin dapat menklik pesan.
224
4.2.7.1.6 Sequence Update Profil
Gambar 4.100 Sequence Update Profil Gambar 4.100 Menggambarkan urutan (langkah-langkah) saat admin ingin mengupdate profil admin. Admin dapat mengupdate informasi account sosial network yang dimiliki maupun mengganti foto profil admin. Dan kemudian dengan menklik simpan maka data yang dimasukkan oleh admin akan tersimpan pada database account.
225
4.2.7.1.7 Sequence Pesan Masuk
Gambar 4.101 Sequence Pesan Masuk Gambar 4.101 Menggambarkan urutan (langkah-langkah) saat ada pesan yang masuk ke halaman admin. Pada halaman tersebut admin dapat membalas pesan tersebut dengan menklik button balas. Jika admin menklik pengirim maka admin akan memasuki halaman profil user tersebut.
226
4.2.7.1.8 Sequence Reply Pesan Masuk
Gambar 4.102 Sequence Reply Pesan Masuk Gambar 4.102 Menggambarkan urutan (langkah-langkah) saat admin ingin mereply pesan masuk yang masuk ke halaman admin. Kemudian admin memeasukkan pesan yang ingin dikirim. Setalh selesai admin menklik button kirim dan pesan akan tersimpan dalam database message kemudian pesn yang tadi dimasukkan oleh admin akan muncul pada grid pesan.
227
4.2.7.1.9 Sequence sosial admin dengan Teacher
Gambar 4.103 Sequence sosial admin dengan Teacher Gambar 4.103 Menggambarkan urutan (langkah-langkah) saat Admin ingin bersosialisasi dengan guru kelas x pada halaman sosial guru. Untuk dapat bersosialisasi dengan guru kelas x pada halaman sosial guru, admin dapat mencreate topik baru dengan memasukkan topik yang diinginkan kemudian menklik button new_topik (jika admin ingin bersosialisasi dengan topik baru). Akan tetapi, admin pun dapat bersosialisasi dan mengomentari topik-topik yang sudah ada dengan menklik reply kemudian masukkan komentar dan komentar tersebut akan tersimpan dalam database topic dan akan muncul pada grid topik terbaru. Begitu juga jika admin ingin mendelete topic maupun komentar yang dimasukkan.
228
4.2.7.1.10 Sequence sosial admin dengan student
Gambar 4.104 Sequence sosial admin dengan student Gambar 4.104 Menggambarkan urutan (langkah-langkah) saat Admin ingin bersosialisasi dengan siswa kelas x pada halaman sosial (kelas x yang dipilih oleh admin). Untuk dapat bersosialisasi dengan siswa kelas x pada halaman sosial, admin dapat mencreate topik baru dengan memasukkan topik yang diinginkan kemudian menklik button new_topik (jika admin ingin bersosialisasi dengan topik baru). Akan tetapi, admin pun dapat bersosialisasi dan mengomentari topik-topik yang sudah ada dengan menklik reply kemudian masukkan komentar dan komentar tersebut akan tersimpan dalam database topic dan akan muncul pada grid topik terbaru. Begitu juga jika admin ingin mendelete topic maupun komentar yang dimasukkan.
229
4.2.7.1.11 Sequence sosial admin dengan Curriculum
Gambar 4.105 Sequence sosial admin dengan Curriculum Gambar 4.105 Menggambarkan urutan (langkah-langkah) saat Admin ingin bersosialisasi curriculum pada halaman sosial curriculum. Untuk dapat bersosialisasi dengan curriculum pada halaman sosial, admin dapat mencreate topik baru dengan memasukkan topik yang diinginkan kemudian menklik button new_topik (jika admin ingin bersosialisasi dengan topik baru). Akan tetapi, admin pun dapat bersosialisasi dan mengomentari topik-topik yang sudah ada dengan menklik reply kemudian masukkan komentar dan komentar tersebut akan tersimpan dalam database topic dan akan muncul pada grid topik terbaru. Begitu juga jika admin ingin mendelete topic maupun komentar yang dimasukkan.
230
4.2.7.1.12 Sequece Sosial Admin
Gambar 4.106 Sequece Sosial Admin Gambar 4.106 Menggambarkan urutan (langkah-langkah) saat admin ingin bersosialisasi dengan user lain (siswa kelas x, guru kelas x, curriculum) pada halaman sosial admin. Untuk dapat bersosialisasi dengan user lain pada halaman sosial admin ini, admin dapat mencreate topik baru dengan memasukkan topik yang diinginkan kemudian menklik button new_topik (jika admin ingin bersosialisasi dengan topik baru). Akan tetapi, admin pun dapat bersosialisasi dan mengomentari topik-topik yang sudah ada dengan menklik reply kemudian masukkan komentar dan komentar tersebut akan tersimpan dalam database topic dan akan muncul pada grid topik terbaru. Begitu juga jika admin ingin mendelete topic maupun komentar yang dimasukkan
231
4.2.7.1.13 Sequence Delete user
Gambar 4.107 Sequence Delete user Gambar 4.107 Menggambarkan urutan (langkah-langkah) saat admin akan mendelete (hapus) user dari dalam database account. Dengan cara menklik user dan menklik button non-aktifkan. Maka user akan terhapus dari database.
232
4.2.7.1.14 Sequence Send Message
Gambar 4.108 Sequence Send Message Gambar 4.108 Menggambarkan urutan (langkah-langkah) saat admin ingin mengirimkan pesan (send message) kepada user lain (siswa kelas x,guru kelas x, curriculum) dengan menklik user yang dituju kemudian menklik button kirim pesan, setelah itu masukkan pesan yang akan dikirmkan setelah selesai klik button kirim dan pesan akan tersimpan dalam database message serta muncul pada grds pesan.
233
4.2.7.1.15 Sequence reply message
Gambar 4.109 Sequence reply message Gambar 4.109 Menggambarkan urutan (langkah-langkah) saat admin ingin membalas pesan (reply message) yang masuk ke halaman admin. Admin dapat membalas pesan tersebut dengan cara enklik pesan, klik pengirim (user yang ingin di reply pesannya) setelah itu masukkan pesan kemudian klik button kirim dan pesan akan tersimpan dalam database message serta muncul pada grid pesan.
234
4.2.7.1.16 Sequence block CommentSlide & repTopic
Gambar 4.110 Sequence block CommentSlide & repTopic Gambar 4.110 Menggambarkan urutan (langkah-langkah) saat admin akan menblock postingan yang ada pada database comment_slide maupun pada topic dengan cara memilih type dari comment yang akan di block (comment pada comment_slide atau topic) kemudian klik view,setelah itu klik button block pada comment yang akan di block.
235
4.2.7.2 Sequence Student 4.2.7.2.1 Sequence Login
Gambar 4.111 Sequence Login Gambar 4.111
Menggambarkan urutan (langkah-langkah) saat
Student akan melakukan login untuk dapat masuk dan memgakses website sosial e-learning dengan memasukan nama pengguna beserta kata sandi setalah itu, kemudian menklik button login
236
4.2.7.2.2 Sequence Home
Gambar 4.112 Sequence Home Gambar 4.112
Menggambarkan urutan (langkah-langkah) saat
student memasuki halaman Home pada website sosial e-learning. Pada gambar diatas dijelaskan apa saja yang dapat dilakukan oleh student saat berada pada halaman Home.
237
4.2.7.2.3 Sequence Materi
Gambar 4.113 Sequence Materi Gambar 4.113 Menggambarkan urutan (langlah-langkah) saat student memasukin halaman materi.
4.2.7.2.4 Sequence Materi (pilih mata pelajaran)
Gambar 4.114 Sequence Materi (pilih mata pelajaran) Gambar 4.114 Menggambarkan urutan (langkah-langkah) saat student menklik mata pelajaran.
238
4.2.7.2.5 Sequence Download Materi
Gambar 4.115 Sequence Download Materi Gambar 4.115 Menggambarkan urutan (langkah-langkah) saat student akan mendownload materi dengan terlebih dahulu menklik mata pelajaran kemudian memilih topik dan menklik download.
239
4.2.7.2.6 Sequence Posting slide
Gambar 4.116 Sequence Posting slide Gambar 4.116 Menggambarkan urutan (langkah-langkah) saat student akan menposting komentar pada slide yang ingin dikomentari.
240
4.2.7.2.7 Sequence profil
Gambar 4.117 Sequence profil Gambar 4.117 Menggambarkan urutan (langkah-langkah) saat student memasuki halaman profil. Dimana terdapat pilihan untuk mengedit (dengan menklik edit) ataupun melihat pesan yang masuk (dengan menklik pesan) kehalaman student.
241
4.2.7.2.8 Sequence Update profil
Gambar 4.118 Sequence Update profil Gambar 4.118 Menggambarkan urutan (langkah-langkah) saat student akan mengupdate profil.dimana student dapat mengupdate informasi mengenai account jejaring sosial yang dimiliki maupun student dapat mengganti photo profil mereka.
242
4.2.7.2.9 Sequence Pesan Masuk
Gambar 4.119 Sequence Pesan Masuk Gambar 4.119 Menggambarkan urutan (langkah-langkah) saat student memasuki halaman pesan masuk.
243
4.2.7.2.10 Sequence Reply pesan
Gambar 4.120 Sequence Reply pesan Gambar 4.120 Menggambarkan urutan (langkah-langkah) saat student akan mereply pesan yang masuk ke halaman student.
244
4.2.7.2.11 Sequence sosial student dengan Teacher
Gambar 4.121 Sequence sosial student dengan Teacher Gambar 4.121 Menggambarkan urutan (langkah-langkah) saat student akan bersosialisasi dengan teacher. Dimana student dapat membuat topik baru forum sosial dengan teacher maupun student dapat mengomentari topik-topik yng sudah ada.
245
4.2.7.2.12 Sequence sosial dengan kelas lain
Gambar 4.122 Sequence sosial dengan kelas lain Gambar 4.122 Menggambarkan urutan (langkah-langkah) saat student akan bersosialisasi dengan sesama student (kelas x lain di sma negeri 90 jakarta). Dimana student dapat membuat topik baru forum sosial dengan student lain maupun student dapat mengomentari topik-topik yng sudah ada.
246
4.2.7.2.13 Sequence sosial dengan satu kelas
Gambar 4.123 Sequence sosial dengan satu kelas Gambar 4.123 Menggambarkan urutan (langkah-langkah) saat student akan bersosialisasi dengan sesama student (sesama kelas x dalam satu kelas). Dimana student dapat membuat topik baru forum sosial dengan student lain maupun student dapat mengomentari topik-topik yng sudah ada.
247
4.2.7.2.14 Sequence sosial dengan Curriculum
Gambar 4.124 Sequence sosial dengan Curriculum Gambar 4.124 Menggambarkan urutan (langkah-langkah) saat student akan bersosialisasi dengan curriculum Dimana student dapat membuat topik baru forum sosial dengan curriculum maupun student dapat mengomentari topiktopik yng sudah ada.
248
4.2.7.2.15 Sequence sosial dengan Admin
Gambar 4.125 Sequence sosial dengan Admin Gambar 4.125 Menggambarkan urutan (langkah-langkah) saat student akan bersosialisasi dengan admin. Dimana student dapat membuat topik baru forum sosial dengan admin maupun student dapat mengomentari topik-topik yng sudah ada.
249
4.2.7.2.16 Sequence Send Massage
window profil Student
Message
<
> klik_user
klik_kirim_pesan input_pesan klik_kirim Kirim() <>
grid pesan kirim()
X Gambar 4.126 Sequence Send Massage Gambar 4.126 Menggambarkan urutan (langkah-langkah) saat student akan mengirim pesan (send message) kepada user lain.dimana student dapat mengirim pesan dengan cara menklik user yang dituju kemudian menklik button kirim pesan pada profil user yang dituju,setelah itu student dapat menginput pesan yang akan disampaikan setelah selesai menklik button kirim dan pesan yang diinput akan terkirim dan masuk kehalaman user yang dituju.
250
4.2.7.2.17 Sequence reply message
Gambar 4.127 Sequence reply message Gambar 4.127 Menggambarkan urutan (langkah-langkah) saat student akan mereply pesan yang masuk ke halaman student.
251
4.2.7.2.18 Sequence Kuis
Gambar 4.128 Sequence Kuis Gambar 4.128 Menggambarkan urutan (langlah-langkah) saat student akan melakukan kuis dengan cara menklik kuis kemudian student dapat berulang kali memilih soal yang akan dikerjakan dan memilih jawaban yang benar serta jika student ingin melihat nilai yang diperoleh terlebih dahulu harus mensubmit jawaban dengan menklik button submit. Untuk melihat score yang diperoleh student pada pengerjaan kuis yang sedang dikerjakan,student dapat menklik button view score.
252
4.2.7.2.19 Sequence Nilai
Gambar 4.129 Sequence Nilai Gambar 4.129 Menggambarkan urutan (langkah-langkah) saat student akan melihat nilai dari kuis-kuis yang telah dikerjakan oleh mereka,dengan menklik nilai,kemudian pilih urutan kuis yang ingin dilihat nilainya kemudian klik button view.
253
4.2.7.3 Sequence Teacher 4.2.7.3.1 Sequence Login
Gambar 4.130 Sequence Login Gambar 4.130 Menggambarkan urutan (langkah-langkah) saat Teacher akan melakukan login untuk dapat masuk dan memgakses website sosial e-learning dengan memasukan nama pengguna beserta kata sandi setalah itu, kemudian menklik button login
254
4.2.7.3.2 Sequence Home
Gambar 4.131 Sequence Home Gambar 4.131 Menggambarkan urutan (langkah-langkah) saat teacher memasuki halaman Home pada website sosial e-learning. Pada gambar diatas dijelaskan apa saja yang dapat dilakukan oleh teacher saat berada pada halaman Home.
255
4.2.7.3.3 Sequence Kurikulum
window kurikulum
subject_topic_materi
<> Teacher klik_materi get_mata_pelajaran mata_pelajaran
x Gambar 4.132 Sequence Kurikulum Gambar 4.132 Menggambarkan urutan (langkah-langkah) Saat teacher memasuki halaman kurikulum yang berisikan daftar mata pelajaran yang dimiliki oleh teacher tersebut.
256
4.2.7.3.4 Sequence Upload Materi
Gambar 4.133 Sequence Upload Materi Gambar 4.133 Menggambarkan urutan (langkah-langkah) saat teacher akan mengupload materi dengan cara memilih nata pelajaran setelah itu memilih topik berdasarkan mata pelajaran tersebut kemudian menklik button browser untuk mengambil file yang akan di upload setelah itu menklik button kirim.
257
4.2.7.3.5 Sequence Subject
Gambar 4.134 Sequence Subject Gambar 4.134 Menggambarkan urutan (langkah-langkah) saat teacher memasuki halaman subject.
4.2.7.3.6 Sequence download materi
Gambar 4.135 Sequence download materi Gambar 4.135
Menggambarkan urutan (langkah-langkah) saat
student akan mendownload materi dengan terlebih dahulu menklik mata pelajaran kemudian memilih topik dan menklik download.
258
4.2.7.3.7 Sequence Posting slide
Gambar 4.136 Sequence Posting slide Gambar 4.136 Menggambarkan urutan (langkah-langkah) saat teacher akan menposting komentar pada slide yang ingin dikomentari.
259
4.2.7.3.8 Sequence kuis
Gambar 4.137 Sequence kuis Gambar 4.137 Menggambarkan urutan (langkah-langkah) saat teacher Memasuki halaman kuis.
260
4.2.7.3.9 Sequence Buat Kuis
Gambar 4.138 Sequence Buat Kuis Gambar 4.138 Mwnggambarkan urutan (langlah-langkah) saat teacher akan membuat kuis. Dengan memasukkan durasi untuk tiap soal yang ada,memilih soal-soal yang ada kemudian menklik button simpan.
261
4.2.7.3.10 Sequence Soal
Gambar 4.139 Sequence Soal Gambar 4.139 Menggambarkan urutan (langkah-langkah) saat teacher memasuki halaman soal. Untuk membuat soal baru, teacher dapat menklik button buat soal.
262
4.2.7.3.11 Sequence Buat Soal
Gambar 4.140 Sequence Buat Soal Gambar 4.140 Menggambarkan urutan (langkah-langkah) saat teacher akan membuat soal yang nantinya akan digunakan untuk membuat kuis. Teacher dapat membuat soal dengan cara memilih topik dari soal,memasukkan pertanyaan dan jawaban, kemudian menklik button tambah untuk menyimpan dan b utton hapus untuk menghapus soal dari database.
263
4.2.7.3.12 Sequence profil
Gambar 4.141 Sequence profil Gambar 4.141 Menggambarkan urutan (langkah-langkah) saat teacher memasuki halaman profil. Dimana terdapat pilihan untuk mengedit (dengan menklik edit) ataupun melihat pesan yang masuk (dengan menklik pesan) kehalaman teacher.
264
4.2.7.3.13 Sequence Update profil
Gambar 4.142 Sequence Update profil Gambar 4.142 Menggambarkan urutan (langkah-langkah) saat teacher akan mengupdate profil.dimana teacher dapat mengupdate informasi mengenai account jejaring sosial yang dimiliki maupun teacher dapat mengganti photo profil mereka.
265
4.2.7.3.14 Sequence Pesan Masuk
Gambar 4.143 Sequence Pesan Masuk Gambar 4.143 Menggambarkan urutan (langkah-langkah) saat teacher memasuki halaman pesan masuk.
266
4.2.7.3.15 Sequence Reply pesan
Gambar 4.144 Sequence Reply pesan Gambar 4.144 Menggambarkan urutan (langkah-langkah) saat teacher akan mereply pesan yang masuk ke halaman teacher.
267
4.2.7.3.16 Sequence Send message
Gambar 4.145 Sequence Send message Gambar 4.145 Menggambarkan urutan (langkah-langkah) saat teacher akan mengirim pesan (send message) kepada user lain.dimana teacher dapat mengirim pesan dengan cara menklik user yang dituju kemudian menklik button kirim pesan pada profil user yang dituju,setelah itu teacher dapat menginput pesan yang akan disampaikan setelah selesai menklik button kirim dan pesan yang diinput akan terkirim dan masuk kehalaman user yang dituju.
268
4.2.7.3.17 Sequence Reply send Message
Gambar 4.146 Sequence Reply send Message Gambar 4.146 Menggambarkan urutan (langkah-langkah) saat teacher akan mereply pesan yang masuk ke halaman teacher.
269
4.2.7.3.18 Sequence sosial Teacher dengan student
Gambar 4.147 Sequence sosial Teacher dengan student Gambar 4.147 Menggambarkan urutan (langkah-langkah) saat steacher akan bersosialisasi dengan student. Dimana teacehr dapat membuat topik baru forum sosial dengan student maupun teacher dapat mengomentari topik-topik yng sudah ada.
270
4.2.7.3.19 Sequence sosial Teacher dengan Teacher
Gambar 4.148 Sequence sosial Teacher dengan Teacher Gambar 4.148 Menggambarkan urutan (langkah-langkah) saat steacher akan bersosialisasi dengan sesama teacher. Dimana teacher dapat membuat topik baru forum sosial dengan teacher maupun teacher dapat mengomentari topiktopik yng sudah ada.
271
4.2.7.3.20 Sequence sosial Teacher dengan Curriculum
Gambar 4.149 Sequence sosial Teacher dengan Curriculum Gambar 4.149 Menggambarkan urutan (langkah-langkah) saat teacher akan bersosialisasi dengan curriculum Dimana teacher dapat membuat topik baru forum sosial dengan curriculum maupun teacher dapat mengomentari topiktopik yng sudah ada.
272
4.2.7.3.21 Sequence sosial Teacher dengan Admin
Gambar 4.150 Sequence sosial Teacher dengan Admin Gambar 4.150 Menggambarkan urutan (langkah-langkah) saat teacher akan bersosialisasi dengan admin. Dimana teacher dapat membuat topik baru forum sosial dengan admin maupun teacher dapat mengomentari topik-topik yng sudah ada.
273
4.2.7.4 Sequence Curriculum 4.2.7.4.1 Sequence Login
Gambar 4.151 Sequence Login Gambar 4.151 Menggambarkan urutan (langkah-langkah) saat Curriculum akan melakukan login untuk dapat masuk dan memgakses website sosial e-learning dengan memasukan nama pengguna beserta kata sandi setalah itu, kemudian menklik button login
274
4.2.7.4.2 Sequence Home
Gambar 4.152 Sequence Home Gambar 4.152 Menggambarkan urutan (langkah-langkah) saat curriculum memasuki halaman Home pada website sosial e-learning. Pada gambar diatas dijelaskan apa saja yang dapat dilakukan oleh curriculum saat berada pada halaman Home.
275
4.2.7.4.3 Sequence Subject (tambah atau hapus)
Gambar 4.153 Sequence Subject (tambah atau hapus) Gambar 4.153 Menggambarkan urutan (langkah-langkah) saat curriculum akan menambahkan atau menghapus subject (mata pelajaran).
276
4.2.7.4.4 Sequence Materi
Gambar 4.154 Sequence Materi Gambar 4.154 Menggambarkan urutan (langkah-langkah) saat curriculum memasuki halaman materi. 4.2.7.4.5 Sequence Approve Materi 4.2.7.4.5.1 Halaman Approve Materi (awal)
Gambar 4.155 Halaman Approve Materi (awal) Gambar 4.155 Menggambarkan urutan (langkah-langkah) saat curriculum memasuki halaman awal pada saat akan mengapprove materi
277
4.2.7.4.5.2 Halaman Approve Materi (lanjutan)
Gambar 4.156 Halaman Approve Materi (lanjutan) Gambar 4.156 Menggambarkan urutan (langkah-langkah) saat curricukum akan mengapprove materi dengan menklik edit pada materi pokok.
4.2.7.4.5.3 Halaman Approve Materi (akhir)
Gambar 4.157 Halaman Approve Materi (akhir) Gambar 4.157 Menggambarkan urutan (langkah-langkah) saat curriculum akan mengapprove materi dengan mencentang pada materi yang akan di approve.
278
4.2.7.4.6 Sequence sosial curriculum dengan Teacher
Gambar 4.158 Sequence sosial curriculum dengan Teacher Gambar 4.158 Menggambarkan urutan (langkah-langkah) saat curriculum akan bersosialisasi dengan teacher. Dimana curriculum dapat membuat topik baru forum sosial dengan teacher maupun curriculum dapat mengomentari topiktopik yng sudah ada.
279
4.2.7.4.7 Sequence sosial curriculum dengan student
Gambar 4.159 Sequence sosial curriculum dengan student Gambar 4.159 Menggambarkan urutan (langkah-langkah) saat curriculum akan bersosialisasi dengan student. Dimana curriculum dapat membuat topik baru forum sosial dengan student maupun curriculum dapat mengomentari topiktopik yng sudah ada.
280
4.2.7.4.8 Sequence sosial curriculum dengan Admin
Gambar 4.160 Sequence sosial curriculum dengan Admin Gambar 4.160 Menggambarkan urutan (langkah-langkah) saat curriculum akan bersosialisasi dengan admin. Dimana curriculum dapat membuat topik baru forum sosial dengan admin maupun curriculum dapat mengomentari topik-topik yng sudah ada.
281
4.2.7.4.9 Sequence Profil
Gambar 4.161 Sequence Profil Gambar 4.161 Menggambarkan urutan (langkah-langkah) saat curriculum memasuki halaman profil. Dimana terdapat pilihan untuk mengedit (dengan menklik edit) ataupun melihat pesan yang masuk (dengan menklik pesan) kehalaman curriculum.
282
4.2.7.4.10 Sequence Update profil
Gambar 4.162 Sequence Update profil Gambar 4.162 Menggambarkan urutan (langkah-langkah) saat curriculum akan mengupdate profil.dimana curriculum dapat mengupdate informasi mengenai account jejaring sosial yang dimiliki maupun curriculum dapat mengganti photo profil mereka.
283
4.2.7.4.11 Sequence pesan masuk
Gambar 4.163 Sequence pesan masuk Gambar 4.163 Menggambarkan urutan (langkah-langkah) saat curriculum memasuki halaman pesan masuk.
284
4.2.7.4.12 Sequence Reply pesan masuk
Gambar 4.164 Sequence Reply pesan masuk Gambar 4.164 Menggambarkan urutan (langkah-langkah) saat curriculum akan mereply pesan yang masuk ke halaman curriculum.
285
4.2.7.4.13 Sequence Send Message
Gambar 4.165 Sequence Send Message Gambar 4.165 Menggambarkan urutan (langkah-langkah) saat curriculum akan mengirim pesan (send message) kepada user lain.dimana curriculum dapat mengirim pesan dengan cara menklik user yang dituju kemudian menklik button kirim pesan pada profil user yang dituju,setelah itu curriculum dapat menginput pesan yang akan disampaikan setelah selesai menklik button kirim dan pesan yang diinput akan terkirim dan masuk kehalaman user yang dituju.
286
4.2.7.4.14 Sequence reply message
Gambar 4.166 Sequence reply message Gambar 4.166 Menggambarkan urutan (langkah-langkah) saat curriculum memasuki halaman pesan masuk.
287
4.2.8 Component Diagram
STUDENT
ADMIN
TEACHER
U
U
U
F
F
F
CURRICULUM SERVER U
M
F
M
Gambar 4.166 Component Diagram Tipe client-server yang kami pergunakan untuk SMA NEGERI 90 JAKARTA pada admin, student dan teacher adalah Centralized Data. Tipe ini dipilih karena server hanya berfungsi sebagai tempat penyimpanan data untuk kebutuhan pihak sekolah dan fungsifungsi disebar di antara client sehingga masing-masing client memiliki fungsi yang unik. Selain itu, tipe Centralized Data juga sangat cocok untuk dipakai pada sistem yang berskala menengah, karena beban data yang tidak terlalu besar dan kebutuhan spesifikasi
288
komputer yang tidak terlalu tinggi. Sedangkan untuk curriculum dipergunakan tipe client-server Distribute Data. Dimana pada curriculum terdapat penyimpanan data yang gunanya agar data mengenai kurikulum yang di update tidak lansung terupdate pada server. Sehingga tidak mengganggu kurikulum yang sedang berjalan.
289
4.2.9 Deployment Diagram
290
Gambar 4.167 Deployment Diagram 4.2.10 Perancangan Database 4.2.10.1 Perancangan Database Account Field
Type
username
varchar(100)
password
varchar(100)
type
varchar(10)
fullname
varchar(200)
sex
int(1)
class
int(11)
birthdate
timestamp
banned
tinyint(1) Tabel 4.32 Perancangan Database Account
4.2.10.2 Perancangan Database Class Field
Type
id
int(11)
name
varchar(10) Tabel 4.33 Perancangan Database Class
291
4.2.10.3 Perancangan Database comment_slide Field
Type
author
varchar(100)
recipient
varchar(100)
topic
varchar(200)
text
text
date
timestamp Tabel 4.34 Perancangan Database comment_slide
4.2.10.4 Perancangan Database Subject Field
Type
id
int(11)
text
varchar(100)
description
text
date_modified
timestamp
date_started
timestamp Tabel 4.35 Perancangan Database Subject
292
4.2.10.5 Perancangan Database Subject_topic Field
Type
Id
int(11)
subject_id
int(11)
Series
int(11)
Text
varchar(100)
text_description
text
date_modified
timestamp
date_added
timestamp Tabel 4.36 Perancangan Database Subject_topic
4.2.10.6 Perancangan Database Subject_topic_material Field
Type
Id
int(11)
resource_address
varchar(200)
Subject
int(11)
subject_topic
int(50)
Author
varchar(100)
Title
varchar(100)
date_uploaded
timestamp
isApproved
tinyint(1) Tabel 4.37 Perancangan Database Subject_topic_material
293
4.2.10.7 Perancangan Database Subject_topic_question Field
Type
id
int(11)
subject_topic
varchar(100)
date_created
timestamp
author
varchar(100)
text
text
answer1
varchar(200)
answer2
varchar(200)
answer3
varchar(200)
answer4
varchar(200)
answer5
varchar(200)
used
int(11)
answered
int(11)
answered_correctly
int(11)
Tabel 4.38 Perancangan Database Subject_topic_question
4.2.10.8 Perancangan Database Subject_topic_kuis Field
Type
id
int(11)
date_created
timestamp
subject_topic
int(11)
294
Title
varchar(100)
Duration
int(11)
Author
varchar(100)
Used
int(11) Tabel 4.39 Perancangan Database Subject_topic_kuis
4.2.10.9 Perancangan Database Subject_topic_kuis_question Field
Type
quiz
varchar(100)
Titlequiz
varchar(100)
authorquestion_id
int(11)
Tabel 4.40 Perancangan Database Subject_topic_kuis_question
4.2.10.10 Perancangan Database Topic Field
Type
id
int(11)
author
varchar(100)
date
timestamp
room
varchar(50)
text
text Tabel 4.41 Perancangan Database Topic
295
4.2.10.11 Perancangan Database message Field
Type
id
int(11)
from
varchar(100)
to
varchar(100)
date
timestamp Tabel 4.42 Perancangan Database Message
