28 Universitas Kristen Petra
3. ANALISA DAN DESAIN SISTEM
Pada tahap perancangan sistem ini akan membahas mengenai deskripsi
perangkat lunak, desain sistem, dan desain interface. Pada pembahasan mengenai
desain sistem, bagian-bagian yang akan dibahas meliputi use case, activity diagram,
flowchart dan database sistem.
Aplikasi ini merupakan suatu alat penunjang dalam mendidik anak-anak
Sekolah Dasar dalam mengenal cerita Alkitab. Sebagai alat penunjang aplikasi ini
memberikan kelebihan berupa permaianan yang membuat anak-anak belajar
dengan mudah. Aplikasi ini lebih ditujukan untuk anak-anak SD kelas 1 dan 2.
3.1 Masalah dalam Pelajaran
Pembahasan ini ditujukan untuk anak-anak SD. Dalam lingkungan
persekolahan sering kali ditemukan anak-anak yang malas dalam belajar karena
mereka cenderung tertarik pada visual dari pada informasi tertulis. Untuk itu, ketika
mereka membaca Alkitab yang berisikan tulisan, mereka cenderung segan untuk
membaca isi Alkitab serta sulit untuk memahami isi Alkitab. Oleh sebab itu aplikasi
ini dibuat dengan menambahkan metode cerita bergambar dan bermain, dari sini
proses membaca diharapkan dapat menarik perhatian anak-anak dalam belajar
mengenai cerita Alkitab dan manfaat positifnya mereka bisa mengerti tentang cerita
Alkitab.
3.2 Survei Sekolah Minggu
Dari hasil survei yang diperoleh dari Agus Langen Saputra selaku guru
sekolah minggu kelas 1 dan 2 SD gereja GKI Jemursari , anak-anak SD kelas 1 dan
2 pada dasarnya sangat senang sekali akan cerita dan pada jenjang ini juga mereka
diminta untuk mempelajari kisah-kisah dalam Alkitab. Sehingga ini merupakan
kesempatan yang baik untuk menceritakan kisah-kisah Alkitab kepada mereka,
dimana Alkitab memiliki banyak kisah menarik untuk disampaikan pada mereka.
Hanya saja kita harus jelas memberi pemahaman kepada mereka bahwa kisah yang
29 Universitas Kristen Petra
ada dalam Alkitab benar-benar terjadi. Cara penyampaian materi dilakukan
semenarik mungkin dengan menggunakan gambar, permainan, dan musik sehingga
membuat anak-anak lebih mengerti maksud dari cerita Alkitab. Dan dari hasil
survei yang dilakukan dapat membantu dalam pembuatan fitur dan bayangan akan
materi-materi yang disediakan.
3.3 Desain Sistem
Untuk melakukan desain aplikasi ini diperlukan use case, activity diagram,
flowchart, skenario permainan dan database sistem yang berguna untuk membantu
dalam mendesain aplikasi.
3.3.1 Use Case
Pada aplikasi ini, use case berfungsi sebagai acuan yang akan menentukan
hal apa saja yang dapat dilakukan user ketika menggunakan aplikasi ini. Use case
dapat dilihat pada Gambar 3.1.
Gambar 3.1 Use Case
USER
GUEST
CERITA
MELIHAT
RAPOR
MENDAFTAR
PERMAINAN
MASUK
<<extend>>
<<include>>
<<include>>
30 Universitas Kristen Petra
3.3.2 Activity Diagram
Berikut adalah desain activity diagram pada aplikasi yang terdiri dari.
a. Activity Diagram Mendaftar
Pada activity diagram ini akan membahas mengenai sistem register account
baru apabila user belum memiliki account. Activity diagram mendaftar akan
dijelaskan pada Gambar 3.2.
Gambar 3.2 Activity Diagram Mendaftar
31 Universitas Kristen Petra
b. Activity Diagram Masuk
Pada activity diagram ini akan membahas mengenai sistem “masuk” user
ke dalam aplikasi ini, yang bertujuan supaya user dapat melanjutkan membaca
apabila sebelumnya sudah pernah membaca dan juga mengetahui hasil rapor dalam
permainan. Activity diagram masuk dijelaskan pada Gambar 3.3.
Gambar 3.3 Activity Diagram Masuk
32 Universitas Kristen Petra
c. Activity Diagram Cerita
Pada activity diagram ini akan membahas mengenai alur cerita yang akan
ditampilkan pada aplikasi ini. Activity diagram Cerita akan dibahas pada Gambar
3.4.
Gambar 3.4 Activity Diagram Cerita
33 Universitas Kristen Petra
d. Activity Diagram Permainan
Game Matching
Pada activity diagram ini akan membahas mengenai cara bermain pada
game matching. Activity Diagram Game Matching akan dibahas pada Gambar 3.5.
Gambar 3.5 Activity Diagram Game Matching
34 Universitas Kristen Petra
Game Jigsaw Puzzle
Pada activity diagram ini akan membahas mengenai cara bermain pada
game jigsaw puzzle. Activity Diagram Game Jigsaw Puzzle akan dibahas pada
Gambar 3.6.
Gambar 3.6 Activity Diagram Game Jigsaw Puzzle
35 Universitas Kristen Petra
Permainan Mengurutkan Gambar
Pada activity diagram ini akan membahas mengenai cara bermain pada
permainan mengurutkan gambar. Activity diagram permainan mengurutkan gambar
akan dibahas pada Gambar 3.7.
Gambar 3.7 Activity Diagram Permainan Mengurutkan Gambar
36 Universitas Kristen Petra
e. Activity Diagram Rapor
Pada activity diagram ini akan membahas mengenai hasil rapor yang akan
ditampilkan pada akhir. Activity diagram rapor akan dibahas pada Gambar 3.8.
Gambar 3.8 Activity Diagram Rapor
User Rapor Database Rapor
Tampilan Rapor
Menampilkan Skor
Konfirmasi
Rapor Matching Rapor Jigsaw Puzzle Rapor Mengurutkan Gambar
37 Universitas Kristen Petra
3.3.3 Flowchart
Berikut adalah desain flowchart pada aplikasi yang terdiri dari.
a. Flowchart umum
Flowchart umum pada Gambar 3.9 akan membahas mengenai sistem dari
awal mulai menggunakan aplikasi ini dengan menampilkan halaman utama
dimana user akan diminta untuk melakukan pendaftaran, ketika sudah pernah
mendaftar dapat memilih pilihan “masuk”, setelah itu user dapat membaca
cerita dan bermain permainan yang telah disediakan didalam aplikasi.
Start
Tampilkan Gambar Halaman Utama
Pilih Dafar
Pilih Masuk
Daftar
Masuk
End
Cerita
Posisi_User > Max_Cerita
Halaman Selanjutnya
N
N
Y
Y
N
Y
Gambar 3.9 Flowchart Umum
38 Universitas Kristen Petra
b. Flowchart Daftar
Pada flowchart ini akan membahas mengenai sistem register account baru
apabila user belum memiliki account, user dapat mendaftar dengan cara
memasukan nama, ketika user memasukan nama maka akan terjadi pengecekan
apakah nama sudah pernah terdaftar atau belum. Flowchart “daftar” akan
dijelaskan pada Gambar 3.10.
DAFTAR
MASUKAN NAMA NAMA SUDAH ADA YANAMA SUDAH
ADA
RETURN
TIDAK
Gambar 3.10 Flowchart Daftar
c. Flowchart Masuk
Pada flowchart ini akan membahas mengenai sistem “masuk” user ke dalam
aplikasi ini, yang bertujuan supaya user dapat melanjutkan membaca apabila
sebelumnya sudah pernah membaca dan juga mengetahui hasil rapor dalam
permainan. Flowchart “masuk” dijelaskan pada Gambar 3.11.
MASUK
MASUKAN NAMA
NAMA ADA DI DATABASE RETURN
NAMA SALAH
YA
TIDAK
Gambar 3.11 Flowchart Masuk
39 Universitas Kristen Petra
d. Flowchart Cerita
Pada flowchart ini akan membahas mengenai alur cerita yang akan
ditampilkan pada aplikasi ini. Dimana didalam cerita akan menampilkan
halaman cerita yang akan dibacakan oleh user, terdapat 3 game yang akan
ditampilkan di tengah-tengah cerita. Flowchart Cerita akan dibahas pada
Gambar 3.12.
Start
Load Image Yang Diapakai Dalam Cerita
Posisi_user = 1;Max_Cerita = 28
Posisi_user <= Max_Cerita
Display Background ke Posisi_UserDisplay gambar-gambar diapakai pada
Cerita ke Posisi UserMainkan efek suara Cerita ke Posisi
User
Y
Gambar Cerita Diklik ?
Tampilkan pop up informasi cerita
Y
Tekan Back
Tekan Next
Tekan Replay
Posisi_User--;Posisi_User > 1Y Y
N
Posisi_User < Max_Cerita
Posisi_User++;Y
N
Mainkan Efek Suara Cerita ke Posisi User
Y
Y
N
RETURNN
Posisi Game ?
Mainkan Game Puzzle
N
Mainkan Game Matching
N
Mainkan Mengurutkan
Gambar
Game Puzzle
Game Matching
Mengurutkan gambar
Y
Y
Y
Y
N
N
Cerita
Rapor
Gambar 3.12 Flowchart Cerita
40 Universitas Kristen Petra
e. Flowchart Game Matching
Pada flowchart ini akan membahas mengenai cara bermain pada game
matching, dimana game matching merupakan permainan mencocokan gambar
dengan kata yang penghubungnya sebuah garis yang akan ditarik dan pada
akhir permainan akan ditampilkan skor yang diperoleh user. Flowchart Game
Matching akan dibahas pada Gambar 3.13.
START
GAME OVER=0
GAME OVER SKOR RETURN
DI HITUNGPILIH
JAWABAN SOAL
JAWABAN SUDAH DIPILIH
DITARIK GARISSOAL KE JAWABAN
3 JAWABAN SUDAH DIPILIH
GAME OVER=1
YA
TIDAK
YA
YA
TIDAK
Game Matching
Gambar 3.13 Flowchart Game Matching
41 Universitas Kristen Petra
f. Flowchart Game Jigsaw Puzzle
Pada flowchart ini akan membahas mengenai cara bermain pada game
jigsaw puzzle, dimana game jigsaw puzzle merupakan permainan menyusun
potongan-potongan gambar kecil menjadi sebuah gambar yang sempurna dan
pada akhir permainan akan ditampilkan skor yang diperoleh user. Flowchart
Game Jigsaw Puzzle akan dibahas pada Gambar 3.14.
START
BENAR=0
GAME OVER RETURN
MENYUSUN GAMBAR
JIKA POSISI GAMBAR
WAKTU=0
BENAR ++
GAME OVER=1
BENAR
YA
TIDAK
YA
TIDAK
YA YATIDAK
TIDAK
Game Jigsaw Puzzle
Gambar 3.14 Flowchart Game Jigsaw Puzzle
42 Universitas Kristen Petra
g. Flowchart Permainan Mengurutkan Gambar
Pada flowchart ini akan membahas mengenai cara bermain pada permainan
mengurutkan gambar, dimana permainan mengurutkan gambar merupakan
permainan yang mengurutkan gambar sesuai alur cerita yang telah dibacakan
dan pada akhir permainan akan ditampilkan skor yang diperoleh user.
Flowchart permainan mengurutkan gambar akan dibahas pada Gambar 3.15.
START
WAKTU GAME60
GAME OVER SKOR RETURN
MELETAKAN GAMBAR
JIKA POSISI GAMBAR
WAKTU=0
BENAR ++
GAME OVER=1
BENAR 3
YA
TIDAK
YA
TIDAK
YA
YA
TIDAK
TIDAK
Game Mengurutkan Gambar
Gambar 3.15 Flowchart Permainan Mengurutkan Gambar
43 Universitas Kristen Petra
h. Flowchart Rapor
Pada flowchart ini akan membahas mengenai hasil rapor yang akan
ditampilkan pada akhir. Didalam rapor akan menampilkan perolehan skor hasil
user dari ketiga permainan yang terdapat didalam aplikasi. Flowchart rapor
akan dibahas pada Gambar 3.16.
Start
Load Data Nilai Rapor Dari Database
Menampilkan Nilai Rapor Untuk Game
Puzzle
Menampilkan Nilai Rapor Untuk Game
Mengurutkan
RETURN
N
Menampilkan Nilai Rapor Untuk Game
Matching
Rapor
Gambar 3.16 Flowchart Rapor
44 Universitas Kristen Petra
i. Flowchart Selanjutnya
Pada flowchart ini akan membahas mengenai halaman selanjutnya yang
akan ditampilkan pada akhir aplikasi digunakan. Didalam halaman selanjutnya
user dapat memilih secara langsung ketika ingin kembali membaca cerita,
kembali bermain permainan yang telah disediakan, maupun melihat rapor dan
video. Flowchart Selanjutnya akan dibahas pada Gambar 3.17.
Start
Memilih Menu Cerita
Menampilkan Halaman
Selanjutnya
Cerita
Memilih Menu Matching
Matching
Memilih Menu Puzzle
Memilih Menu Mengurutkan
Gambar
Puzzle
Mengurutkan Gambar
Memilih Menu Video
Video
N
N
N
N
Y
Y
Y
Y
Y
RETURN
Keluar
N
Y
N
Halaman Selanjutnya
Gambar 3.17 Flowchart Selanjutnya
45 Universitas Kristen Petra
j. Flowchart Video
Pada flowchart ini akan membahas mengenai halaman video yang akan
ditampilkan pada halaman selanjutnya, dimana akan menampilkan video lagu
bapa Abraham. Flowchart video akan dibahas pada Gambar 3.18.
Start
Menampilkan Video
Menekan Keluar
RETURN
Y
N
video
Gambar 3.18 Flowchart Video
3.3.4 Flowchart Algoritma Program
Berikut adalah desain flowchart algoritma program pada aplikasi yang
terdiri dari.
a. Flowchart Algoritma Program Game Matching
Pada flowchart ini akan membahas mengenai algoritma program
cara bermain pada game matching. Flowchart algoritma program Game
Matching akan dibahas pada Gambar 3.19.
46 Universitas Kristen Petra
Start
Mouse sedang ditekan ?
Ambil = 0Jumlah_Matching = 3Mx = posisi x mouseMy = posisi y mouse
Inisialisasi lingkaran posisiSoalInisialisasi lingkaran posisiJawaban
Inisialisasi garis pada soal
Ambil == 0
Loop selama i < Jumlah_Matching
i = 0
Posisi mouse ada di dalam lingkaran Soal ke-i start drag soal ke-i
Ambil = i
Y
N
Y
i++ N
Y
Y
N
Ambil > 0
N
i = 0
Y
Loop selama i < Jumlah_Matching
N
Posisi mouse ada di dalam lingkaran jawaban ke-i dan
lingkaran jawaban ke-i belum ada isinya
i++
Y
Set posisi sambung garis diambil pada lingkaran jawaban ke-i
Y
N
N
end
Set posisi sambung garis diambil sesuai posisi mouse
kembalikan posisi sambung garis diambil ke posisi mula-mulaGambar smua garis dari
posisi awal ke posisi disambungkan
Gambar 3.19 Flowchart Algoritma Program Game Matching
47 Universitas Kristen Petra
Pada flowchart ini akan membahas mengenai algoritma program
cara perhitungan skor yang diperoleh pada game matching. Flowchart
algoritma program Game Matching akan dibahas pada Gambar 3.20.
Start
i = 0Benar = 0Salah = 0
Jumlah_Gambar = 3
Loop selama i < Jumlah_Gambar
Posisi sambung garis ke-i = Posisi lingkatan jawaban ke-i
Salah=Salah+1
Benar=Benar+1
i++
N
YY
Benar_Skor = Benar * 30
Waktu >= 30 dan Benar >= 1
Waktu_Skor = 10
Waktu_Skor = 0
Skor = Benar_Skor + Waktu_Skor
N
Y
N
End
Gambar 3.20 Flowchart Algoritma Program Perhitungan Skor Game Matching
48 Universitas Kristen Petra
b. Flowchart Algoritma Program Jigsaw Puzzle
Pada flowchart ini akan membahas mengenai algoritma program
cara bermain pada Game Jigsaw Puzzle. Flowchart algoritma program
Game Jigsaw Puzzle akan dibahas pada Gambar 3.21.
Start
Mouse sedang ditekan ?
Ambil = 0Jumlah_Puzzle = 9
Mx = posisi x mouseMy = posisi y mouse
Inisialisasi gambarPosisiRandom gambarPuzzle
Ambil == 0
Loop selama i < Jumlah_Puzzle
i = 0
Mouse berada di posisi gambarPuzzle ke-i
start drag puzzle iAmbil = I
break Y
N
Y
i++ N
Y
Y
N
Ambil > 0
N
i = 0
Y
Loop selama i < Jumlah_Puzzle
N
Mouse berada pada gambarPosisi ke-i
i++
Y
drop puzzle yang diambil pada kotak posisi iambil = 0
Y
N
N
end
Drag puzzle sesuai posisi mousekembalikan puzzle yang diambil ke
posisi mula-mula
Gambar 3.21 Flowchart Algoritma Program Game Jigsaw Puzzle
49 Universitas Kristen Petra
Pada flowchart ini akan membahas mengenai algoritma program
cara perhitungan skor yang diperoleh pada Game Jigsaw Puzzle. Flowchart
algoritma program Game Jigsaw Puzzle akan dibahas pada Gambar 3.22.
Start
i = 0Benar = 0Salah = 0
Jumlah_Puzzle = 9
Loop selama i < Jumlah_Puzzle
Puzzle ke i berada di posisi ke-i (posisi yang tepat)
Salah=Salah+1
Benar=Benar +1
i++
N
YY
Benar_Skor = Benar * 10
Waktu >= 30 dan Benar >= 1
Waktu_Skor = 10
Waktu_Skor = 0
Skor = Benar_Skor + Waktu_Skor
N
Y
N
End
Gambar 3.22 Flowchart Algoritma Program Perhitungan Skor Game Jigsaw
Puzzle
50 Universitas Kristen Petra
c. Flowchart Algoritma Program Permainan Mengurutkan Gambar
Pada flowchart ini akan membahas mengenai algoritma program
cara bermain pada game matching. Flowchart algoritma program
Permainan Mengurutkan Gambar akan dibahas pada Gambar 3.23.
Start
Mouse sedang ditekan ?
Ambil = 0Jumlah_Gambar = 3Mx = posisi x mouseMy = posisi y mouse
Inisialisasi gambarSoalInisialisasi gambarJawaban
Ambil == 0
Loop selama i < Jumlah_Gambar
i = 0
Posisi mouse ada di dalam gambarSoal ke-i
start drag soal ke-iAmbil = i
Y
N
Y
i++ N
Y
Y
N
Ambil > 0
N
i = 0
Y
Loop selama i < Jumlah_Gambar
N
Posisi mouse ada di dalam gambarJawaban ke-I dan
gambarJawaban ke-i belum ada isinya
i++
Y
drop soal ke posisi jawaban i
Y
N
N
end
drag soal ke-i sesuai posisi mouse kembalikan soal ambil ke posisi mula-mula
Gambar 3.23 Flowchart Algoritma Program Permainan Mengurutkan Gambar
51 Universitas Kristen Petra
Pada flowchart ini akan membahas mengenai algoritma program
cara perhitungan skor yang diperoleh pada Permainan Mengurutkan
Gambar. Flowchart algoritma program Permainan Mengurutkan Gambar
akan dibahas pada Gambar 3.24.
Start
i = 0Benar = 0Salah = 0
Jumlah_Gambar = 3
i < Jumlah_GambarPosisi gambarSoal =
gambarJawaban
Salah++
Benar++
i++
N
YY
Benar_Skor = Benar * 30
Waktu >= 30 dan Benar >= 1
Waktu_Skor = 10
Waktu_Skor = 0
Skor = Benar_Skor + Waktu_Skor
N
Y
N
End
Gambar 3.24 Flowchart Algoritma Program Perhitungan Skor Permainan
Mengurutkan Gambar
52 Universitas Kristen Petra
Tabel 3.1 Desain Sistem
No Use Case Activity
Diagram
Flowchart
1 Daftar 3.2 3.10
2 Masuk 3.3 3.11
3 Cerita 3.4 3.12
4 Permainan Jigsaw Puzzle 3.6 3.14, 3.21, 3.22
5 Permainan Game Matching 3.5 3.13, 3.19, 3.20
6 Permainan Mengurutkan Gambar 3.7 3.15, 3.23, 3.24
7 Rapor 3.8 3.16
3.3.5 Skenario Permainan
Dalam skenario permainan akan dijelaskan bagaimana alur dalam
permainan yang akan dimainkan oleh user. Dalam aplikasi ini, cerita alkitab “Janji
Tuhan untuk Abraham” dibagi menjadi tiga bagian. Dan setiap bagian cerita
dibatasi oleh permainan. User juga tidak diwajibkan untuk bermain permainan yang
telah disediakan, ketika ingin melanjutkan membaca tanpa ingin bermain
permainan, user dapat mengklik button “cancel” yang telah disediakan setiap
permainan ditampilkan.
Game Matching
Pada halaman awal game matching akan memunculkan pilihan “ya” atau
“tidak”. Ketika user memilih “ya”, maka masuk halaman selanjutnya yaitu halaman
penjelasan permainan yang akan dimainkan. Setelah itu masuk ke halaman
permainan yang akan dimainkan, terdapat tiga gambar disebelah kiri, dan terdapat
tiga kata di sebelah kanan, maka user diminta untuk mencocokan gambar dengan
kata yang saling berkaitan dengan menggunakan garis yang telah tersedia. Dalam
permainan ini juga menggunakan waktu dalam menyelesaikan permainan, waktu
yang disediakan hanya 60 detik dalam setiap kali permainan. Ketika waktu yang
disediakan sudah selesai maka permainanpun selesai dimainkan. Terdapat juga
button “ok” yang berguna ketika user telah menyelesaikan permainan sebelum
waktu habis, user dapat menekan button “ok” untuk mengakhiri permainan.
Selanjutnya akan ditampilkan jawaban benar salah, ketika jawaban salah maka akan
ditunjukan dengan garis berwarna merah. Dan pada halaman terakhir dalam
permainan ini, akan dimunculkan hasil akhir perhitungan benar, salah, waktu, dan
53 Universitas Kristen Petra
skor dalam menyelesaikan permainan. Begitupun ketika user memilih button
“tidak”, maka akan menampilkan tampilan bacaan selanjutnya.
Game Jigsaw Puzzle
Pada halaman awal game jigsaw puzzle akan memunculkan pilihan “ya”
atau “tidak”. Ketika user memilih “ya”, maka masuk halaman selanjutnya yaitu
halaman penjelasan permainan yang akan dimainkan. Setelah itu masuk ke halaman
permainan yang akan dimainkan, terdapat 9 gambar kecil yang diacak dibagian
bawah, tersedia juga satu bingkaian kotak yang berguna ketika user menyusun
potongan gambar-gambar kecil menjadi sebuah gambar yang sempurna didalam
kotak tersebut, dan juga terdapat tampilan gambar asli disebalah kiri, untuk
membantu mempermudah user dalam menyusun potongan gambar-gambar kecil
menjadi sempurna. Dalam permainan ini juga menggunakan waktu dalam
menyelesaikan permainan, waktu yang disediakan hanya 60 detik dalam setiap kali
permainan. Ketika waktu yang disediakan sudah selesai maka permainanpun selesai
dimainkan. Terdapat juga button “ok” yang berguna ketika user telah
menyelesaikan permainan sebelum waktu habis, user dapat menekan button “ok”
untuk mengakhiri permainan. Dan selanjutnya pada halaman terakhir dalam
permainan ini, akan dimunculkan hasil akhir perhitungan benar, salah, waktu, dan
skor dalam menyelesaikan permainan. Begitupun ketika user memilih button
“tidak”, maka akan menampilkan tampilan bacaan selanjutnya.
Permainan Mengurutkan Gambar
Pada halaman awal permainan mengurutkan gambar akan memunculkan
pilihan “ya” atau “tidak”. Ketika user memilih “ya”, maka masuk halaman
selanjutnya yaitu halaman penjelasan permainan yang akan dimainkan. Setelah itu
masuk ke halaman permainan yang akan dimainkan, terdapat tiga gambar diatas
yang bergerak dan terdapat tiga kotak dibagian bawah, maka user diminta untuk
mengurutkan gambar sesuai alur cerita yang telah dibaca. Dalam permainan ini juga
menggunakan waktu dalam menyelesaikan permainan, waktu yang disediakan
hanya 60 detik dalam setiap kali permainan. Ketika waktu yang disediakan sudah
selesai maka permainanpun selesai dimainkan. Terdapat juga button “ok” yang
54 Universitas Kristen Petra
berguna ketika user telah menyelesaikan permainan sebelum waktu habis, user
dapat menekan button “ok” untuk mengakhiri permainan. Selanjutnya pada
halaman terakhir dalam permainan ini, akan dimunculkan hasil akhir perhitungan
benar, salah, waktu, dan skor dalam menyelesaikan permainan. Ketika user memilih
button “tidak”, maka akan menampilkan rapor, yang dimana berisikan hasil dalam
semua permainan dari awal.
3.3.6 Database Sistem / Entity Relationship Diagram (ERD)
Perancangan database ini menggunakan software Sybase Power Designer
15.2. Tahap dalam pembuatan tabel yang pertama adalah Conceptual Data Model
yang berformat Conceptual Data Model. Selanjutnya dari format tersebut dirubah
menjadi format Phsycal Data Model dalam bentuk script. Setelah Phsycal Data
Model itu menjadi script. Conceptual Data Model (CDM) dapat dilihat pada
Gambar 3.25 dan Physical Entity Relationship Model dapat dilihat pada Gambar
3.26
Gambar 3.25 Conceptual Entity Relationship Model
Gambar 3.26 Physical Entity Relationship Model
user_raport
Relationship_2
User
id_user
nama_user
posisi_user
permainan_dimainkan
sound
<pi> Integer
Text (20)
Integer
<Undefined>
<Undefined>
Identifier_1 <pi>
Rapor
id_rapor
rapor_time
benar
salah
skor
<pi> Integer
Date
Integer
Integer
Integer
<M>
Identifier_1 <pi>
Permainan
id_permainan
nama_permainan
<pi> Integer
Text (50)
<M>
Identifier_1 <pi>
User
id_user
nama_user
posisi_user
permainan_dimainkan
sound
int
text
int
<Undefined>
<Undefined>
Rapor
id_rapor
id_permainan
id_user
rapor_time
benar
salah
skor
int
int
int
date
int
int
int
<pk>
<fk2>
<fk1>
Permainan
id_permainan
nama_permainan
int
text
<pk>
55 Universitas Kristen Petra
Tabel user yang tertera pada Tabel 3.2 digunakan untuk menyimpan data user
yang menggunakan aplikasi.
Tabel 3.2 User
Nama Field Tipe Data Keterangan
Id_user Varchar (17) Identifikasi user yang
telah ada sebelumnya
Nama_user Varchar (8) Nama user
Posisi_user Varchar (17) Posisi user dalam
membaca
Permainan_dimainkan Int Jumlah permainan yang
sudah dimanikan oleh
user
Sound Int Besar kecil volume
sound yang diinginkan
user
Tabel rapor yang tertera pada Tabel 3.3 digunakan untuk menyimpan data rapor
yang merupakan hasil membaca dan hasil permainan dari user.
Tabel 3.3 Rapor
Nama Field Tipe Data Keterangan
Id_rapor Int Identifikasi data rapor
Id_permainan Varchar (25) Foreign key ke tabel
permainan
Id_user Varchar (20) Foreign key ke tabel user
Rapor_time Int Perhitungan waktu
Benar Int Perhitungan jawaban
benar
Salah Int Perhitungan jawaban
salah
Skor Int Perhitungan skor
56 Universitas Kristen Petra
Tabel permainan yang tertera pada Tabel 3.4 digunakan untuk menyimpan jenis
permainan yang terdapat dalam aplikasi.
Tabel 3.4 Permainan
Nama Field Tipe Data Keterangan
Id_permainan Varchar (25) Identifikasi permainan
Nama_permainan Varchar (25) Nama permainan
3.4 Desain Interface
Interface merupakan bagian yang paling terpenting dan diperlukan dalam
membuat suatu aplikasi. Dengan membuat desain interface yang baik dapat
mempermudah user dalam menggunakan aplikasi. Desain interface dari Aplikasi
Buku Multimedia Cerita Alkitab pada aplikasi website. Untuk lebih jelasnya dapat
dilihat dari penjelasan dibawah ini.
3.4.1 Desain Interface pada Aplikasi Website
Tampilan dalam aplikasi ini terdapat dua bagian, yaitu tampilan buku cerita
dan tampilan permainan.
A. Halaman Home
Halaman home pada Gambar 3.27 merupakan tampilan awal pada aplikasi
website. Pada halaman home, user diminta untuk melakukan “masuk” atau
”mendaftar”.
Gambar 3.27 Halaman Home
57 Universitas Kristen Petra
B. Halaman Masuk
Halaman masuk pada Gambar 3.28 akan muncul ketika user memilih menu
masuk pada halaman home. Pada halaman masuk, user diminta memasukan
username, apabila sudah pernah mendaftar pada aplikasi ini.
Gambar 3.28 Halaman Masuk
C. Halaman Mendaftar
Halaman mendaftar pada Gambar 3.29 Akan muncul ketika user memilih
menu mendaftar pada halaman home. Pada halaman ini, user akan mendaftar ke
aplikasi dan hanya memasukan username saja. Terdapat juga button X (cancel)
yang berguna untuk keluar dan akan kembali ke halaman home.
Gambar 3.29 Halaman Mendaftar
D. Halaman Cerita
Ketika user sudah melakukan proses pada “masuk”, halaman selanjutnya
akan masuk ke halaman cerita yang terdapat pada Gambar 3.30 disini user dapat
memulai membaca cerita Alkitab. Ada beberapa gambar yang terdapat dalam
58 Universitas Kristen Petra
halaman cerita bisa diklik dan keluar popup yang didalamnya diisikan penjelasan
yang tidak ada dalam cerita. Button dibagian bawah sebelah kiri adalah button next,
dimana berguna ketika user sudah selesai membaca akan pindah ke halaman
selanjutnya dengan menekan button tersebut. Dan button dibagian bawah sebelah
kanan adalah button back, dimana berguna ketika user ingin kembali ke halaman
sebelumnya dapat mengklik button tersebut. Ada juga terdapat button sound yang
berguna untuk membesarkan atau mengkecilkan volume backsound dan button
suara yang berguna untuk memutar kembali suara orang yang membacakan cerita.
Gambar 3.30 Halaman Cerita
E. Halaman Permainan
Terdapat 3 jenis permainan di dalam aplikasi ini.
a. Game Matching
Tampilan awal pada game matching yang terdapat pada Gambar 3.31
Dimana terdapat dua button, user dapat memilih memainkan permainan atau tidak.
Ketika memilih “ya” akan masuk ke tampilan permainan, jika “tidak” akan lanjut
ke tampilan cerita.
59 Universitas Kristen Petra
Gambar 3.31 Tampilan Awal Game Matching
Penjelasan Cara Bermain Permainan Game Matching
Tampilan cara bermain permainan Game Matching yang terdapat pada
Gambar 3.32 akan ditampilkan ketika user ingin bermain permainan. User diminta
untuk membaca penjelasan cara bermain terlebih dahulu sebelum bermain,
dikarenakan lebih mempermudah user dalam bermain permainan Game Matching.
Setelah user sudah mengerti cara bermain permainan, user dapat mengklik button
“centang” yang tersedia di bagian bawah untuk dapat memulai permainan.
Gambar 3.32 Penjelasan Cara Bermain Game Matching
Game Matching Permainan
Tampilan permainan Game Matching yang terdapat pada Gambar 3.33 akan
ditampilkan ketika user sudah selesai membaca penjelasan cara bermain pada
permainan.
60 Universitas Kristen Petra
Gambar 3.33 Tampilan Permainan Game Matching
Game Matching Akhir
Tampilan akhir pada Game Matching yang terdapat pada Gambar 3.34
merupakan hasil akhir permainan yang dimainkan oleh user.
Gambar 3.34 Tampilan Akhir Game Matching
b. Game Jigsaw Puzzle
Tampilan awal pada Game Jigsaw Puzzle yang terdapat pada Gambar 3.35
Dimana terdapat dua button, user dapat memilih memainkan permainan atau tidak.
Ketika memilih “ya” akan masuk ke halaman permainan, jika ”tidak” akan lanjut
ke tampilan cerita.
61 Universitas Kristen Petra
Gambar 3.35 Tampilan Awal Game Jigsaw Puzzle
Penjelasan Cara Bermain Permainan Game Jigsaw Puzzle
Tampilan cara bermain permainan Game Matching yang terdapat pada
Gambar 3.36 akan ditampilkan ketika user ingin bermain permainan. User diminta
untuk membaca penjelasan cara bermain terlebih dahulu sebelum bermain,
dikarenakan lebih mempermudah user dalam bermain permainan Game Jigsaw
Puzzle. Setelah user sudah mengerti cara bermain permainan, user dapat mengklik
button “centang” yang tersedia di bagian bawah untuk dapat memulai permainan.
Gambar 3.36 Penjelasan Cara Bermain Game Jigsaw Puzzle
Game Jigsaw Puzzle Permainan
Tampilan permainan Game Jigsaw Puzzle yang terdapat pada Gambar 3.37
akan ditampilkan ketika user sudah selesai membaca penjelasan cara bermain pada
permainan.
62 Universitas Kristen Petra
Gambar 3.37 Tampilan Permainan Game Jigsaw Puzzle
Permainan Jigsaw Puzzle
Halaman akhir pada Permainan Jigsaw Puzzle yang terdapat pada Gambar
3.38 merupakan hasil akhir permainan yang dimainkan oleh user.
Gambar 3.38 Tampilan Akhir Permainan Jigsaw Puzzle
c. Permainan Mengurutkan Gambar
Tampilan awal pada Permainan Mengurutkan Gambar yang terdapat pada
Gambar 3.39 Dimana terdapat dua button, user dapat memilih memainkan
permainan atau tidak. Ketika memilih “ya” akan masuk ke tampilan permainan, jika
“tidak” maka aplikasi ini selesai dan akan menunjukan rapor dari hasil yang
dimainkan oleh user.
63 Universitas Kristen Petra
Gambar 3.39 Tampilan Awal Permainan Mengurutkan Gambar
Penjelasan Cara Bermain Permainan Game Jigsaw Puzzle
Tampilan cara bermain permainan mengurutkan gambar yang terdapat pada
Gambar 3.40 akan ditampilkan ketika user ingin bermain permainan. User diminta
untuk membaca penjelasan cara bermain terlebih dahulu sebelum bermain,
dikarenakan lebih mempermudah user dalam bermain permainan mengurutkan
gambar. Setelah user sudah mengerti cara bermain permainan, user dapat mengklik
button “centang” yang tersedia di bagian bawah untuk dapat memulai permainan.
Gambar 3.40 Penjelasan Cara Bermain Permainan Mengurutkan Gambar
Permainan Mengurutkan Gambar
Tampilan permainan mengurutkan gambar yang terdapat pada Gambar 3.41
akan ditampilkan ketika user sudah selesai membaca penjelasan cara bermain pada
permainan.
64 Universitas Kristen Petra
Gambar 3.41 Tampilan Permainan Mengurutkan Gambar
Permainan Mengurutkan Gambar
Halaman akhir pada Permainan Mengurutkan Gambar yang terdapat pada
Gambar 3.42 merupakan hasil akhir permainan yang dimainkan oleh user.
Gambar 3.42 Tampilan Akhir Permainan Mengurutkan Gambar
F. Halaman Rapor
Halaman rapor yang terdapat pada Gambar 3.43, dimana ketika user sudah
selesai menggunakan aplikasi ini, dan pada terakhir akan memunculkan halaman
rapor.
65 Universitas Kristen Petra
Gambar 3.43 Halaman Rapor
G. Halaman Selanjutnya
Halaman selanjutnya yang terdapat pada Gambar 3.44 akan muncul ketika
aplikasi sudah selesai digunakan, dan disitu user dapat memilih akan membaca
kembali cerita atau ingin bermain, atau melihat rapor, atau juga ingin keluar dari
aplikasi.
Gambar 3.44 Halaman Selanjutnya
3.5 Rapor
Perhitungan pada rapor dibuat dengan menampilkan banyaknya star, star
didapat dari hasil skor akhir. Cara perhitungan skor akhir di bagi menjadi dua
bagian yaitu, 90% di ambil dari jawaban yang benar dalam permainan,
perhitungannya dapat dilihat dalam Tabel 3.5 perhitungan skor ini hanya berlaku
dalam permainan game matching dan permainan mencocokan gambar, sedangkan
perhitungan skor pada game jigsaw puzzle dapat dilihat dalam Tabel 3.6. Dan dalam
66 Universitas Kristen Petra
perhitungan skor akhir 10% nya di ambil dari waktu dalam menyelesaikan
permainan, dapat dilihat pada Tabel 3.7.
Tabel 3.5 Perhitungan Skor Jawaban Matching dan Mengurutkan
Benar Skor
0 0
1 30
2 60
3 90
Tabel 3.6 Perhitungan Skor Jawaban Jigsaw Puzzle
Benar Skor
0 0
1 10
2 20
3 30
4 40
5 50
6 60
7 70
8 80
9 90
10 100
67 Universitas Kristen Petra
Tabel 3.7 Perhitungan Skor Waktu
Sisa Waktu Skor
0-29 0
>30 10
Skor akhir di dapat dari skor jawaban yang benar di tambahkan dengan skor
sisa waktu dalam permainan yang dimainkan. Perolehan star dalam rapor dapat
dilihat pada Tabel 3.8.
Tabel 3.8 Perhitungan Perolehan star akhir
Skor Star
0 0 star
1-50 1 star
51-80 2 star
81-100 3 star