Keterangan: Soal [ ] : Variabel untuk menyatakan soal
Pilihan : Variabel untuk menyatakan pilihan jawaban pengguna Nilai : Variabel untuk menyatakan skor yang diperoleh pengguna
Jumlah : Variabel yang menyatakan banyak soal yang tersedia i
: Variabel soal yang ke-n
Pada prosedur random soal akan didefinisikan pada Gambar 3.4.
Start
Jumlah
Randomize; Acak = Random jumlah + 1
Soal [ Acak] = Soal [ i ] ?
End tidak
ya
Gambar 3.4 Flowchart Random soal
Keterangan: Jumlah : Variabel untuk menyatakan banyak soal yang tersedia.
Acak : Variabel untuk menyatakan soal yang dipilih. i
: Soal Ke-n
3.3 Perancangan Papan Cerita Storyboard Aplikasi
Perancangan storyboard bertujuan untuk membuat skenario dari suatu aplikasi yang dibuat. Storyboard menampilkan rancangan tampilan beserta penjelasan isi dari
Universitas Sumatera Utara
tampilan tersebut. Storyboard menjelaskan secara rinci isi dari setiap tampilan sehingga pembaca mengetahui alur cerita dari aplikasi tersebut.
Tampilan aplikasi Pembelajaran Berbantuan Komputer untuk bahan ajar pengantar teknologi informasi dirancang dengan menggunakan sebuah tampilan utama
yang terdiri atas lima menu yakni Loading,menu utama, menu materi, menu latihan menu credit dan menu keluar ending.
3.3.1 Pendefenisian Fungsi Menu Aplikasi
Penjabaran tentang fungsi menu dan navigasi serta proses yang berlangsung di dalam aplikasi dapat dijelaskan sebagai berikut:
Tabel 3.2 Stroryboard No
Aktifitas adegan Nama
Layar AudioVideo
Navigasi
1. Loading bar, teks dan gambar
backgorund Loading
• Musik latar
2. Gambar latar dan Teks
Tombol Materi ke-1 Tombol Materi ke-2
Tombol Materi ke-3 Tombol Latihan
Tombol Credit Tombol Keluar
Menu Utama
• Musik latar
• Narasi
pengantar aplikasi
Tombol Materi ke-1 : ke layar materi unit sistem
Tombol Materi ke-2 : ke layar materi penyimpanan data
Tombol Materi ke-3 : ke layar materi jaringan
Tombol Latihan : ke layar latihan soal Tombol Credit : ke layar credit
Tombol Keluar : keluar dari aplikasi
3. Teks dan gambar
Tombol Menu Utama Tombol Pembahasan
Tombol Keluar Menu Materi 1
Unit Sistem
• Musik latar
Tombol Menu Utama : ke layar Menu utama
Tombol Pembahasan : ke layer pembahasan
Tombol Keluar : keluar dari aplikasi
4. Teks, gambar dan animasi
Tombol Menu Utama Tombol Checkpoint
Tombol Nextpage Tombol Backpage
Tombol Playmovie Tombol Keluar
Menu Materi 2 Penyimpanan
Data
• Musik latar
• Narasi
pembahasan materi garis
besar pada pembahasan
penyimpanan data
• Video
Tombol Menu Utama : ke layar Menu utama
Tombol Checkpoint : ke layar checkpoint tiap pembahasan
Tombol Nextpage : ke layar pembahasan sebelumnya
Tombol Backpage : ke layar latihan soal Tombol Playmovie : untuk memainkan
animasi Tombol Keluar : keluar dari aplikasi
Universitas Sumatera Utara
Tabel 3.3 Stroryboard Lanjutan No
Aktifitas adegan Nama
Layar AudioVideo
Navigasi
5. Teks dan gambar
Tombol Menu Utama Tombol Pembahasan
Tombol Keluar Menu Materi 3
Jaringan
• Musik latar
Tombol Menu Utama : ke layar Menu utama
Tombol Pembahasan : ke layer pembahasan
Tombol Keluar : keluar dari aplikasi
6. Teks, gambar dan animasi
Tombol Menu Utama Tombol Checkpoint
Tombol Nextpage Tombol Backpage
Tombol Playmovie Tombol Keluar
Menu Pembhasan
tiap materi
• Musik latar
• Narasi
pembahasan materi garis
besar pada pembahasan
Tombol Menu Utama : ke layar Menu utama
Tombol Checkpoint : ke layar checkpoint tiap pembahasan
Tombol Nextpage : ke layar pembahasan sebelumnya
Tombol Backpage : ke layar latihan soal Tombol Playmovie : untuk memainkan
animasi Tombol Keluar : keluar dari aplikasi
7. Teks dan gambar
Tombol Menu Utama Tombol Pembahasan
Tombol Keluar Menu Latihan
• Musik latar
Tombol Menu Utama : ke layar Menu utama
Tombol Pembahasan : ke layer pembahasan
Tombol Keluar : keluar dari aplikasi
8. Teks
Tombol Menu Utama Tombol Checpoint
Tombol Pilihan Jawaban Tombol Next
Tombol Keluar Sub menu
latihan ke-1
• Musik latar
Tombol Menu Utama : ke layar Menu utama
Tombol Checkpoint : ke layar checkpoint tiap pembahasan
Tombol Pilihan Jawaban : tombol untuk memilih jawaban
Tombol Next : lanjut ke soal berikutnya Tombol Keluar : keluar dari aplikasi
9. Teks dan Gambar
Tombol Menu Utama Tombol Checkpoint
Tombol Drag and Drop Tombol Keluar
Sub menu latihan ke-2
• Musik latar
Tombol Menu Utama : ke layar Menu utama
Tombol Checkpoint : ke layar checkpoint tiap pembahasan
Tombol Drag and Drop ; Tombol Tulisan yang harus dicocokkan dengan gambar
Tombol Keluar : keluar dari aplikasi
10. Teks dan Info penulis
Tombol Menu Utama Tombol Keluar
Menu Credit
• Musik latar
Tombol Menu Utama : ke layar Menu utama
Tombol Keluar : keluar dari aplikasi
11. Animasi tulisan bergerak dan
gambar latar Menu Keluar
• Musik latar
Universitas Sumatera Utara
3.3.2 Tampilan Loading
Tampilan loading dirancang sedemikian rupa agar para pengguna dapat bersiap-siap terlebih dahulu, sebelum memulai pembelajaran. Karena di tampilan ini hanya
berisikan bar loading yg bergerak selayaknya sedang mempersiapkan file-file yang akan disajikan.
Gambar 3.5 Rancangan tampilan pada loading
Keterangan: 1.
Loading bar, ini adalah sebuah animasi loading yang dimana animasi ini selesai bergerak hingga file-file telah siap untuk di persiapkan.
2. Background, pada bagian ini adalah background latar di bagian loading file.
3. Judul aplikasi, ini adalah tulisan judul topik yang akan di bahas dalam aplikasi
ini. 1
2 3
Universitas Sumatera Utara
3.3.3 Tampilan Menu Utama
Tampilan Menu utama dirancang sedemikian rupa untuk mempermudah pengguna dalam berinteraksi dengan aplikasi. Tampilan menu utama dirancang dengan fitur-
fitur yang menarik dan memudahkan penguna dalam pengoperasiannya user friendly. Rancangan untuk tampilan utama aplikasi dapat dilihat pada Gambar 3.6.
Gambar 3.6 Rancangan tampilan pada Menu Utama
Keterangan: 1.
Tombol materi ke-1, ini adalah tombol materi pertama yang ada dalam topik yang ada didalam aplikasi ini.
2. Tombol materi ke-2, ini adalah tombol materi kedua yang ada dalam topik
yang ada didalam aplikasi ini. 3.
Tombol materi ke-3, ini adalah tombol materi kedua yang ada dalam topik yang ada didalam aplikasi ini.
4. Judul aplikasi, ini adalah tulisan judul topik yang akan di bahas dalam aplikasi
ini. 6
2 1
3
5 4
Universitas Sumatera Utara
7 3
5 6
1
4 2
5. Tombol latihan, tombol ini berisikan latihan, dimana pengguna dapat menguji
kemampuan atau daya ingat dia selama dia belajar aplikasi ini. 6.
Tombol keluar, tombol ini berfungsi untuk keluar dari aplikasi.
3.3.4 Tampilan Menu Materi
Tampilan menu materi dirancangagak berbeda dengan menu utama, karena pada menu ini pengguna langsung memasuki teori-teori yang telah di pilihnya. Pada tampilan
menu materi.Rancangan untuk tampilan menu utama dapat dilihat pada Gambar 3.7.
Gambar 3.7 Rancangan Tampilan pada Menu Materi
Keterangan: 1.
Judul materi, ini adalah judul materi yang sedang digunakan atau di lihat oleh pengguna.
2. Tombol checkpoint, ini adalah tombol checkpoint dimana berfungsi untuk
kembali ke sub menu sebelumnya. 3.
Isi materi, ini adalah penjelasan tentang materi-materi yang sedang di tampilkan atau materi yang dipilih oleh pengguna.
Universitas Sumatera Utara
4. Tombol menu utama, tombol ini berfungsi untuk kembali ke menu utama,
dimana pengguna dapat kembali kapan saja ke menu utama. 5.
Tombol backpage, tombol ini berfungsi untuk kembali ke halaman sebelumnya.
6. Tombol nextpage, tombol ini berfungsi untuk lanjut ke halaman berikutnya.
7. Tombil keluar, tombol ini berfungsi untuk keluar dari aplikasi.
3.3.5 Tampilan Menu Latihan
Sama halnya dengan tampilan menu materi, tampilan menu latihan juga dirancang tidak jauh berbeda dengan tampilan menu materi. Pada tampilan menu latihan.
Rancangan untuk tampilan menu home dapat dilihat pada Gambar 3.8.
Gambar 3.8 Rancangan Tampilan Menu Latihan 1
Keterangan: 1.
Judul materi, ini adalah judul materi yang sedang digunakan atau di lihat oleh pengguna. Tetapi pada menu ini setiap materi di namakan sebagai latihan,
karena pada bagian ini adalah bagian latihan. 2.
Tombol checkpoint, ini adalah tombol checkpoint dimana berfungsi untuk kembali ke menu latihan sebelumnya.
3
5 1
4 2
Universitas Sumatera Utara
3. Isi latihan, pada bagian ini siswa harus menjawab soal yang diberikan oleh
sistem untuk lanjut ke halaman berikut. 4.
Tombol menu utama, tombol ini berfungsi untuk kembali ke menu utama, dimana pengguna dapat kembali kapan saja ke menu utama.
5. Tombil keluar, tombol ini berfungsi untuk keluar dari aplikasi.
Gambar 3.9 Rancangan Tampilan Menu Latihan 2
Keterangan:. 1.
Judul materi, ini adalah judul materi yang sedang digunakan atau di lihat oleh pengguna. Tetapi pada menu ini setiap materi di namakan sebagai latihan,
karena pada bagian ini adalah bagian latihan. 2.
Tombol checkpoint, ini adalah tombol checkpoint dimana berfungsi untuk kembali ke menu latihan sebelumnya.
3. Isi latihan, pada bagian ini siswa harus menjawab soal yang diberikan oleh
sistem untuk lanjut ke halaman berikut. 4.
Input Nama, pada bagian ini pengguna memasukkan nama. 5.
Tombol OK. ini adalah tombol persetujuan, jika pengguna sudah benar memasukkan input-an nama maka pengguna dapat menekan tombol untuk
mulai menjawab soal. 3
7 1
6 2
4 5
Universitas Sumatera Utara
6. Tombol menu utama, tombol ini berfungsi untuk kembali ke menu utama,
dimana pengguna dapat kembali kapan saja ke menu utama. 7.
Tombil keluar, tombol ini berfungsi untuk keluar dari aplikasi.
Gambar 3.10 Rancangan Tampilan Menu Latihan 3
Keterangan: 1.
Judul materi, ini adalah judul materi yang sedang digunakan atau di lihat oleh pengguna. Tetapi pada menu ini setiap materi di namakan sebagai latihan,
karena pada bagian ini adalah bagian latihan. 2.
Tombol checkpoint, ini adalah tombol checkpoint dimana berfungsi untuk kembali ke menu latihan sebelumnya.
3. Counter Soal, ini adalah penunjuk bahwa ini adalah soal yang keberapa.
4. Tulisan Soal, ini adalah tampilan soal yang akan di jawab oleh pengguna.
5. Tombol Jawaban, ini adalah tombol jawaban yang akan di pilih oleh
pengguna. 6.
Pilihan Jawaban, ini adalah tampilan jawaban yang di telah di pilih oleh pengguna sebelum melanjutkan ke pertanyaan berikutnya.
7. Tombol Next, Tombol ini berfungsi untuk meyakinkkan pengguna dengan
jawaban yang telah di jawabnya. 8.
Tombol menu utama, tombol ini berfungsi untuk kembali ke menu utama, dimana pengguna dapat kembali kapan saja ke menu utama.
8 1
8 2
4 3
7 6
5
Universitas Sumatera Utara
9. Tombil keluar, tombol ini berfungsi untuk keluar dari aplikasi.
Gambar 3.11 Rancangan Tampilan Menu Latihan 4
Keterangan: 1.
Judul materi, ini adalah judul materi yang sedang digunakan atau di lihat oleh pengguna. Tetapi pada menu ini setiap materi di namakan sebagai latihan,
karena pada bagian ini adalah bagian latihan. 2.
Tombol checkpoint, ini adalah tombol checkpoint dimana berfungsi untuk kembali ke menu latihan sebelumnya.
3. Nilai, ini adalah tampilan nilai dan nama yang didapat oleh pengguana.
4. Tombol menu utama, tombol ini berfungsi untuk kembali ke menu utama,
dimana pengguna dapat kembali kapan saja ke menu utama. 5.
Tombil keluar, tombol ini berfungsi untuk keluar dari aplikasi. 5
1
4 2
3
Universitas Sumatera Utara
Gambar 3.12 Rancangan Tampilan Menu Latihan 5
Keterangan: 1.
Judul materi, ini adalah judul materi yang sedang digunakan atau di lihat oleh pengguna. Tetapi pada menu ini setiap materi di namakan sebagai latihan,
karena pada bagian ini adalah bagian latihan. 2.
Tombol checkpoint, ini adalah tombol checkpoint dimana berfungsi untuk kembali ke menu latihan sebelumnya.
3. Soal Drag and Drop, ini adalah tampilan dimana pada soal ini terdapat bacaan
yang harus di drag dari kolom sebelahnya. 4.
Jawaban Drag and Drop , ini adalah jawaban yang harus di drag ke bacaan yang da disebelahnya atau mencocokkan gambar dengan tulisan.
5. Tombol menu utama, tombol ini berfungsi untuk kembali ke menu utama,
dimana pengguna dapat kembali kapan saja ke menu utama. 6.
Tombil keluar, tombol ini berfungsi untuk keluar dari aplikasi.
3.3.6 Tampilan Menu Credit
Pada tampilan menu credit dirancang agar para pengguna mengetahui sedikit profile pembuat aplikasi dan orang-orang yang terlibat dalam aplikasi ini serta sumber-
3
4
6 1
5 2
Universitas Sumatera Utara
sumber yang ada didalam aplikasi ini.tampilan menu credit dapat dilihat pada Gambar 3.13.
Gambar 3.13 Rancangan Tampilan Menu Credit
Keterangan Gambar 1.
Info, pada bagian terdapat info-info penulis dan orang yang terlibat aplikasi ini serta sumber data yang di dapat dalam aplikasi ini.
2. Tombol menu utama, tombol ini berfungsi untuk kembali ke menu utama,
dimana pengguna dapat kembali kapan saja ke menu utama. 3.
Tombil keluar, tombol ini berfungsi untuk keluar dari aplikasi.
3.3.7 Tampilan Menu Keluar
Pada tampilan menu keluar dirancang agar para pengguna mengetahui bahwa pengguna telah selesai menggunakan aplikasi ini. Tampilan yang ada pada menu
keluar ini adalah sebuah ending yang hanya berisikan kata-kata perancang yang berterima kasih kepada pengguna. Rancangan tampilan untuk menu keluar dapat
dilihat pada Gambar 3.9. 1
3 2
Universitas Sumatera Utara
Gambar 3.13RancanganTampilan Menu Materi
Gambar 3.14 Rancangan tampilan pada Menu Keluar
Keterangan: 1.
Background, pada bagian ini adalah background latar di bagian ending. 2.
Tulisan, ini adalah tulisan yang di berikan oleh pembuat aplikasi untuk pengguna aplikasi.
1
2
Universitas Sumatera Utara
BAB 4
IMPLEMENTASI DAN PENGUJIAN
4.1 Implementasi
