3.5 Perancangan Layar
3.5.1 Perancangan Layar Perangkat Ajar (user) Tabel 3.21 Layar Animasi Pembuka
3.4.5 Class Diagram
Gambar 3.24 Class Diagram Perangkat Ajar
3.5 Perancangan Layar
3.5.1 Perancangan Layar Perangkat Ajar (user) Tabel 3.21 Layar Animasi Pembuka
Multimedia Storyboard
Project: Perangkat Ajar Penerapan Gaya Date: 16 Desember 2010
Screen Description:
Setiap kali aplikasi perangkat ajar dijalankan pertama kali, maka akan muncul animasi awal sebagai pembukaan, baru setelah ini akan masuk ke layar buat/ pilih profile.
Link From Screen ID: Link to Screen ID: Layar Buat/ Pilih Profile Color Scheme: Text Attributes: Still Images: Audio: Video: Animation:
Spesifikasi Proses “Layar Animasi Pembuka” Tampilkan Animasi_pembuka
JIKA Animasi_pembuka selesai MAKA Lakukan Buat_Pilih_Profile
Tabel 3.22 Layar Buat/ Pilih Profile Multimedia Storyboard
Project: Perangkat Ajar Penerapan Gaya Date: 16 Desember 2010
Screen: 2 of 14 Screen ID: Layar Buat/ Pilih Profile
Screen Description:
Pada layar ini terdapat kolom untuk memasukkan nama untuk membuat nama baru, dan juga kolom untuk memilih nama yang sudah ada yang telah dimasukkan sebelumnya.
Link From Screen ID: Layar Animasi Pembuka
Link to Screen ID: Layar Menu Utama Color Scheme: Text Attributes: Still Images: Audio: Video: Animation:
Spesifikasi Proses “Layar Buat/ Pilih Profile” Pilih_Profil
Pilih_Tekan
JIKA Tekan Buat MAKA
JIKA TextField == “” || TextField != [a-z][A-Z]/s || TextField == nama profil di database MAKA
TAMPILKAN peringatan
LAINNYA
Masukan Profil baru ke DataBase TAMPILKAN Menu_utama
AKHIR LAINNYA
AKHIR JIKA
JIKA Tekan Pilih nama MAKA
TAMPILKAN pilihan nama profil
JIKA Tekan Pilih MAKA
Profil_aktif = nama yang dipilih
TAMPILKAN Menu_utama
AKHIR JIKA
AKHIR JIKA
AKHIR Pilih_Tekan
AKHIR Pilih_Profil
Tabel 3.23 Layar Menu Utama Multimedia Storyboard
Project: Perangkat Ajar Penerapan Gaya Date: 16 Desember 2010 Screen: 3 of 14 Screen ID: Layar Menu Utama
Screen Description:
Pada layar menu utama dari perangkat ajar ini terdapat 5 tombol, yaitu: 1. Tombol rak buku untuk masuk ke menu materi
2. Tombol kotak peralatan untuk masuk ke menu penerapan 3. Tombol komputer untuk masuk ke menu kuis
4. Tombol televisi untuk masuk ke menu video
Link From Screen ID: Layar Buat/ Pilih Profile
Link to Screen ID: 1. Layar Materi 2. Layar Latihan Soal 3. Layar Menu Simulasi 4. Layar Video Color Scheme: Text Attributes: Still Images: Audio: Video: Animation:
Spesifikasi Proses “Layar Menu Utama” Menu_utama
Pilih Tekan
JIKA Tekan Rak_buku MAKA
Lakukan Materi
AKHIR JIKA
JIKA Tekan Kotak_peralatan MAKA
Lakukan Simulasi
AKHIR JIKA
JIKA Tekan TV MAKA
Lakukan Video
AKHIR JIKA
JIKA Tekan Komputer MAKA
Lakukan Latihan
AKHIR JIKA
JIKA Tekan profile MAKA
Lakukan Edit_profile
AKHIR JIKA
JIKA Tekan keluar MAKA
Lakukan Keluar_aplikasi
AKHIR JIKA
AKHIR Pilih
AKHIR Menu_utama
Tabel 3.24 Layar Materi Multimedia Storyboard
Project: Perangkat Ajar Penerapan Gaya Date: 16 Desember 2010 Screen: 4 of 14 Screen ID: Layar Materi
Screen Description:
Pada layar materi terdapat tombol home yang berguna untuk kembali ke menu utama dan materi yang disajikan dalam bentuk animasi flipbook. Memindahkan halaman buku dapat dilakukan dengan mengklik keempat sudut buku untuk membalikkan buku ke halaman berikutnya.
Link From Screen ID: Layar Menu Utama Link to Screen ID: Layar Menu Utama Color Scheme: Text Attributes: Still Images: Audio: Video: Animation:
Spesifikasi Proses “Layar Materi” Materi
TAMPILKAN flip_book
Pilih Tekan
JIKA Tekan lanjut MAKA
TAMPILKAN halaman_selanjutnya
AKHIR JIKA
JIKA Tekan kembali MAKA
TAMPILKAN halaman_sebelumnya
AKHIR JIKA
JIKA Tekan home MAKA
AKHIR JIKA
JIKA Tombol “home” ditekan MAKA Lakukan Menu_utama
AKHIR JIKA
AKHIR Pilih
AKHIR materi
Tabel 3.25 Layar Latihan Soal Multimedia Storyboard
Project: Perangkat Ajar Penerapan Gaya Date: 16 Desember 2010 Screen: 5 of 14 Screen ID: Layar Latihan Soal
Screen Description:
Pada layar kuis, user akan diberikan pertanyaan untuk menguji pemahaman user dari hasil pembelajaran. Terdapat 15 soal latihan yang diberikan berupa pilihan ganda, dimana user memilih satu dari 4 jawaban yang tersedia.
Link From Screen ID: Layar Menu Utama
Link to Screen ID: Layar Menu Utama Color Scheme: Text Attributes: Still Images: Audio: Video: Animation:
Khusus untuk spesifikasi-spesifikasi proses pada layar latihan soal yang terdiri dari lima layar (mulai dari Tabel 3.24 – 3.28) akan digabung menjadi satu kesatuan spesifikasi proses karena saling berhubungan.
Spesifikasi Proses “Layar Latihan Soal” (Tabel 3.25 – 3.29) Latihan
Load Table Soal dari Database
Num = Jumlah record pada database soal For (i=0; i<Num;i++)
{
Soal[i] = field_Soal record ke-i
Jawaban[i] = field_Jawaban record ke-i Alternatif1[i] = field_Alternatif1 record ke-i Alternatif2[i] = field_Alternatif2 record ke-i Alternatif3[i] = field_Alternatif3 record ke-i Alternatif4[i] = field_Alternatif4 record ke-i Alternatif5[i] = field_Alternatif5 record ke-i
} Tanggal_latihan = Tanggal_Sekarang Nilai = 0 Jawaban_benar = 0 Jawaban_salah = 0 Soal_sebelum = -1 No_soal = 0 Pos_Jawaban Pos_Alternatif1 Pos_Alternatif2 Pos_Alternatif3 No_Alternatif1 No_Alternatif2 No_Alternatif3 Do Random No_soal
JIKA Soal_sebelum = No_soal MAKA Random No_soal AKHIR JIKA Tampilkan Soal[No_Soal] Random(0-3) Pos_Jawaban Radio_button[Pos_Jawaban] = Jawaban[No_Soal] Random(0-4) No_Alternatif1 do Random(0-3) Pos_Alternatif1
Radio_button[Pos_Alternatif1] = Alternatif+No_Alternatif do
Random(0-4) No_Alternatif2
While No_Alternatif1 = No_Alternatif2 do
Random(0-3) Pos_Alternatif1
While Pos_Alternatif2 = Pos_Jawaban || Pos_Alternatif2 = Pos_Alternatif1
Radio_button[Pos_Alternatif1] = Alternatif+No_Alternatif do
Random(0-4) No_Alternatif2
While No_Alternatif1 = No_Alternatif3 || No_Alternatif2 = No_Alternatif3
do
Random(0-3) Pos_Alternatif1
While Pos_Alternatif3 = Pos_Jawaban || Pos_Alternatif3 = Pos_Alternatif1 || No_Alternatif3 = No_Alternatif2 Radio_button[Pos_Alternatif1] = Alternatif+No_Alternatif
JIKA Radio_Button_Selected = Pos_Jawaban MAKA Tambah Jawaban_benar
Tampilkan Prompt_benar AKHIR JIKA
JIKA Radio_Button_Selected != Pos_Jawaban MAKA Tambah Jawaban_salah
Tampilkan Prompt_salah AKHIR JIKA
JIKA Tekan Selanjutnya MAKA NEXT soal dan pilihan AKHIR JIKA
While Soal < 15 soal
Nilai = (jumlah jawaban benar * 100) /15 Tampilkan Jawaban_benar
Tampilkan Jawabana_salah Tampilkan Nilai
Simpan Nilai (Profil_aktif, Nilai, Tanggal_latihan) Rata_Rata =
Jumlah_Nilai_Profile_aktif/Jumlah_Record_Nilai_Profile_aktif Tampilkan Rata_Rata
JIKA Tombol “home” ditekan MAKA Lakukan Menu_utama
AKHIR JIKA AKHIR Latihan
Tabel 3.26 Layar Latihan Soal (Jawab) Multimedia Storyboard
Project: Perangkat Ajar Penerapan Gaya Date: 16 Desember 2010
Screen: 6 of 14 Screen ID: Layar Latihan Soal (Jawab)
Screen Description:
Setelah user memilih jawaban, akan muncul layar untuk meyakinkan user apakah jawaban yang dipilih sudah benar, dengan begitu diharapkan akan mengurangi human error dari user.
Link From Screen ID: Layar Latihan Soal
Link to Screen ID:
1. Layar Latihan Soal (Jawaban Benar) 2. Layar Latihan Soal (Jawaban Salah) 3. Layar Latihan Soal
Color Scheme: Text Attributes: Still Images: Audio: Video: Animation:
Tabel 3.27 Layar Latihan Soal (Jawaban Benar) Multimedia Storyboard
Project: Perangkat Ajar Penerapan Gaya Date: Date: 16 Desember 2010 Screen: 7 of 14 Screen ID:
Layar Latihan Soal (Jawaban Benar)
Screen Description:
Jika user menjawab soal dengan benar maka akan muncul tulisan ‘Jawaban Benar’. Terdapat tombol selanjutnya yang berfungsi untuk melanjutkan ke soal berikutnya. Link From Screen ID:
Layar Latihan Soal (Jawab)
Link to Screen ID: Layar Latihan Soal Color Scheme: Text Attributes: Still Images: Audio: Video: Animation:
Tabel 3.28 Layar Latihan Soal (Jawaban Salah) Multimedia Storyboard
Project: Perangkat Ajar Penerapan Gaya Date: 16 Desember 2010
Screen: 8 of 14 Screen ID:
Layar Latihan Soal (Jawaban Salah)
Screen Description:
Jika jawaban user salah, maka jawaban yang benar akan dimunculkan di layar agar user dapat mengetahui jawaban yang benar. Terdapat tombol selanjutnya yang berfungsi untuk melanjutkan ke soal berikutnya.
Link From Screen ID: Layar Latihan Soal (Jawab)
Link to Screen ID: Layar Latihan Soal Color Scheme: Text Attributes: Still Images: Audio: Video: Animation:
Tabel 3.29 Layar Hasil/ Nilai Akhir Latihan Multimedia Storyboard
Project: Perangkat Ajar Penerapan Gaya Date: 16 Desember 2010
Screen: 9 of 14 Screen ID:
Layar Hasil/ Nilai Akhir Latihan
Screen Description:
Pada layar ini akan ditampilkan hasil dari latihan soal yang telah dijawab oleh user dan tabel history nilai dari kuis-kuis yang pernah dikerjakan sebelumnya. Nilai didapat dari jumlah jawaban benar dikalikan seratus, kemudian dibagi jumlah total soal lima belas. Rata-rata didapat dari jumlah nilai profile aktif dibagi dengan jumlah record nilai profile aktif. Tombol home untuk kembali ke layar menu utama.
Link From Screen ID: Layar Latihan Soal Link to Screen ID: Layar Menu Utama Color Scheme: Text Attributes: Still Images: Audio: Video: Animation:
Tabel 3.30 Layar Menu Simulasi Multimedia Storyboard
Project: Perangkat Ajar Penerapan Gaya Date: 16 Desember 2010
Screen: 10 of 14 Screen ID: Layar Menu Simulasi
Screen Description:
Pada layar menu simulasi ini, terdapat tiga buah simulasi sederhana dan tombol home untuk kembali ke menu utama. Simulasi pertama berupa simulasi benda tenggelam dan terapung, simulasi kedua adalah gaya magnet, dan simulasi ketiga adalah gaya pegas. Link From Screen ID:
Layar Menu Utama
Link to Screen ID: 1. Layar Menu Utama 2. Layar Simulasi 1 3. Layar Simulasi 2 4. Layar Simulasi 3 Color Scheme: Text Attributes: Still Images: Audio: Video: Animation:
Spesifikasi Proses “Layar Menu Simulasi” Menu_Simulasi
Pilih Tekan
Lakukan Menu_utama AKHIR JIKA
JIKA Tombol “simulasi1” ditekan MAKA Tampilkan simulasi_1
AKHIR JIKA
JIKA Tombol “simulasi2” ditekan MAKA Tampilkan simulasi_2
AKHIR JIKA
JIKA Tombol “simulasi3” ditekan MAKA Tampilkan simulasi_3
AKHIR JIKA AKHIR Pilih
AKHIR Menu_Simulasi
Tabel 3.31 Layar Simulasi 1 Multimedia Storyboard
Project: Perangkat Ajar Penerapan Gaya Date: 16 Desember 2010 Screen: 11 of 14 Screen ID: Layar Simulasi 1
Screen Description:
Simulasi pertama mengenai benda yang terapung dan tenggelam di dalam air. Cara menggunakan simulasi ini adalah dengan memilih jenis benda yang diinginkan, lalu setelah itu klik untuk menjatuhkan ke dalam air setelah itu user dapat melihat mana benda yang akan tenggelam atau terapung. Pada layar ini terdapat tombol back yang berguna untuk kembali ke menu penerapan.
Link From Screen ID: Layar Menu Simulasi
Link to Screen ID: Layar Menu Simulasi Color Scheme: Text Attributes: Still Images: Audio: Video: Animation:
Spesifikasi Proses “Layar Simulasi 1” Simulasi_1
Tampilkan animasi penjelasan Pilih Tekan
JIKA Tekan = “Tengelam” MAKA
Tampilkan Animasi Objek_Tengelam
AKHIR JIKA
JIKA Tekan = “Terapung” MAKA
Tampilkan Animasi Objek_terapung
AKHIR JIKA
JIKA Tekan = “Melayang” MAKA
Tampilkan Animasi Objek_Melayang
AKHIR JIKA
JIKA Tekan Kembali MAKA
Tampilkan Menu_simulasi AKHIR JIKA
AKHIR Pilih
AKHIR Simulasi_1
Tabel 3.32 Layar simulasi 2 Multimedia Storyboard
Project: Perangkat Ajar Penerapan Gaya Date: 16 Desember 2010 Screen: 12 of 14 Screen ID: Layar Simulasi 2
Screen Description:
Simulasi ke-2 adalah simulasi gaya magnet terhadap benda lain. User dapat memilih benda dan melihat efeknya ketika didekat dengan magnet. Benda yang dapat dipilih adalah magnet, paku, dan kertas. Pada layar ini terdapat tombol back yang berguna untuk kembali ke menu penerapan.
Link From Screen ID: Layar Menu Simulasi
Link to Screen ID: Layar Menu Simulasi Color Scheme: Text Attributes: Still Images: Audio: Video: Animation:
Spesifikasi Proses “Layar Simulasi 2” Simulasi_2
Tampilkan animasi penjelasan Kursor = drag magnet1
Acak posisi paku Acak posisi kertas Acak posisi magnet
JIKA magnet1 mengenai area paku MAKA
Tampikan animasi paku mendekati magnet1
AKHIR JIKA
JIKA magnet1 mengenai area kertas MAKA
Tampikan animasi kertas mendekati magnet1
AKHIR JIKA
JIKA magnet1 mengenai area magnet MAKA
Tampikan animasi magnet mendekati magnet1
AKHIR JIKA
Pilih Tekan
JIKA Tekan == Paku MAKA
Random posisi paku
AKHIR JIKA
JIKA Tekan == Kertas MAKA
Random posisi kertas
AKHIR JIKA
JIKA Tekan == Magnet MAKA
Random posisi magnet
AKHIR JIKA
JIKA Tekan Kembali MAKA
Tampilkan Menu_simulasi AKHIR JIKA
AKHIR Pilih
AKHIR Simulasi_2
Tabel 3.33 Layar simulasi 3 Multimedia Storyboard
Project: Perangkat Ajar Penerapan Gaya Date: 16 Desember 2010 Screen: 13 of 14 Screen ID: Layar Simulasi 3
Screen Description:
Simulasi ke-3 adalah simulasi gaya pegas yang juga dapat merupakan mini-game dengan menggunakan ketapel. User dapat menggerakkan mouse untuk mengarahkan pointer ke arah sasaran kemudian men-klik untuk menembak sasaran. Sasaran terletak di tempat dan jarak yang berbeda-beda sehingga dibutuhkan jarak tembakan yang berbeda agar tembakan user mengenai sasaran. Pada layar ini terdapat tombol back yang berguna untuk kembali ke menu penerapan.
Link From Screen ID: Layar Menu Simulasi
Link to Screen ID: Layar Menu Simulasi Color Scheme: Text Attributes: Still Images: Audio: Video: Animation:
Spesifikasi Proses “Layar Simulasi 3” Simulasi_3
Waktu = 60
Do
Delay 1 detik
Do
Lakukan Sasaran_pindah While tidak ada Mouse_Click
Posisi = Sasaran_posisi Batu bergerak menuju Posisi JIKA Batu Mengenai Sasaran
Tambah Nilai
AKHIR JIKA While waktu > 0 AKHIR Simulasi_3
Tabel 3.34 Layar Video Multimedia Storyboard
Project: Perangkat Ajar Penerapan Gaya Date: 16 Desember 2010 Screen: 14 of 14 Screen ID: Layar Video
Screen Description:
Pada layar video user dapat menonton empat video yang tersedia. Dilayar ini terdapat beberapa tombol, yaitu:
1. Tombol play/ pause 2. Timeline dari video 3. Tombol untuk mute
4. Tombol home untuk kembali ke layar menu utama Link From Screen ID:
Layar Menu Utama
Link to Screen ID: Layar Menu Utama Color Scheme: Text Attributes: Still Images: Audio: Video: Animation:
Spesifikasi Proses “Layar Video” Video
Pilih Tekan
JIKA Tombol “home” ditekan MAKA Lakukan Menu_utama
AKHIR JIKA
JIKA Tombol “close” ditekan MAKA Lakukan Keluar_aplikasi AKHIR JIKA
JIKA Tombol “video1” ditekan MAKA Tampilkan Video1
AKHIR JIKA
JIKA Tombol “video2” ditekan MAKA Tampilkan Video2
AKHIR JIKA
JIKA Tombol “video3” ditekan MAKA Tampilkan Video3
AKHIR JIKA
JIKA Tombol “video4” ditekan MAKA Tampilkan Video4
AKHIR JIKA AKHIR Pilih
3.5.2 Perancangan Layar Aplikasi Admin