4. 2 Periksa
Jawaban
USER
4. 1 Baca Nama
Pilihan Menu
4. 3 Hitung Nilai
4 Tekan Tombol
Latihan
Nama Hasil
Menu Latihan
Data Jawaban
Jawaban
Nilai Nama
Jawaban Soal
Gambar 3.7 DAD Level 2 untuk Latihan
3.3 FlowChart
FlowChart Bagan Alir Program adalah suatu bagan yang menggambarkan arus logika dari data yang akan diproses dalam suatu program dari awal sampai akhir.
FlowChart berguna bagi pemrogram programmer aplikasi untuk mempersiapkan program yang rumit. Simbol-simbol FlowChart dapat dilihat pada Tabel 3.1
Universitas Sumatera Utara
Tabel 3.1 Simbol-simbol FlowChart Simbol
Nama Fungsi
Terminator Terminal
Menunjukkan awal dan akhir program
Preparation Persiapan
Memberikan nilai awal pada suatu variabel atau counter
Garis Alir Menunjukkan arah aliran
program Proses
Proses perhiyungan dan proses pengolahan data
Keputusan Operasi perbandingan logika
InputOuput Data
Proses input output data, parameter dan informasi
Proses Terdefinisi
Proses yang detilnya dijelaskan terpisah, misalnya dalam bentuk
subroutine.
Penghubung Penghubung bagian-bagian
FlowChart yang berada pada satu halaman.
Penghubung Halaman
Penghubung bagian-bagian FlowChart yang berada pada
halaman berbeda. Struktur Case
Memproses sebuah blok statemen pada salah satu kondisi case yang
terpenuhi.
Universitas Sumatera Utara
Pada Gambar 3.8 ditampilkan FlowChart untuk Aplikasi Pembelajaran Berbantuan Komputer Barisan dan Deret Aritmatika.
Mulai
Menu Home
Profil Materi
Latihan Keluar
Case
Home Profil
Materi Exit
Konfirmasi Exit
Selesai Ya
Tidak
Latihan
Barisan Suku Tengah
Deret Sisipan
Case
Data 1
Data 2
Data 3
Data 4
Data 5
Data 6
Data 7
Data 8
Gambar 3.8 FlowChart Aplikasi Pembelajaran Barisan dan Deret Aritmatika
Universitas Sumatera Utara
Pada prosedur latihan akan didefinisikan pada Gambar 3.9.
Mulai
Read Nama
Soal = 1 Benar, Salah, Nilai
Hasil = 0
Print Soal
Read Jawaban
Jawaban Benar
Benar = Benar + 1 Salah = Salah + 1
Soal = Soal + 1 Tidak
Ya
Soal 10
Nilai = Benar 10 - Salah 5
Print Nama, Nilai
Selesai Ya
Tidak
Gambar 3.9 FlowChart pada Menu Latihan
Universitas Sumatera Utara
3.4 Perancangan Tampilan
Tampilan aplikasi Pembelajaran Berbantuan Komputer Barisan dan Deret Aritmatika dirancang dengan menggunakan sebuah tampilan utama yang terdiri atas lima menu
yakni menu home, menu profil, menu materi, menu latihan dan menu keluar.
3.4.1 Tampilan utama
Tampilan utama dirancang sedemikian rupa untuk mempermudah user dalam berinteraksi dengan aplikasi. Tampilan utama dirancang dengan fitur-fitur yang
menarik dan memudahkan penguna dalam pengoperasiannya user friendly. Tampilan utama dibagi dalam empat bagian utama yakni bagian atas yang merupakan
judul aplikasi, bagian tengah sebelah kiri yang berisikan tombol-tombol navigasi menu, bagian tengah sebelah kanan dibuat kosong untuk memunculkan isi dari setiap
menu yang ada di sebelah kirinya, dan bagian bawah menampilkan teks S1 Ilmu Komputer USU. Rancangan untuk tampilan utama aplikasi dapat dilihat pada Gambar
3.10.
1
5 2
2 2
2 3
4
K e t e ra nga n 1 . J udul Aplik a si
2 . T om bol I si M e nu 3 . T om bol K e lua r
4 . Ba gia n I si M e nu 5 . S1 I lm u K om put e r
U SU
Gambar 3.10 Rancangan Tampilan Utama Aplikasi
Universitas Sumatera Utara
3.4.2 Menu Home
Tampilan menu home dirancang tidak jauh berbeda dengan tampilan utama. Pada tampilan menu home, bagian kosong yang berada pada bagian tengan kanan
dimuatkan isi yang berhubungan dengan aplikasi. Pada bagian bawah kanan isi diletakkan tombol navigasi untuk kembali ke tampilan utama. Rancangan untuk
tampilan menu home dapat dilihat pada Gambar 3.11.
1
8 2
3
K e t e ra nga n 1 . J udul Aplik a si
2 . T om bol M e nu H om e 3 . T om bol K e lua r
4 . Ba gia n I si M e nu H om e 5 . Subjudul M e nu H om e
6 . T om bol Sc roll k e At a s da n k e Ba w a h
7 . T om bol K e m ba li 8 . S1 I lm u K om put e r
U SU
4 5
6 6
7
Gambar 3.11 Rancangan Tampilan Menu Home
3.4.3 Menu Profil
Sama halnya dengan tampilan menu home, tampilan menu profil juga dirancang tidak jauh berbeda dengan tampilan utama dan menu home. Pada tampilan menu profil,
bagian kosong yang berada pada bagian tengan kanan juga telah dimuatkan dengan isi yang berhubungan dengan profil penulis. Rancangan untuk tampilan menu home
dapat dilihat pada Gambar 3.12.
Universitas Sumatera Utara
1
7 2
3
K e t e ra nga n 1 . J udul Aplik a si
2 . T om bol M e nu Profil 3 . T om bol K e lua r
4 . Ba gia n I si M e nu Profil 5 . Subjudul M e nu Profil
6 . T om bol K e m ba li 7 . S1 I lm u K om put e r
U SU
4 5
6
Gambar 3.12 Rancangan Tampilan Menu Profil
3.4.4 Menu Materi
Tampilan menu materi juga dirancang tidak jauh berbeda dengan tampilan utama dan menu home maupun menu profil. Pada menu materi bagian isi diletakkan tombol-
tombol sebagai navigasi ke submenu materi. Rancangan untuk tampilan menu materi dapat dilihat pada Gambar 3.13.
1
7 2
3
K e t e ra nga n 1 . J udul Aplik a si
2 . T om bol M e nu M a t e ri 3 . T om bol K e lua r
4 . Ba gia n T om bol N a viga si Subm e nu
M a t e ri 5 . Subjudul M e nu M a t e ri
6 . T om bol K e m ba li 7 . S1 I lm u K om put e r
U SU
5
6 4
4 4
4
Gambar 3.13 Rancangan Tampilan Menu Materi
Universitas Sumatera Utara
Setelah dipilih pada tombol navigasi submenu materi, tampilan yang dirancang lebih sederhana untuk membuat pengguna lebih nyaman dan dapat lebih
berkonsentrasi untuk mempelajari materi yang ditampilakan. Pada bagian kiri dan kanan materi diletakkan tombol navigasi untuk melanjutkan isi materi atau mengulang
isi materi sebelumnya. Rancangan untuk tampilan penyampaian materi dapat dilihat pada Gambar 3.14.
1
3 4
K e t e ra nga n 1 . J udul M a t e ri
2 . I si M a t e ri da n Cont oh Soa l
3 . T om bol N a viga si k e M a t e ri Se be lum nya
4 . T om bol N a viga si k e M a t e ri Be rik unya
5 . T om bol K e m ba li
2
5
Gambar 3.14 Rancangan Tampilan Penyampaian Materi
3.4.5 Menu Latihan
Tampilan menu latihan dirancang tidak jauh berbeda dengan tampilan-tampilan yang lain. Tampilan menu latihan dibedakan menjadi lima bagian yakni bagian pertama
yang berisikan pertanyaan kepada pengguna tentang keyakinan pengguna untuk memulai latihan, bagian kedua yang meminta pengguna untuk mengisikan nama
sebelum memulai latihan, bagian ketiga yang beisikan soal-soal latihan, bagian keempat yang menampilkan nilai hasil dari latihan, dan bagian terakhir yang
menampilkan grafik dari nilai yang telah didapatkan oleh pengguna. Rancangan tampilan untuk ke lima bagian menu latihan dapat dilihat pada Gambar 3.15 – 3.19.
Universitas Sumatera Utara
1
9 2
3
K e t e ra nga n 1 . J udul Aplik a si
2 . T om bol M e nu La t iha n 3 . T om bol K e lua r
4 . Subjudul M e nu La t iha n
5 . I si Pe rt a nya a a n K e sa nggupa n
6 . T om bol Re spon Pe ngguna “Y a ”
7 . T om bol Re spon Pe ngguna “T ida k ”
8 . T om bol K e m ba li 9 . S1 I lm u K om put e r
U SU
4
8 5
6 7
Gambar 3.15 Rancangan Tampilan Pertanyaan untuk Memulai Latihan
1
3
K e t e ra nga n 1 . Subjudul La t iha n
2 . K olom unt uk I nput N a m a Pe ngguna
Se be lum
M e m ula i La t iha n
3 . T om bol N a viga si k e Soa l La t iha n Pe rt a m a
2
Gambar 3.16 Rancangan Tampilan Input Nama untuk Memulai Latihan
Universitas Sumatera Utara
1
4
K e t e ra nga n 1 . Subjudul La t iha n
2 . I si Pe rt a nya a n 3 . Re spon J a w a ba n
Piliha n Be rga nda da ri Pe ngguna
4 . T om bol N a viga si k e Soa l La t iha n
Se la njut nya
2
3 3
3 3
3
Gambar 3.17 Rancangan Tampilan Soal Latihan
1
3
K e t e ra nga n 1 . Subjudul La t iha n
2 . K olom unt uk M e na m pilk a n H a sil
La t iha n 3 . T om bol N a viga si k e
Gra fik N ila i
2
Gambar 3.18 Rancangan Tampilan Hasil Latihan
Universitas Sumatera Utara
1
3
K e t e ra nga n 1 . Subjudul Gra fik N ila i
2 . Gra fik N ila i 3 . K e t e ra nga n da ri
Gra fik N ila i 4 . T om bol K e m ba li
4 2
Gambar 3.19 Rancangan Tampilan Grafik Nilai 3.4.6 Menu Keluar
Tampilan menu keluar dirancang tidak jauh berbeda dengan tampilan menu latihan. Tampilan menu keluar juga berisikan pertanyaan kepada pengguna tentang keyakinan
pengguna untuk keluar dari Aplikasi pembelajaran Barisan dan Deret Aritmatika. Rancangan tampilan untuk menu keluar dapat dilihat pada Gambar 3.20.
1
8 2
K e t e ra nga n 1 . J udul Aplik a si
2 . T om bol K e lua r 3 . Subjudul M e nu
K e lua r 4 . I si Pe rt a nya a a n
K e sa nggupa n 5 . T om bol Re spon
Pe ngguna “Y a ” 6 . T om bol Re spon
Pe ngguna “T ida k ” 7 . T om bol K e m ba li
8 . S1 I lm u K om put e r U SU
3
7 4
5 6
Gambar 3.20 Rancangan Tampilan Menu Keluar
Universitas Sumatera Utara
3.5 Storyboard
Kategori