BAB IV PERANCANGAN SISTEM 4.1. Perancangan Sistem Pada

BAB IV
PERANCANGAN SISTEM
4.1.
Perancangan Sistem
Pada
tahap ini dibuat perancangan desain dan algoritma meliputi
perancangan aplikasi permainan dan perancangan antarmuka. Desain alur-alur
yang menghubungkan interface berdasarkan hubungan antar objek dan atribut
yang telah ditentukan untuk mengetahui dari proses kerja perangkat lunak
scramble game dan alur proses kerja.
4.2. Flowchart Alur Permainan Word Scramble
Langkah-Langkah bermain pada
Permainan Word Scramble akan
digambarkan dengan flowchart berdasarkan peratutan yang telah ditentukan.
51
52
Start
Waktu Sisa =
120 Detik
Randomization
Pemilihan Huruf
Ketertanggaan
Cari jawaban
Waktu Sisa = 0
“Waktu Habis ! “
End
Gambar 4.1 Flowchart Alur Permainan Scramble Game.
4.1. Flowchart Ramdomization
Flowchart ini menggambarkan bagaimana huruf yang akan di acak pada
papan permainan. Penentuan huruf acak didasarkan pada frekuensi huruf yang
sering muncul dengan total frekuensi 1002. Berikut Flowchart ramdomization().
53
Alfabet[],
frek
Start
Alfabet]1]
Ya
Frek = ramdom (1002)
Frek = 84-98
Tidak
Frek = 1-83
Ya
Alfabet[0]
Tidak
Alfabet[2]
Ya
Frek = 99-126
Tidak
A
Frek = 127169
Ya
Tidak
Alfabet[5]
Ya
Frek = 297318
Tidak
Frek = 170296
Alfabet[3]
A
Ya
Alfabet[4]
Tidak
Alfabet[6]
Ya
Frek = 319338
Tidak
A
Frek = 339398
Ya
A
Tidak
Alfabet[9]
Ya
Frek = 469470
Ya
Frek = 471478
Ya
Frek = 543609
Ya
Frek = 610684
Alfabet[7]
Tidak
Frek = 399468
Ya
Tidak
Frek = 479518
Ya
Alfabet[8]
Tidak
Alfabet[10]
Alfabet[11]
Tidak
Alfabet[13]
Tidak
Frek = 519542
Ya
Frek = 685701
Ya
Alfabet[12]
Tidak
Alfabet[14]
Tidak
Tidak
A
Alfabet[17]
Ya
Frek = 705764
Tidak
Alfabet[15]
A
Frek = 701704
Ya
Frek = 828918
Ya
Alfabet[16]
Tidak
Alfabet[18]
Ya
Frek = 765827
Tidak
Tidak
A
Alfabet[21]
Ya
Frek =947956
Ya
Frek = 957980
Tidak
Frek =918946
Alfabet[19]
A
Ya
Alfabet[20]
Tidak
Alfabet[22]
Tidak
Frek =981
Ya
Alfabet[23]
Tidak
A
End
Alfabet[25]
Tidak
Frek =9821002
Ya
Alfabet[24]
Gambar 4.2 Flowchart ramdomization
4.2. Flowchart Pemilihan Huruf
Flowchart ini merupakan fungsi yang berguna untuk memeriksa apakah
huruf-huruf yang dipilih pemain saling bertetanggan atau tidak. Apakah memiliki
54
nilai ketertanggaan antar huruf yang terakhir dipilih dengan huruf yang akan
dipilih. Jika nilai ketertanggaannya salah makan pemain harus memilih huruf
yang lain yang bertetangga sampai akhirnya huruf yang terakhir terpilih. Berikut
flowchart pemilihan huruf pada Board 4x4.
Start
Kata_jawaban,tombol_
awal
,tombol_akhir,c,d,huruf
Kata_jawaban=null
Tidak
Tombol_akhir =
huruf.hint
Ya
d = tombol_awal
mod 4
Tombol_awal =
huruf.hint
C=tombol_akhirtombol awal
Kata_jawaban=huruf
Ketertanggaan =
true ?
Ya
Kata_jawaban=
kata_jawaban + huruf
Tombol_awal=tombol_akhir
End
Gambar 4.3 Flowchart Pemilihan Huruf.
Keterangan:
Tombol_akhir
: tombol yang terakhir di pilih oleh pemain
Tidak
55
Tombol_awal
: tombol yang dipilih sebelum tombol akhir
Ketertanggaan
: pengkondisian menyatakan ketertanggan antar huruf
sebelum dengan Huruf sesudah
Huruf
: huruf yang dipilih pemain
Kata_jawaban
: rangkaian huruf yang menjadi tebakan pemain
d
: variable yang menentukan letak kolom pada board
4.3. Flowchart cari jawaban
Cari jawaban merupakan fungsi yang berguna untuk memeriksa kata
jawaban pemain didalam kamus jawaban. Fungsi inilah yang menggunakan
algoritma pencarian yaitu algoritma linear search, berikut merupakan flowchart
pencarian jawaban :
56
Start
Kata_jawaban,kata
carian, i, kamus
i=0
i=i+1
Katacarian=kata_jawaban
Ya
Katacarian=kamus[i] ?
Ya
Kata_ketemu
Tidak
i = kamus.length ?
Tidak
“kata tidak
Ketemu”
Start
Gambar 4.4 Flowchart pencarian jawaban
Keterangan:
Kata_ketemu
: kata jawaban yang terdapat dalam kamus jawaban.
Katacarian
: kata carian untuk menampung kata jawaban.
57
4.4. Flowchart Kata Sudah ketemu
Flowchart ini merupakan fungsi yang berguna untuk memeriksa kata
apakah kata tersebut yang dijadikan tebakan sudah ditemukan sebelumnya oleh
pemain jika sudah maka kata tersebut tidak bisa ditebak dua kali.
Start
I, a,
kata_ketemu,s
sudah_ketem
u
I=0
I=i+1
Tidak
a=
kata_ketemu[i]
?
Tidak
i=
kata_ketemu.length
?
Ya
Ya
Sudah_ketemu = true
Sudah_ketemu = false
End
Gambar 4.5 Flowchart Sudah Ketemu
58
Keterangan:
I
: jumlah variable pada kata_ketemu
a
: kata yang sedang diperiksa apakah telah ditemukan
sebelumnya
Sudah_ketemu
: pengkondisian boolean yang mengecek kata pada papan
Jawaban.
Kata_ketemu
: array yang berisi kata tebakan yang benar didalam kamus.
4.5. Flowchart Periksa Kata
Flowchart ini menjelaskan bagaimana huruf yang dirangkai menjadi kata yang
akan dijadikan kata tebakan oleh pemain. Berikut akan dijelaskan pada gambar
sebagai berikut :
59
Start
Panjang_kata, indeks_kata,
carikata, kata_ketemu,
Kata_tebakan
Kata_tebakan.length <
panjang_kata ?
Tambahkata = “ “
“ Minimal 3 Huruf “
Sudahketemu
(kata_tebakan) = true
Tambahkata = “ “
“ Kata Sudah
Ketemu “
Indeks_kata =
Carikata (kata_tebakan)
Kata_ketemu = push(kata_tebakan)
Indeks_kata > = 0
“ Kata Tidak Ada
dalam Kamus “
Tambahkata = Kata_ketemu
Nilai ()
“ Jawaban Benar “
End
Gambar 4.6 Flowchart Periksa Kata
Keterangan :
Tambahkata = “ “
60
Panjang_kata
: jumlah huruf minmal yang dapat dijadikan kata tebakan.
Sudahketemu
: tipe boolean untuk menyatakan apakah kata tersebut
sudah ditemukan sebelumnya atau belum.
Tambah_kata
: kata yang akan ditambahkan jika dalam kondisi yang
benar.
Indeks_kata
: indeks dari kata tebakan pada kamus.
4.6. Flowchart Nilai
Flowchart nilai ini merupakan fungsi yang berguna untuk menghitung nilai
yang diperoleh dari tiap kata yang berhasil ditebak oleh pemain. Nilai ditentukan
dari panjang kata yang membentuknya. Berikut Flowchart nilai :
61
Start
I,kata,kata_ketemu,
Nilai,
Total_nilai,daftar_kata
Total_nilai = 0
I=0
I=i+1
Kata = kata_ketemuu[i]
Total_nilai=total_nilai + nilai[kata.length]
Tidak
I=
kata_ketemu.length
?
Daftar_kata = daftar_kata + kata
Ya
“Total Nilai : Total_nilai
“”Nama : Nama_pemain”
End
4.7 Flowchart Nilai
Keterangan :
I
: Jumlah kata yang berhasil ditebak
Nilai
: nilai berdasarkan banyak huruf tiap kata
Nilai_total
: Total nilai yang diperoleh pemain
Daftar_kata
: daftar kata yang berhasil ditebak oleh pemain
62
4.7. Perancangan Aplikasi Permainan
Perancangan aplikasi permainan merupakan perancangan antarmuka dengan
pemain terhadap aplikasi permainan yang dibangun. Aplikasi akan menampilkan
frame menu yang tersedai tombol pilihan Mulai, aturan dan keluar. Setiap tombol
akan menampilkan Form-form berikutnya. Aplikasi akan berhenti jika waktu
habis dan pemain menekan tombol keluar. Berikut adalah proses yang terjadi pada
aplikasi permainan word scramble:
Start
Tampilan
Frame Play
Game
Tampilan Frame
Nama Pemain
Ya
Pilih Tombol
Level ?
Pilih tombol Kembali
Tidak
Tampilan
Frame Arena
Permainan
Pilih Tombol
Aturan ?
Ya
Tampilan Frame
Arena Permainan
Bermain Word Scramble
Tidak
Permainan Berakhir
Pilih Tombol
History Score ?
Ya
Tampilan Frame
Arena Permainan
Tampilan Frame
Nilai Pemain
Tidak
Pilih tombol Kembali
Pilih Tombol
Keluar
End
Gambar 4.8 Flowchart Alur permainan Word Scramble
63
4.9
Diagram Konteks
Untuk menggambarkan sistem secara umum yang mewakili seluruh proses
yang terjadi dan menggambarkan bagaimana hubungan antara proses utama
dengan
entitas eksternal
yang
terlibat
dalam
sistem,
maka
penyusun
menggambarkan diagram konteks dari sistem yang diusulkan sebagai berikut :
Input Nama pemain
Permainan Word
Scramble
user
Hasil Score
Gambar 4.9 Diagram Konteks Permainan
4.10 Data Flow Diagram
Data flow diagram merupakan peralatan yang berfungsi untuk
menggambarkan secara rinci mengenai sistem sebagai jaringan kerja antar fungsi
yang berhubungan satu sama lain dengan menunjukan dari dan kemana data
mengalir serta penyimpanannya. Berikut adalah DFD temu kembali citra :
64
User
Nama User
Input Nama
Pemain
Nama User
Temp
Pilih
Kata
Kata
Jawaban
Kata
Ketemu
Hasil
Jawaban
Kamus.txt
Kata
Jawaban
Sudah Ketemu
Cari Jawaban
Gambar 4.10 DFD level 0 Permainan Word Scramble
65
3.1
Pengecekan
panjang kata
Kata Jawaban
user
Respon Sistem
Kata Jawaban
3.2
Pencarian
Jawaban
Respon Sistem
Score Kata
Kata Jawaban
Score
Kamus
Score Kata
Kata Jawaban
3.4
Score
Kata Jawaban
3.3
Pengecekan Kata
Sudah Ketemu
Gambar 4.11 DFD level 1 Proses 3 Permainan Word Scramble.
4.8.Perancangan Antar Muka
Perancangan Antar muka aplikasi permainan Word Scramble ini terdiri
dari beberapa Form yaitu Form Menu, Form Aturan, Form Arena Permainan dan
Form Score. Berikut ini beberapa rancangan Antar muka.
1. Form Menu
Form Menu Akan muncul saat aplikasi permainan Word Scramble
dijalankan. Form ini berisikan menu yang dapat dipilih oleh pengguna
yaitu Play, Aturan Main, papan nilai dan Tombol Close. Rancangan Antar
muka ini dapat dilihat pada gambar di bawah ini:
66
X
Scramble
Play
Game
Aturan Main
Papan Nilai
Gambar 4.12 Form Menu
2. Form Masukan Nama Pemain
Form ini Berfungsi untuk Menampilkan Nama Pemain pada papan nilai
setelah game berakhir.
Masukan nama anda
OK
Cancel
Gambar 4.13 Form Input Nama Pemain
3. Form Papan Nilai
Form ini merupakan form yang digunakan untuk melihat hasil nilai dari
para pemain terdahulu serta melihat nilai terbaik dan form yang akan
tampil jika waktu telah habis.
67
X
Score
Nama Pemain
Gambar 4.14 Form papan nilai
4. Form Arena Permainan
Form Arena permainan merupakan Form yang digunakan pemain untuk
bermain word scramble. Rancangan antar muka Form ini dapat dilihat
pada gambar dibawah ini:
68
Skor
X
120 Detik
6
2
C
Kata Ketemu
1
4
Random
5
3
Check
Gambar 4.15 Arena permainan word scramble
Keterangan:
1. Panel button yang berisi Huruf Acak yang akan di tebak.
2. Textbox tampil yang berfungsi menapilkan Huruf yang telah di tekan
pada panel huruf dan menjadi kata tebakan.
3. Tombol cari kata dalam kamus.
4. Tombol Random berfungi untuk merandom kata dan mengulang
permainan seperti Baru Mulai (New Game).
5. Komponen Text area yang berfungsi menampilkan Kata-kata yang
sudah ditebak oleh pemain dengan jawaban kata yang benar.
6. Sisa waktu permainan.
c. Tombol clear pada area textbox jawaban
69
5. Form Aturan Permainan
Form Ini Berisikan Aturan Permainan dalam bermain Game Word
Scramble
1
2
Kembali
Word
3
Scramble
Gambar 4.16 Form aturan permainan word scramble
Keterangan:
1. Text Area yang menampilkan Tata Cara Permainan Word Scramble
2. Tombol yang berfungsi kembali Area Menu.
3. Word Scramble merupakan Judul aplikasi yang dirancang dengan
menggunakan komponen text.