• Tidak ada hasil yang ditemukan

Perancangan Layar

Dalam dokumen BAB 3 ANALISIS DAN PERANCANGAN (Halaman 27-48)

3.6.3.1 Rancangan Layar Halaman Muka

Gambar 3.21 Rancangan Layar Halaman M uka

Dalam rancangan layar halaman muka terdapat judul dari perangkat ajar tersebut dan juga gambar yang memberikan ciri perangkat ajar yang akan dijalankan. Button ”M ulai” berfungsi untuk menuju ke halaman berikutnya dan Button ”Keluar” berfungsi untuk keluar dari program..

3.6.3.2 Rancangan Layar Menu Utama

Gambar 3.22 Rancangan Layar M enu Utama

Didalam rancangan layar menu utama terdapat topik yang akan dipilih oleh user yaitu Protozoa, Porifera, dan Coelenterata. Jika user mengklik tombol protozoa maka akan masuk kedalam layar Protozoa. Jika user mengklik tombol Porifera maka akan masuk kedalam layar Poriferan dan jika user menekan tombol coelenterata maka akan masuk ke dalam layar coelenterata. Disudut kanan atas ada tombol home yang akan masuk ke dalam layar home, login yang akan masuk dalam layar login , exit yang dapat keluar dari sistem perangkat ajar dan juga icon musik yang dapat menyalakan atau mematikan suara musik.

3.6.3.3 Rancangan Layar Protozoa

Gambar 3.23 Rancangan Layar Protozoa

Dalam rancangan layar ini user masuk dalam topik pilihan Protozoa, didalam pilihan tersebut terdapat menu M ateri dasar, Struktur Tubuh, Cara Hidup, Reproduksi dari hewan Protozoa dan Kuis dari materi yang disajikan. Jika user menekan tombol materi dasar maka akan masuk dalam layar materi dasar, jika

user menekan tombol struktur tubuh maka akan masuk dalam layar struktur

tubuh, jika user menekan tombol cara hidup maka akan masuk dalam layar cara hidup hewan tersebut, jika user menekan tombol reproduksi maka akan masuk dalam layar reproduksi protozoa, dan jika user menekan tombol kuis maka akan masuk dalam layar kuis.

Disudut kanan atas ada tombol home yang akan masuk ke dalam layar home, login yang akan masuk dalam layar login , exit yang dapat keluar dari

sistem perangkat ajar dan juga icon musik yang dapat menyalakan atau mematikan suara musik.

3.6.3.4 Rancangan Layar Porifera

Gambar 3.24 Rancagan Layar Porifera

Dalam rancangan layar ini user masuk dalam topik pilihan Porifera, didalam pilihan tersebut terdapat menu M ateri dasar, Struktur Tubuh, Cara Hidup, Reproduksi dari hewan Porifera dan Kuis dari materi yang disajikan. Jika user menekan tombol materi dasar maka akan masuk dalam layar materi dasar, jika

user menekan tombol struktur tubuh maka akan masuk dalam layar struktur

tubuh, jika user menekan tombol cara hidup maka akan masuk dalam layar cara hidup hewan tersebut, jika user menekan tombol reproduksi maka akan masuk dalam layar reproduksi porifera, dan jika user menekan tombol kuis maka akan masuk dalam layar kuis.

Disudut kanan atas ada tombol home yang akan masuk ke dalam layar home, login yang akan masuk dalam layar login , exit yang dapat keluar dari sistem perangkat ajar dan juga icon musik yang dapat menyalakan atau mematikan suara musik.

3.6.3.5 Rancangan Layar Coelenterata

Gambar 3.25 Rancangan Layar Coelenterata

Dalam rancangan layar ini user masuk dalam topik pilihan Coelenterata, didalam pilihan tersebut terdapat menu M ateri dasar, Struktur Tubuh, Cara Hidup, Reproduksi dari hewan Coelenterata dan Kuis dari materi yang disajikan. Jika

user menekan tombol materi dasar maka akan masuk dalam layar materi dasar,

jika user menekan tombol struktur tubuh maka akan masuk dalam layar struktur tubuh, jika user menekan tombol cara hidup maka akan masuk dalam layar cara hidup hewan tersebut, jika user menekan tombol reproduksi maka akan masuk

dalam layar reproduksi coelenterata, dan jika user menekan tombol kuis maka akan masuk dalam layar kuis.

Disudut kanan atas ada tombol home yang akan masuk ke dalam layar home, login yang akan masuk dalam layar login , exit yang dapat keluar dari sistem perangkat ajar dan juga icon musik yang dapat menyalakan atau mematikan suara musik.

3.6.3.6 Rancangan Layar Materi Dasar

Gambar 3.26 Rancangan Layar M ateri

Dalam rancangan layar M ateri Dasar, terdapat gambar dari materi tersebut, kemudian materi untuk menjelaskan pelajaran yang dibahas dan juga video yang berkaitan dengan materi yang dibahas. Terdapat juga tombol selanjutnya yang akan masuk dalam layar materi selanjutnya atau jika materi

habis akan langsung kembali ke menu pilihan. Button sebelumnya berfungsi untuk melihat materi sebelumnya atau dapat kembali ke menu pilihan dapat kembali layar sebelumnya.

Disudut kanan atas ada tombol home yang akan masuk ke dalam layar home, login yang akan masuk dalam layar login , exit yang dapat keluar dari sistem perangkat ajar dan juga icon musik yang dapat menyalakan atau mematikan suara musik

3.6.3.7 Rancangan Layar S truktur Tubuh

Gambar 3.27 Rancangan Layar Struktur Tubuh

Dalam rancangan layar Struktur Tubuh, terdapat gambar dari materi tersebut, kemudian materi untuk menjelaskan pelajaran yang dibahas dan juga video yang berkaitan dengan materi yang dibahas. Terdapat juga tombol

selanjutnya yang akan masuk dalam layar materi selanjutnya atau jika materi habis akan langsung kembali ke menu pilihan. Button Sebelumnya berfungsi untuk melihat materi sebelumnya atau dapat kembali ke menu pilihan dapat kembali layar sebelumnya.

Disudut kanan atas ada tombol home yang akan masuk ke dalam layar home, login yang akan masuk dalam layar login , exit yang dapat keluar dari sistem perangkat ajar dan juga icon musik yang dapat menyalakan atau mematikan suara musik

3.6.3.8 Rancangan Layar Cara Hidup

Gambar 3.28 Rancangan Layar Cara Hidup

Dalam rancangan layar Cara Hidup, terdapat gambar dari materi tersebut, kemudian materi untuk menjelaskan pelajaran yang dibahas dan juga video yang

berkaitan dengan materi yang dibahas. Terdapat juga tombol selanjutnya yang akan masuk dalam layar materi selanjutnya atau jika materi habis akan langsung kembali ke menu pilihan. Button sebelumnya berfungsi untuk melihat materi sebelumnya atau dapat kembali ke menu pilihan dapat kembali layar sebelumnya.

Disudut kanan atas ada tombol home yang akan masuk ke dalam layar home, login yang akan masuk dalam layar login , exit yang dapat keluar dari sistem perangkat ajar dan juga icon musik yang dapat menyalakan atau mematikan suara musik

3.6.3.9 Rancangan Layar Reproduksi

Gambar 3.29 Rancangan Layar Reproduksi

Dalam rancangan layar Cara Hidup, terdapat gambar dari materi tersebut, kemudian materi untuk menjelaskan pelajaran yang dibahas dan juga video yang

berkaitan dengan materi yang dibahas. Terdapat juga tombol selanjutnya yang akan masuk dalam layar materi selanjutnya atau jika materi habis akan langsung kembali ke menu pilihan. Button sebelumnya berfungsi untuk melihat materi sebelumnya atau dapat kembali ke menu pilihan dapat kembali layar sebelumnya.

Disudut kanan atas ada tombol home yang akan masuk ke dalam layar home, login yang akan masuk dalam layar login , exit yang dapat keluar dari sistem perangkat ajar dan juga icon musik yang dapat menyalakan atau mematikan suara musik

3.6.3.10 Rancangan Layar Kuis

Gambar 3.30 Rancangan Layar Kuis

Pada perancangan layar kuis, terdapat beberapa soal yang diambil dari database soal yang diambil secara random. Jawaban yang ada pada layar tersebut juga

diambil dari database. Ada tombol next dan prev, tombol next bisa ditekan apabila jawaban sudah dipilih. Soal yang akan dipilih terdiri dari 10 soal, setelah sepuluh soal maka akan ada hasil yang telah dikerjakan

3.6.3.11 Rancangan Layar Evaluasi Kuis

Gambar 3.31 Rancangan Layar Evaluasi Kuis

Pada perancangan layar evaluasi kuis ini terdapat materi kuis yang dipilih pada saat awal kuis, kemudian terdapat jawaban yang benar dari pertanyaan yang diberikan, presentase merupakan berapa persen jawaban yang benar pada saat dikerjakan. Tabel yang ada berisi pertanyaan dan jawaban yang tadi dikerjakan oleh user. Tombol keluar akan kembali ke lingkungan windows.

3.6.3.12 Rancangan Layar Login

Gambar 3.32 Rancangan Layar Login

Dalam perancangan layar login ini, terdapat username dan password. Layar login ini khusus digunakan oleh para guru. Guru harus mengisi nama dan password menekan tombol Ok untuk dapat menuju ke menu utama admin. Apabila tidak jadi masuk ke halaman berikutnya maka tekan tombol Cancel dan akan kembali kembali ke windows.

3.6.3.13 Rancangan Layar Menu Admin

Pada perancangan layar menu admin, admin dapat menambah soal dengan tombol New, mengedit soal dengan tombol Edit dan menghapus soal yang ada didatabase dengan menekan tombol Delete. Tombol save dapat digunakan apabila telah menambahkan soal ke dalam database dan juga setelah mengedit soal yg ada. Tombol cancel digunakan apabila tidak jadi menambahkan soal dan mengedit soal yang sudah ada. Tombol exit digunakan untuk keluar dari layar ”M enu Admin” dan masuk kembali ke halaman windows. Apabila untuk melakukan manipulasi data maka guru harus memilih mata pelajaran mana yang akan dimanipulasi datanya. Kemudian dilakukan manipulasi datanya.

3.6.4 Pseudocode

3.6.4.1 Pseudocode Halaman Muka Modul Halaman Muka

Tampilkan Layar Halaman M uka Jalankan Animasi

Jalankan M usik

Jika tombol ”M ulai” ditekan maka

Tampilkan M odul M enu Utama Akhir Jika

Jika tombol ”Keluar” ditekan maka

Tampilkan Halaman Windows Akhir Jika

Akhir Modul

3.6.4.2 Pseudocode Menu Utama Modul Menu Utama

Jalankan animasi Jalankan M usic

Jika tombol ”Protozoa” ditekan maka Tampilkan M odul Protozoa

Akhir Jika

Jika tombol ”Porifera” ditekan maka Tampilkan M odul Porifera

Akhir Jika

Jika tombol ”Coelenterata” ditekan maka Tampilkan modul Coelenterata

Akhir Jika

Jika tombol ”M usic” ditekan maka M atikan atau Nyalakan M usic Akhir Jika

Jika tombol ”Home” ditekan maka

Tampilkan M odul M enu Utama Akhir Jika

Jika tombol ”Login” ditekan maka Tampilkan M odul Login

Akhir Jika

Jika tombol ”Exit” ditekan maka

Keluar ke windows

Akhir Jika

Akhir Modul

3.6.4.3 Pseudocode Menu Protozoa Modul Protozoa

Jalankan animasi Jalankan M usik

Jika tombol ”M ateri Dasar” ditekan maka Tampilkan M odul M ateri Dasar

Akhir Jika

Jika tombol ”Struktur Tubuh” ditekan maka Tampilkan M odul Struktur Tubuh Akhir Jika

Jika tombol ”Cara Hidup” ditekan maka Tampilkan M odul Cara Hidup Akhir Jika

Jika tombol ”Reproduksi” ditekan maka Tampilkan M odul Reproduksi

Akhir Jika

Jika tombol ”kuiz” ditekan maka

Tampilkan modul Quiz Protozoa Akhir Jika

Jika tombol ”M usic” ditekan maka M atikan atau Nyalakan M usic Akhir Jika

Jika tombol ”Home” ditekan maka

Tampilkan M odul M enu Utama Akhir Jika

Jika tombol ”Login” ditekan maka Tampilkan M odul Login

Akhir Jika

Jika tombol ”Exit” ditekan maka Keluar ke windows

Akhir Jika

Akhir Modul

3.6.4.4 Pseudocode Menu Porifera Modul Porifera

Jalankan animasi Jalankan M usik

Jika tombol ”M ateri Dasar” ditekan maka Tampilkan M odul M ateri Dasar

Akhir Jika

Jika tombol ”Struktur Tubuh” ditekan maka Tampilkan M odul Struktur Tubuh Akhir Jika

Jika tombol ”Cara Hidup” ditekan maka Tampilkan M odul Cara Hidup Akhir Jika

Jika tombol ”Reproduksi” ditekan maka Tampilkan M odul Reproduksi

Akhir Jika

Jika tombol ”kuis” ditekan maka Tampilkan modul kuis Porifera Akhir Jika

Jika tombol ”M usik” ditekan maka M atikan atau Nyalakan M usik Akhir Jika

Jika tombol ”Home” ditekan maka

Tampilkan M odul M enu Utama Akhir Jika

Jika tombol ”Login” ditekan maka Tampilkan M odul Login

Akhir Jika

Jika tombol ”Exit” ditekan maka Keluar ke windows

Akhir Jika

Akhir Modul

3.6.4.5 Pseudocode Menu Coelenterata Modul Protozoa

Jalankan animasi Jalankan M usik

Jika tombol ”M ateri Dasar” ditekan maka Tampilkan M odul M ateri Dasar

Akhir Jika

Jika tombol ”Struktur Tubuh” ditekan maka Tampilkan M odul Struktur Tubuh Akhir Jika

Jika tombol ”Cara Hidup” ditekan maka Tampilkan M odul Cara Hidup Akhir Jika

Jika tombol ”Reproduksi” ditekan maka Tampilkan M odul Reproduksi

Akhir Jika

Jika tombol ”kuiz” ditekan maka

Tampilkan modul Quiz Protozoa Akhir Jika

Jika tombol ”M usic” ditekan maka M atikan atau Nyalakan M usic Akhir Jika

Jika tombol ”Home” ditekan maka

Tampilkan M odul M enu Utama Akhir Jika

Jika tombol ”Login” ditekan maka Tampilkan M odul Login

Akhir Jika

Keluar ke windows Akhir Jika

Akhir Modul

3.6.4.6 Pseudocode Materi Dasar Modul Materi Dasar

Jalankan animasi

Jika tombol ”Selanjutnya” ditekan maka Jalankan modul ”materi”

Akhir Jika

Jika tombol ”Sebelumnya” ditekan maka

Jalankan modul ”menu pilihan” atau ”materi” Akhir Jika

Jika tombol ”M usik” ditekan maka M atikan atau Nyalakan M usik Akhir Jika

Jika tombol ”Home” ditekan maka

Tampilkan M odul M enu Utama Akhir Jika

Jika tombol ”Login” ditekan maka Tampilkan M odul Login

Akhir Jika

Jika tombol ”Exit” ditekan maka Keluar ke windows

Akhir Jika

Akhir Modul

3.6.4.7 Pseudocode S truktur Tubuh Modul S truktur Tubuh

Jalankan animasi

Jika tombol ”Selanjutnya” ditekan maka Jalankan modul ”materi”

Akhir Jika

Jika tombol ”Sebelumnya” ditekan maka

Jalankan modul ”menu pilihan” atau ”materi” Akhir Jika

Jika tombol ”M usik” ditekan maka M atikan atau Nyalakan M usik Akhir Jika

Jika tombol ”Home” ditekan maka

Tampilkan M odul M enu Utama Akhir Jika

Jika tombol ”Login” ditekan maka Tampilkan M odul Login

Akhir Jika

Keluar ke windows Akhir Jika

Akhir Modul

3.6.4.8 Pseudocode Cara Hidup Modul Cara Hidup

Jalankan animasi

Jika tombol ”Selanjutnya” ditekan maka Jalankan modul ”materi”

Akhir Jika

Jika tombol ”Sebelumnya” ditekan maka

Jalankan modul ”menu pilihan” atau ”materi” Akhir Jika

Jika tombol ”M usik” ditekan maka M atikan atau Nyalakan M usik Akhir Jika

Jika tombol ”Home” ditekan maka

Tampilkan M odul M enu Utama Akhir Jika

Jika tombol ”Login” ditekan maka Tampilkan M odul Login

Akhir Jika

Jika tombol ”Exit” ditekan maka Keluar ke windows Akhir Jika Akhir Modul 3.6.4.9 Pseudocode Reproduksi Modul Reproduksi Jalankan animasi

Jika tombol ”Selanjutnya” ditekan maka Jalankan modul ”materi”

Akhir Jika

Jika tombol ”Sebelumnya” ditekan maka

Jalankan modul ”menu pilihan” atau ”materi” Akhir Jika

Jika tombol ”M usik” ditekan maka M atikan atau Nyalakan M usik Akhir Jika

Jika tombol ”Home” ditekan maka

Tampilkan M odul M enu Utama Akhir Jika

Jika tombol ”Login” ditekan maka Tampilkan M odul Login

Akhir Jika

Keluar ke windows Akhir Jika

Akhir Modul 3.6.4.10 Pseudocode Kuis Modul Kuis

Tampilkan Layar Kuis Tampilkan Form Latihan Nonaktif tombol ”Next”

Pilih Jawaban

Jika tombol ”Next” ditekan maka Jika 1<id<10

Tampilkan soal kedua sampai sepuluh secara acak

Baca Database

Akhir jika Jika Id > 10

Tampilkan M odul Evaluasi Kuis Akhir Jika

Akhir Jika

Jika tombol ”Prev” ditekan maka Jika Id < 1

Tampilkan Soal pertama

Akhir Jika

Jika Id > 1

Tampilkan soal sebelumnya

Baca Database

Akhir Jika Akhir Jika

Modul Akhir

3.6.4.11 Pseudocode Evaluasi Kuis Modul Evaluasi Quiz

Tampilkan layar Evaluasi quiz Tampilkan jawaban yang benar

Tampilkan database soal yang dikerjakan Tampilkan persentase jawaban yang benar Jika tombol ”Keluar” ditekan maka

Tampilkan ”Lingkungan Windows” Akhir jika

Akhir Modul 3.6.4.12 Pseudocode Login Modul Login

Tampilkan layar Login Jika tombol Ok ditekan

Jika nama dan password benar maka

Tampilkan modul M enu admin

Akhir Jika

Jika nama dan password salah

Tampilkan layar dialog ”Username dan password salah” Set kursor pada textbox username

Akhir Jika

Akhir Jika

Jika tombol ”Cancel” ditekan maka Kembali ke Layar Windows Akhir Jika

Akhir Modul

3.6.4.13 Pseudocode Menu Admin Modul Menu Admin

Tampilkan Layar M enu Admin Pilih M ata Pelajaran

Baca database soal mata pelajaran Tampilkan database ke kolom ”listview” Nonaktif tombol ”save”

Nonaktif tombol ”cancel”

Selama tombol ”new” dan tombol ”edit” tidak ditekan Nonaktif textbox pertanyaan

Nonaktif jawaban 1

Nonaktif jawaban 2

Nonaktif jawaban 3

Nonaktif jawaban 4

Nonaktif jawaban benar Akhir selama

Jika tombol ”New” ditekan maka Nonaktif tombol ”New” Nonaktif tombol ”Edit” Nonaktif tombol ”Delete” M asukkan pertanyaan M asukkan jawaban 1 M asukkan jawaban 2 M asukkan jawaban 3 M asukkan jawaban 4 M asukkan jawaban benar Akhir jika

Pilih id soal atau pertanyaan atau jawaban benar pada kolom ”listview” Jika tombol ”Edit” ditekan maka

Nonaktif tombol ”New” Nonaktif tombol ”Edit” Nonaktif tombol ”Delete” M asukkan pertanyaan

M asukkan jawaban 1 M asukkan jawaban 2 M asukkan jawaban 3 M asukkan jawaban 4 M asukkan jawaban benar Akhir jika

Pilih id_soal atau pertanyaan atau jawaban_benar pada kolom ”listview” Jika tombol ”Delete” ditekan maka

Tampilkan layar dialog ”Apakah Anda Yakin ?”

Jika tekan Ok maka

Hapus data user yang dipilih dari database soal

Akhir Jika

Akhir Jika

Jika tombol ”Save” ditekan maka

Jika status ”New”

Penambahan data soal disimpan kedalam database Soal Selain itu

Perubahan data soal disimpan kedalam database Soal Akhir jika

Akhir Jika

Tampilkan isi database baru kedalam kolom ”Listview” Baca database soal mata pelajaran

Jika tombol ”Cancel” ditekan maka

Tampilkan data soal sebelum perubahan Akhir Jika

Jika tombol ”Exit” ditekan maka

Tampilkan Layar Windows

Akhir Jika

Akhir Modul

Dalam dokumen BAB 3 ANALISIS DAN PERANCANGAN (Halaman 27-48)

Dokumen terkait