BAB 4 RANCANGAN SISTEM E-LEARNING MUSEUM SERANGGA DAN TAMAN KUPU TMII

Transkripsi

1 BAB 4 RANCANGAN SISTEM E-LEARNING MUSEUM SERANGGA DAN TAMAN KUPU TMII 4.1 Rancangan Komponen E-Learning Berdasarkan hasil penelitian yang dilakukan di Museum Serangga Dan Taman Kupu TMII yang berlokasi di jakarta timur. Penulis merumuskan komponenkomponen apa saja yang dipakai untuk membangun sistem e-learningpada museum tersebut. Jenis e-learning yang dipakai adalah social learning. Social learning merupakan jenis e-learning dimana learner dapat saling berinteraksi dan bertukar informasi tentang apa saja yang dipelajari dalam e-learning tersebut.rancangan tersebut nantinya difokuskan kepada pembelajaran mengenai serangga yang ada di Indonesia yang meliputi jenis-jenis serangga, video serangga dan keterangan secara tertulis pada setiap serangga dan menampilkan gambar, penulis juga memberikan pembelajaran terhadap peranan-peranan serangga yang juga menggunakan media video, keterangan secara tertulis dan gambar. Menyediakan forum diskusi untuk sharing dengan pengunjungyang sudah mendaftar menjadi member di websiteelearning Museum Serangga Dan Taman Kupu TMII. serta menyediakan private message untuk member yang ingin menanyakan informasi lebih lanjut pada admin yang disebut fitur konsultasi. Rancangan Sistem e-learning yang akan diterapkan pada Museum Serangga Dan Taman Kupu TMII adalah sebagai berikut Absorb Activity Aktivitas absorb yang akan diterapkan pada website e-learning ini berupa penjelasan dengan menggunakan keterangan secara tertulis dan menyisipkanvideo tentang materi serangga yang terkait Presentation Presentation ini merupakan bagian dari tipe-tipe absorb. Presentation ini dianggap sangat cocok untuk diterapkan pada website e-learning Museum Serangga Dan Taman Kupu TMII. Dalam

2 presentation ini biasanya digunakan untuk menjelaskan pembelajaran serangga. Dengan berupa text maupun video Slide Show Slide show merupakan bagian dari tipe-tipe presentation. Slide show dianggap cocok untuk diterapkan pada website e-learning Museum Serangga Dan Taman Kupu TMII. Karena manusia pada umumnya lebih gampang menyerap pelajaran dengan melihat gambar-gambar dan text yang berisi dan disertakan video nya. Slide show ini berguna untuk menjelaskan materi-materi tentang serangga yang diberikan untuk pembelajaran Do Activities Do activities yang diterapkan pada websitee-learning Museum Serangga Dan Taman Kupu TMII ini adalah dengan memberi soal-soal latihan yang nantinya member yang sudah mendaftar akan mendapatkan score dari hasil yang mereka kerjakan. Memberi soal-soal latihan pada member dianggap sangat cocok untuk website E-learning ini karena member dapat mengingat kembali apa yang mereka pelajari sebelumnya. Dan menjadi evaluasi bagi member juga Game and Simulations Game and simulations merupakan bagian dari do activies. Karena game and simulations sangat cocok untuk memenuhi kebutuhan point-point diatas Connect Activities Connect activities yang diterapkan pada website e-learning Museum Serangga Dan Taman Kupu TMII ini digunakan untuk menyalurkan pikiran

3 sesama member dengan kata lain member bisa melakukan tanya jawab atau sharing seputar serangga yang diaplikasikan dalam bentuk forum diskusi Quistioning Activities Quistioning activities ini merupakan bagian dari tipe-tipe connect activities. Quistioning activities sangat cocok untuk diterapkan pada museum serangga dan taman kupu TMII. Karena quistioning activities ini para memberbisa melakukan tanya jawab atau saling berinteraksi untuk mempelajari serangga. Para memberjuga bisa melakukan private message dengan admin. Para member juga bisa melakukan diskusi melalui forum diskusi yang disediakan. Dan para pengunjung bisa membuat forum diskusi seputar serangga Predictable Learning Cycle predictable learning cycle adalah sebuah siklus pembelajaran yang memungkinkan pembelajaran lebih terprediksi dan membiarkan learner lebih berkonsentrasi pada studi yang sedang mereka jalankan daripada terus menerus belajar untuk menguasai jenis pembelajaran terbaru. Berikut merupakan serangkaian materi pembelajaran Museum Serangga dan Taman Kupu TMII yang akan diberikan dan dikemas dalam 6 pembahasan: Pembahasan 1 Pembahasan 2 Pembahasan 3 Pembahasan 4 Pembahasan 5 Pembahasan 6 Class Meeting Presentation (absorb activities) Pengenalan Serangga Jenis-jenis Serangga Peranan Serangga di alam Wabah serangga Penanggulangan wabah Pemanfaatan serangga bagi manusia

4 Activities Mempelajari pengetahuan dasar mengenai serangga Mempelajari Jenis-jenis Serangga Mempelajari Peranan serangga di alam Mempelajari wabah serangga Mempelajari penanggulangan wabah Mempelajari pemanfaatan serangga bagi manusia Assignments Drill and Practice (Individual) Mengerjakan kuis secara online mengenai pengenalan serangga Mengerjakan kuis secara online mengenai jenis-jenis serangga Mengerjakan kuis secara online mengenai Peranan serangga di alam Mengerjakan kuis secara online mengenai wabah serangga Mengerjakan kuis secara onlinemengenai penanggulangan wabah serangga Mengerjakan kuis secara onlinemengenai pemanfaatan serangga bagi manusia Discussion (Group) Mengumpul kan informasi dan pendapat dari Learner lainnya melalui forum Mengumpul kan informasi dan pendapat murid Learner lainnya melalui forum Mengumpul kan informasi dan pendapat Learner lainnya melalui forum Mengumpul kan informasi dan pendapat Learner lainnya melalui forum Mengumpul kan informasi dan pendapat Learner lainnya melalui forum Mengumpul kan informasi dan pendapat Learner lainnya melalui forum Resources Web sites and searches Website penyedia gambar dan teori tambahan Cari: Pengenalan Serangga Website penyedia gambar dan teori tambahan Cari: Jenis- Jenis Serangga Website penyedia gambar dan teori tambahan Cari: Peranan Serangga di alam Website penyedia gambar dan teori tambahan Cari: Wabah Serangga Website penyedia gambar dan teori tambahan Cari: penanggulangan wabah serangga Website penyedia gambar dan teori tambahan Cari: pemanfaatan serangga Ensiklopedia Ensiklopedia Other Buku umum pengenalan serangga Ensiklopedia umum mengenai Serangga di Indonesia umum mengenai Peranan Serangga terhadap ekosistem dan kehidupan umum mengenai Wabah penyakit serangga serta kasus-kasus yang terjadi Ensiklopedia umum mengenai penanggulangan Wabah serangga Buku umum pemanfaatan serangga bagi manusia dalam dunia bisnis Tabel 4. 1 Predictable Learning Cycle

5 4.1.5 Hirarki Website Hirarki website e-learning ini berguna untuk menentukan hak akses dari user yang menggunakan website e-learning ini.adapun user yang menggunakan website ini dibagi menjadi 3 user, yang pertama adalah pengunjung, yang kedua adalah member dan yang ketiga adalah admin. 1. Pengunjung Gambar 4. 1 Hirarki WebSite Pengunjung 2. Member Gambar 4. 2 Hirarki WebSite Member

6 3. Admin Gambar 4. 3 Hirarki WebSite Admin 4.2 Sistem E-learning yang diusulkan Website e-learning Museum Seranggadan Taman Kupu TMII iniakandiaksesoleh pengunjung,member dan admin System Definition Bagian Admin Pertama-tama admin harus login dahulusebagai admin. Setelahitu admin bisa me-manage materiserangga di website e-learningmuseum Seranggadan Taman Kupu TMII.Admin juga mengecek konsultasi dari member.admin juga memanage games. Admin jugabisa memanage quiz serangga.admin jugabiasme-manage beritatentangserangga.admin jugabisa me-manageevent

7 tentangserangga.admin jugabisa me-manage banner tentangserangga. Admin jugaakanmelakukanpengecekanpada thread member. Jikaada thread yang member out of topic. Admin akan menghapus thread tersebut. Gambar 4. 4 Activity Diagram Untuk Admin

8 Bagian pengunjung Pengunjung yang belum terdaftar bisa mengakses halaman-halaman tertentu di websitee-learningmuseum Serangga dan Taman Kupu TMII.Pengunjung bisa melihat berita, melihat event, melihat about us dan melihat forum.untuk melihat forum, pengunjung hanya bisa melihat saja. Tidak bisa membuat forum dan me-reply forum member lain. Pengunjung bisa mendaftarkan diri sebagai member dengan cara mengisi form pendaftaran member. Setelah menjadi member. Pengunjung bisa melakukan sign-in untuk mengakses lebih jauh website museum serangga dan taman kupu TMII. Gambar 4. 5 Activity diagram untuk Pengunjung

9 Bagian member Di website ini.member mempunyai semua hak akses yang dimiliki pengunjung dan beberapa hak akses tertentu, yang tidak dimiliki pengunjung. Diantaranyadi halaman materi member bisa membaca materi yang telah disediakan, men-download materi, mengerjakan games yang berupa flash dan mengerjakan quiz. Setelah member mengerjakan quiz, nilai quiz akan terpampang di halaman quiz. Dan di halaman forum, member juga bisa membuat forum yang berhubungan dengan serangga, member bisa mengedit forum yang telah dibuat, bisa me-reply forum dari member lain juga.di halaman profil member juga bisa mengedit profil dan ubah password serta melakukan private message terhadap admin yang dinamakan konsultasi

10 Gambar 4. 6 Activity diagram untuk Member

11 4.2.2 System Requirement event table Event table dibawah ini berfungsi sebagai penjelasan sistemelearningmuseum Serangga dan Taman Kupu TMII. Kegiatan apa yang dilakukan(event), pemicu user melakukan kegiatan tersebut(trigger), siapa yang melakukannya(source), usecase nya, apa yang dihasilkan(respone) dan ditujukan kemana(destination). EVENT TRIGGER SOURCE USECASE RESPONSE DESTINATION Admin Me- Admin Admin Me-manage Quiz Member manage quiz mengakses quiz halaman quiz Admin Me- Adanya Admin Me-manage Materi Member manage materi materi materi serangga yang telah dibuat Admin Me- Update berita Admin Me-manage Berita Pengunjung dan manage berita terbaru berita member Admin Me- Admin Me-manage Event Pengunjung dan manage event event member Admin Me- Admin Admin Me-manage Tampilan Member manage membuka thread Thread thread halaman thread untuk di-manage Admin me- Admin Admin Me-manage Tampilan - manage membuka banner Banner banner halaman banner untuk di-manage

12 Admin me- Adanya Admin Me-reply Reply Member reply konsultasi konsultasi konsultasi konsultasi yang masuk dari member Admin Me- Admin Admin Me-manage Games Member manage mengakses games games halaman games Pengunjung Data Pengunjung Mendaftar Username dan - melakukan pengunjung menjadi password pendaftaran belum member untuk login menjadi terdapat member baru didalam system Pengunjung Pengunjung Pengunjung Melakukan Tampilan - melakukann memiliki sign-in notifikasi sign-in username dan login password untuk sign-in Melihat event Mengakses Pengunjung Melihat event Tampilan - yang tersedia halaman event Member event Melihat berita Mengakses Pengunjung Melihat berita Tampilan - terbaru halaman berita Member berita Member Profil yang Member Mengedit Tampilan - mengedit ingin profile page profile profile diupdate Member Adanya Member Melakukan Tampilan - melakukan pertanyaan konsultasi konsultasi konsultasi yang ingin diajukan kepada admin

13 Member Adanya Member Mengerjakan - - mengerjakan halaman games games games pada webs Member Adanya Member Melihat - - melihat thread thread thread terbaru Member - Member mengerjakan soal yang tersedia ingin mengetahui sejauh mana pemahaman tentang Member Mengerjakan quiz Hasil quiz serangga Member Adanya Member Melihat Materi - melihat materi yang materi serangga materi terdapat serangga yang dapat serangga dalam web di-download Tabel 4. 2 Event Table Usage Usecase Diagram Usecase diagram menggambarkan interaksi antara user dengan system pada websitee-learning Museum Serangga dan Taman Kupu TMII.

14 Gambar 4. 7 Usecase Diagram

15 Usecase Usecase fully description Usecase fully Description menjelaskan deskripsi mengenai usecase diagram yang telah dibuat mulai dari actor, triggering event, kondisi sistem serta alur event yang terjadi pada system. 1. Me-manage quiz Use Case Name: Me-manage quiz Scenario: Create, Update, Delete Quiz Triggering Event: Admin web mengakses halaman quiz pada page Admin web untuk melakukan updatequiz Brief Description: Admin memasuki (login) halaman admin web pada website,admin mengakses halaman quiz, membuat soal quiz, serta menghapus soal quiz Actors Admin Related Use Case: - Stakeholders: - Precondition: Admin sudah memasuki (login) ke dalam website admin web Adanya halaman materi pada admin web Postconditions: - Flow events Actors System 1. Admin memasuki halaman website (log in) 2.1 Menampilkan halaman quiz 2. Admin memilih menu quiz 3.1 Menampilkan semua soal 3. Admin membuat soal dan jawaban quiz dan jawaban quiz 4. Admin submitquiz 4.1 Tampilkan soal quiz terbaru 5. Admin memilih soal quiz yang akan dihapus setelah dihapus 6. Admin memilih tombol deletequiz Exception condition: - Tabel 4. 3 Usecase Fully Description Memanage Quiz

16 2. Me-manage Materi Use Case Name: Me-manage Materi Scenario: Upload, Download, Delete Materi Triggering Event: Admin web mengakses halaman materi pada page Admin web untuk melakukan update materi Brief Description: Admin memasuki (login) halaman admin web pada website,admin mengakses halaman course, Admin menambahkan materi dalam bentuk artikel, video, jurnal. Admin dapat menghapus materi Actors Admin Related Use Case: - Stakeholders: - Precondition: Admin sudah memasuki (login) ke dalam website admin web Adanya halaman course pada admin web Postconditions - Flow events Actors System 1. Admin memilih halaman website (log in) 2. Admin memilih halaman materi 2.1 Menampilkan halaman materi 3. Admin mengupload dan mengupdate materi (artikel, video, jurnal) 3.1 Menampilkan file explorer 4.1 Menyimpan file dalam 4. Admin memilih tombol save database 5.1 Menampilkan tombol 5. Admin memilih file yang akan didownload (artikel, video, jurnal) download 6. Admin memilih tombol download 7. Admin dapat mendelete materi 8. Admin memilih tombol delete Exception condition: - Tabel 4. 4 Usecase Fully Description Memanage Materi

17 3. Me-manage berita Use Case Name: Me-manage berita Scenario: Create, Update, Delete Berita Triggering Event: Admin web mengakses halaman berita pada page Admin web untuk melakukan update berita Brief Description: Admin memasuki (login) halaman admin web pada website,admin mengakses halaman berita, membuat berita, serta menghapus berita Actors Admin Related Use Case: - Stakeholders: - Precondition: Admin sudah memasuki (login) ke dalam websiteadmin web Adanya halaman berita pada admin web Postconditions - Flow events Actors System 1. Admin memasuki halaman website (log in) 2. Admin memilih menu berita 2.1 Menampilkan halaman berita 3. Admin membuat berita 3.1 Menampilkan text editor 4. Admin klik save 4.1 Menyimpan berita pada 5. Admin memilih berita yang akan dihapus database 5.1 Menampilkan berita 6. Admin memilih tombol delete 6.1 Menghapus berita 6.2 Meng-update database Exception condition: - Tabel 4. 5 Usecase Fully Description Memanage Berita

18 4. Me-manageEvent Use Case Name: Me-manageEvent Scenario: Create, Update, Delete Event Triggering Event: Admin web mengakses halaman Event pada page Admin web untuk melakukan updateevent Brief Description: Admin memasuki (log in) halaman admin web pada website,admin mengakses halaman Event, membuat Event, serta menghapus Event Actors Admin Related Use Case: - Stakeholders: - Precondition: Admin sudah memasuki (log in) ke dalam website admin web Adanya halaman Event pada admin web Postconditions - Flow events Actors System 1. Admin memasuki halaman website (log in) 2. Admin memilih menu Event 2.1 Menampilkan halaman Event 3. Admin membuat Event terbaru 3.1 Menampilkan text editor 4.1 Menyimpan Event pada 4. Admin klik tombol save database 5.1 Menampilkan Event 5. Admin memilih Event yang akan dihapus 6.1 Menghapus Event 6.2 Meng-updatedatabase 6. Admin memilih tombol delete Exception condition: Tabel 4. 6 Usecase Fully Description Memanage Event

19 5. Me-manageThread Use Case Name: Me-manageThread Scenario: Create, DeleteThreadposting forum Triggering Event: Admin web mengakses halaman forum pada page Admin web untuk melakukan update forum diskusi Brief Description: Admin masuk (log in) halaman admin web pada website,admin mengakses halaman forum, membuat posting, serta menghapus postingthread pada forum Actors Admin Related Use Case: - Stakeholders: - Precondition: Admin sudah masuk (log in) ke dalam halaman web Adanya halaman forum Adanya data postingthread sebelumnya Postconditions - Flow events Actors System 1. Admin memasuki halaman website (log in) 2. Admin memilih menu forum 2.1 Menampilkan halaman forum 3. Admin klik tombol createthread 4.1 Menampilkan text editor 5.1 Menyimpan data 4. Admin klik tombol save postingthread baru kedalam 5. Admin klik tombol reply thread database 6.1 Menampilkan text editor 6. Admin klik tombol save 7.1 Menyimpan data 7. Admin memilih forum posting yang akan dihapus postingthread baru kedalam database 9.1 Menghapus posting 8. Admin memilih tombol delete Exception condition: Tabel 4. 7 Usecase Fully Description Memanage Thread

20 6. Me-manageBanner Use Case Name: Scenario: Triggering Event: Brief Description: Me-manage Banner Create, Update, Delete Banner Admin web mengakses halaman home pada page Admin web untuk melakukan update banner Admin masuk (log in) halaman admin web pada website,admin mengakses halaman terdapat banner, men-gupdate banner, serta menghapus banner Actors Admin Related Use Case: - Stakeholders: - Precondition: Admin sudah memasuki (log in) ke dalam website admin web Adanya halaman Banner pada admin web Postconditions - Flow events Actors System 1. Admin memasuki halaman website (log in) 2. Admin memilih menu Banner 2.1 Menampilkan halaman Banner 3. Admin mengupload Banner baru 4.1 Banner baru ter-update 6.1 Banner telah terdelete 4. Admin klik tombol save 5. Admin memilih Banneryang akan dihapus 6. Admin memilih tombol delete Exception condition: Tabel 4. 8 Usecase Fully Description Memanage Banner

21 7. Me-reply Konsultasi Use Case Name: Me-reply konsultasi Scenario: View konsultasi, Create konsultasi Triggering Event: Admin web mengakses halaman reply konsultasi pada page Admin web melakukan reply konsultasi Brief Description: Admin memasuki (login) halaman admin web pada website,admin mengakses halaman konsultasi, melihat konsultasi, serta mereplykonsultasi Actors Admin Related Use Case: - Stakeholders: - Precondition: Admin sudah memasuki (login) ke dalam website admin web Adanya konsultasi dari member yang masuk pada page konsultasi admin Postconditions: - Flow events Actors System 1. Admin memasuki halaman website (log in) 2.1 Menampilkan halaman konsultasi 2. Admin memilih menu konsultasi 3.1 Menampilkan semua 3. Admin melihat konsultasi dari member konsultasi yang masuk dari member 4. Admin me-reply konsultasi 4.1 Tampilkan konsultasi yang sudah di Exception condition: - Tabel 4. 9 Usecase Fully Description Mereply Konsultasi

22 8. Me-manage games Use Case Name: Me-manage games Scenario: Create, Update, Delete Games Triggering Event: Admin web mengakses halaman games pada page Admin web untuk melakukan create, update, delete games Brief Description: Admin memasuki (login) halaman admin web pada website,admin mengakses halaman games, membuat games, meng-updategames, men-deletegames Actors Admin Related Use Case: - Stakeholders: - Precondition: Admin sudah memasuki (login) ke dalam website admin web Adanya halaman games pada admin web Postconditions: - Flow events Actors System 1. Admin memasuki halaman website (log in) 2.1 Menampilkan halaman games 2. Admin memilih menu games 3.1 Menampilkan semua 3. Admin membuat games games yang ada 4. Admin memilih gamesyang akan dihapus 4.1 Tampilkan soal quiz terbaru setelah dihapus Exception condition: - Tabel Usecase Fully Description Memanage Games

23 9. Mendaftar Menjadi Member Use Case Name: Mendaftar Menjadi Member Scenario: - Triggering Event: Pengunjung belum memiliki user account untuk login kedalam web e-learning Brief Description: Pengunjung mengisi data diri beserta username dan password ke dalam form yang sudah disediakan. Actors Pengunjung Related Use Case: - Stakeholders: Pengunjung : menginput data pada form yang disediakan Precondition: Harus ada calon user baru, data diri belum ada, username belum ada, password belum ada Postconditions Username dan password telah terbuat Flow events Actors System 1. Pengunjung memilih menu sign up 2. Pengunjung mengisi data diri, username, password 3. Pengunjung 1.1 Menampilkan form pendaftaran member baru 2.1 Menampilkan data user baru 3.1 Data user baru disimpan menyimpan data user baru Exception condition: Tabel Usecase Fully Description Mendaftar Menjadi Member

24 10. Melakukan Sign in Use Case Name: Melakukan Sign in Scenario: - Triggering Event: Pengunjung mempunyai username dan password Brief Description: Pengunjung membuka halaman homeweb e-learning, melakukan Sign in Actors Pengunjung Related Use Case: - Stakeholders: Pengunjung: Melakukan Sign in Precondition: Harus ada username dan password Postconditions Berhasil melakukan Sign in Flow events Actors System 1. Pengunjung membuka halaman home pengunjung 2. Pengunjung memasukan username dan password 1.1 Menampilkan halaman home 2.1 Menampilkan halaman Sign in 2.2 Melakukan validasi username dan password Exception condition: Jika username dan password yang dimasukan tidak sama maka sign in yang dilakukan gagal Tabel Usecase Fully Description Melakukan Sign in

25 11. Melihat Event Use Case Name: Melihat Event Scenario: - Triggering Event: Pengunjung dan member ingin melihat event terkini yang ada dalam web Brief Description: Pengunjung dan member membuka halaman web e- learning, memilih menu event Actors Pengunjung, Member Related Use Case: - Stakeholders: Pengunjung dan Member : Melihat Event Precondition: Harus ada pengunjung dan member, data event harus ada Postconditions Event di tampilkan Flow events Actors System 1. Pengunjung dan member memilih 1.1 Menampilkan event yang ada menu event 2. Pengunjung dan member membaca event yang ditampilkan Exception condition: Tabel Usecase Fully Description Melihat Event

26 12. Melihat Berita Use Case Name: Melihat Berita Scenario: - Triggering Event: Pengunjung ingin melihat berita terkini yang ada dalam web Brief Description: Pengunjung membuka halaman webe-learning, memilih menu berita Actors Pengunjung, Member Related Use Case: - Stakeholders: Pengunjung dan member : Melihat berita Precondition: Harus ada pengunjung dan member, data berita harus ada Postconditions Berita di tampilkan Flow events Actors System 1. Pengunjung memilih menu berita 1.1 Menampilkan berita yang ada 2. Pengunjung membaca berita yang ditampilkan Exception condition: Tabel Usecase Fully Description Melihat Berita

27 13. Mengedit Profile Use Case Name: Mengedit Profile Scenario: - Triggering Event: Member memasuki halaman web untuk melihat dan meng-edit profile Brief Description: Member masuk(log in) halaman website,member memilih menu profile, melakukan perubahan password Actors Member Related Use Case: - Stakeholders: Member Precondition: Member sudah masuk (log in) ke dalam halaman web Adanya data member Adanya halaman profile Postconditions Kembali ke halaman sign in Flow events Actors System 1. Member memasuki halaman website 2.1 Menampilkan (log in) halaman profile 2. Memilih menu halaman profile 3. Member klik 2.2 Menampilkan data member tombol edit 3.1 Menampilkan form 4. Member meng-edit isian data member profile (nama, alamat, 5.1 Data disimpan password,dll) 5. Member klik save Exception condition: Tabel Usecase Fully Description Mengedit Profile

28 14. Melakukan konsultasi Use Case Name: Melakukan konsultasi Scenario: - Triggering Event: Member mengakses halaman konsultasi pada page Membermelakukan konsultasi Brief Description: Member memasuki (login) halaman member, pada website, member mengakses halaman konsultasi, member membuat konsultasi Actors Member Related Use Case: - Stakeholders: - Precondition: Member sudah memasuki (login) ke dalam website Adanya pertanyaan yang ingin dikonsultasikan member Postconditions: - Flow events Actors System 1. Member memasuki halaman website (log in) 2. Member memilih menu konsultasi 3. Member membuat konsultasi 2.1 Menampilkan halaman konsultasi 3.1 Menampilkan konsultasi yang telah dibuat Exception condition: - Tabel Usecase Fully Description Melakukan Konsultasi

29 15. Mengerjakan Games Use Case Name: Mengerjakan games Scenario: - Triggering Event: Member memasuki halaman web untuk mengerjakan gamespada website Brief Description: Member masuk (log in) halaman website, member memilih menu games, memilih gamesyang tersedia Actors Member Related Use Case: - Stakeholders: Member Precondition: Member sudah masuk (log in) ke dalam halaman web Adanya halamangames Postconditions - Flow events Actors System 1. Member memasuki halaman website (log in) 2. Member memilih menu games 3. Member mengerjakan games 1.1 Menampilkan halaman games 2.1 Menampilkan semua games yang tersedia 3.1 Tampilan games yang dikerjakan Exception condition: - Tabel Usecase Fully Description Mengerjakan Games

30 16. Melihat Thread Use Case Name: Melihat Thread Scenario: - Triggering Event: Member memasuki halaman web untuk melakukan diskusi secara online Brief Description: Membermasuk(log in) halaman website, Member memilih menu forum, memilih kategori forum yang tersedia Actors Member Related Use Case: Includes : Create Thread, Reply Thread Stakeholders: Member Precondition: Member sudah masuk (log in) ke dalam halaman web Adanya halaman forum Adanya data posting thread sebelumnya Postconditions Flow events Actors System 1. Member memasuki halaman website (log in) 2. Member memilih menu forum 3. Member klik create thread 4. Member klik save 5. Member klik reply thread 6. Member klik save 1.1 Menampilkan halaman forum 2.2 Menampilkan semua thread 3.1 Menampilkan text editor 4.1 Menyimpan data posting thread baru kedalam database 5.1 Menampilkan text editor 6.1 Menyimpan data posting thread baru kedalam database Exception condition: Tabel Usecase Fully Description Melihat Thread

31 17. Mengerjakan quiz Use Case Name: Mengerjakan quiz Scenario: - Triggering Event: Member memasuki halaman web untuk mengerjakan quiz yang dilakukan secara online Brief Description: Member masuk (log in) halaman website, member memilih menu quiz, memilih quiz yang tersedia, melihat score quiz Actors Member Related Use Case: - Stakeholders: Member Precondition: Member sudah masuk (log in) ke dalam halaman web Adanya halaman quiz Adanya data soal quiz Postconditions Tampilan score quiz Flow events Actors System 4. Member memasuki halaman website(log in) 5. Member memilih kategori quiz 6. Member mengerjakan soal quiz 7. Member klik submit 1.2 Menampilkan halaman quiz 1.3 Menampilkan kategori quiz 2.1 Menampilkan semua soal dan pilihan jawaban 7.1 Menampilkan nilai quiz 7.2 Menyimpan hasil quiz kedalam database Exception condition: Jika soal quiz per-kategori tidak diisi semua oleh member maka jawaban quiz tidak bisa di-submit Tabel Usecase Fully Description Mengerjakan Quiz

32 18. Melihat Materi Serangga Use Case Name: Melihat Materi Serangga Scenario: - Triggering Event: Member memasuki halaman webuntuk mencari dan melihat materi mengenai serangga Brief Description: Member memasuki (log in) halaman website,member memilih menu materi dan melihat kategori materi. Setelah itu member dapat membaca, memutar video danmateri yang berkaitan. Actors Member Related Use Case: Include : Mendownload materi Stakeholders: Member Precondition: Member sudah masuk (log in) ke dalam halaman web Adanya materi Adanya materi yang di-download Postconditions Member menerima file hasil download Flow events Actors System 1. Member memasuki halaman website(log in) 2. Member memilih 2.1 Menampilkan halaman materi 3.1 Menampilkan tombol download page materi 3. Member mendownload materi Exception condition: Tabel Usecase Fully Description Melihat Materi Serangga

33 System sequence diagram Berikut ini akan menjelaskan tahaptahap interaksi/aliran pesan antara user dengan system websitee-learning Museum Serangga dan Taman Kupu TMII 1. Admin memanage banner Gambar 4. 8 Sequence Diagram Admin Memanage Banner

34 2. admin memanage berita Gambar 4. 9 Sequence Diagram Admin Memanage Berita

35 3. admin memanage event Gambar Sequence Diagram Admin Memanage Event

36 4. admin memanage games Gambar Sequence Diagram Admin Memanage Games 5. admin memanage materi Gambar Sequence Diagram Admin Memanage Materi

37 6. admin memanage quiz Gambar Sequence Diagram Admin Memanage Quiz

38 7. admin memanage thread Gambar Sequence Diagram Admin Memanage Thread

39 8. admin me-reply konsultasi Gambar Sequence Diagram Admin Me-reply Konsultasi 9. member melakukan konsultasi Gambar Sequence Diagram Member Melakukan Konsultasi

40 10. member melihat berita Gambar Sequence Diagram Member Melihat Berita 11. Member melihat event Gambar Sequence Diagram Member Melihat Event

41 12. Member melihat materi Gambar Sequence Diagram Member Melihat Materi

42 13. Member melihat thread Gambar Sequence Diagram Member Melihat Thread

43 14. Member mengedit profil Gambar Sequence Diagram Member Mengedit Profile 15. Member mengerjakan games :system member start_mengerjakan_games() games select_games() games(id_games,isi_games) Gambar Sequence Diagram Member Mengerjakan Games

44 16. Member mengerjakan quiz Gambar Sequence Diagram Member Mengerjakan Quiz 17. Pengunjung melakukan sign-in Gambar Sequence Diagram Pengunjung Melakukan Sign-in

45 18. Pengunjung mendaftar menjadi member Gambar Sequence Diagram Pengunjung Mendaftar menjadi Member 19. Pengunjung melihat berita Gambar Sequence Diagram Pengunjung Melihat Berita

46 20. Pengunjung melihat event Gambar Sequence Diagram Pengunjung Melihat Event

47 1.2.3 Problem Domain Model Domain Class Diagram domain class diagram ini menjelaskan interaksi antar class beserta multiplicity systeme-learning Museum Serangga dan Taman Kupu TMII. Gambar Domain Class Diagram

48 Classes 1. Class Member Class yang berisi data member pada web e-learning. Attribute : Id_Member, Id_quiz, Nama_member, Alamat_member, _member, No_telp_member, Foto_member, Tempat_lahir_member, Tanggal_lahir_member, Gender_member, Password_member, Username_member. 2. Class Quiz Class yang berisi data quiz Attribute : Id_Quiz, Id_Admin, Pertanyaan_Quiz, Jawaban_quiz, Tgl_quiz, Nilai_quiz. 3. Class Thread Class yang berfungsi menyimpan thread yang telah dibuat member atau admin. Attribute : Id_thread, Id_admin, Judul_thread, Isi_thread, tanggal. 4. Class Detail Thread Class yang menyimpan reply dari admin dan member Attribute : Id_thread, Id_member, Isi_reply, Tgl_reply. 5. Class Admin Class yang berisi data admin website e-learning. Attribute : Id_admin, Nama_admin, Alamat_admin, _admin, Tempat_lahir_admin, Tanggal_lahir_admin. 6. Class Event Class yang berisi data dari event Attribute : Id_event, Id_admin, Nama_event, Tgl_event, Isi_event, Penyelenggara_event. 7. Class Materi Class yang berisi data dari materi Attribute : Id_Materi, Id_admin, Judul_materi, Isi_materi, Jenis_materi, Tgl_materi. 8. Class Detail Materi Class yang berisi Detail dari class Materi Attribute : Id_serangga, Id_materi.

49 9. Class Serangga Class yang berisi data serangga. Attribute : Id_serangga, Nama_serangga, Jenis_serangga. 10. Class Banner Class yang berisi data dari banner Attribute : Id_banner, Id_admin, Foto_banner, Tgl_banner. 11. Class Berita Class yang berisi data dari berita Attribute : Id_berita, Id_admin, Judul_berita, Isi_berita, Tgl_berita. 12. Class hasil_quiz Class yang berisi data hasil dari pengerjaan quiz member Attribute : id_hasil_quiz, id_quiz, id_member, score 13. Class jawaban_quiz_member class yang berisi data jawaban_quiz member Attribute : id_hasil_quiz, jawaban_member 14. Class games Class yang berisi data games Attribute : id_games, isi_games, tgl_games 15. Class konsultasi Class yang berisi data konsultasi Attribute : id_konsultasi, id_member, id_admin, isi_konsultasi, tgl_konsultasi state chart diagram state chart diagram ini bertujuan untuk menjelaskan kondisi object yang ada di systemwebsitee-learning Museum Serangga dan Taman Kupu TMII

50 1. Admin Gambar Statechart Diagram admin 2. Quiz Gambar Statechart Diagram Quiz 3. Banner Gambar Statechart Diagram Banner 4. Member Gambar Statechart Diagram Member

51 5. Thread Gambar Statechart Diagram Thread 6. Detail_thread Gambar Statechart Diagram Detail Thread 7. Event Gambar Statechart Diagram Event 8. Games Gambar Statechart Diagram Games

52 9. Materi Gambar Statechart Diagram Materi 10. Detail_materi Gambar Statechart Diagram Detail Materi 11. Serangga Gambar Statechart Diagram serangga 12. Jawaban_quiz Gambar Statechart Diagram Jawaban Quiz

53 13. Hasil_quiz Gambar Statechart Diagram Hasil Quiz 14. Konsultasi Gambar Statechart Diagram Konsultasi 15. Berita Gambar Statechart Diagram Berita 4.3 perancangan system e-learning museum serangga dan taman kupu TMII deployment architecture Website e-learning Museum Serangga dan Taman Kupu TMII digunakan dengan banyak user yang mengakses dari berbagai macam device. baik komputer, laptop, smartphone dan sebagainya. deployment environment yang digunakan websitee-learning Museum Serangga dan Taman Kupu TMII ini adalah multi-tier architecture, karena akses dari setiap usernya yang mempunyai kebutuhan berbeda-beda. Tersambung melalui jaringan komputer dengan menggunakan distributed architecture.

54 4.3.2 software architecture websitee-learning Museum Serangga dan Taman Kupu TMII dapat diaskses dengan internet, segala pertukaran informasi serta pembelajaran dilakukan secara online. e-learning ini bisa diakses kapan saja dengan syarat menggunakan jaringan internet. Metode yang digunakan websitee-learning Museum Serangga dan Taman Kupu TMII ini adalah Internet and web-based software architecture. Gambar Software Architecture usecase realization design Three layer diagram Three layer diagram berfungsi untuk menjelaskan urutan pesan antara user dengan system secara mendetil. Diantaranya menjelaskan urutan pesan ke boundary lalu ke handler lalu ke object dan ke database access system websitee-learning Museum Serangga dan Taman Kupu TMII.

55 1. Admin memanage materi Gambar Three Layer Diagram Admin Memanage Materi

56 2. Admin memanage thread Gambar Three Layer Diagram Admin Memanage Thread

57 3. Admin me-reply konsultasi Gambar Three Layer Diagram Admin Me-reply Konsultasi

58 4. Admin memanage banner Gambar Three Layer Diagram Admin Memanage Banner

59 5. Admin memanage berita Gambar Three Layer Diagram Admin Memanage Berita

60 6. Admin memanage event Gambar Three Layer Diagram Admin Memanage Event

61 7. Admin memanage games Gambar Three Layer Diagram Admin Memanage Games

62 8. Admin memanage quiz Gambar Three Layer Diagram Admin Memanage Quiz

63 9. Member melakukan konsultasi Gambar Three Layer Diagram Member Melakukan Konsultasi

64 10. Member melihat materi Gambar Three Layer Diagram Member Melihat Materi

65 11. Member melihat Thread Gambar Three Layer Diagram Member Melihat Thread

66 12. Member mengedit profil Gambar Three Layer Diagram Member Mengedit Profil

67 13. Member mengerjakan games Gambar Three Layer Diagram Member Mengerjakan Games

68 14. Member mengerjakan quiz Gambar Three Layer Diagram Member Mengerjakan Quiz

69 15. Member melihat berita Gambar Three Layer Diagram Member Melihat Berita

70 16. Member melihat event Gambar Three Layer Diagram Member Melihat Event

71 17. Pengunjung melakukan sign-in Gambar Three Layer Diagram Pengunjung Melakukan Sign-in

72 18. Pengunjung mendaftarkan member Gambar Three Layer Diagram Pengunjung Mendaftarkan Member

73 19. Pengunjung melihat berita Gambar Three Layer Diagram Pengunjung Melihat Berita

74 20. Pengunjung melihat event Gambar Three Layer Diagram Pengunjung Melihat Event

75 communication diagram communication diagram ini menggambarkan interaksi actor dengan system yang digambarkan melalui handler dengan object. 1. admin memanage materi Gambar Communication Diagram Admin memanage Materi 2. admin memanage banner Gambar Communication Diagram Admin memanage Banner

76 3. admin memanage berita Gambar Communication Diagram Admin memanage Berita 4. admin memanage event Gambar Communication Diagram Admin memanage Event

77 5. admin memanage games Gambar Communication Diagram Admin memanage Games 6. admin memanage thread Gambar Communication Diagram Admin memanage Thread

78 7. admin mereply konsultasi Gambar Communication Diagram Admin Mereply Konsultasi 8. admin memanage quiz Gambar Communication Diagram Admin Memanage Konsultasi

79 9. member melihat berita Gambar Communication Diagram Member Melihat Berita 10. member melihat event Gambar Communication Diagram Member Melihat event

80 11. member melakukan konsultasi Gambar Communication Diagram Member Melakukan Konsultasi 12. member melihat thread Gambar Communication Diagram Member Melihat Thread

81 13. member mengedit profil Gambar Communication Diagram Member Mengedit Profil 14. member mengerjakan games

82 Gambar Communication Diagram Member Mengerjakan Games 15. member mengerjakan quiz Gambar Communication Diagram Member Mengerjakan Quiz 16. member melihat materi

83 Gambar Communication Diagram Member Melihat Materi 17. pengunjung melihat event Gambar Communication Diagram Pengunjung Melihat event 18. pengunjung melihat berita

84 Gambar Communication Diagram Member Pengunjung melihat Berita 19. pengunjung melakukan sign-in Gambar Communication Diagram Member Pengunjung melakukan signin 20. pengunjung mendaftar member

85 Gambar Communication Diagram Member Pengunjung mendaftar member Updated Class Diagram Updated class diagram merupakan perluasan dari class diagram. Di updated class diagram ini ada class controller yang berfungsi untuk mengontrol/me-manage data di tiap class yang dituju.

86 Gambar Updated Class Diagram

87 4.3.4 User Interface Design User interface design ini digunakan untuk mempermudah programmer dalam melakukan pembuatan website. Berikut tampilan user interface designwebsitee-learningmuseum Serangga dan Taman Kupu TMII User Interface DesignFront End Berikut ini merupakan rancangan layar pada bagian front end yang ditunjukan untuk pengunjung serta member yang mengakseswebsitee-learningmuseum Serangga dan Taman Kupu TMII. Gambar User Interface Design Home Pengunjung

88 Gambar User interface Design pengunjung dan member tampilan berita Gambar User Interface Design pengunjung dan member tampilan event

89 Gambar User Interface Design pengunjung dan member tampilan denah Gambar User Interface Design pengunjung tampilan list forum member

90 Gambar User Interface Design pengunjung tampilan yang telah mengklik list forum

91 Gambar User InterfaceDesign pengunjung tampilan pendaftaran member

92 Gambar User Interface Design pengunjung tampilan login Gambar User Interface Design member tampilan home

93 Gambar User Interface Design member tampilan materi serangga jenisjenis

94 Gambar User Interface Design member tampilan materi peranan serangga

95 Gambar User Interface Design member tampilan download materi Gambar User Interface Design member tampilan quiz untuk memilih jenis quiz

96 Gambar User Interface Design member tampilan quiz setelah memilih jenis quiz

97 Gambar User InterfaceDesign member tampilan games(1) Gambar User InterfaceDesign member tampilan games(2)

98 Gambar User Interface Design member tampilan membuat thread(1)

99 Gambar User Interface Design member tampilan membuat thread(2)

100 Gambar User Interface Design member tampilan reply thread(1)

101 Gambar User InterfaceDesign member tampilan reply thread(2)

102 Gambar User InterfaceDesign member tampilan membuat konsultasi(1)

103 Gambar User Interface Design member tampilan membuat konsultasi(2)

104 Gambar User Interface Design member tampilan ubah profil

105 Gambar User Interface Design member tampilan ubah password

106 User Interface DesignBack End Berikut ini merupakan tampilan rancangan layar dari halaman back end yang ditujukan untuk admin websitee-learningmuseum Serangga dan Taman Kupu TMII. Gambar User Interface Design admin tampilan login Gambar User Interface Design admin tampilan home

107 Gambar User Interface Design admin tampilan memanage materi(1)

108 Gambar User Interface Design admin tampilan memanage materi(2)

109 Gambar User InterfaceDesign admin tampilan mengunggah materi(1)

110 Gambar User InterfaceDesign admin tampilan mengunggah materi(2)

111 Gambar User interface Design admin tampilan memanage quiz

112 Gambar User InterfaceDesign admin tampilan input soal quiz

113 Gambar User Interface Design admin tampilan tambah kategori quiz

114 Gambar User Interface Design admin tampilan memanage games(1)

115 Gambar User InterfaceDesign admin tampilan memanage games(2)

116 Gambar User InterfaceDesign admin tampilan memanage berita(1)

117 Gambar User Interface Design admin tampilan memanage berita(2)

118 Gambar User InterfaceDesign admin tampilan memanage event(1)

119 Gambar User InterfaceDesign admin tampilan memanage event(2)

120 Gambar User Interface Design admin tampilan input konten home

121 Gambar User InterfaceDesign admin tampilan memanage banner(1)

122 Gambar User InterfaceDesign admin tampilan memanage banner(2) Gambar User Interface Design admin tampilan anggota

123 Gambar User Interface Design admin tampilan konsultasi(1) Gambar User InterfaceDesign admin tampilan reply konsultasi(2)

124 Gambar User InterfaceDesign admin tampilan memanage thread(1)

125 Gambar User Interface Design admin tampilan memanage thread(2)

126 4.3.5 User Interface User Interface merupakan rancangan layar websitee-learningmuseum Serangga dan Taman Kupu TMII yang sudah jadi User Interface Front End Berikut adalah user interfacewebsitee-learningmuseum Serangga dan Taman Kupu TMII bagian front end. Gambar User Interface home pengunjung Ini adalah tampilan home untuk pengunjung dan juga member. Diberikan hak akses untuk home, berita, event, denah, dan forum sebatas view saja. Difooter bawah sudah dituliskan contact us dan sejarah museum.

127 Gambar User Interface list berita member dan pengunjung Gambar tampilan user setelah mengklik menu berita. Akan ada list tampilan berita yang terbaru. Jika user ingin melihat berita lebih detil. Bisa di klik berita yang diinginkan.

128 Gambar User Interface berita member dan pengunjung Setelah user mengklik berita yang diinginkan dari list berita tadi. Ini adalah hasil setelah user mengklik. Akan ada informasi berita yang mereka pilih.

129 Gambar User Interface berita katalog museum member dan pengunjung

130 Gambar User Interface list event member dan pengunjung Gambar tampilan user setelah mengklik menu event. Akan diberikan list event yang terbaru. Ditampilkan judul event dan narasi pendek.

131 Gambar User Interface event member dan pengunjung Gambar tampilan user setelah mengklik event dari list event. Diberikan seluruh keterangan dari event yang dilihat user.

132 Gambar User Interface denah member dan pengunjung Gambar tampilan user setelah mengklik menu denah. Dihalaman ini diberikan informasi mengenai denah museum serta penjelasan disetiap ruangan di museum.

133 Gambar User Interface list forum member dan pengunjung Gambar tampilan list forum yang dibuat member maupun admin. Ditampilan judul, penulis yang membuat forum serta tanggal buat forum tersebut.

134 Gambar User Interface list forum member dan pengunjung Tampilan forum yang diakses pengunjung. Mereka bisa melihat semua forum yang ada di website e-learning museum. Akan tetapi mereka hanya sebatas melihat. Tidak bisa melakukan reply forum maupun quote reply.

135 Gambar User Interface pendaftaran pengunjung Tampilan pengunjung yang ingin mendaftar menjadi member di website e-learning museum. Disini pengunjung wajib mengisi semua informasi yang diminta. Informasi yang diminta itu berupa username, password, konfirmasi password, nama, , nomor telepon, alamat, serta kode verifikasi.

136 Gambar User Interface login pengunjung Ini adalah tampilan login dari user yang ingin mengakses website e-learning museum lebih dalam.

137 Gambar User Interface home member Gambar tampilan home dari pengunjung yang sudah login menjadi member. Akan ada menu tambahan yaitu materi. Di menu materi ada 4 pilihan. Yang pertama adalah materi serangga, yang kedua adalah download materi, yang ketiga adalah quiz dan yang keempat adalah game.

138 Gambar User Interface materi serangga member Ini adalah gambar tampilan materi pilihan pertama. Yaitu materi serangga. Disini ada 3 materi yang dibahas. Pertama adalah jenis-jenis serangga. Jenis-jenis serangga sudah termasuk pengenalan dasar serangga. Kedua ialah peranan serangga dan ketiga adalah wabah penyakit serangga serta penanganannya.

139 Gambar User Interface list materi serangga member Ini adalah gambar tampilan list kategori materi dari peranan serangga. Disini diberikan informasi mengenai materi peranan serangga.

140 Gambar User Interface kategori materi serangga yang dipilih member Ini adalah tampilan dari materi serangga yang dipilih member. Diberikan informasi mengenai materi yang dipilih serta video yang berkaitan dengan materi yang dipilih member.

141 Gambar User Interface download materi member ini adalah tampilan dari member yang ingin mendownload materi. Member bisa mendownload materi dengan mengklik bagian kolom download yang ada di sebelah kanan.

142 Gambar User Interface list quiz member ini adalah tampilan list quiz bagi member yang ingin mengikuti quiz. Disini ada 3 kolom informasi quiz mengenai judul quiz. Tanggal posting quiz serta nilai dari quiz member yang sudah mengerjakan quiz.

143 Gambar User Interface quiz member(1)

144 Gambar User Interface quiz member(2) ini tampilan quiz yang dipilih member. Member diwajibkan mengisi soal-soal quiz yang telah diberikan. Setelah member yakin dengan jawaban quiz mereka. Member bisa langsung menekan tombol kirim yang berada setelah soal terakhir.

145 Gambar User Interface score quiz member Ini adalah gambaran tampilan score dari member yang telah mengerjakan quiz. Di kolom nilai yang tadinya statusnya belum dijawab. Akan berubah menjadi nilai hasil pengerjaan quiz yang dikerjakan oleh member.

146 Gambar User Interface game member(1) Gambar User Interface game member(2)

147 Gambar User Interface game member(3) Ini adalah gambar tampilan game. Game ini mengenai metamorphosis kupu-kupu. Dimana member harus mengerjakan proses alur hidup kupu-kupu dari awal hingga proses terakhir.

148 Gambar User Interface list forum member Ini adalah tampilan gambar dari list forum member. Disini ada tombol tambahan berupa tombol untuk membuat forum bagi member yang ingin membuat forum.

149 Gambar User Interface buat forum member Ini adalah tampilan bagi member yang ingin membuat forum. Member wajib untuk mengisi semua informasi yang diwajibkan untuk diisi, yaitu judul thread, isi thread serta kode verifikasi. Setelah selesai mengisi semua. Member tinggal mengklik tombol daftar untuk memposting forum yang mereka buat.

150 Gambar User Interface ubah forum member Ini adalah tampilan dari member yang ingin mengedit forum yang mereka buat. Member bisa mengedit judul forum serta member juga bisa mengedit isi forum yang mereka buat.

151 Gambar User Interface forum member Ini adalah gambar dari tampilan forum yang dipilih member untuk dibaca. Disini member bisa mereply forum yang dibaca member. Serta men-quote reply dari forum tersebut.

152 Gambar User Interface reply forum member Ini adalah gambar tampilan reply forum bagi member yang ingin mereply forum di forum yang mereka buat sendiri maupun forum dari member lain ataupun admin. Di reply forum ini member harus mengisi isi reply nya serta kode verifikasi nya.

153 Gambar User Interface quote reply forum member Ini adalah gambar tampilan quote reply member. Member diwajibkan mengisi isi quote serta kode verifikasinya

154 Gambar User Interface konsultasi member Ini adalah gambar tampilan konsultasi member, disini diberikan list dari konsultasi yang member buat. Ada juga tombol untuk membuat konsultasi baru.

155 Gambar User Interface buat konsultasi member Ini adalah gambar tampilan bagi member yang ingin membuat konsultasi baru dengan admin. Member diwajibkan mengisi judul konsultasi serta isi dari konsultasi yang ingin ditanyakan ke admin. Setelah selesai mengisi. Member bisa menekan tombol daftar

156 Gambar User Interface reply konsultasi member Ini adalah gambar tampilan dari member yang konsultasinya telah dibalas oleh admin dan member ingin membalas konsultasinya lagi. Member bisa mengisi kolom balas. Sesudah mengisi member tinggal menekan tombol kirim.

157 Gambar User Interface ubah profil member Ini adalah gambar tampilan ubah profil member bagi member yang ingin merubah profil mereka. Ada beberapa data yang bisa dirubah. Diantaranya nama, , telepon, alamat serta poto profil member.

158 Gambar User Interface ubah password member Ini adalah gambar tampilan ubah password bagi member yang ingin merubah passwordnya. Member diwajibkan mengisi kolom password lama, password baru dan konfirmasi password. Setelah yakin member bisa mengklik tombol ubah.

159 User Interface BackEnd Berikut adalah user interfacewebsitee-learningmuseum Serangga dan Taman Kupu TMII bagian back end yang hanya bisa di akses oleh admin. Gambar User Interface login admin Ini adalah gambar tampilan login back end yang hanya bisa diakses oleh admin. Gambar User Interface home admin Ini adalah tampilan home dari admin. Disini ada menu untuk memanage semua yang ada di bagian front-end. Menu yang ada diantaranya materi, info, konten, banner, member, konsultasi dan forum

160 Gambar User Interface materi admin Ini adalah tampilan materi serangga diantaranya adalah jenis-jenis serangga, peranan serangga dan wabah penyakit. Jika admin ingin menambahkan kategori materi. Admin bisa mengklik tombol tambah data.

161 Gambar User Interface kategori materi peranan serangga admin Ini adalah gambar tampilan dari kategori peranan serangga. Disini diberikan list dari macam-macam materi yang berkaitan dengan peranan serangga. Jika admin ingin menambahkan. Admin bisa mengklik tombol tambah data.

162 Gambar User Interface tambah materi peranan serangga admin Ini adalah tampilan dari admin yang ingin menambahkan materi peranan serangga. Admin diwajibkan mengisi judul materi dan isi materi. Jika admin sudah membuat materi tersebut melalui aplikasi lain. Admin cukup mengunggah materi tersebut melalui tombol unggah materi. Setelah selesai semua admin mengklik tombol kirim.

163 Gambar User Interface unggah materi admin Ini adalah tampilan dari unggah materi yang dibuat admin. Bila admin ingin menambah data unggah. Admin tinggal mengklik tombol tambah data. Jika admin ingin menghapus data unggah. Admin bisa mengklik tanda silang yang berada diujung kanan kolom.

164 Gambar User Interface edit unggah materi admin Ini adalah gambar tampilan admin apabila admin ingin mengedit data unggah yang sudah di posting admin

165 Gambar User Interface tambah unggah materi admin Ini adalah gambar tampilan dari admin yang ingin menambah data unggah. Admin diwajibkan mengisijudul unggah serta materi yang telah dibuat melalui tombol telusuri. Setelah selesai admin bisa mengklik tombol kirim.

166 Gambar User Interface quiz admin Ini adalah tampilan dari list quiz yang dibuat admin. Ada 3 yaitu quiz easy, medium dan hard. Bila admin ingin menambah kategori quiz. Bisa mengklik di tombol tambah data.

167 Gambar User Interface tambah kategori quiz admin Ini adalah tampilan dari tambah quiz. Bagi admin yang ingin menambahkan kategori quiz. Admin bisa mengisi judul kategori quiz dahulu disini.

168 Gambar User Interface tambah soal quiz admin Ini adalah tampilan dari admin yang ingin menambah soal quiz di kategori quiz yang mereka pilih. Admin diwajibakan mengisi soal quiz. Lalu tekan tombol kirim.

169 Gambar User Interface list soal quiz Admin Ini adalah tampilan list soal quiz yang telah dibuat admin di kategori kuis yang mereka pilih. Disini ada 3 aksi. Aksi pertama untuk menginput jawaban kuis, aksi kedua untuk mengedit soal kuis dan aksi ketiga untuk menghapus soal kuis.

170 Gambar User Interface input jawaban quiz admin Ini adalah tampilan input jawaban kuis pada tiap soal yang dibuat admin. Disini ada 4 pilihan jawaban. Hanya satu jawaban yang benar. Untuk mengisi aksi jawaban benar atau salah. Admin harus mengisi di kolom aksi yang ada disebelah kanan.

171 Gambar User Interface input aksi jawaban quiz admin Ini adalah tampilan untuk mengisi aksi jawaban. Dari 4 jawaban yang diberikan hanya ada 1 jawaban yang benar.

172 Gambar User Interface admin melihat score member Ini adalah tampilan admin untuk melihat siapa saja yang sudah menjawab quiz. Disini admin bisa melihat score member yang telah menjawab quiz.

173 Gambar User Interface list berita admin Ini adalah tampilan dari list berita yang dibuat admin. Apabila admin ingin menambahkan berita. Admin bisa menekan tombol tambah berita.

174 Gambar User Interface tambah berita admin Ini adalah tampilan dari admin yang ingin menambah berita. Disini admin diwajibkan mengisi judul berita serta keterangan dari berita. Setelah itu admin bisa menekan tombol kirim.

175 Gambar User Interface edit berita admin Ini adalah tampilan dari admin yang ingin mengedit berita yang telah terbuat. Admin bisa mengedit judul berita, isi berita dan gambar logo dari berita tersebut.

176 Gambar User Interface event admin Ini adalah tampilan dari event yang telah dibuat admin. Bila admin ingin menambahkan event. Admin bisa mengklik tombol tambah data.

177 Gambar User Interface tambah event admin Ini adalah tampilan dari tambah data event. Admin bisa mengisi judul event, keterangan event. Jika sudah fix. Admin bisa menekan tombol kirim.

178 Gambar User Interface edit event admin Ini adalah tampilan edit event yang telah dibuat admin. Admin bisa mengubah judul serta keterangan nya. Jika sudah selesai admin bisa mengklik tombol kirim.

179 Gambar User Interface atur konten admin Di halaman atur konten ini. admin bisa menginput kata di home yang berada dibawah slide show. Serta admin juga bisa menginput denah museum.

180 Gambar User Interface banner admin Ini adalah tampilan dari list banner yang dibuat oleh admin. Disini admin bisa memanage banner diantaranya bisa menambah data banner, mengedit data banner, serta menghapus banner

181 Gambar User Interface tambah banner Ini adalah tampilan admin untuk menambah data banner. Admin bisa menginput judul banner serta bisa mngeunggah banner untuk dijadikanslide show dihalaman home front-end.

182 Gambar User Interface edit banner admin Ini adalah tampilan admin untuk mengubah banner yang telah dibuat. Admin bisa mengubah judul banner dan bisa mengganti banner.

183 Gambar User Interface admin lihat anggota Ini adalah tampilan admin untuk melihat data member yang telah mendaftar di website e-learning museum. Disini ada informasi tiap member yaitu nama, , telepon dan tanggal regis member.

184 Gambar User Interface konsultasi admin Ini adalah tampilan admin untuk melihat konsultasi yang dibuat member. Ditampilan ini diinformasikan member mana yang membuat konsultasi, judul konsultasi mereka, serta tanggal posting konsultasi mereka.

185 Gambar User Interface reply konsultasi admin Ini adalah tampilan admin untuk me-reply konsultasi yang dibuat member. Admin cukup mengisi kolom balas setelah itu tekan tombol kirim.

186 Gambar User Interface list forum admin ini adalah tampilan dari list forum yang dibuat member ataupun admin. Disini admin mempunyai hak untuk menghapus thread yang dianggap out off topic. Jika admin ingin menghapus thread yang out off topic. Admin cukup mengklik tombol delete yang ada disebelah kanan kolom.

187 Gambar User Interface tambah forum admin Ini adalah tampilan bagi admin yang ingin membuat forum. Admin diwajibkan mengisi judul forum, isi dari forum serta kode verifikasi nya. Jika sudah fix. Admin bisa mengklik tombol daftar.

188 Gambar User Interface edit forum admin Ini adalah tampilan admin yang ingin mengedit forum yang telah mereka buat. Admin bisa mengedit judulnya, isi dari forumnya serta kode verifikasinya. Jika sudah fix. Admin bisa mengklik tombol daftar

189 Gambar User Interface reply forum admin Ini adalah tampilan admin untuk me-reply forum. Admin cukup mengisi isi reply serta kode verifikasinya saja. Setelah itu admin bisa langsung mengklik tombol posting.

190 Gambar User Interface quote reply forum admin Ini adalah tampilan admin untuk mengquote reply member. Admin cukup mengisi isi quote serta kode verifikasinya saja. Jika sudah selesai admin bisa mengklik tombol daftar.

191 Gambar User Interface delete forum admin Ini adalah tampilan admin untuk menghapus thread member yang dianggap out off topic. Admin cukup mengklik tombol delete yang ada disebelah kanan kolom.