3.4.4 Perancangan Layar
3.4.4.1 Perancangan Layar Pengguna 1. Intro
Gambar 3.20 Perancangan Layar Intro
Halaman ini adalah halaman animasi pembuka, muncul pada saat pengguna menjalankan perangkat ajar. Tombol skip intro digunakan untuk melewati layar animasi pembuka. Setelah layar animasi pembuka maka akan muncul layar home.
2. Home
Gambar 3.21 Perancangan Layar Home Keterangan gambar :
1. Pendahuluan
Tombol pendahuluan berfungsi menampilkan materi awal dalam perangkat ajar ginjal ini, berupa ginjal,fungsi ginjal, dan apa itu ekskresi.
2. Zat Sisa Hasil Ekskresi
Tombol Zat Sisa Hasil Ekskresi berfungsi menampilkan penjelasan zat-zat apa saja yang dikeluarkan pada proses ekresi ginjal.
Bagian tengah layar berisi materi berdasarkan tombol yang pengguna pilih. Sedangkan pada bagian kiri bawah merupakan navigasi penanda pengguna sedang berada pada menu apa.
3. Materi
Gambar 3.22 Perancangan Layar Materi
Keterangan gambar : 1. Struktur
Tombol struktur yang berfungsi menampilkan layar penjelasan struktur ginjal.
2. Sistem Ekskresi
Tombol Sistem Ekskresi yang berfungsi menampilkan layar penjelasan Sistem Ekskresi.
3. Faktor-faktor
Tombol Faktor yang berfungsi menampilkan layar penjelasan tentang faktor-faktor yang mempengaruhi sistem ekskresi.
4. Penyakit
Tombol Penyakit yang berfungsi menampilkan layar penjelasan penyakit-penyakit yang ada dalam ginjal.
Bagian tengah layar berisi materi berdasarkan tombol yang pengguna pilih. Sedangkan pada bagian kiri bawah merupakan navigasi penanda pengguna sedang berada pada menu apa.
4. Video
Gambar 3.23 Perancangan Layar Video Keterangan gambar :
1. Animasi
Tombol Animasi yang berfungsi menampilkan layar animasi proses yang terjadi pada ginjal.
2. Video
Tombol Video berfungsi menampilkan layar video yang ada pada perangkat ajar ginjal.
Pada bagian kiri bawah merupakan navigasi penanda pengguna sedang berada pada menu apa.
5. Animasi
Gambar 3.24 Perancangan Layar Animasi
Keterangan gambar : 1. Animasi
Tombol Animasi yang berfungsi menampilkan layar animasi proses yang terjadi pada ginjal.
2. Video
Tombol Video berfungsi menampilkan layar video yang ada pada perangkat ajar ginjal.
3. Tombol Suara
Berfungsi menyalakan/mematikan suara penjelasan materi
Pada bagian kiri bawah merupakan navigasi penanda pengguna sedang berada pada menu apa.
6. Latihan Soal / Animasi
Gambar 3.25 Perancangan Layar Latihan Soal / Animasi
Keterangan gambar : 1. Animasi
Tombol Animasi yang berfungsi menampilkan layar animasi proses yang terjadi pada ginjal.
2. Pilihan Ganda
Tombol Pilihan Ganda yang berfungsi menampilkan layar pilihan ganda untuk evaluasi murid.
Pada bagian kiri bawah merupakan navigasi penanda pengguna sedang berada pada menu apa.
7. Latihan Soal Pilihan Ganda
Gambar 3.26 Perancangan Layar Login Latihan Soal Pilihan Ganda Layar awal pada latihan soal pilihan ganda. Pengguna memasukkan nama pada textbox yang terserdia. Tombol OK berfungsi memunculkan layar soal.
Gambar 3.27 Perancangan Layar Soal Pilihan Ganda
Layar latihan soal berisi soal-soal yang sudah diambil secara acak dari database. Pada bagian kiri berisi gambar dalam latihan soal, sedangkan selanjutnya secara berurutan ke kanan berisi kategori soal, soal, pilihan jawaban. Tombol Next berfungsi untuk menampilkan soal selanjutnya.
Gambar 3.28 Perancangan Layar Hasil Latihan Soal Pilihan Ganda
Layar Hasil evaluasi berisi hasil yang diperoleh pengguna pada soal pilihan ganda. Bagian sebelah kiri berisi soal yang didapat oleh pengguna, sedangkan selanjutnya bagian kanan berisi jawaban pengguna apakah benar atau salah. Tombol Ulangi berfungsi mengulang latihan soal. Sedangkan tombol Keluar berfungsi untuk keluar dari Latihan soal.
8. Petunjuk Penggunaan
Gambar 3.29 Perancangan Layar Bantuan / Petunjuk Penggunaan
Keterangan gambar : 1. Petunjuk Penggunaan
Tombol yang berfungsi menampilkan layar petunjuk penggunaan perangkat ajar.
2. Referensi
Tombol yang berfungsi menampilkan layar referensi.
Pada bagian kiri bawah merupakan navigasi penanda pengguna sedang berada pada menu apa.
9. Bantuan / Referensi
Gambar 3.30 Perancangan Layar Bantuan / Referensi
Keterangan gambar : 1. Petunjuk Penggunaan
Tombol ini berfungsi untuk menampilkan layar petunjuk penggunaan.
2. Referensi
Tombol ini berfungsi untuk menampilkan layar referensi perangkat ajar, yaitu referensi buku dan referensi internet.
Pada bagian kiri bawah merupakan navigasi penanda pengguna sedang berada pada menu apa.
10. Profil Perangkat Ajar
Gambar 3.31 Perancangan Layar Profil Perangkat Ajar
Keterangan gambar : 1. Profil Perangkat Ajar
Tombol yang berfungsi menampilkan Profil dari perangkat ajar biologi ini.
Pada bagian kiri bawah merupakan navigasi penanda pengguna sedang berada pada menu apa.
11. Penutup
Gambar 3.32 Perancangan Layar Penutup
Layar Animasi penutup berisi animasi penutup setelah pengguna memilih tombol close.
3.4.4.2 Perancangan Layar Admin
Gambar 3.33 Perancangan Layar Login Admin
Layar ini berisi textbox untuk mengisi penggunaname, dan password untuk admin. Tombol Masuk berfungsi untuk menampilkan Menu Admin setelah pengguna memasukkan nama dan password. Tombol Daftar berfungsi untuk menampilkan layar pendaftaran penggunaname dan password.
Gambar 3.34 Perancangan Layar Menu Utama Admin
Layar ini berisi berisi button yang dapat dipilih admin yaitu :
1. Tombol Tambah Soal berfungsi menampilkan Layar Tambah soal.
2. Tombol Ubah/Hapus Soal berfungsi untuk menampilkan Layar Ubah/Hapus soal.
3. Tombol Ubah Password berfungsi untuk menampilkan layar untuk mengubah password admin.
4. Tombol Keluar berfungsi untuk keluar dari applikasi admin.
Gambar 3.35 Perancangan Layar Ubah Soal
Layar ini berisi textbox yang dapat diisi oleh admin untuk mengubah soal dalam database. Admin dapat memilih jenis soal yang akan diubah dengan memilih radio button yang ada antara lain kategori mudah, sedang, dan sulit.
1. Tombol ubah soal berfungsi untuk mengubah soal yang ada didalam database.
2. Tombol Kembali berfungsi untuk kembali ke menu admin.
3. Tombol Hapus Soal berfungsi untuk menghapus soal yang ada dalam database.
Gambar 3.36 Perancangan Layar Tambah Soal
Layar ini berisi textbox yang dapat diisi oleh admin untuk menambah soal dalam database. Admin dapat memilih jenis soal yang akan ditambah dengan memilih radio button yang ada antara lain kategori mudah, sedang, dan sulit.
Tombol Tambah berfungsi untuk menambah soal kedalam database, sedangkan Tombol Kembali berfungsi untuk kembali ke menu Admin.
Gambar 3.37 Perancangan Layar Ubah Password
Layar ini berisi textbox yang diisi oleh admin untuk mengubah password sebelumnya.Tombol ubah password berfungsi mengubah password admin apabila sudah memasukkan password lama, password baru, dan confirm password. Tombol kembali berfungsi untuk kembali ke menu Admin.
Gambar 3.38 Perancangan Layar Registrasi
Layar ini berisi textbox yang dapat diisi oleh admin untuk medaftar. Tombol daftar berfungsi untuk mendaftar setelah pengguna telah memasukkan penggunaname, password, dan confirm password. Tombol kembali berfungsi untuk menampilkan layar login.
3.4.5 Pseudocode
3.4.5.1 Modul Layar Home
Tampilkan layar Pendahuluan Jika Pilih tombol Ekskresi
Tampilkan layar Ekskresi Jika tekan Gambar
Zoom gambar diagram Ekskresi Akhir Jika
Akhir Jika
Jika Pilih tombol Ginjal Tampilkan layar Ginjal Akhir Jika
Jika Pilih tombol Fungsi Ginjal Tampilkan layar Fungsi Ginjal Akhir Jika
Jika Pilih tombol Zat Sisa Hasil Ekskresi Tampilkan layar Zat Sisa Hasil Ekskresi Akhir Jika
Jika Pilih tombol Bantuan Tampilkan layar Bantuan Akhir Jika
Jika Pilih tombol Profil Perangkat Ajar Tampilkan layar Profil Perangkat Ajar
Akhir Jika
Jika Pilih tombol Materi
Tampilkan layar Materi Ginjal Gambar Menu Icon berubah Akhir Jika
Jika Pilih tombol Animasi dan Video Tampilkan layar Animasi Gambar Menu Icon berubah Akhir Jika
Jika Pilih tombol Soal
Tampilkan layar Latihan Soal Gambar Menu Icon berubah Akhir Jika
Jika Pilih tombol Close
Munculkan Pesan Konfirmasi Jika Pilih Iya
Munculkan Animasi Penutup Keluar dari Flash
Akhir Jika Jika Pilih Tidak Kembali ke Flash Akhir Jika
Akhir Jika
3.4.5.2 Modul Materi
Tampilkan layar Penjelasan Organ
Jika Pilih tombol Suara
Nyalakan Suara Narasi
Akhir Jika
Tampilkan layar Penjelasan Organ
Jika Pilih tombol Suara
Nyalakan Suara Narasi
Akhir Jika
Akhir Jika
Jika pilih tombol Panah
Tampilkan layar gambar Anatomi Nefron Selanjutnya
Jika Pilih tombol Suara
Nyalakan Suara Narasi
Akhir Jika
Tampilkan layar Penjelasan Organ
Jika Pilih tombol Suara
Nyalakan Suara Narasi
Tampilkan layar Penjelasan Filtrasi
Jika Pilih tombol Home
Munculkan Pesan Konfirmasi Jika Pilih Iya
Munculkan Animasi Penutup Keluar dari Flash
Akhir Jika
Jika Pilih Tidak Kembali ke Flash Akhir Jika
Akhir Jika
3.4.5.3 Modul Layar Animasi
Tampilkan layar Animasi
Jika Pilih tombol Animasi letak Ginjal Tampilkan layar letak Ginjal di tubuh Jika Pilih tombol Suara
Nyalakan Suara Narasi Penjelasan Akhir Jika
Jika Pilih tombol Play Animasi
Jalankan Animasi Penjelasan Ginjal
Jika Pilih tombol Play Animasi selanjutnya Tampilkan layar Animasi Selanjutnya
Pause Animasi yang sedang berjalan Akhir Jika
Jika Pilih salah satu Organ
Tampilkan layar Animasi Organ yang dipilih Jika Pilih tombol Suara
Nyalakan Suara Narasi
Akhir Jika
Jika Pilih Animasi Sebelumnya
Tampilkan layar Animasi Sebelumnya
Akhir Jika
Jika Pilih tombol Pause
Pause Animasi yang sedang berjalan Akhir Jika
Jika Pilih tombol Animasi proses Ginjal
Tampilkan layar Animasi Proses Ginjal Jika Pilih tombol Suara
Nyalakan Suara Narasi
Akhir Jika Jika Pilih tombol Pause
Pause Animasi yang sedang berjalan Akhir Jika
Jika Pilih tombol Mulai
Jika Pilih salah Checkbox
Jalankan Animasi berdasarkan Pilihan Checkbox
Akhir Jika
Akhir Jika
Jika Pilih salah satu Organ
Tampilkan layar Animasi Organ yang dipilih Jika Pilih Suara
Nyalakan Suara Narasi
Akhir Jika
Jika Pilih tombol Pause
Pause Animasi yang sedang berjalan
Akhir Jika
Jika Pilih tombol kembali
Tampilkan layar Animasi sebelumnya
Akhir Jika
Jika Pilih tombol Play
Jika Pilih salah satu Checkbox
Jalankan Animasi berdasarkan Pilihan
Akhir Jika
Jika Pilih tombol Selanjutnya
Jika Pilih tombol Video Tampilkan layar Video Akhir Jika
Jika Pilih tombol Home
Tampilkan layar Pendahuluan Gambar Menu Icon berubah Akhir Jika
Jika Pilih tombol Soal
Tampilkan layar Latihan Soal Gambar Menu Icon berubah Akhir Jika
Jika Pilih tombol Bantuan Tampilkan layar Bantuan Akhir Jika
Jika Pilih tombol Profil
Tampilkan layar Profil Sekolah Akhir Jika
Jika Pilih tombol Close
Munculkan Pesan Konfirmasi Jika Pilih Iya
Munculkan Animasi Penutup Keluar dari Flash
Akhir Jika Jika Pilih Tidak Kembali ke Flash Akhir Jika
Akhir Jika
3.4.5.4 Modul Layar Video