T1 612010706 BAB III

45

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.

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

Buat id ya

tidak

tidak

Periksa id admin ya

tidak

Apakah id dan

password betul ya

Gambar 3.1. Flowchart untuk Login

Menu

Selesai

Modul Admin Mulai

Login

Input id dan password

Periksa id dan password

Modul untuk membuat id baru

Periksa apakah

file ada tidak

ya

Gambar 3.2. Flowchart untuk Menulis Data ke File

Mulai

Cari file di lokasi yang ditentukan

Buat file

Cari akhir penulisan data di file

Tulis data di file

Periksa apakah

file ada tidak

ya

Gambar 3.3. Flowchart untuk Membaca Data dari File

Mulai

Cari file di lokasi yang ditentukan

Kembali ke tampilan sebelumnya (dengan pesan error)

Baca data dari file

Tampilkan data yang dibaca

Apakah ada

Interup ya

tidak

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.

Mulai

Kosongkan variabel

Load data suara ke variabel

Mainkan suara yang dipilih

Selesai

Lakukan proses interup

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

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.

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

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

3.4. Setting Program

Setting yang digunakan oleh program ini adalah setting default untuk program XNA pada Window Aplication. Setting tersebut dapat dilihat pada Gambar 3.9.

3.5. 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 A

Pilihan B

Pilihan C

Pilihan D

Jawaban

1 2+2 = 1 2 3 4 D

Tabel 3.3. Contoh Database dari File XML Hasil Dalam Bentuk Tabel

Nomer Id Topik Waktu Nilai

1 aaa pecahan 09/06/2011

01:19

9

2 aaa pecahan 10/06/2011

21:12

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.

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

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

3.4. Setting Program

Setting yang digunakan oleh program ini adalah setting default untuk program XNA pada Window Aplication. Setting tersebut dapat dilihat pada Gambar 3.9.

3.5. 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 A

Pilihan B

Pilihan C

Pilihan D

Jawaban

1 2+2 = 1 2 3 4 D

Tabel 3.3. Contoh Database dari File XML Hasil Dalam Bentuk Tabel

Nomer Id Topik Waktu Nilai

1 aaa pecahan 09/06/2011

01:19

9

2 aaa pecahan 10/06/2011

21:12