BAB III PERANCANGAN 3.1. Flowchart Program

Transkripsi

1 BAB III PERANCANGAN Aplikasi ini dirancang dengan tujuan untuk membantu anak dalam membantu pembelajaran matematika. Dengan menggunakan tampilan yang menarik dan dengan menggunakan permainan sehingga anak tidak bosan dalam menggunakan aplikasi ini. Agar aplikasi ini sesuai dengan kurikulum yang berlaku, maka aplikasi ini dibuat dengan berdasarkan kurikulum pendidikan yang terbaru. Selain itu, agar anak-anak bisa lebih mudah memahami pengetahuan yang ada, maka skripsi ini dibuat dengan berkonsultasi dengan guru matematika Flowchart Program Pada saat user pertama kali menjalankan program, maka akan tertampil halaman login, user bisa memilih untuk membuat ID terlebih dahulu atau tidak. Apabila user memilih untuk membuat ID terlebih dahulu, maka user akan diminta untuk memasukkan ID dan password yang nantinya akan menjadi ID yang baru. Apabila ID yang baru sudah dibuat, maka tampilan akan kembali ke login. Pada saat login, ID dan password akan diperiksa terlebih dahulu, apabila user login dengan ID dan password user, maka user akan masuk ke tampilan menu. Sedangkan apabila user login dengan menggunakan ID dan password admin, maka user akan masuk ke tampilan admin. Proses untuk membaca dan menulis data di file tidak jauh berbeda. Hal itu bisa dilihat pada Gambar 3.2 dan Gambar 3.3. Untuk membaca data di file, apabila file tidak ada, maka akan tertampil pesan error. Pesan ini harus diproses terlebih dahulu (misalnya dengan menghiraukan pesan errornya), karena apabila pesan error tersebut tidak diproses terlebih dahulu, maka aplikasi akan mengalami error dan berhenti dengan paksa. 45

2 46 Mulai Login Buat id ya tidak tidak Input id dan password Modul untuk membuat id baru Periksa id dan password Periksa id admin ya Apakah id dan password betul tidak ya Menu Modul Admin Selesai Gambar 3.1. Flowchart untuk Login

3 47 Mulai Cari file di lokasi yang ditentukan Periksa apakah file ada tidak Buat file ya Cari akhir penulisan data di file Tulis data di file Selesai Gambar 3.2. Flowchart untuk Menulis Data ke File

4 48 Mulai Cari file di lokasi yang ditentukan Periksa apakah file ada ya tidak Kembali ke tampilan sebelumnya (dengan pesan error) Baca data dari file Tampilkan data yang dibaca Selesai Gambar 3.3. Flowchart untuk Membaca Data dari File

5 49 Mulai Kosongkan variabel Load data suara ke variabel Mainkan suara yang dipilih Apakah ada Interup tidak ya Lakukan proses interup Selesai Gambar 3.4. Flowchart Pada Saat Memproses Audio Yang pertama kali dilakukan pada saat akan memainkan audio adalah mengosongkan memory audio pada variabel terlebih dahulu, baru kemudian meload file suara / audio yang akan dimainkan. Hal ini dilakukan karena XNA memiliki batasan jumlah file audio yang di load pada suatu saat, yaitu kurang lebih 30 suara. Setelah itu suara yang dipilih akan dimainkan. Dan apabila ada interupt, maka interupt tersebut akan dijalankan terlebih dahulu. Setelah interupt selesai, maka suara yang sebelumnya terkena interup akan dimainkan lagi dari awal.

6 Bagan Program Berikut adalah bagan dari aplikasi yang dibuat: Gambar 3.5. Bagan Cara Kerja Pada Saat Aplikasi Mulai Dijalankan Pada saat aplikasi mulai dijalankan, user akan diminta untuk melakukan login, hal ini dilakukan untuk keamanan data user yang lain. Setelah proses login selesai, data user akan disimpan ke dalam variabel yang disediakan. Setelah data selesai diload, user akan masuk ke menu awal, dimana user diminta untuk memilih 1 dari 3 menu yang ada. Gambar 3.6. Bagan Cara Kerja Aplikasi Saat User Memilih Teori Pada Pilihan Menu Apabila user memilih teori, maka pertama-tama user akan diminta untuk memilih topik dari teori yang ingin dilihat. Setelah memilih topik, maka user akan melihat teori yang ada, serta user juga bisa melihat atau mencoba contoh soal apabila ada. Setelah proses tempilan teori selesai, maka tampilan akan kembali ke tampilan teori awal, kecuali apabila user memilih untuk kembali ke pemilihan topik.

7 51 Gambar 3.7. Bagan Cara Kerja Aplikasi Saat User Memilih Soal-Soal Pada Pilihan Menu Apabila user memilih soal, maka pertama-tama user akan diminta untuk memilih topik dari soal yang ingin dikerjakan. Setelah memilih topik, maka user akan melihat soal-soal untuk topik yang dipilih. Setelah user selesai mengerjakan soal-soal yang ada, maka hasil dari pengerjaan soal yang dilakukan akan ditampilkan. Setelah itu, maka tampilan akan kembali ke pemilihan topik. Gambar 3.8. Bagan Cara Kerja Aplikasi Saat User Memilih Permainan Pada Pilihan Menu Apabila user memilih permainan, maka pertama-tama user akan diminta untuk memilih permainan yang ingin dimainkan, setelah itu user diminta untuk memilih tingkat kesulitan yang diinginkan. Kemudian permainan yang dipilih akan ditampilkan. Setelah permainan selesai, maka hasil dari permainan tersebut akan ditampilakan. Setelah itu user akan kembali ke pemilihan permainan. Permainan ini memiliki sebuah proteksi, dimana user harus mengerjakan soal-soal terlebih dahulu untuk bisa mengakses permainan ini.

8 Contoh Program using System; using System.Collections.Generic; using System.Linq; using Microsoft.Xna.Framework; using Microsoft.Xna.Framework.Audio; using Microsoft.Xna.Framework.Content; using Microsoft.Xna.Framework.GamerServices; using Microsoft.Xna.Framework.Graphics; using Microsoft.Xna.Framework.Input; using Microsoft.Xna.Framework.Media; using Microsoft.Xna.Framework.Net; using Microsoft.Xna.Framework.Storage; namespace WindowsGame1 /// <summary> /// This is the main type for your game /// </summary> public class Game1 : Microsoft.Xna.Framework.Game GraphicsDeviceManager graphics; SpriteBatch spritebatch; public Game1() graphics = new GraphicsDeviceManager(this); Content.RootDirectory = "Content"; } /// <summary> /// Allows the game to perform any initialization it needs to before starting to run. /// This is where it can query for any required services and load any non-graphic /// related content. Calling base.initialize will enumerate through any components /// and initialize them as well. /// </summary> protected override void Initialize() // TODO: Add your initialization logic here } base.initialize(); /// <summary> /// LoadContent will be called once per game and is the place to load /// all of your content.

9 53 /// </summary> protected override void LoadContent() // Create a new SpriteBatch, which can be used to draw textures. spritebatch = new SpriteBatch(GraphicsDevice); } // TODO: use this.content to load your game content here /// <summary> /// UnloadContent will be called once per game and is the place to unload /// all content. /// </summary> protected override void UnloadContent() // TODO: Unload any non ContentManager content here } /// <summary> /// Allows the game to run logic such as updating the world, /// checking for collisions, gathering input, and playing audio. /// </summary> /// <param name="gametime">provides a snapshot of timing values.</param> protected override void Update(GameTime gametime) // Allows the game to exit if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed) this.exit(); // TODO: Add your update logic here } base.update(gametime); /// <summary> /// This is called when the game should draw itself. /// </summary> /// <param name="gametime">provides a snapshot of timing values.</param> protected override void Draw(GameTime gametime) GraphicsDevice.Clear(Color.CornflowerBlue); // TODO: Add your drawing code here base.draw(gametime); }}} Kode 3.1. Kode XNA Default yang Tertulis pada Saat Membuat Proyek Baru

10 54 Kode 3.1. Diatas adalah kode XNA yang muncul pada saat programmer membuat proyek baru. Dari kode tersebut dapat dilihat bahwa XNA memiliki 5 fungsi utama, yaitu: a. protected override void LoadContent(), yaitu bagian untuk memasukkan data dari luar ke dalam variabel. b. protected override void UnloadContent(), yaitu bagian untuk menghapus data yang berada pada variabel. c. protected override void Initialize(), yaitu bagian dimana programmer melakukan inisialisasi d. protected override void Update(GameTime gametime), yaitu bagian dimana programmer menginput perintah-perintah atau fungsi-fungsi yang nantinya akan dipanggil secara terus menerus. e. protected override void Draw(GameTime gametime), yaitu bagian dimana programmer menaruh tampilan dari program XNA yang dibuat Setting Program Gambar 3.9. Setting Dari Program yang Dibuat

11 55 Setting yang digunakan oleh program ini adalah setting default untuk program XNA pada Window Aplication. Setting tersebut dapat dilihat pada Gambar Perancangan File Untuk XNA, perancang tidak bisa menggunakan akses ke database seperti mikrosoft SQL, Opera, dan lain-lain. Sehingga untuk menyimpan data perancang hanya bisa menggunakan XML untuk pengganti database. File XML yang digunakan ada 3 jenis, yaitu: a. User, file ini berisi data Id dan password milik user. b. Soal, file ini berisi data soal-soal yang ada. Data didalamnya ditulis dengan digolongkan menjadi soal, pilihan jawaban, dan jawaban c. Hasil, file ini berisi data hasil yang didapat setelah selesai mengerjakan soal. Data di dalamnya ditulis dengan digolongkan menjadi Id, nilai hasil, waktu pengerjaan, dan topik. Tabel 3.1. Contoh Database dari File XML User Dalam Bentuk Tabel Nomer Id Password 1 aaa aaa 2 bbb bbb Tabel 3.2. Contoh Database dari File XML Soal Dalam Bentuk Tabel Nomer Soal Pilihan Pilihan Pilihan Pilihan Jawaban A B C D = D = C

12 56 Tabel 3.3. Contoh Database dari File XML Hasil Dalam Bentuk Tabel Nomer Id Topik Waktu Nilai 1 aaa pecahan 09/06/ :19 2 aaa pecahan 10/06/ :12 3