commit to user BAB IV
IMPLEMENTASI DAN PEMBAHASAN
2. Halaman 2 kolom
H
alaman 2 kolom digunakan dalam halaman posts (informations, course materials, videos, dan tasks)
G
ambar 4.2. Halaman Utama 2 Kolom
4.2. Halaman Login
H
alaman login dapat diakses melalui dua cara, yaitu dengan klik sign in pada sidebar atau melalui URL : /e -learning/index.php/site/ login. Jika cara yang dilakukan adalah dengan mengaksesnya melalui sidebar, maka akan muncul popup dialog login seperti gambar 4.3 .
G
4.3. Create dan Update Teacher
Teacher _form adalah file PHP pada folder view yang digunakan pada proses render create dan update teacher. Saat render, method renderPartial dipanggil untuk menampilkan _form. _form merupakan file PHP yang didalamnya terdapat instansiasi CActiveForm untuk mengisi data-data teacher.
G
4.4. Create dan Update Student
Student _form adalah file PHP yang dipanggil saat proses render create dan update student. Pada saat proses render create dan update, method renderPartial dipanggil untuk menampilkan form input.
4.5. Create dan Update User
H
alaman create user adalah halaman yang digunakan saat admin menambahkan user. Halaman yang muncul sama dengan halaman yang muncul pada halaman update user karena method renderPartial memanggil file yang sama, yaitu file _form .
G
4.6. Manage Users
G
ambar 4.7. menunjukkan gambar pengelolaan user. Dalam halaman tersebut terdapat link berupa tombol untuk mengaktifkan dan menonaktifkan user. Pesan akan muncul ketika terjadi perubahan pada data user. User yang belum aktif tidak dapat masuk ke dalam e-Learning.
G
ambar 4.7. Manage Users
4.7.Create dan Update Course
H
alaman create course merupakan halaman yang digunakan untuk
menambahkan mata kuliah ke dalam sistem. Pada saat method render dipanggil, method tersebut juga memanggil method renderPartial yang memanggil file _
form untuk ditampilkan. File tersebut juga digunakan pada proses update.
G
4.8. Create dan Update Major
Create major adalah halaman yang digunakan admin untuk memasukkan data jurusan. Halaman yang muncul sama dengan halaman update major.
G
ambar 4.9. Create dan Update Majors
4.9. Create dan Update Class
Create class adalah halaman yang digunakan admin untuk memasukkan data kelas. Halaman yang muncul sama dengan halaman update class.
G
ambar 4. 10 . Create dan Update Classes
4.10. Create dan Update Lecture
H
alaman create lecture adalah halaman yang hanya dapat digunakan oleh admin. Halaman ini digunakan untuk menambahkan kuliah ( lecture). Untuk memudahkan dalam hal input dan mengurangi kesalahan input, proses input data menggunakan class CjuiAutocomplete sehingga data yang dimasukkan valid.
G
ambar 4.11. Create dan Update Lecture
4.11. Set Study Plan Card
Data lecture kemudian digunakan dalam proses input kartu rencana studi. Class EMultiselect diinstansiasi dan digunakan dalam proses ini agar memudahkan dalam hal input data. Halaman ini hanya dapat diakses oleh peserta didik (student).
G
4.12. Create dan Update Home Post
H
alaman create home post adalah halaman yang digunakan dalam pembuatan home post. Halaman ini hanya dapat diakses oleh admin. Terdapat 3 tombol dibawah textarea, yaitu publish untuk mempublikasikan, draft untuk menyimpan tanpa mempublikasikan, dan back untuk kembali ke halaman sebelumnya. Terdapat checkbox dan radiobutton untuk mengatur privasi dan status komentar.
G
4.13. Create dan Update Information
H
alaman create information digunakan untuk menambahkan informasi. H
alaman ini hanya dapat diakses oleh teacher. Sedangkan halaman update digunakan untuk meng-update informasi.
G
ambar 4.14. Create dan Update Informations
B
erdasarkan gambar, terdapat multiselect. Multiselect ini yang kemudian digunakan untuk mengisi data relasi antara program kuliah (lecture) dan post.
Sama seperti proses render sebelumnya, dalam proses render create dan update juga dipanggil method renderPartial renderPartial yang memanggil file _
form yang menciptakan form guna memasukkan data informasi.
4.14. Create dan Update Course Material
Create course material adalah halaman yang digunakan untuk menambahkan materi. Halaman ini hanya dapat diakses oleh teacher. Sama seperti proses penambahan dan render informasi, halaman ini juga mempunyai input multiselect yang digunakan untuk mengisi data hubungan antara kuliah dan
post. Yang membedakan antara materi dan informasi adalah tipe post. Tipe post materi adalah Course Material, sedangkan informasi mempunyai tipe post Informations.
G
ambar 4.15. Create dan Update Course Material
4.15. Create dan Update Video
Create video adalah halaman yang muncul ketika teacher akan memasukkan video. Video yang digunakan adalah video yang di ambil dari youtube. Gambar 4.16 memperlihatkan adanya sebuah kolom yang digunakan untuk memasukkan id video youtube. Id youtub e adalah kode yang terdapat pada URL video youtube. Sebagai contoh http://www.youtube.com/watch ? v=ZElwb2GCrao& feature=fvsr , maka id video tersebut adalah kode setelah tanda v=, yaitu ZElwb2Gcrao .
Id tersebut kemudian dimasukkan ke dalam kolom id youtube. Pada saat masuk ke halaman index dan view video, maka Id tersebut akan diolah oleh obje k dari class JYoutube sehingga menjadi frame yang berisi video tersebut.
G
ambar 4.16. Create dan Update Video
4.16. Create dan Update Task
Create task adalah halaman yang digunakan untuk menambahkan tugas ke dalam e-Learning. Pada gambar 4.17 , terlihat bahwa terdapat kolom tambahan untuk menambahkan waktu pengumpulan tugas.
G
ambar 4.17. Create dan Update Task
4.17. Manage Comments
H
alaman manage comments adalah halaman yang digunakan untuk
melakukan pengaturan komentar yang masuk. Pada halaman pengaturan ini, terdapat tombol untuk menghapus, mengedit, melihat, menerima (approve), dan menolak (unapprove) komentar.
G
4.18. Set Study Result Card
H
alaman ini menunjukkan halaman yang digunakan oleh teacher untuk mengisi dan mengupdate nilai akhir yang dicapai oleh peserta didik. Nilai yang dimasukkan adalah nilai akhir dengan skala 4. Untuk menghindari kesalahan input, maka digunakan dropdown dalam memasukkan nilai tersebut.
G
ambar 4.19. Set Study Result Card
4.19. Index Users dan View User
Daftar user akan muncul pada halaman index. Sedangkan detail informasi mengenai user tersebut akan muncul ketika link berupa username diaktifkan. G
ambar 4.20. menggambarkan index users yang memberikan daftar user.
G
G
ambar 4.21. menunjukkan detail informasi user dengan username 1
3
nightevil.
G
ambar 4.21. View User
4.20. Index Teachers dan View Teacher
Index teacher menunjukkan daftar teacher. Pada gambar terlihat juga gravatar dari teacher. Gravatar dibuat berdasarkan alamat e-mail.
G
ambar 4.22. Index Teachers
Ketika link berupa Id teacher diaktifkan, maka akan muncul detail informasi mengenai teacher.
G
4.21. Index Students dan View Student
H
alaman index student, menampilkan daftar student. Informasi yang ditampilkan pada halaman ini adalah ID, username, fullname, dan address.
G
ambar 4.24. Index Students
G
ambar berikut merupakan gambar detail informasi mengenai student dengan ID M3109002.
G
ambar 4.25. View Student
4.22. Index Courses dan View Course
H
alaman index, hanya menampilkan daftar nama mata kuliah, sedangkan detail informasi matakuliah terdapat pada halaman view.
G
G
ambar 4.27 menggambarkan halaman view course dengan id course adalah 20202.
G
ambar 4.2 7. View Course
4.23. Index Majors dan View Major
H
alaman index majors, menampilkan daftar jurusan (majors). Halaman ini mempunyai dua tautan, yang pertama adalah link berupa nama jurusan dan yang kedua adalah details.
G
ambar 4.2 8. Index Majors
Tautan nama jurusan berisi daftar kelas pada jurusan tersebut, sedangkan details berisi detail informasi jurusan tersebut.
G
4.24. Index Classes dan View Class
Daftar kelas terdapat pada halaman index class, sedangkan detail informasi mengenai kelas tersebut terdapat pada halman view.
G
ambar 4. 30 . Index Classes
Jika link berupa nama kelas diaktifkan maka halaman akan dialihkan menuju view yang menampilkan detail informasi mengenai kelas tersebut.
G
ambar 4.3 1. View Class
4.25. Index Lectures
H
alaman index lectures berisi deretan detail lectures, yaitu nama instruktur, nama mata kuliah, jurusan dan kelas.
G
4.26. Index Study Plan Card
Index study plan card menampilkan daftar mata kuliah yang hanya diambil oleh peserta didik.
G
ambar 4.3 3. Index Study Plan Card
Jika link yang terdapat pada halaman index study plan card dan lectures diaktifkan, maka kita akan diarahkan pada halaman index post yang didalamnya terdapat 4 link, yaitu information, course material, video, dan task. Masing -masing link tertuju pada pada halaman informatios, course materials, videos, dan tasks.
G
4.27. Index Home Posts dan View Home Post
Home post adalah post yang terdapat pada halaman awal saat masuk ke dalam e-learning. /site/index adalah URL dari home. Pada URL tersebut disajikan daftar home post.
G
ambar 4.3 5. Index Home Posts
Jika judul post tersebut diklik maka akan muncul detail home post seperti yang ditunjukkan pada gambar berikut.
G
4.28. Index Informations dan View Information
H
alaman index informations berisi daftar informasi yang dapat diakses oleh user dan guest. Guest hanya dapat mengakses informasi yang bersifat public.
G
ambar 4.3 7. Index Informations
Jika judul informasi diklik, maka akan muncul detail informasi dari post tersebut.
G
ambar 4.3 8. View Information
Dari gambar 4.39. terlihat bahwa saat berada pada halaman view information, terdapat form untuk memberikan komentar dan daftar komentar. Jika tidak ada komentar, maka ditampilkan pesan no result found . Pada gambar, juga
terlihat tombol untuk memasukkan post tersebut ke dalam aplikasi jejaring sosial seperti facebook, google+, dan twitter.
4.29. Index Course Materials dan View Course Material
Index course material berisi daftar materi yang telah dipublish. Jika judul dari post diklik, maka kita akan diarahkan ke view yang berisi detail informasi dari materi yang dipublikasikan tersebut.
G
ambar 4. 39 . Index Course Materials
G
ambar berikut menunjukkan halaman view dari materi yang berjudul
G
4.30. Index Videos dan View Video
G
ambar 4.42. menunjukkan daftar video yang telah dipublikasikan oleh instruktur.
G
ambar 4. 41 . Index Videos
Setiap post yang telah diisi dengan id youtube akan menampilkan gambar kecil pada daftar yang berisi video dari youtube tersebut. Jika gambar tersebut diklik, maka gambar tersebut akan berubah menjadi video yang siap untuk dimainkan.
H
alaman view hampir sama dengan halaman index, namun gambar yang ditampilkan lebih besar dan terletak ditengah-tengah dan terdapat form komentar.
G
4.31. Index Tasks dan View Task
H
alaman index dari tasks berisi daftar tugas yang telah dipublikasikan oleh instruktur
G
ambar 4. 43 . Index Tasks
Pada halaman view akan muncul detail informasi mengenai tugas tersebut. Jika waktu pengumpulan file tugas belum habis, maka akan terdapat tombol untuk meng-upload file tugas.
G