BAB III ANALISA PERANCANGAN DAN PEMODELAN SISTEM 3.1 Struktur Navigasi Struktur navigasi adalah urutan alur informasi dari suatu aplikasi multimedia. Dengan menggunakan struktur navigasi yang tepat maka suatu aplikasi multimedia mempunya pedoman dan arah informasi yang jelas. Gambar 3.1 Struktur Navigasi Dari struktur navigasi diatas menjelaskan bahwa tampilan awal dari aplikasi ini adalah halaman pembuka atau utama. Pada halaman pembuka tersebut terdapat tombol menu pembelajaran. Pada halaman selanjutnya terdapat 4 buah tombol yakni, mengenal angka, menjumlahkan angka, mengisi angka yang hilang, dan menghitung gambar, yang masing masing akan terhubung ke halaman yang diinginkan jika dipilih. 25
3.2 Flowchart Diagram 3.2.1 Flowchart Diagram Aplikasi pembelajaran ini memiliki satu skenario. Untuk menjalankan skenario tersebut dibutuhkan suatu prosedur. Penulis membuat rancangan prosedur awal dalam proses menjalankan aplikasi dalam bentuk diagram alir (flowchart). Berikut ini merupakan flowchart yang menggambarkan alur prosedur untuk menjalankan aplikasi 1. Flowchart Tampilan Utama Gambar 3.2 Flowchart Tampilan Utama Keterangan : A : Halaman Menu Pembelajaran 26
2. Flowchart Menu Pembelajaran Keterangan : A : Halaman Menu Pembelajaran B : Halaman Menu Mengenal Angka C : Halaman Menu Menjumlahkan Angka D : Halaman Menu Mengisi Angka yang hilang E : Halaman Menu Menghitung Gambar Gambar 3.3 Flowchart Menu Pembelajaran 3. Flowchart Menu Mengenal Angka Gambar 3.4 Flowchart Menu Mengenal Angka 27
4. Flowchart Menu Mengisi Angka yang hilang Gambar 3.5 Flowchart Menu Mengisi Angka yang hilang 5. Flowchart Menu Menghitung Gambar Gambar 3.6 Flowchart Menu Menghitung Gambar 28
3.3 Use Case Diagram 3.3.1 Use Case Aplikasi Permainan Edukatif Use Case pada aplikasi ini akan menggambarkan kemampuan sebuah sistem yang nantinya akan dijalankan oleh aktor, disini aktor adalah pengguna. Dengan kata lain aktivitas yang nantinya akan dilakukan oleh aktor mampu difasilitasi oleh sistem dan digambarkan dalam bentuk diagram. Diagram ini menunjukkan fungsionalitas suatu sistem dan bagaimana sistem berinteraksi dengan user. Gambar 3.7 Use Case Diagram Aktor utama pada aplikasi ini adalah user. Dari identifikasi aktor tersebut, didapatkan suatu use case diagram yang menampilkan interaksi antara user atau pengguna dengan use case. 29
Berikut adalah deskripsi use case yang terdapat pada gambar 3.4: Tabel 3.1 Definisi Use Case. No Use Case Deskripsi 1. Masuk ke dalam Menu Utama Proses untuk memulai permainan 2. Masuk ke Menu Pembelajaran Proses untuk memilih menu pembelajaran yang akan disampaikan dalam permainan 3. Memilih Pembelajaran Mengenal Angka Proses melakukan permainan berupa game pengenalan angka dari 0 sampai 9 4. Memiih Pembelajaran Menjumlahkan Angka Proses melakukan permainan berupa game penjumlahan angka 5. Memilih Pembelajaran Mengisi Proses melakukan permainan berupa Angka yang hilang game mengisi angka yang hilang 6. Memilih Pembelajaran Menghitung Gambar Proses melakukan permainan berupa game menghitung gambar 3.3.2 Skenario Use Case Aplikasi Permainan Edukatif 1. Skenario Use Case Masuk ke dalam Menu Utama Tabel 3.2 Skenario Use Case Masuk ke dalam Menu Utama. Nomor 1 Nama Masuk ke dalam Menu Utama Tujuan Main Deskripsi Proses untuk memulai permainan Kondisi awal Pemain berada di menu utama Aksi Aktor Menekan Tombol Play Menampilkan menu pembelajaran Kondisi akhir Aplikasi game menampilkan menu pembelajaran 2. Skenario Use Case Masuk ke Menu Pembelajaran Tabel 3.3 Skenario Use Case Masuk ke Menu Pembelajaran Nomor 2 Nama Masuk ke Menu Pembelajaran Tujuan Memilih jenis permainan Deskripsi Proses untuk memilih jenis permainan Kondisi awal User melihat pilihan menu berupa jenis pembelajaran 30
Aksi Aktor User memilih jenis pembelajaran yang diinginkan dengan cara memilih menu mengenal angka, menjumlahkan angka, mengisi angka yang hilang, menghitung gambar Jika memilih mengenal angka, akan memulai perbelajaran mengenal angka Jika memilih menjumlahkan angka, akan memulai perbelajaran menjumlahkan angka Jika memilih mengurutkan angka, akan memulai perbelajaran mengisi angka yang hilang Kondisi akhir Jika memilih menghitung gambar, akan memulai perbelajaran menghitung gambar User memulai pembelajaran sesuai menu pembelajaran yang dipilih 3. Skenario Use Case Memilih Pembelajaran Mengenal Angka Tabel 3.4 Skenario Use Case Memilih Pembelajaran Mengenal Angka Nomor 3 Nama Memilih Pembelajaran Mengenal Angka Tujuan Memainkan menu pembelajaran mengenal angka Deskripsi Memulai pembelajaran mengenal angka Kondisi awal User melihat angka yang telah disediakan dari angka 0 sampai angka 9 Aksi Aktor User memilih salah satu angka yang telah disediakan dari angka 0 sampai angka 9 denga cara menekan angka yang dipilih Menampilkan suara dari angka yang dipilih oleh user Kondisi akhir User mendengar keterangan berupa suara dari angka yang dipilih 31
4. Skenario Use Case Memiih Pembelajaran Menjumlahkan Angka Tabel 3.5 Skenario Use Case Memiih Pembelajaran Menjumlahkan Angka Nomor 4 Nama Memiih Pembelajaran Menjumlahkan Angka Tujuan Memainkan menu pembelajaran menjumlahkan angka Deskripsi Memulai pembelajaran menjumlahkan angka Kondisi awal User melihat dua buah angka dengan tanda tambah ditengahnya, sekaligus melihat jawaban yang ada dibawah angka tersebut Aksi Aktor User memilih salah satu jawaban yang benar disisi bawah dari penjumlahan kedua angka yang telah disediakan Menampilkan suara yes apabila user memilih jawaban yang benar, dan menampilkan suara Ups,coba lagi apabila jawaban user tersebut salah Kondisi akhir User mendengar keterangan berupa suara yes apabila user memilih jawaban yang benar, dan mendengar suara Ups,coba lagi apabila jawaban user tersebut salah 5. Skenario Use Case Memilih Pembelajaran Mengisi Angka yang hilang Tabel 3.6 Skenario Use Case Memilih Pembelajaran Mengisi Angka yang hilang Nomor 5 Nama Memilih Pembelajaran Mengisi Angka yang hilang Tujuan Memainkan menu pembelajaran mengisi angka yang hilang Deskripsi Memulai pembelajaran mengisi angka yang hilang Kondisi awal User melihat empat buah angka sejajar dengan titiktitik kosong disisi kiri angka terakhir yang tampil dilayar pembelajaran, sekaligus melihat jawaban yang ada dibawah angka tersebut Aksi Aktor User memilih salah satu jawaban yang benar disisi bawah untuk mengisi titik titik kosong disebelah kiri angka terakhir yang tampil dilayar, dengan tujuan, agar tercipta urutan angka yang benar pada akhir pembelajaran 32
Kondisi akhir Menampilkan suara Bagus sekali apabila user memilih jawaban yang benar, dan menampilkan suara Ups,coba lagi apabila jawaban user User mendengar keterangan b berupa l h suara Bagus sekali apabila user memilih jawaban yang benar, dan mendengar suara Ups,coba lagi apabila jawaban user tersebut salah 6. Skenario Use Case Memilih Pembelajaran Menghitung Gambar Tabel 3.7 Skenario Use Case Memilih Pembelajaran Menghitung Gambar Nomor 6 Nama Memilih Pembelajaran Menghitung Gambar Tujuan Memainkan menu pembelajaran menghitung gambar Deskripsi Memulai pembelajaran menghitung gambar Kondisi awal User melihat sebuah kotak persegi panjang dengan 8 buah gambar buah didalamnya, sekaligus melihat pertanyaan tentang berapa jumlah buah terpilih yang ada didalam kotak persegi panjang tersebut pada bagian bawah dari kotak tersebut, terdapat pula jawaban yang telah disediakan untuk menjawab pertanyaan pada sisi yang sama dari sisi pertanyaan Aksi Aktor User memilih salah satu jawaban yang benar disisi bawah untuk untuk menjawab tentang berapa banyak buah yang terpilih dalam kotak persegi panjang yang telah disediakan pada layar pembelajaran Menampilkan suara Luar Biasa apabila user memilih jawaban yang benar, dan menampilkan suara Ups,coba lagi apabila jawaban user Kondisi akhir User mendengar keterangan b berupa l h suara Luar Biasa apabila user memilih jawaban yang benar, dan mendengar suara Ups,coba lagi apabila jawaban user tersebut salah 33
34