4.2.3.1. Data Flow Diagram
Data Flow Diagram merupakan teknik untuk menggambarkan proses –
proses yang terjadi dalm suatu sistem. Dan terdiri dari beberapa buah proses. Pada DFD level 1 terdapat lima proses yaitu : Input nama pemain, mulai
game tebak gambar, mulai game tebak nama, mulai game ketik kuis, cek nilaiscore. Penjelasan terdapat pada gambar 4.3 seperti gambar dibawah ini.
Siswa 1
Input Nama Pemain
5 Cek Nilai
Score 4
Mulai Game Ketik Kuis
3 Mulai Game
Tebak Nama 2
Mulai Game Tebak
Gambar
T. Score Input nama pemain
Form input nama pemain
Form game tebak gambar
Form game tebak nama
Form game ketik kuis Data nilai score
Data nilaiscore Data score
Data score
Gambar 4.3. Data Flow Diagram Game
4.2.3.2 Diagram Navigasi Aplikasi
Diagam navigasi menyajikan daftar isi dengan hierarki yang masing masing heading terhubung ke sebuah halaman.
Opening
Menu Animals
Fruits Alfabet
Input nama
Find name Exit
end y
t start
about
Game
Find picture Help
Number Typing quis
Color
Vegetable
Gambar 4.4. Diagram Navigasi Aplikasi education game
Gambar 4.4. menggambarkan struktur pemetaan dari aplikasi education game , dimana main menu menopang keseluruhan navigasi file-file yang
terkandung di dalam aplikasi education game ini.
4.2.3.3 Flowchart dan Navigasi Aplikasi
Flowchart adalah penggambaran secara grafik dari langkah-langkah dan urutan -urutan prosedur dari suatu program. Flowchart menolong analis dan
programmer untuk memecahkan masalah kedalam segmen-segmen yang lebih kecil dan menolong dalam menganalisis alternatif-alternatif lain dalam
pengoperasian. Untuk gambaran dari keseluruha flowchart dari game tersebut dapat
dilihat pada gambar dibawah ini 1. Flowchart menu utama
mulai Menu masuk
Menu utama Menu tentang
Tampil biodata
Menu materi Sub. Menu
warna Sub.menu
buah Menam
pilkan huruf
beserta gambar
Menam pilkan
nama beserta
gambar Apakah yakin
ingin keluar
Menu permainan
lanjut
Mulai permainan Tampilka
n nama
Temukan gambar
lanjut Klik
gambar hewan
abjad Temukan
nama Lanjut
keberikutnya tdk dapat score
lanjut Klik
gambar hewan
abjad Lanjut
keberikutnya tdk dapat score
Musakan nama
lanjut Ketikan
nama dari gambar
disamping Lanjut
keberikutnya tdk dapat score
Jumlah score
keluar y
y
y y
salah salah
salah y
Bener
benar benar
y t
t t
y Menu score
Tampil Score
t
y Sub menu
hewan
t y
Sub menu alfabet
t
t
t t
Sub menu sayur
Sub menu angka
Menam pilkan
huruf beserta
gambar Menam
pilkan nama
beserta gambar
Menam pilkan
nama beserta
gambar Menam
pilkan nama
beserta gambar
Gambar 4.5. Flowchart Menu Utama.
2. Flowchart navigasi main menu Flowchart navigasi di bawah ini menggambarkan bagaimana program
dapat menampilkan sub menu dengan membuka salah satu menu yang terdapat pada halaman main menu.
start
Movie menu animal
Movie menu color
Movie menu fruit
Movie menu alfabet
Go to movie menu animal
Go to movie menu color
Go to movie menu fruit
Go to movie menu alfabet
Click button Button click
menu animal Button click
menu color Button click
menu fruit Button click
menu alfabet
Button click menu game
end y
t y
y y
t t
t
Button click menu help
exit y
t t
Go to movie menu game
Go to movie menu help
Movie menu game
Movie menu help
y
y Buttons click
menu about t
Go to movie menu about
Movie menu about
y Button click
menu number Button click
menu vegetable
t
t Movie menu
vegetable Movie menu
number Go to movie menu
number Go to movie menu
vegetable
Gambar 4.6. Flowchart navigasi Menu Utama.
Gambar 4.6. di atas menggambarkan bagaimana kondisi ketika button dari menu utama dipilih kemudian dieksekusi dan program akan mengakses ke
halaman yang akan dipilih. 3. . Flowchart navigasi menu hewan
Flowchart navigasi di bawah ini menggambarkan bagaimana program dapat menampilkan pembelajaran tentang nama hewan dengan membuka salah
satu sub menu yang terdapat di menu vocabulary
Start Click
button Button click
animal 1
Button click animal 8
Button click animal 6
Button click animal 7
Button click animal 5
Button click animal 4
Button click animal 3
Button click animal 2
Button click animal 13
Button click animal 9
Go to movie animal 8
Movie animal 11
Button click animal 11
Button click animal 16
Button click animal 15
Button click animal 14
Go to movie animal 11
Movie animal 8
y Go to movie
animal 4
Go to movie animal 15
Go to movie animal 16
Go to movie animal 17
Go to movie animal 1
Go to movie animal 2
Go to movie animal 3
Go to movie animal 14
Go to movie animal 5
Go to movie animal 6
Go to movie animal 13
Go to movie animal 12
Go to movie animal 7
Movie animal 4
Movie animal 14
Movie animal 3
Movie animal 12
Movie animal 5
Movie animal 6
Movie animal 7
Movie animal 17
Movie animal 16
Movie animal 15
Movie animal 3
Movie animal 2
Movie animal 1
End Movie menu
utama
Button click animal 10
Button click animal 12
Go to movie animal 9
Go to movie animal 10
Movie animal 9
Movie animal 10
Button click animal 17
Button click animal 18
Button click animal 19
Go to movie animal 19
Go to movie animal 18
Movie animal 19
Movie animal 18
Gambar 4.7. Flowchart Navigasi Menu Animal
4. . Flowchart navigasi menu warna Flowchart navigasi di bawah ini menggambarkan bagaimana program
dapat menampilkan pembelajaran tentang warna dengan membuka salah satu sub menu yang terdapat di menu vocabulary
Start Click
button Button click
color 1
Button click color 8
Button click color 6
Button click color 7
Button click color 5
Button click color 4
Button click color 3
Button click color 2
Button click color 10
Button click color 9
Go to movie color 8
Movie color 9
Button click color 11
Button click color 15
Button click color 14
Button click color 13
Button click color 12
Go to movie color 9
Movie color 8
y y
Go to movie color 4
Go to movie color 13
Go to movie color 14
Go to movie color 15
Go to movie color1
Go to movie color2
Go to movie color 3
Go to movie color 12
Go to movie color 5
Go to movie color 6
Go to movie color 12
Go to color 10 Go to movie
color 7 Movie
color 4
Movie color 12
Movie color 11
Movie color 10
Movie color 5
Movie color 6
Movie color 7
Movie color 15
Movie color 14
Movie color 13
Movie color 3
Movie color2
Movie color 1
End Movie menu
utama
Gambar 4.8. Flowchart Navigasi Menu Color
5. Flowchart navigasi menu buah Flowchart navigasi di bawah ini menggambarkan bagaimana program
dapat menampilkan pembelajaran tentang nama buah dengan membuka salah satu sub menu yang terdapat di menu vocabulary
Start Click
button Button click
fruit 1
Button click fruit 8
Button click fruit 6
Button click fruit 7
Button click fruit 5
Button click fruit 4
Button click fruit 3
Button click fruit 2
Button click fruit 10
Button click fruit 9
Go to movie fruit 8
Movie fruit 9
Button click fruit 11
Button click fruit 15
Button click fruit 14
Button click fruit 13
Button click fruit 12
Go to movie fruit 9
Movie fruit 8
y y
Go to movie fruit 4
Go to movie fruit13
Go to movie fruit 14
Go to movie fruit15
Go to movie fruit1
Go to movie fruit 2
Go to movie fruit 3
Go to movie fruit12
Go to movie fruit 5
Go to movie fruit 6
Go to movie fruit12
Go to movie fruit10
Go to movie fruit 7
Movie fruit 4
Movie fruit 12
Movie fruit 11
Movie fruit 10
Movie fruit 5
Movie fruit 6
Movie fruit 7
Movie fruit 15
Movie fruit 14
Movie fruit 13
Movie fruit 3
Movie fruit 2
Movie fruit 1
End Movie menu
utama
Gambar 4.9. Flowchart Navigasi Menu Fruit
6. Flowchart navigasi menu huruf
Flowchart navigasi di bawah ini menggambarkan bagaimana program dapat menampilkan pembelajaran tentang huruf dengan membuka salah satu sub
menu yang terdapat di menu vocabulary.
Start Click
abautton Button click
alfabet A Go to movie
alfabet A Movie
alfabet A Button click
alfabet B
Button click alfabet D
Button click alfabet C
Button click alfabet E
Button click alfabet F
Button click alfabet H
Button click alfabet G
Button click alfabet K
Button click alfabet J
Button click alfabet I
Button click alfabet M
Button click alfabet L
Button click alfabet N
t t
t t
t t
t t
t t
t t
Button click alfabet O
Button click alfabet P
Button click alfabet T
Button click alfabet S
Button click alfabet R
Button click alfabet Q
Button click alfabet U
Button click alfabet V
Button click alfabet W
Button click alfabet X
Button click alfabet Y
Button click alfabet Z
Go to movie alfabet B
Go to movie alfabet C
Go to movie alfabet D
Go to movie alfabet E
Go to movie alfabet F
Go to movie alfabet G
Go to movie alfabet H
Go to movie alfabet I
Go to movie alfabet J
Go to movie alfabet K
Go to movie alfabet L
Go to movie alfabet M
Go to movie alfabet N
Go to movie alfabet O
Go to movie alfabet P
Go to movie alfabet Q
Go to movie alfabet R
Go to movie alfabet S
Go to movie alfabet T
Go to movie alfabet U
Go to movie alfabet W
Go to movie alfabet X
Go to movie alfabet Y
Go to movie alfabet Z
Movie alfabet B
Movie alfabet C
Movie alfabet D
Movie alfabet E
Movie alfabet F
Movie alfabet Z
Movie alfabet Y
Movie alfabet X
Movie alfabet W
Movie alfabet G
Movie alfabet H
Movie alfabet U
Movie alfabet T
Movie alfabet I
Movie alfabet J
Movie alfabet K
Movie alfabet S
Movie alfabet R
Movie alfabet Q
Movie alfabet L
Movie alfabet M
Movie alfabet P
Movie alfabet O
Movie alfabet N
Go to movie alfabet V
Movie alfabet V
y
y y
y y
y y
y y
y y
y y
y y
y y
y y
y y
y y
y y
y Movie
menu utama
end
Gambar 4.10. Flowchart Navigasi Menu Alfabet
7. Flowchart navigasi menu angka Flowchart navigasi di bawah ini menggambarkan bagaimana program
dapat menampilkan pembelajaran tentang angka dengan membuka salah satu sub menu yang terdapat di menu vocabulary
Click botton
Button click numeric 1
Button click numeric 2
Button click numeric 4
Button click numeric 3
Button click numeric 9
Button click numeric 10
Button click numeric 8
Button click numeric 7
Button click numeric 6
Button click numeric 5
t
t
Movie menu utama
End t
t t
t
t
t t
t t
Start
Go to movie numeric 1
Movie numeric 1
y Go to movie
numeric 2
Go to movie numeric 10
Go to movie numeric 9
Go to movie numeric 8
Go to movie numeric 7
Go to movie numeric 5
Go to movie numeric 6
Go to movie numeric 4
Go to movie numeric 3
y y
y
Movie numeric 8
Movie numeric 9
Movie numeric 10
Movie numeric 6
Movie numeric 7
Movie numeric 5
Movie numeric 4
Movie numeric 3
Movie numeric 2
y y
y
y y
y
Gambar 4.11. Flowchart Navigasi Menu Numeric
8. Flowchart navigasi menu sayuran Flowchart navigasi di bawah ini menggambarkan bagaimana program
dapat menampilkan pembelajaran tentang nama sayuran dengan membuka salah satu sub menu yang terdapat di menu vocabulary
Start Click
button Button click
vegetable 1
Button click vegetable 8
Button click vegetable 6
Button click vegetable 7
Button click vegetable 5
Button click vegetable 4
Button click vegetable 3
Button click vegetable 2
Button click vegetable 10
Button click vegetable 9
Go to movie vegetable 8
Movie vegetable
9 Button click
vegetable 11 Button click
vegetable 15
Button click vegetable 14
Button click vegetable 13
Button click vegetable 12
Go to movie vegetable 9
Movie vegetable
8 y
y Go to movie
vegetable 4 Go to movie
vegetable 13 Go to movie
vegetable 14 Go to movie
vegetable 15 Go to movie
vegetable 1
Go to movie vegetable 2
Go to movie vegetable 3
Go to movie vegetable 12
Go to movie vegetable 5
Go to movie vegetable 6
Go to movie vegetable12
Go to vegetable 10
Go to movie vegetable 7
Movie vegetable
4 Movie
vegetable 12
Movie vegetable
11 Movie
vegetable 10
Movie vegetable
5 Movie
vegetable 6
Movie vegetable
7 Movie
vegetable 15
Movie vegetable
14 Movie
vegetable 13
Movie vegetable
3 Movie
vegetable 2
Movie vegetable
1 End
Movie menu utama
Gambar 4.12. Flowchart Navigasi Menu Vegetable
9. Flowchart game tebak gambar Flowchart di bawah ini menggambarkan bagaimana game pembelajaran
tebak gambar yang berada dalam sub menu game.
Tampilan awal simpan
Data id pemain
Click gambar
Benar Soal 2
tidak Soal 1
Soal 10 Soal 9
Soal 8 Soal 7
Soal 6 Soal 5
Soal 4 Soal 3
Click gambar
Click gambar
Click gambar
Click gambar
Click gambar
Click gambar
Click gambar
Click gambar
Click gambar
Benar
Benar Benar
Benar Benar
Benar
Benar
Benar tidak
tidak
tidak
tidak
tidak
tidak
tidak
Benar tidak
Simpan score Data
Score ya
Temukan gambar Score = 10
ya
Score = 20
Score = 30
Score = 40
Score = 50
Score = 60
Score = 70
Score = 80
Score = 90 ya
ya
ya
ya
ya
ya
ya
ya
Score=100 Masukan
nama ya
Gambar 4.13 Flowchart Game Tebak Gambar
10. Flowchart tebak nama Flowchart di bawah ini menggambarkan bagaimana game pembelajaran
tebak nama yang berada dalam sub menu game.
Click nama
Benar Soal 2
tidak Soal 1
Soal 10 Soal 9
Soal 8 Soal 7
Soal 6 Soal 5
Soal 4 Soal 3
Click nama
Click nama
Click nama
Click nama
Click nama
Click nama
Click nama
Click nama
Click nama
Benar
Benar Benar
Benar Benar
Benar
Benar
Benar tidak
tidak
tidak
tidak
tidak
tidak
tidak
Benar tidak
Simpan score Data
Score ya
Start
Temukan Nama Score = 10
Score = 20
Score = 30
Score = 40
Score = 50
Score = 60
Score = 70
Score = 80
Score = 90
Score = 100 ya
ya ya
ya ya
ya ya
ya ya
Gambar 4.14. Flowchart Game Tebak Nama
11. Flowchart ketik kuis Flowchart di bawah ini menggambarkan bagaimana game pembelajaran
ketik kuis yang berada dalam sub menu game.
Start
Ketik jawaban
benar Soal 1
cek tidak
Score = 10 ya
Soal 2 Ketik
jawaban cek
benar Score = 20
tidak ya
Ketik jawaban
cek benar
Soal 3
Score = 30 tidak
ya Soal 4
Ketik jawaban
Ketik jawaban
Ketik jawaban
Ketik jawaban
Ketik jawaban
Ketik jawaban
cek benar
tidak ya
Score = 40 Soal 5
cek benar
cek benar
cek benar
tidak Score = 50
ya Soal 6
tidak Score = 60
Soal 7 ya
Score = 70 Soal 8
ya cek
benar tidak
Soal 9 Score = 80
ya
benar cek
tidak Soal 9
Score = 80 ya
Ketik jawaban
benar cek
tidak Soal 10
benar cek
Score = 90 ya
Ketik jawaban
tidak Score = 100
ya
Simpan score Data
base
Gambar 4.15. Flowchart Game Ketik Quis
4.2.3.4 Pseudocode game
Pseudocode di bawah ini menjelaskan algoritma pemograman dasar yang menggunakan struktur sederhana .
1. Tebak gambar dan Tebak nama Deklarasi
Tebak gambar Variabel
Integer : I ,F , J , P ; Begin
Int I = 0; Array F 1,2,3,…..,10;
For I = 1 ; I = F ; I++ {
If Fi = J read “True”; P1 10
Else if 1 = J read “False”; P1 0 ;
Endif }
End .
1. Game ketik kuis Deklarasi
Typing quis; Variabel
Integer : I , J Begin
Int I = 0 ; Array J = 1, 2, 3 ,…..,10 ;
For I = I = J ; I ++ {
If I = I J Read
Next “Gambar baru” Else if I J
Read Check “Cek kata”
Endif }
End.
4.2.3.5 Struktur File
Langakah berikutnya yang harus dilakukan adalah menentukan file-file apa saja yang harus disediakan dan akan digunakan dalam aktivitas kerja jika
system ini diimplimentasikan. Pemilhan file yang akan dibentk dapat ditentukan dari skema flowchart yang telah ditranformasikan kedalam bentuk tabel lebih
normal. Tabel yang sudah normal tersebut selanjutnya akan dibuatkan struktur file
akan menentukan struktur fisik database. Struktur file berisi daya yang harus disimpan oleh intansi terkait berserta bagaimana data tersebut akan diakses oleh
pemakai data. Berikut struktur filedata :
1 Score Nama file
: Score Media Penyimpanan : Harddisk
Tabel 4.3 Struktur File Score
No Nama item data Type
Lebar Keterangan
1 Id
Mediumint 9
Nomor id pemaian 2
Nick name Varchar
50 Nama pemain
3 Dateposted
Varchar 10
Tanggal main 4
Score Mediumint
9 Nilai pemain
4.2.4. Perancangan Antar Muka
Perancangan antar muka merupakan perancangan awal yang digambarkan sebelum program aplikasi dibuat. Sehingga perencanaan awal tidak keluar dari
jalur yang akan digambarkan. Perancangan antarmuka pada aplikasi education game yang akan dibangun adalah sebagai berikut:
4.2.4.1. Perancangan tampilan
Perancangan tampilan diperlukan untuk mengolah informasi dan memberikan kemudahan bagi pemakai sehingga dapat dimengerti oleh pengguna.
Dengan demikian dengan perancangan tampilan ini dapat memberikan informasi yang sesuai dengan tujuan yang akan dicapai.
Rancangan dari perangkat lunak ini adalah sebagai berikut :
Kategori