interface. use case, activity diagram, flowchart dan database · Dan dari hasil survei yang...

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

http://www.petra.ac.id

http://dewey.petra.ac.id/dgt_directory.php?display=classification

http://digilib.petra.ac.id/help.html


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>>


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


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


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


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


Game Jigsaw Puzzle


game jigsaw puzzle. Activity Diagram Game Jigsaw Puzzle akan dibahas pada

Gambar 3.6.

Gambar 3.6 Activity Diagram Game Jigsaw Puzzle


Permainan Mengurutkan Gambar


permainan mengurutkan gambar. Activity diagram permainan mengurutkan gambar

akan dibahas pada Gambar 3.7.

Gambar 3.7 Activity Diagram Permainan Mengurutkan Gambar


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


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


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


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


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


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


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


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


Start

Load Data Nilai Rapor Dari Database

Menampilkan Nilai Rapor Untuk Game

Puzzle


Mengurutkan

RETURN

N


Matching

Rapor

Gambar 3.16 Flowchart Rapor


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


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.


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



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


b. Flowchart Algoritma Program Jigsaw Puzzle


cara bermain pada Game Jigsaw Puzzle. Flowchart algoritma program

Game Jigsaw Puzzle akan dibahas pada Gambar 3.21.

Start


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


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



cara perhitungan skor yang diperoleh pada Game Jigsaw Puzzle. Flowchart

algoritma program Game Jigsaw Puzzle akan dibahas pada Gambar 3.22.

Start


Jumlah_Puzzle = 9


Puzzle ke i berada di posisi ke-i (posisi yang tepat)

Salah=Salah+1

Benar=Benar +1

i++

N

YY



Waktu_Skor = 10

Waktu_Skor = 0


N

Y

N

End

Gambar 3.22 Flowchart Algoritma Program Perhitungan Skor Game Jigsaw

Puzzle


c. Flowchart Algoritma Program Permainan Mengurutkan Gambar


cara bermain pada game matching. Flowchart algoritma program

Permainan Mengurutkan Gambar akan dibahas pada Gambar 3.23.

Start


Ambil = 0Jumlah_Gambar = 3Mx = posisi x mouseMy = posisi y mouse

Inisialisasi gambarSoalInisialisasi gambarJawaban

Ambil == 0


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


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



cara perhitungan skor yang diperoleh pada Permainan Mengurutkan

Gambar. Flowchart algoritma program Permainan Mengurutkan Gambar


Start


Jumlah_Gambar = 3

i < Jumlah_GambarPosisi gambarSoal =

gambarJawaban

Salah++

Benar++

i++

N

YY



Waktu_Skor = 10

Waktu_Skor = 0


N

Y

N

End

Gambar 3.24 Flowchart Algoritma Program Perhitungan Skor Permainan

Mengurutkan Gambar


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


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.


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


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>


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


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


Tabel permainan yang tertera pada Tabel 3.4 digunakan untuk menyimpan jenis

permainan yang terdapat dalam aplikasi.

Tabel 3.4 Permainan


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


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


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.


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.


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.


Gambar 3.35 Tampilan Awal Game Jigsaw Puzzle

Penjelasan Cara Bermain Permainan Game Jigsaw Puzzle

Tampilan cara bermain permainan Game Matching yang terdapat pada



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.


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.


Gambar 3.39 Tampilan Awal Permainan Mengurutkan Gambar

Penjelasan Cara Bermain Permainan Game Jigsaw Puzzle

Tampilan cara bermain permainan mengurutkan gambar yang terdapat pada



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


Tampilan permainan mengurutkan gambar yang terdapat pada Gambar 3.41

akan ditampilkan ketika user sudah selesai membaca penjelasan cara bermain pada

permainan.


Gambar 3.41 Tampilan 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.


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


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


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

interface. use case, activity diagram, flowchart dan database · Dan dari hasil survei yang...

Documents

Transcript of interface. use case, activity diagram, flowchart dan database · Dan dari hasil survei yang...