BAB III ANALISA DAN PERANCANGAN APLIKASI
3.1 Analisa Masalah Tahap awal membangun sebuah perangkat lunak adalah tahap analisa. Analisa masalah dibagi menjadi dua yaitu analisa aplikasi awal maze dengan unsur edukasi matematika dasar dan pengembangan aplikasi maze dengan unsur edukasi matematika dasar.
3.1.1 Analisa Aplikasi Awal Maze dengan Unsur Edukasi Matematika Dasar Untuk menganalisa masalah pada aplikasi yang telah dibangun, diperlukan skenario dari permainan tersebut. Pada subbab berikut akan dijelaskan mengenai skenario dari aplikasi yang telah dibangun yaitu aplikasi maze dengan unsur edukasi matematika dasar.
3.1.1.1 Skenario dari Aplikasi yang Sudah Ada User harus mencari jalan keluar dengan melakukan klik berbagai tombol panah pada keyboard. Jika jalan keluar sudah ditemukan maka dapat dinyatakan selesai dalam permainan.
3.1.1.2 Skenario dari Aplikasi yang Akan Dikembangkan Tahap awal menjalankan aplikasi ini adalah dengan ditampilkannya kotak papan permainan dan pilihan tombol. Saat pemunculannya ke layar permainan, kotak papan langsung muncul. Pada papan permainan ini juga terdapat pilihan
20
21
berupa tombol, yaitu tombol penjumlahan, tombol pengurangan, tombol penjumlahan dan pengurangan, tombol perkalian, tombol pembagian, tombol perkalian dan pembagian. Jika user memilih salah satu tombol, selanjutnya user diwajibkan melakukan klik pada salah satu kotak papan permainan untuk memulai permainan. Setelah langkah tersebut, user harus melakukan klik pada tombol “start” maka secara otomatis komputer akan menampilkan permainan sesuai dengan pilihan user. Jika papan permainan sudah ditampilkan, user menekan tanda panah yang terdapat pada keyboard agar objek tikus dapat mencari jalan keluar. Pada setiap langkah tikus, user akan diberikan soal matematika sesuai dengan pilihan user pada menu. Setelah muncul soal user wajib mengisi inputbox dengan jawaban yang dikehendaki, lalu ketika user melakukan klik pada tombol “Jawab”, maka aplikasi akan memberikan jawaban benar atau salah. Bila jawaban yang diberikan user kepada aplikasi sesuai maka akan mendapatkan message box “Benar”, tetapi bila salah akan muncul message box “Salah”. Objek tikus berjalan sesuai dengan aturan langkah (maze) untuk mencapai pintu keluar dan menyelesaikan soal.
3.1.1.3 Parameter Keberhasilan Aplikasi permainan ini dinyatakan berhasil dibangun apabila : 1. Aplikasi maze sudah dilengkapi dengan berbagai soal matematika dasar yang muncul setiap kali user menggerakkan objek tikus. 2. Soal yang muncul sesuai dengan pilihan user.
22
3.1.1.4 Algoritma Membuat Maze Algoritma akan menggambarkan proses aplikasi permainan maze dengan unsur edukasi matematika dasar. Proses langkah algoritma pada aplikasi permainan dijelaskan sebagai berikut : 1. Membuat papan permainan dengan ukuran tertentu. 2. Menentukan pintu masuk. 3. Proses yang berulang-ulang untuk mengunjungi semua kotak maze berhasil dibuat. Namun pada proses berulang-ulang yang harus dilakukan adalah mengunjungi kotak tetangga yang belum dikunjungi pada papan permainan.
Kemungkinan Membuat Maze Kemungkinan yang terjadi ketika dalam proses yang berulang-ulang : 1. Hanya ada 1 kotak tetangga yang belumdikunjungi, untuk kasus ini kotak tersebut belum dikunjungi. 2. Terdapat lebih dari 1 kotak tetangga yang belum dikunjungi, untuk kasus ini terlebih dahulu dpilih secara acak kotak mana yang dikunjungi. 3. Tidak ada kotak tetangga yang belum dikunjungi,tetapi masih ada kotak yang belum dikunjungi, untuk kasus ini harus dilakukan langkah mundur sampai ditemukan jalan menuju kotak yang belum dikunjungi. 4. Tidak ada kotak tetangga yang belum dikunjungi, karena memang semua kotak telah dikunjungi dalam kasus ini berarti maze sudah selesai dibuat.
23
Berikut ini adalah contoh langkah yang harus dilakukan dalam membuat papan permainan dengan ukuran 3x3.
1
1
2
3 ●
2
3
Gambar 3.1 Bentuk awal papan permainan
Pada langkah awal memilih secara acak pintu masuk dari lapisan luar atau pada koordinat (1,1),(1,2),(1,3),(2,1),(2,3),(3,1),(3,2),(3,3). Misalnya yang dipilih adalah koordinat (3,1). Pada kordinat (3,1) terdapat 2 kotak tetangga yang belum dikunjungi, yaitu koordinat (2,1) dan (3,2). Misalnya hasil pilihan acak adalah kordinat (2,1) maka sisi kotak pada koordinat (3,1) dihilangkan dan kotak pada kordinat (2,1) dikunjungi. Yang terdapat pada Gambar 3.2 di bawah ini
24
1
2
3
●
1
2
3
Gambar 3.2 Kemungkinan langkah ke-1 Gambar 3.2 di atas, dapat dijelaskan sebagai langkah ke-1 dengan titik koordinat (2,1) setelah berada pada posisi awal dengan koordinat (3,1) pada papan permainan, dan terdapat 2 kotak tetangga yang belum dikunjungi, yaitu (1,1) dan (2,2). Misalnya hasil pilihan acak adalah pada koordinat (2,2). Maka sisi kotak (2,2) dihilangkan dan kotak pada koordinat (1,2) dikunjungi. Yang terdapat pada Gambar 3.3 di bawah ini
1
2
3
1
2
●
3
Gambar 3.3 Kemungkinan langkah ke-2 Gambar 3.3 di atas, dapat dijelaskan sebagai langkah ke-2 dengan titik koordinat (2,2) setelah pada posisi sebelumnya titik koordinat (2,1) pada papan permainan,
25
dan terdapat 2 kotak tetangga yang belum dikunjungi, yaitu (1,2) dan (2,3). Misalnya hasil pilihan acak adalah pada koordinat (1,2). Maka sisi kotak (2,2) dihilangkan dan kotak pada koordinat (1,2) dikunjungi. Yang terdapat pada Gambar 3.4 di bawah ini.
1
2
3
1 ●
2
3
Gambar 3.4 Kemungkinan langkah ke-3
Gambar 3.4 di atas, dapat dijelaskan sebagai langkah ke-3 dengan titik koordinat (1,2) setelah pada posisi sebelumnya titik koordinat (2,2) pada papan permainan, dan terdapat 2 kotak tetangga yang belum dikunjungi, yaitu (1,1) dan (1,3). Misalnya hasil pilihan acak adalah pada koordinat (1,1). Maka sisi kotak (1,2) dihilangkan dan kotak pada koordinat (1,1) dikunjungi. Yang terdapat pada Gambar 3.5 di bawah ini.
26
1
2
3
● 1
2
3
Gambar 3.5 Kemungkinan langkah ke-4 Gambar 3.5 di atas,dapat dijelaskan sebagai langkah ke-4 dengan titik koordinat (1,1) setelah pada posisi sebelumnya titik koordinat (1,2) pada papan permainan. Pada koordinat (1,1) sudah tidak ada kotak tetangga yang belum dikunjungi sehingga harus melakukan langkah mundur pada kotak sebelumnya yaitu pada titik koordinat (1,2). Yang terdapat pada Gambar 3.6 di bawah ini. 1
2
3
1
2
●
3
Gambar 3.6 Kemungkinan langkah ke-5 Gambar 3.6 di atas, dapat dijelaskan sebagai langkah ke-5 dengan titik koordinat (1,2) setelah pada posisi sebelumnya titik koordinat (1,1) pada papan permainan. Dan hanya 1 kotak tetangga yang belum dikunjungi yaitu koordinat (1,3) maka
27
sisi kotak pada koordinat (1,2) dihilangkan dan kotak pada koordinat (1,3) dikunjungi. Yang terdapat pada Gambar 3.7 di bawah ini. 1
2
3
1
2
3
●
Gambar 3.7 Kemungkinan langkah ke-6 Gambar 3.7 di atas, dapat dijelaskan sebagai langkah ke-6 dengan titik koordinat (1,3) setelah pada posisi sebelumnya titik koordinat (1,2) pada papan permainan. Dan hanya 1 kotak tetangga yang belum dikunjungi yaitu pada koordinat (2,3) maka sisi kotak pada koordinat (1,3) dihilangkan dan kotak pada koordinat (2,3) dikunjungi.. Yang terdapat pada Gambar 3.8 di bawah ini. 1
2
3
1
2
3
●
Gambar 3.8 Kemungkinan langkah ke-7 Gambar 3.8 di atas, dapat dijelaskan sebagai langkah ke-7 dengan titik koordinat (2,3) setelah pada posisi sebelumnya titik kordinat (1,3) pada papan permainan..
28
Hanya terdapat 1 kotak tetangga yang belum dikunjungi yaitu koordinat (3,3) maka sisi kotak pada koordinat (2,3) dihilangkan dan kotak pada koordinat (3,3) dikunjungi. Yang terdapat pada Gambar 3.9 di bawah ini.
1
2
3
1
2 ●
3
Gambar 3.9 Kemungkinan langkah ke-8
Gambar 3.9 di atas, dapat dijelaskan sebagai langkah ke-8 dengan titik koordinat (3,3) setelah pada posisi sebelumnya titik kordinat (2,3). Hanya terdapat 1 kotak tetangga yang belum dikunjungi yaitu koordinat (3,2) maka sisi kotak pada koordinat (3,3) dihilangkan dan kotak pada koordinat (3,2) dikunjungi.Terdapat pada Gambar 3.10 di bawah ini.
29
1
2
3
1 ●
2
3
Gambar 3.10 Bentuk akhir papan permainan Gambar 3.10 di atas, dapat dijelaskan kotak pada koordinat (3,2) sebagai kotak terakhir dan sudah tidak ada kotak tetangga yang belum dikunjungi, karena seluruh kotak sudah semua dikunjungi. Artinya maze sudah berhasil dibuat, dan pintu keluar terdapat pada koordinat (3,2).
3.1.1.5 Analisa Terhadap Function yang Terdapat pada Source Code Di dalam source code terdapat 19 function yang dapat dikelompokkan menjadi 8 fungsi utama, diantaranya : 1. Kelompok fungsi yang berkaitan dengan algoritma pembuatan maze secara logis,
yaitu
Function
initMaze,
Function
objectCell,
Function
isThereNotVisited, Function visitMaze, Function objectNotVisited. 2. Kelompok fungsi yang berkaitan dengan menggambar maze yang berukuran besar, yaitu Function initializeZoomedMaze, Function drawZoomedMouse, Function drawWallOfZoomedMaze, Function drawAndAnimateZoomedMaze, Function animateMaze, Function drawZoomedMaze, Function animateMouse.
30
3. Kelompok fungsi yang berkaitan dengan menggambar maze yang berukuran kecil, yaitu Function drawMaze, Function drawMarkerForZoomedArea, Function drawMouse. 4. Fungsi untuk menggambar garis, yaitu Function drawLine. 5. Fungsi untuk menangani tombol keyboard yang ditekan, yaitu Function handlekey. 6. Fungsi untuk menangani jika mouse telah menemukan jalan keluar, yaitu Function handleExitFound. 7. Fungsi
untuk
menangani
perubahan
maze,
yaitu
Function
handleGameChange. 8. Fungsi yang akan dilaksanakan ketika aplikasi berjalan untuk pertama kali, yaitu Function initialize
3.2 Perancangan Pengembangan Aplikasi
Rancangan
tampilan
papan
permainan
aplikasi
maze
memiliki
perancangan kotak papan. Rancangan awal tampilan papan permainan dapat dilihat pada gambar di bawah ini :
31
Gambar 3.11 Rancangan tampilan awal papan permainan pada aplikasi yang sudah ada
Dalam Gambar 3.11 disajikan tampilan awal pada aplikasi maze ketika user melakukan klik pada saat menu awal. Bila user melakukan klik pada tombol penjumlahan, berikut tampilan awal yang terdapat pada Gambar 3.12
32
Gambar 3.12 Rancangan tampilan awal ketika user akan memulai permainan
Dalam Gambar 3.12 disajikan perintah kepada user untuk memulai permainan dengan menekan tombol panah ke arah bawah untuk dapat menyelesaikan tahap soal pertama yang akan dimulai. Dengan menekan tombol panah kearah bawah, maka aplikasi akan menampilkan soal yang harus diselesaikan dengan baik untuk dapat melanjutkan pada tahap soal berikutnya.
33
Gambar 3.13 Rancangan tampilan papan ketika permainan menampilkan soal
Dalam Gambar 3.13 disajikan tampilan user melakukan perjalanan awal dengan menggerakkan objek tikus pada aplikasi dengan menekan tombol arah ke bawah pada keyboard sehingga muncul soal pertama dengan operasi penjumlahan yang keluar pada kotak papan permainan. Soal yang keluar merupakan bagian dari rintangan tahap awal sebelum objek tikus dapat menemukan jalan keluar. Dan untuk menjawab soal tersebut diperlukan sebuah kotak yang diberi nama “inputbox”. Inputbox ini berjenis teks yang diberikkan oleh aplikasi kepada user untuk dapat mengisi jawaban. Bila user telah mengisi jawaban berupa angka pada inputbox yang telah tersedia, maka user diwajibkan menekan tombol “jawab”. Tombol “jawab” berfungsi untuk mengetahui jawaban yang telah dimasukkan user adalah jawaban “benar” atau “salah”.
34
Gambar 3.14 Tampilan papan permainan pada mode ketika user menjawab benar.
Dalam Gambar 3.14 disajikan tampilan papan permainan pada aplikasi maze setelah user melakukan klik pada tombol “Jawab” dan aplikasi memberikan jawabannya “Benar”. Jawaban dapat dinyatakan benar bila user memasukkan jawaban angka sesuai dengan rancangan aplikasi . Tetapi bila jawaban user tidak sesuai dengan rancangan aplikasi, maka aplikasi akan memunculkan tampilan gambar pada layar monitor sebagai berikut.
35
Gambar 3.15 Tampilan papan permainan pada mode ketika user menjawab salah
Dalam Gambar 3.15 menjelaskan ketika user melakukan klik pada tombol “jawab”, namun aplikasi memberikan jawaban “Salah, ayo coba lagi”. Jawaban dapat dinyatakan salah bila user memasukkan jawaban tidak sesuai dengan rancangan aplikasi. Namun aplikasi memberikan kesempatan sebanyak 1x untuk memperbaiki jawaban user, pada soal yang sama dengan mengisi jawaban pada inputbox yang tersedia. Tetapi bila kesempatan yang diberikan aplikasi kepada user untuk mengisi jawaban masih salah, maka aplikasi akan memunculkan tampilan gambar pada layar monitor sebagai berikut.
36
Gambar 3.16 Tampilan papan permainan pada mode ketika user menjawab salah dan aplikasi memberikan jawaban yang benar.
Dalam Gambar 3.16 dijelaskan ketika user menjawab soal pada inputbox yang telah diberikan aplikasi dan jawaban user masih salah ketika diberikan kesempatan 1x oleh aplikasi, maka aplikasi akan memberikan bantuan kepada user dengan memberikan jawaban yang sesuai dengan rancangan aplikasi. Setelah user menerima jawaban yang sesuai dari aplikasi maka user dapat melanjutkan ke tahap soal berikutnya yang diberikan oleh aplikasi, Bila user telah menjawab soal keseluruhan dengan benar yang diberikan aplikasi maka objek tikus sampai pada pintu keluar, dan aplikasi akan memunculkan tampilan gambar pada layar monitor sebagai berikut.
37
Gambar 3.17 Tampilan papan permainan pada mode akhir ketika user menjawab benar dan terdapat pilihan tambah bilik atau kembali ke menu.
Dalam gambar 3.17 dijelaskan tampilan permainan pada aplikasi maze setelah user menyelesaikan soal seluruh operasi penjumlahan dengan melakukan klik pada tombol “Jawab”. Dan aplikasi memberikan pesan “Benar“ maka user sampai di akhir,sehingga soal operasi penjumlahan dinyatakan selesai. Dan aplikasi memberikan pesan kepada user untuk “back to menu”. Adapun maksud dari tombol “back to menu” adalah supaya user dapat memilih jenis operasi lain yang terdapat pada aplikasi tersebut.
38
3.2.1 Tampilan Menu Dalam tahap pengembangan aplikasi maze dengan unsur matematika maka tampilan yang akan muncul di awal aplikasi ada seperti pada Gambar 3.8. Jika user menekan tombol “Penjumlahan”, maka aplikasi yang akan berjalan adalah operasi “Penjumlahan”, tetapi dengan soal yang berbeda pula. Namun jika user menekan tombol “Pengurangan”, maka aplikasi yang akan berjalan adalah operasi “Pengurangan”. jika user menekan tombol “Penjumlahan dan pengurangan”, maka
aplikasi
yang
akan
berjalan
adalah
operasi
“Penjumlahan
dan
Pengurangan”. jika user menekan tombol “Perkalian”, maka aplikasi yang akan berjalan adalah operasi “Perkalian”. jika user menekan tombol “Pembagian”, maka aplikasi yang akan berjalan adalah operasi “Pembagian”. Jika user menekan tombol “Perkalian dan Pembagian”, maka aplikasi yang akan berjalan adalah operasi “Perkalian dan Pembagian”. Pada setiap operasi bila ada terdapat kesalahan dalam menjawab soal maka aplikasi akan tetap memberikan kesempatan 1x untuk memperbaiki kesalahannya. Namun bila masih tetap ada kesalahan,maka aplikasi akan memberikan bantuan dengan memberikan jawaban yang sebenarnya. Sehingga user dapat menyelesaikan soal dan meneruskan perjalanan untuk mencapai pintu keluar.
39
Gambar 3.18 Tampilan menu pada saat awal aplikasi
3.2.2 Flowchart Adapun flowchart yang terjadi pada aplikasi maze dengan unsur matematika yang terdapat dalam gambar berikut:
40
Start
Menu
Tampilkan Maze
Keyboard Ditekan ?
False
True
Gerakkan Mouse
True
Pintu Keluar Ditemukan
Tampilkan Pilihan Tambah Bilik atau Ke Menu
False
Soal Jenis Operasi
User memilih jenis Operasi
Ke Menu
Ubah Jumlah Bilik End
Gambar 3.19 Flowchart Awal Permainan
True
41
Start
Menampilkan menu pilihan jenis operasi
User memilih Operasi Penjumlahan?
True
Tampilka nSoal
Jawab Soal
False User memilih Operasi Pengurangan?
True Tampilka n Soal
Jawab Soal
True
Tampilka n Soal
Jawab Soal
True
Tampilka n Soal
Jawab Soal
False User memilih Operasi Perkalian?
False User memilih Operasi Pembagian?
False User memilih Operasi Penjumlahan dan pengurangan?
True
Tampilka n Soal
Jawab Soal
Tampilka n Soal
Jawab Soal
False True User memilih Operasi Perkalian dan Pembagian?
End
Gambar 3.20 Flowchart Menu Permainan
42
Gambar 3.21 Flowchart operasi penjumlahan ( Berlanjut )
43
Gambar 3.22 Flowchart Operasi Penjumlahan ( Lanjutan ) Dalam gambar 3.21 dan 3.22 disajikan tampilan flowchart operasi penjumlahan dengan nilai masukkan variabel X untuk menyatakan jumlah elemen array dengan masukkan nilai input pada keyboard secara random (acak) yang dimulai dari angka 1 hingga angka 9.
44
Nilai yang diinput melalui keyboard akan disimpan pada variabel X, dan variabel Y untuk menyatakan jumlah elemen array dengan masukkan nilai input pada keyboard secara random (acak) yang dimulai dari angka 1 hingga angka 9.Nilai yang diinput melalui keyboard akan disimpan pada variabel Y. Kemudian inisialisasi nilai yang ditanya adalah variabel “P” maka operand yang diinisialisasi adalah variabel X dan Y, dengan menggunakan operator penjumlahan (+), lalu ditampilkan soal dari variabel X dan variabel Y dengan operator penjumlahan (+). Kemudian input jawaban bila benar jawaban variabel P sesuai dengan aplikasi maka terdapat kalimat “Benar”, tetapi bila salah terdapat kalimat “Salah”. Dan mendapatkan kesempatan untuk dapat mengisi jawaban kembali. Tetapi bila salah kembali dalam mengisi jawaban, maka akan diberikan jawaban yang benar oleh aplikasi. Begitu pula terdapat flowchart dalam bentuk pengurangan yang ada pada Gambar 3.23 berikut.
45
Gambar 3.23 Flowchart operasi pengurangan (Berlanjut)
46
Gambar 3.24 Flowchart operasi pengurangan (Lanjutan)
Dalam Gambar 3.23 dan 3.24 disajikan tampilan flowchart operasi penjumlahan dengan inisialisasi nilai yang ditanya adalah variabel “P” maka operand yang diinisialisasi adalah variabel X dan Y, karena operasi ini mencari variabel P, maka variabel X tidak boleh lebih kecil dari variabel Y, dan untuk menghindari agar hasil dari operasi pengurangan tidak menjadi negatif (-), maka dengan menggunakan perumpamaan X sebagai “temp”, sehingga X = Y dan pengganti dari nilai Y, agar menjadi temp = Y. Bila sudah terlihat hasil nilai dari X lebih besar daripada Y maka ditampilkan soal dan input jawaban, bila benar
47
jawaban variabel P sesuai dengan aplikasi maka terdapat kalimat “Benar”, tetapi bila salah terdapat kalimat “Salah”. Terdapat pula flowchart dalam bentuk operasi perkalian
yang terdapat pada
Gambar 3.25 sebagai berikut.
Gambar 3.25 Flowchart operasi perkalian (Berlanjut)
48
Gambar 3.26 Flowchart Operasi Perkalian (Lanjutan)
Dalam Gambar 3.25 dan 3.26 disajikan tampilan flowchart operasi perkalian dengan inisialisasi nilai yang ditanya adalah variabel “P” maka operand yang diinisialisasi adalah variabel X dan Y, dengan menggunakan operator perkalian (*) lalu ditampilkan soal dari variabel X dan variabel Y dengan operator perkalian (*). Kemudian input jawaban bila benar jawaban variabel P sesuai dengan aplikasi maka terdapat kalimat “Benar”, tetapi bila salah terdapat kalimat “Salah”. Terdapat pula flowchart operasi pembagian yang menjadi bagian dari metode belajar matematika dasar, yang terdapat dalam aplikasi maze ini. Flowchart operasi pembagian yang ada pada gambar 3.29 sebagai berikut.
49
Gambar 3.27 Flowchart operasi pembagian (Berlanjut)
50
Gambar 3.28 Flowchart Operasi Pembagian (Lanjutan) Dalam gambar 3.27 dan 3.28 disajikan tampilan flowchart operasi pembagian dengan inisialisasi nilai yang ditanya adalah variabel “P” maka operand yang diinisialisasi adalah variabel X dan Y, dengan menggunakan operator perkalian (/) supaya mendapatkan hasil yang baik dan tidak menjadi sebuah pecahan desimal,maka nilai yang dimasukkan adalah X * Y, karena nilai dari variabel X tidak boleh lebih besar dari Y. Bila nilai variabel X / Y maka akan menjadi hasil pecahan desimal. Kemudian input jawaban bila benar jawaban variabel P sesuai dengan aplikasi maka terdapat kalimat “Benar”, tetapi bila salah terdapat kalimat “Salah”.
