5

BAB III

PELAKSANAAN KERJA MAGANG

3.1 Kedudukan dan Koordinasi

Kerja magang dilakukan pada bagian Software Development, dengan posisi

sebagai Full-Stack Intern. Proyek pembuatan aplikasi education games ini

diawasi dan didampingi oleh Bapak Jessen selaku direktur yang juga

memegang langsung tim developer.

3.2 Tugas yang Dilakukan Selama Kerja Magang

Tugas yang dilakukan adalah merancang dan membangun aplikasi

education games. Pembangunan aplikasi ini menggunakan bahasa

pemrograman yakni PHP, CSS, HTML, dan JavaScript.

3.3 Perancangan dan Desain

Berdasarkan hasil dari analisa kebutuhan yang telah dilakukan, dibuat

perancangan aplikasi yang dibuat berdasarkan kebutuhan yang dijabarkan.

Berikut merupakan rancangan dari aplikasi yang telah dibuat.

3.3.1. Gantt Chart

Beberapa hari pada minggu pertama dari praktek kerja magang digunakan untuk

berkenalan dengan tim yang ada dalam PT. Karya Integrasi Mandiri dan sisa

harinya digunakan untuk mempelajari dasar-dasar HTML, JavaScript, CSS dan

mulai mengerjakan Typing Test. Pada minggu kedua, dilanjutkan dengan

mengerjakan Mathematics dan mulai mengerjakan Memory Games. Pada minggu

ketiga masih melanjutkan dan menyelesaikan Memory Games, dan mulai

6

mengerjakan Tic Tac Toe. Pada minggu keempat, Tic Tac Toe diselesaikan dan

mulai pengerjaan Hangman selama dua minggu juga. Pada minggu kelima,

penyelesaian Hangman dan mulai pengerjaan Bubble Shooter selama tiga minggu.

Pada minggu kedelapan, education games kemudian di testing.

Tabel 3.1 Tabel Gantt Chart

3.3.2. Sitemap

Gambar 3.1 Sitemap

3.3.3. Flowchart

A. Halaman Home

Halaman Home merupakan halaman utama yang memiliki komponen,

seperti Header, Category untuk memilih kategori education games,

footer, dan juga button untuk login dan daftar. Terdapat card yang dapat

di klik, dimana jika sebuah card di klik akan me-refer ke halaman

education games yang telah ditetapkan. Sebagai contoh, jika user

mengklik card Bubble Shooter, maka halaman Bubble Shooter akan

No Kegiatan Minggu

1 2 3 4 5 6 7 8 1 Membuat Typing Test 2 Membuat Mathematics 3 Membuat Memory Games 4 Membuat Tic Tac Toe 5 Membuat Hangman 6 Membuat Bubble Shooter 7 Testing edu-game

7

keluar, dan begitu pula dengan card yang lainnya. Gambar flowchart

dapat dilihat pada Gambar 3.1.

Gambar 3.2 Home Flowchart

Pada Gambar 3.2, dapat dilihat bahwa apabila user memilih Bubble Shooter, maka

modul Bubble Shooter akan dijalankan. Apabila user memilih Hangman, maka modul

Hangman akan dijalankan. Apabila user memilih Mathematics, maka modul

Mathematics akan dijalankan. Apabila user memilih Memory Games, maka modul

Memory Games akan dijalankan. Apabila user memilih Tic Tac Toe, maka modul Tic

Tac Toe akan dijalankan. Apabila user memilih Typing Test, maka modul Typing Test

akan dijalankan. Hal ini sesuai dengan fungsi halaman home, yaitu untuk

mengarahkan user untuk memilih kategori education game yang diinginkan

8

B. Halaman Bubble Shooter

Dalam halaman bubble shooter akan dimulai dengan halaman loading,

kemudian akan lanjut ke halaman dimana user dapat menggerakkan arah

kemana bubble akan ditembakkan, dan jika user mengklik kiri, maka bubble

akan ditembakkan ke arah yang telah user tunjuk. Bubble yang lebih dari dua

akan dijatuhkan dan score akan bertambah sesuai banyaknya bola dikali seratus.

Jika user terlalu banyak salah menembakkan bubble, maka baris baru akan ter-

generate setiap lima kali user menembakkan bubble yang jumlah warna yang

sama kurang dari tiga.

Jika warna bubble yang telah diselesaikan atau dihabiskan dalam board, maka

warna bubble yang telah habis dalam board tidak akan ter-generate untuk

ditembakkan lagi. User dapat memenangkan permainan dengan menghabiskan

semua bubble yang ada dalam board. Apabila user memenangkan atau kalah

dalam permainan bubble shooter, maka user dapat mengklik lagi untuk men-

generate ulang kembali board baru dan memulai permainan kembali. Gambar

flowchart dapat dilihat pada Gambar 3.3.

9

Gambar 3.3. Bubble Shooter flowchart

Seperti yang dilihat pada Gambar 3.3, pada modul Bubble Shooter langkah

awal adalah inisialisasi permainan. Kemudian load image. Dan Menambahkan

event mouse. Lalu inisialisasi array tile 2 dimensi. Dan update game state.

Kemudian generate random level, dan generate random bubble untuk user.

Kemudian button klik dalam mouse. Jika state game ready, maka user dapat

menembakkan bubble. Jika tidak, maka permainan baru yang dikeluarkan.

Kemudian get posisi mouse.

10

C. Halaman Hangman

Dalam halaman hangman, soal akan ter-generate dan user harus menebak apa

jawaban dari soal-soal yang telah diberikan. Jika benar, maka akan

memunculkan alfabet yang telah dipilih. Jika tebakan user benar, maka akan

mengeluarkan pesan bahwa anda menang. Dan jika user salah menebak, maka

kesalahan dalam menebak akan bertambah hingga enam kali kesalahan, dan

user akan kalah. Jika user kalah, maka akan memunculkan jawaban yang

seharusnya ditebak, dan gambar hangman menjadi sebuah gambar yang lengkap

dengan bentuk orang tergantung.

Kemudian, ada tombol reset untuk memuat board baru dengan soal yang

berbeda. Jawaban hanya dapat dijawab dengan mengklik keyboard yang telah

di-generate dalam permainan. Huruf alfabet yang telah dipilih benar maupun

salah tidak dapat dipilih lagi, sehingga user tidak dapat melakukan kesalahan

ketika mengklik alfabet yang sama lagi. Gambar flowchart dapat dilihat pada

Gambar 3.4.

11

Gambar 3.4. Hangman flowchart

Seperti yang dilihat pada Gambar 3.4, pada modul Hangman langkah awal

adalah men-generate pertanyaan kemudian, men-generate keyboard dalam

permainan, dan men-generate gambar hangman. Ketika kesalahan tidak lebih

dari enam, maka akan di cek apakah terjadi kesalahan. Jika iya, maka gambar

Hangman akan di update. Jika tidak, maka update jawaban lalu menunculkan

jawaban. Dan ada button reset untuk me-reset permainan. Lalu jika kesalahan

lebih dari enam, maka permainan dianggap berakhir dengan status user kalah.

D. Halaman Mathematics

Pada halaman Mathematics, ada beberapa button yang disediakan. Mulai dari

button start yang akan memberikan arahan dan petunjuk untuk memulai

education-games tersebut. Kemudian ada empat button, yakni tambah, kurnag,

12

kali, dan bagi. Dibawah ke-empat button, ada tiga radio button yang berguna

untuk memilih tingkat kesusahan dalam memilih soal. Jika user telah memilih

tingkat kesulitan yang ada, dan user memilih salah satu(1) dari empat(4) button

diatasnya, maka soal akan diberikan dalam bentuk alert dan ada text box untuk

mengisi jawabannya. Jika user menjawab dengan benar, maka score benar akan

bertambah. Jika user menjawab salah, maka score salah akan bertambah dan

akan menunjukkan jawaban benarnya. Serta ada persentase score dari total soal

yang telah user kerjakan. Semakin banyak user menjawab benar, semakin tinggi

pula persenan score user mendekati seratus persen.

Kemudian pada bagian bawah radio button, ada dua button lagi, untuk

mengecek nilai, dan juga untuk me-reset nilai. Jika user telah mengerjakan soal-

soal matematika, maka user dapat mengecek seberapa banyak dan seberapa

besar nilai score yang telah user peroleh. Serta user juga dapat me-reset nilai

jika user ingin melakukan uji coba untuk mendapatkan nilai sempurna yakni

seratus persen. Gambar flowchart dapat dilihat pada Gambar 3.5.

13

Gambar 3.5. Mathematics flowchart

Seperti yang terlihat pada Gambar 3.5, pada modul mathematics, langkah awal

adalah tampilan alert selamat datang. Lalu inisialisasi random angka.

Kemudian jika user mencentang tombol mudah, maka maxValue akan di set

sama dengan sepuluh, jika tidak maka akan di cek apakah user mencentang

tombol sedang. Jika iya, maka maxValue akan di set menjadi enam puluh, jika

tidak maka maxValue menjadi seribu.

14

Jika tombol tambah ditekan, maka numA dan numb sama dengan maxValue

random angka. Kemudian numC sama dengan numA ditambah numB, lalu

tampilkan jawaban yang memanggil modul ans. Jika tombol kurang ditekan,

maka numA dan numb sama dengan maxValue random angka. Kemudian numC

sama dengan numA dikurang numB, lalu tampilkan jawaban yang memanggil

modul ans. Jika tombol kali ditekan, maka numA dan numb sama dengan

maxValue random angka. Kemudian numC sama dengan numA dikali numB,

lalu tampilkan jawaban yang memanggil modul ans. Jika tombol bagi ditekan,

maka numA dan numb sama dengan maxValue random angka. Kemudian numC

sama dengan numA dibagi numB, dan untuk membulatkan nilai keatas jika nilai

diatas 0.5 dan kebawah jika nilai dibawah 0.4, lalu tampilkan jawaban yang

memanggil modul ans. Jika tombol cek nilai ditekan, maka akan mengeluarkan

alert yang berisikan nilai. Jika tombol reset nilai ditekan, maka akan mereset

nilai yang telah terakumulasi.

E. Halaman Memory Games

Dalam halaman Memory Games terdapat 24 tiles yang dapat diputar(flip), jika

kedua tiles yang diputar sama maka kedua tiles akan terbuka, dan dapat memilih

tiles yang lain. Jika tidak, maka kedua tiles akan balik kembali dan user dapat

memilih tiles lain yang cocok. Jika semua tiles terbuka maka akan diberikan

alert yang menunjukkan bahwa user telah menyelesaikan permainan dan akan

men-generate board baru. Gambar flowchart dapat dilihat pada Gambar 3.6.

15

Gambar 3.6. Memory Games flowchart

Seperti yang dilihat pada Gambar 3.6, pada modul Memory Games langkah awal

yang dilakukan adalah jika semua tiles terbuka, maka akan men-generate board

baru, lalu alert telah menyelesaikan permainan. Jika tidak maka akan mengecek

apakah tiles yang dipilih user sama atau tidak. Jika tidak maka tiles akan tertutup

kembali, jika iya maka tiles akan terbuka.

F. Halaman Tic Tac Toe

Dalam halaman Tic Tac Toe, user dapat langsung bermain dengan cara memilih

salah satu dari sembilan kotak yang tersedia, dan computer akan memulai

gilirannya hingga sembilan kotak tersebut terpenuhi. Jika kesembilan kotak

terpenuhi, dan tidak ada yang menang maka nilai Ties(seri) akan bertambah.

16

Jika user menang, maka score You(user) akan betambah. Dan jika computer

menang, maka Computer akan tertambah.

Dibawah dari kotak dan score, ada tiga button tersedia, Play Again, Game Help,

dan Quit Game. Dimana jika Play Again diklik, maka akan men-generate kotak

baru dengan cara bermain computer yang berbeda atau cara bermain computer

random. Kemudian Game Help akan mengeluarkan alert berupa petunjuk cara

bermain Tic Tac Toe. Dan button Quit Game akan mengembalikan user ke

halaman home. Gambar flowchart dapat dilihat pada Gambar 3.7.

Gambar 3.7 Tic Tac Toe flowchart

Seperti yang terlihat pada Gambar 3.7, pada modul tic tac toe langkah awal

adalah mengecek apakah tombol Play Again ditekan. Jika iya, maka akan

memulai permainan baru dan mengeluarkan alert. Jika tidak maka akan

17

mengecek jika tombol Game Help ditekan atau tidak. Jika iya, maka

mengeluarkan alert dan mengeluarkan petunjuk cara bermain. Selanjutnya

akan mengecek apakah tombol Quit Game ditekan atau tidak. Jika iya, maka

akan kembali ke halaman home.

Kemudian ketika block belum terisi penuh, maka user memilih salah satu dari

sembilan block yang ada, kemudian computer akan memilih secara random

dari block yang ada. Jika block sudah terisi penuh, akan dicek jika player

menang maka score you akan ditambah satu. Jika computer menang, maka

score computer akan ditambah satu. Jika tidak ada yang menang, maka score

ties(seri) akan ditambah 1.

G. Halaman Typing Test

Halaman ini dapat dikunjungi jika user memilih halaman Typing Test. Ketika

user memasuki halaman tersebut, user dapat memilih tingkat kesulitan

permainan. Ada tiga tingkat kesulitan dimana user dapat memilih, yaitu

beginner (mudah), Novice (sedang), dan Expert (sulit). Kemudian setelah

memilih tingkat kesulitan, user dapat menekan button Start Tying Test yang jika

di tekan akan men-generate soal-soal yang ada sesuai dengan tingkat kesulian

yang telah dipilih oleh user.

Kemudian, jika user telah selesai mengetik dan menekan button DONE,

halaman akan menghitung seberapa lama waktu yang digunakan untuk

mengetik dan memperkirakan akan mengetik seberapa banyak kata per menit.

Jika user menekan button Start Typing Test lagi, akan men-generate sebuah

18

soal baru lagi untuk user tantang. Gambar flowchart dapat dilihat pada Gambar

3.8.

Gambar 3.8. Typing Test flowchart

Seperti yang terlihat pada Gambar 3.8, pada modul Typing Test langkah awal

yang dilakukan adalah inisialisasi message dalam array. Lalu user memilih

tingkat kesulitan dan menekan tombol start. Kemudian message akan

dikeluarkan secara acak. Jika text box message ditekan maka akan muncul

alert, jika tidak maka akan user akan meng-input jawaban sesuai dengan output

yang diberikan. Jika input sama dengan output, maka akan muncul alert dengan

19

mengetik banyaknya kata dalam waktu berapa sekon, serta kecepatan sekitar

berapa kata dalam menit. Jika tidak maka muncul alert dan memiliki kesalahan,

tetapi mengetik dengan kecepatan berapa kata per menit.

3.3.4. Mockup

Setelah membuat flowchart, berikutnya adalah tampilan mockup yang dapat

merepresentasikan tampilan hasil jadi. Berikut merupakan mockup yang telah

dibuat selama praktek kerja magang.

A. Mockup Home

Dalam tampilan mockup home, terdapat header yang memiliki isi logo dari

client, kategori, dan juga button untuk login dan daftar. Di tengah halaman,

terdapat susunan card yang berisikan logo dan nama education games. Dan

dibawah ada bagian footer.

Gambar 3.9 Mockup Home

Footer

20

B. Mockup Bubble Shooter

Dalam halaman bubble shooter terdapat header yang berisikan logo client, dan

kategori education games. Dibawah header, terdapat bubble area dimana

bubble akan ter-generate di dalam area tersebut. Dibawah bubble area, terdapat

dua bubble yang disiapkan. Bubble yang berada di bagian tengah bawah

disiapkan untuk menembak ke arah mouse user, dan yang satunya lagi

dipersiapkan untuk mengetahui warna bubble selanjutnya yang akan

ditembakkan. Terdapat bagian score yang akan bertambah jika user

menembakkan dan menjatuhkan bubble. Bubble akan terjatuh jika bubble

menabrak atau menempel lebih dari dua, jika tidak maka bubble akan menempel

pada arah user menembakkan bubble. User akan kalah jika bubble dalam

bubble area melewati batas dibawah bubble area.

Gambar 3.10 Mockup Bubble Shooter

21

C. Mockup Hangman

Dalam halaman hangman, terdapat header, dan dibawah header ada gambar

hangman yang telah dipersiapkan. Pada sebelah kanan gambar, terdapat angka

yang menunjukkan berapa banyak user salah yang akan bertambah jika user

salah menebak gambar. Seiring angka bertambah yang dikarenakan user salah

menebak, maka gambar juga akan bertambah menjadi sebuah gambar hangman

yang lengkap. Jika gambar hangman tersebut lengkap dan angka

kesalahan(wrong) mencapai angka enam maka user akan dianggap kalah.

Dibawah gambar terdapat soal yang menunjukkan soal untuk menebak

bahasa pemrograman. Dan dibawah soal terdapat letak jawaban yang jika benar

tebakan user, akan memunculkan kata yang ditebak. Dan dibawah letak

jawaban, terdapat sebuah keyboard yang di-generate untuk user gunakan

dengan cara di klik untuk menebak jawaban tersebut. Dibawah bagian keyboard

ada button untuk reset yang berguna untuk men-generate board baru.

Gambar 3.11. Mockup Hangman

Wrong: 0 of 6

22

D. Mockup Mathematics

Dalam halaman mathematics terdapat header, dan dibawah header terdapat

button start yang dapat memunculkan cara untuk memulai board mathematics.

Dibawah button start ada area yang berisikan empat button yang jika ditekan

akan mengeluarkan soal dari button yang dipilih. Kemudian ada tiga radio

button yang menunjukkan tingkat kesulian soal, dan dua button terakhir untuk

mengecek nilai dan me-reset nilai, yang dapat digunakan jika user telah

mengerjakan sebuah soal mathematics. Soal, dan nilai yang di cek akan

berbentuk alert jika diklik oleh user.

Gambar 3.12. Mockup Mathematics

23

E. Mockup Memory Games

Dalam halaman memory games, terdapat header. Dibawah header terdapat dua

puluh empat tiles yang telah ter-generate secara acak. Dalam masing-masing

tiles terdapat sebuah alfabet yang memiliki pasangan. Jika user meng-klik salah

satu tiles yang ada, user harus mencari pasangan tersebut. Jika user salah meng-

klik tiles dan tiles yang terpilih tidak sama, maka kedua tiles akan kembali

menutup. Jika tiles yang dipilih sama, maka kedua tiles akan terbuka dan user

dapat melanjutkan memilih tiles yang lain.

Jika user menyelesaikan semua tiles yang ada, sebuah alert akan keluar dan jika

menekan button ok pada alert, sebuah board baru akan ter-generate. Dan user

dapat melanjutkan permainan dengan board yang baru.

Gambar 3.13. Mockup Memory Games

24

F. Mockup Tic Tac Toe

Dalam halaman tic tac toe, terdapat header. Dibawah header terdapat sebuah

board yang memiliki sembilan kotak yang dapat user pilih untuk jalan, yang

kemudian computer akan berjalan setelah user memilih. Sebelah kanan board

terdapat box yang berisikan score user, computer, dan seimbang(ties). Dibawah

board terdapat tiga button, button play again berguna untuk reset, atau men-

generate board baru jika user telah menyelesaikan permainan. Game help akan

mengeluarkan alert tentang cara bermain. Dan quit game akan mengembalikan

user ke halaman home education games.

Gambar 3.14. Mockup Tic-Tac-Toe

25

G. Mockup Typing Test

Dalam halaman typing test, terdapat header. Dibawah header terdapat board

yang berisikan tingkat kesulitan dalam bentuk radio button, kemudian dibawah

radio button terdapat buton untuk memulai typing test. Dibawah button start,

ada area output untuk soal yang disiapkan untuk user ketik dalam input area,

dan jika user telah selesai, user harus mengklik button done. Kemudian akan

keluar sebuah alert dimana jika user membuat kesalahan, maka alert akan

mengeluarkan alert user memiliki kesalahan, dan prakiraan waktu user

mengetik seberapa banyak dalam waktu per menit. Dan jika user menyelesaikan

tanpa kesalahan, maka akan mengeluarkan alert seberapa lama user

menyelesaikan soal tersebut dan prakiraan waktu user mengetik banyaknya kata

per menit.

Gambar 3.15. Mockup Typing Test

26

3.3.5. Hasil Implementasi Halaman

Berikut merupakan hasil implementasi dari aplikasi yang terdirid dari halaman

home, halaman bubble shooter, halaman hangman, halaman mathematics, halaman

memory games, halaman tic tac toe, dan halaman typing test. Data yang terdapat

dalam laporan ini masih bersifat sementara karena penggunaan data masih

menggunakan data dummy.

A. Halaman Home

Halaman Home diimplementasikan sesuai dengan rancangan mockup.

Education games akan berpindah sesuai dengan icon atau gambar di klik

oleh user

Gambar 3.16. Implementasi Halaman Home.

Setelah icon atau gambar di klik oleh user, maka halaman akan diarahkan

ke halaman education games yang dipilih.

B. Halaman Bubble Shooter

Halaman Bubble Shooter diimplementasikan sesuai dengan rancangan

mockup.

27

Gambar 3.17. Implementasi Halaman Permainan Bubble Shooter

Gambar 3.18. Permainan Berakhir

Gambar 3.17 merupakan halaman utama pada bubble shooter. Permainan

dimulai ketika user mengklik dan menembakkan bubble yang ada pada

bagian bawah dan juga ketika user mendapatkan score. Dengan

berkurangnya bubble yang telah habis dari area bubble, maka terjadi

pengurangan dalam bubble yang juga akan di tembakkan. Pada gambar 3.18

permainan selesai jika user menang atau kalah dengan bubble yang ada

keluar dari batas yang telah diberikan.

28

C. Halaman Hangman

Halaman Hangman diimplementasikan sesuai dengan rancangan mockup.

Gambar 3.19. Halaman Permainan Hangman

Gambar 3.20. Permainan Berakhir Ketika Menang

Gambar 3.21. Permainan Berakhir Ketika Kalah

29

Pada gambar 3.19 menjadi halaman utama dalam permainan Hangman.

Dibawah gambar hangman yang sudah tersedia ada jenis pertanyaan yang

sudah disiapkan, kemudian slot untuk menjawab serta keryboard dalam

permainan. Wrong akan bertambah ketika user salah memprediksi jawaban,

dan keyboard yang sudah diklik oleh user akan menjadi tidak bisa diklik

lagi hingga permainan baru dijalankan lagi. Tebakan user yang benar akan

dimunculkan pada slot yang telah disediakan. Pada gambar 3.20 adalah

potongan screenshot ketika user memenangkan permainan dan pada gambar

3.21 ketika user salah enam kali dalam mencoba menebak jawaban.

D. Halaman Mathematics

Halaman Mathematics diimplementasikan sesuai dengan rancangan

mockup.

Gambar 3.22. Implementasi Halaman Mathematics

30

Gambar 3.23. Implementasi Pengerjaan Soal

Gambar 3.24. Implementasi Pengecekan Score Ketika Sudah Mengerjakan

Soal

Pada gambar 3.22 adalah halaman utama dalam education games

mathematics. Terdapat button start, yang berguna untuk memandu user

dalam cara bermain. Dalam pengerjaan soal, dapat dilihat pada gambar 3.23,

soal dimunculkan dalam bentuk alert dan user dapat mengerjakan soal

tersebut secara langsung dan mengklik ok akan menujukkan jawaban benar

dari soal tersebut. Button cek nilai berguna ketika user mengecek history

dari soal yang telah user kerjakan, dimana button tersebut dapat diakses

ketika user telah mengerjakan soal, jika user belum mengerjakan soal sama

sekali, maka pada gambar 3.24 akan mengeluarkan alert bahwa user belum

31

mengerjakan soal apapun. Tombol untuk reset tidak mengeluarkan alert

apapun, sehingga jika user mengklik tombol reset maka user dapat

mengecek reset akan berjalan ketika user telah mengerjakan soal.

E. Halaman Memory Games

Halaman Memory Games diimplementasikan sesuai dengan rancangan

mockup.

Gambar 3.25. Jawaban Yang Didapat Sama

Gambar 3.26. User Menyelesaikan Memory Games

Dalam implementasi halaman Memory Games, dapat dilihat pada gambar

3.25, dimana terdapat 24 tlies yang menunjukkan sebuah logo. Tiles tersebut

32

dapat diputar sehingga menunjukkan sebuah alfabet yang dapat dilihat pada

gambar 3.25 bahwa user mendapatkan 2 pasang alfabet yang benar. Apabila

user membuka tiles yang pasangannya tidak sama, tiles akan menutup

kembali, yang kemudian kembali pada gambar 3.24. Pada gambar 3.26, user

menyelesaikan permainan Memory Games sehingga halaman mengeluarkan

alert. Ketika user mengklik ok, maka board baru akan di-generate kembali.

F. Halaman Tic Tac Toe

Halaman Tic Tac Toe diimplementasikan sesuai dengan rancangan mockup.

Gambar 3.27. User(X) dan Computer(O) memilih tile yang ada

Pada Gambar 3.27 menjadi halaman utama ketika permainan dipanggil.

Dalam permainan terdapat sembilan kotak yang dapat dipilih. User dapat

melihat cara bermain ketika user memilih button game help pada bagian

bawah. User memulai permainan ketika user memilih salah satu kotak yang

ada di dalam, dapat dilihat pada gambar 3.27, lalu dilanjutkan dengan giliran

computer. Score hasil permainan dapat dilihat pada sebelah kanan, dimana

ada 3 slot score, yakni ties yang berarti seri, computer yang berarti computer

33

memenangkan permainan, dan you yang berarti user memenangkan

permainan.

G. Halaman Typing Test

Halaman Typing Test diimplementasikan sesuai dengan rancangan mockup.

Gambar 3.28. User mengklik start untuk men-generate soal

Pada gambar 3.28 dapat dilihat bahwa ketika user masuk kedalam halaman

Typing Test terdapat tombol start dan radio button untuk memilih tingkat

kesulitan ketika soal akan di-generate. User menekan tombol start untuk

men-generate soal dan user dapat memilih tingkatan yang lebih sulit dengan

memilih expert, atau lebih mudah jika memilih beginner. Halaman

mengeluarkan alert bahwa user mengetik dengan benar, berupa lama waktu

yang user perlukan dalam pengetikan dan juga prakiraan user dapat

mengetik seberapa banyak kata dalam satuan menit. Apabila user

melakukan kesalahan dalam pengetikan, alert yang muncul hanya

memberitahukan kepada user bahwa terjadi kesalahan dalam pengetikan,

dan juga prakiraan berapa banyaknya kata yang user ketik dalam satuan

34

menit. User juga tidak dapat melakukan kecurangan seperti copy paste

karena akan ada alert yang muncul.

3.3.6. Kendala yang Ditemukan Beberapa kendala yang dihadapi ketika pelaksanaan kerja magang diantaranya

adalah sebagai berikut.

1. Front End cukup sering berantakan, misalnya :

a. Pada Memory Games : Jika dimasukkan CSS Raja Tutor, ukuran font

menjadi tidak selaras dengan ukuran box yang telah disediakan.

b. Pada Hangman : Keyboard tidak dapat berbentuk qwerty.

c. Pada Tic Tac Toe : Terdapat bug jika user memilih menaruh X di

tengah(ketika user mendapat giliran jalan pertama), computer tidak

akan berjalan dikarenakan computer tetap memilih ditengah.

d. Pada Mathematics : Susah mencari angka random.

e. Pada Typing Test : Jika tingkat kesulian tidak dipilih, maka akan

error dan tidak dapat dilakukan apapun kecuali di refresh.

f. Pada Bubble Shooter: Belum dapat mengubah warna bubble yang

telah disiapkan untuk menembak, dengan bubble yang selanjutnya

ditembakkan.

2. Kurangnya pengalaman dalam menggunakan JavaScript sehingga

memerlukan waktu lebih lama untuk memahami dan menyelesaikan

pekerjaan.

3.3.7. Solusi Atas Kendala yang Ditemukan

Adapun solusi dari kendala yang dihadapi saat pelaksanaan kerja magang adalah

sebagai berikut.

35

1. Memperbaiki sizing, position dan color menggunakan CSS

a. Mengecilkan ukuran font, sehingga ukuran font dan kotak menjadi

sama.

b. Jika menggunakan bentuk qwerty, urutan dan bentuk menjadi rusak

sehingga tetap menggunakan urutan a hingga z

c. Menggunakan if dalam if lagi dalam urutan jalan untuk mengatasi

error tersebut.

d. Selain menggunakan math.rand, supervisor menyarankan untuk

menggunakan sebuah function yang menggunakan maxValue yang

me-return hari, jam, menit, dan detik yang kemudian di mod

dengan maxValue.

e. Membuat sebuah tingkatan lagi yang untuk men-counter jika

pilihan tidak dipilih.

f. Memastikan bahwa fitur yang telah jadi memenuhi kriteria yang

ada.

2. Mempelajari JavaScript secara mandiri dan lebih lanjut, mencari informasi

dalam stackoverflow, w3school, menonton video dan juga dibantu oleh

supervisor dalam pemahaman JavaScript.