3.5 Perancangan Layar
3.5.2 Perancangan Layar Aplikasi Admin Tabel 3.35 Layar Login
3.5.2 Perancangan Layar Aplikasi Admin Tabel 3.35 Layar Login
Multimedia Storyboard
Project: Perangkat Ajar Penerapan Gaya Date: 16 Desember 2010 Screen: 1 of 7 Screen ID: Layar Login
Screen Description:
Pada layar ini terdapat field untuk mengisi username dan password, baru setelah mengisi username dan password, admin dapat masuk ke layar menu admin.
Link From Screen ID: Link to Screen ID: Layar Menu Admin Color Scheme: Text Attributes: Still Images: Audio: Video: Animation:
Spesifikasi Proses “Layar Login” JIKA Tombol “login” ditekan MAKA
JIKA TextField != password MAKA Tampilkan peringatan TextField == “”
LAINNYA
Tampilkan Menu_Admin
AKHIR JIKA AKHIR JIKA
Tabel 3.36 Layar Menu Admin Multimedia Storyboard
Project: Perangkat Ajar Penerapan Gaya Date: 16 Desember 2010 Screen: 2 of 7 Screen ID: Layar Menu Admin
Screen Description:
Pada layar menu utama admin terdapat tiga buah menu, yaitu menu tampil soal, menu tambah soal dan menu ubah sandi, dimana dalam menu tampil soal admin selain dapat melihat soal juga dapat memperbarui ataupun menghapus soal.
Link From Screen ID: Layar Login Link to Screen ID: 1. Layar Tampil Soal 2. Layar Tambah Soal 3. Layar Ubah Sandi Color Scheme: Text Attributes: Still Images: Audio: Video: Animation:
Spesifikasi Proses “Layar Menu Admin” Menu_Admin
Pilih menu
JIKA menu == “Tampil Soal” MAKA
TAMPILKAN Tampil_Soal
AKHIR JIKA
JIKA menu == “Tambah Soal” MAKA
TAMPILKAN Tambah_Soal
AKHIR JIKA
JIKA menu == “Ubah Sandi” MAKA
TAMPILKAN Ubah_Sandi
AKHIR JIKA
JIKA menu == “Submit”
JIKA Soal == Jawaban == alternative pilihan 1 == alternative pilihan 2 == alternative pilihan 3 == alternative pilihan 4 == alternative pilihan 5 == “” MAKA
Tampilkan pesan error
LAINNYA
Tambahkan Soal pada database
TAMPILKAN Menu_Awal
AKHIR JIKA
AKHIR JIKA
AKHIR Pilih
AKHIR Menu_Admin
Tabel 3.37 Layar Tampil Soal (1) Multimedia Storyboard
Project: Perangkat Ajar Penerapan Gaya Date: 16 Desember 2010
Screen Description:
Ini adalah layar yang akan muncul bila menu tampil soal dipilih. Pada layar ini user dapat melihat soal-soal yang ada. Terdapat tombol lihat untuk melihat soal secara keseluruhan, tombol next untuk melihat daftar tampil soal berikutnya, dan tombol prev untuk melihat daftar tampil soal sebelumnya.
Link From Screen ID: Layar Menu Admin
Link to Screen ID:
1. Layar Tampil Soal (2) 2. Layar Tambah Soal 3. Layar Ubah Sandi Color Scheme: Text Attributes: Still Images: Audio: Video: Animation:
Spesifikasi Proses “Layar Tampil Soal (1)” Tampil_Soal
Load Table Soal
Page = 0
For (row=Page*20;row<(Page+1)*20;row++) {
Tampilkan Soal[row] }
Pilih menu
JIKA menu == “Tampil Soal” MAKA
TAMPILKAN Tampil_Soal
AKHIR JIKA
JIKA menu == “Tambah Soal” MAKA
TAMPILKAN Tambah_Soal
AKHIR JIKA
JIKA menu == “Ubah Sandi” MAKA
TAMPILKAN Ubah_Sandi
AKHIR JIKA
JIKA menu == “Lihat” Curr = selected_Index
TAMPILKAN Detail_Soal
AKHIR JIKA
JIKA menu == “next” Page++
Hapus List Soal
For (row=Page*20;row<(Page+1)*20;row++) {
Tampilkan Soal[row] }
AKHIR JIKA
JIKA menu == “prev” Page--
Hapus List Soal
For (row=Page*20;row<(Page+1)*20;row++) { Tampilkan Soal[row] } AKHIR JIKA AKHIR Pilih AKHIR Tampil_Soal
Tabel 3.38 Layar Tampil Soal (2) Multimedia Storyboard
Project: Perangkat Ajar Penerapan Gaya Date: 16 Desember 2010
Screen Description:
Ini adalah layar yang akan muncul bila tombol lihat pada layar tampil soal (1) dipilih. Terdapat tombol ubah untuk memperbarui soal, tombol hapus untuk menghapus soal. Link From Screen ID:
Layar Tampil Soal (1)
Link to Screen ID:
1. Layar Tampil Soal (1) 2. Layar Perbarui Soal 3. Layar Tambah Soal 4. Layar Ubah Sandi Color Scheme: Text Attributes: Still Images: Audio: Video: Animation:
Spesifikasi Proses “Layar Tampil Soal (2)” Detail_Soal
Tampilkan Soal[Curr] Pilih menu
JIKA menu == “Tampil Soal” MAKA
TAMPILKAN Tampil_Soal
AKHIR JIKA
JIKA menu == “Tambah Soal” MAKA
TAMPILKAN Tambah_Soal
JIKA menu == “Ubah Sandi” MAKA
TAMPILKAN Ubah_Sandi
AKHIR JIKA
JIKA menu == “Hapus”
Hapus Soal dari database
TAMPILKAN Menu_Awal
AKHIR JIKA
JIKA menu == “Ubah”
TAMPILKAN Ubah_Soal
AKHIR JIKA
AKHIR Pilih
AKHIR Detail_Soal
Tabel 3.39 Layar Perbarui Soal Multimedia Storyboard
Project: Perangkat Ajar Penerapan Gaya Date: 16 Desember 2010 Screen: 5 of 7 Screen ID: Layar Perbarui Soal
Screen Description:
Pada layar ini terdapat form untuk memperbarui soal dan tombol submit untuk mengubah soal yang otomatis akan berubah pada database.
Link From Screen ID: Layar Tampil Soal
Link to Screen ID:
1. Layar Tampil Soal (1) 2. Layar Perbarui Soal 3. Layar Tambah Soal
4. Layar Ubah Sandi Color Scheme: Text Attributes: Still Images: Audio: Video: Animation:
Spesifikasi Proses “Layar Perbarui Soal” Ubah_Soal
Pilih menu
JIKA menu == “Tampil Soal” MAKA
TAMPILKAN Tampil_Soal
AKHIR JIKA
JIKA menu == “Tambah Soal” MAKA
TAMPILKAN Tambah_Soal
AKHIR JIKA
JIKA menu == “Ubah Sandi” MAKA
TAMPILKAN Ubah_Sandi
AKHIR JIKA
JIKA menu == “Submit”
JIKA Soal == Jawaban == alternative pilihan 1 == alternative pilihan 2 == alternative pilihan 3 == alternative pilihan 4 == alternative pilihan 5 == “” MAKA
Tampilkan pesan error
LAINNYA
Ubah Soal pada database
TAMPILKAN Menu_Awal
AKHIR JIKA
AKHIR JIKA
AKHIR Pilih
AKHIR Ubah_Soal
Tabel 3.40 Layar Tambah Soal Multimedia Storyboard
Project: Perangkat Ajar Penerapan Gaya Date: 16 Desember 2010 Screen: 6 of 7 Screen ID: Layar Tambah Soal
Screen Description:
Pada layar ini terdapat form untuk menambahkan soal dan tombol submit untuk menambahkan soal yang akan otomatis ditambahkan ke database.
Link From Screen ID: Layar Menu Admin
Link to Screen ID:
1. Layar Tampil Soal (1) 2. Layar Perbarui Soal 3. Layar Tambah Soal 4. Layar Ubah Sandi Color Scheme: Text Attributes: Still Images: Audio: Video: Animation:
Spesifikasi Proses “Layar Tambah Soal” Tambah_Soal
Pilih menu
JIKA menu == “Tampil Soal” MAKA
TAMPILKAN Tampil_Soal
AKHIR JIKA
JIKA menu == “Tambah Soal” MAKA
TAMPILKAN Tambah_Soal
AKHIR JIKA
TAMPILKAN Ubah_Sandi
AKHIR JIKA
JIKA menu == “Submit”
JIKA Soal == Jawaban == alternative pilihan 1 == alternative pilihan 2 == alternative pilihan 3 == alternative pilihan 4 == alternative pilihan 5 == “” MAKA
Tampilkan pesan error
LAINNYA
Tambahkan Soal pada database
TAMPILKAN Menu_Awal
AKHIR JIKA
AKHIR JIKA
AKHIR Pilih
AKHIR Tambah_Soal
Tabel 3.41 Layar Ubah Sandi Multimedia Storyboard
Project: Perangkat Ajar Penerapan Gaya Date: 16 Desember 2010 Screen: 7 of 7 Screen ID: Layar Ubah Sandi
Screen Description:
Pada layar ini terdapat form untuk mengubah sandi yang sebelumnya telah ditetapkan.
Link From Screen ID: Layar Menu Admin
Link to Screen ID:
2. Layar Perbarui Soal 3. Layar Tambah Soal 4. Layar Ubah Sandi Color Scheme: Text Attributes: Still Images: Audio: Video: Animation:
Spesifikasi Proses “Layar Ubah Sandi” Ubah_Sandi
Pilih menu
JIKA menu == “Tampil Soal” MAKA
TAMPILKAN Tampil_Soal
AKHIR JIKA
JIKA menu == “Tambah Soal” MAKA
TAMPILKAN Tambah_Soal
AKHIR JIKA
JIKA menu == “Ubah Sandi” MAKA
TAMPILKAN Ubah_Sandi
AKHIR JIKA
JIKA menu == “Ubah”
JIKA Sandi_Lama != DB_Sandi || Sandi_Lama == Sandi_Baru == “” || Sandi_Baru != Sandi_Konfirmasi || panjang_Sandi_Baru != 6 || Sandi_Baru != [0-9] MAKA
Tampilkan pesan error
LAINNYA
Ubah Sandi = Sandi_Baru
TAMPILKAN Menu_Awal
AKHIR JIKA
AKHIR JIKA
AKHIR Pilih AKHIR Ubah_Sandi