Bab 3 Metode dan Perancangan Sistem -...

21

Bab 3

Metode dan Perancangan Sistem

3.1 Metode dan Analisis Kebutuhan Sistem

3.1.1 Metode Perancangan

Metode yang digunakan dalam penelitian ini adalah metode

perancangan sistem dengan menggunakan Prototype model. Prototype

model merupakan model perancangan sistem dimana kebutuhan

diubah menjadi sistem yang bekerja (Working System) yang diperbaiki

secara terus menerus sesuai dengan kebutuhan dari kerjasama antara

analis dengan pengguna (Sommerville, 2001). Prototyping juga bisa

dibangun melalui beberapa tools pengembang untuk

menyederhanakan proses.

Gambar 3.1 Prototyping Model (Sommerville, 2001).

22

Proses dari perancangan sistem untuk aplikasi ”Ayo Belajar

Pintar” dengan menggunakan prototype model, dapat dijelaskan

sebagai berikut :

1. Pengumpulan Kebutuhan Pengguna

Tahap pertama dalam perancangan sistem dengan metode

prototype adalah mengidentifikasi kebutuhan dasar pengguna melalui

proses requirement dan analisis. Pada tahap ini, penulis

mengumpulkan data yang dibutuhkan untuk penelitian lewat proses

wawancara kepada guru pengajar di TK Realfunrainbow Preschool.

Setelah itu penulis melakukan analisa kebutuhan sistem yang

dikembangkan berdasarkan permintaan pengguna sistem.

2. Perancangan Prototype

Informasi yang didapat kemudian digunakan sebagai acuan

untuk mengembangkan prototype (cetakan biru) untuk perancangan

sistem. Dalam perancangan sistem ini, penulis membuat empat

prototype sesuai dengan requirement dari user hingga sistem yang

dibuat sesuai dengan keinginan user. Prototype yang dibangun

merupakan tipe reusable prototype. Prototype lama akan digunakan

lagi untuk disempurnakan menjadi sistem yang akan digunakan

Berikut prototype yang dibuat dalam proses perancangan sistem:

Prototype 1

Pada prototype pertama, dibuat aplikasi pembelajaran yaitu belajar

angka, belajar huruf, berhitung, dongeng, dan bahasa inggris.

Materi yang dimasukan kedalam aplikasi adalah referensi buku

yang diperoleh dari user.

23

Prototype 2

Pada perancangan prototype kedua, penulis menambahkan fitur

latihan soal pada aplikasi yang telah dibuat sesuai dengan

permintaan user. Latihan soal yang ada adalah 20 soal pilihan

ganda dengan tiga pilihan jawaban pada setiap soal.

Prototype 3

Developer menambahkan beberapa materi yang belum dimasukan

serta melengkapi pengertian dan menambahkan suara dari tiap

materi.

Prototype 4

Aplikasi yang dibuat sudah sesuai dengan permintaan user dan

siap untuk diujikan kepada guru serta siswa.

3.1.2 Perangkat Keras dan Perangkat Lunak

Analisis kebutuhan meliputi tiga hal yaitu: kebutuhan sistem,

hardware (perangkat keras) dan software (perangkat lunak).

3.1.2.1 Kebutuhan Sistem

Kebutuhan sistem dalam penelitian ini adalah wawancara.

Wawancara dilakukan kepada Ibu Dian Wijayanti S.pd selaku guru

pengajar di sekolah TK Realfunrainbow untuk mengetahui bahan atau

materi yang dibutuhkan dalam pembuatan aplikasi pembelajaran ini.

Materi yang dibutuhkan adalah materi yang diajarkan dalam konteks

kurikulum yang berlaku.

3.1.2.2 Perangkat Keras

Perangkat keras yang digunakan untuk membuat aplikasi

adalah sebagai berikut (minimum) :

a. Processor minimal pentium IV 2.0 Ghz

24

b. RAM 128 MB

c. Harddisk 20 GB

d. Resolusi Monitor (1280 x 800) (32 bit) (60 Hz)

3.1.2.3 Perangkat Lunak

Perangkat lunak yang digunakan untuk membuat aplikasi

adalah sebagai berikut (minimum) :

a. Sistem Operasi Windows XP

b. Adobe Flash

c. Corel Draw

d. Adobe Photoshop

e. Voice Diamond Recorder

3.1.3 Analisa Kebutuhan

3.1.3.1 Kebutuhan pengguna

Kebutuhan pengguna (user) dalam aplikasi ini meliputi :

1. User adalah murid di TK Realfunrainbow presschol Salatiga.

2. User dapat melakukan akses pembelajaran yaitu belajar angka,

yang terdiri dari mengenal angka dan mengurutkan angka.

3. User dapat melakukan akses pembelajaran yaitu belajar huruf, yang

terdiri dari mengenal huruf dan mengurutkan huruf.

4. User dapat melakukan akses pembelajaran yaitu berhitung, yang

terdiri dari penjumlagan dan pengurangan, dan perbandingan lebih

banyak atau sedikit.

5. User dapat melakukan akses pembelajaran yaitu bahasa inggris,

yang terdiri dari mengenal benda, mengenal hewan dan mengenal

warna.

25

6. User dapat melakukan akses pembelajaran yaitu dongeng, yang

terdiri dari badu si pemalsa dan puteri bulan.

7. User dapat melakukan akses pembelajaran yaitu latihan soal, yang

terdiri dari 20 soal.

3.1.3.2 Kebutuhan Fungsional

Tidak memerlukan proses instalasi karena sistem berbentuk

aplikasi dengan ekstensi .exe. Dapat diterapkan pada spesifikasi

komputer dengan processor minimal Pentium 4, dengan sistem

operasi Windows.

3.2 Perancangan Sistem Sistem dirancang dengan menggunakan UML (Unified

Modelling Language).

3.2.1 Flowchart Sistem

Flowchart sistem menggambarkan suatu sistem peralatan

komputer yang digunakan dalam proses pengolahan data dan

perhubungan antar peralatan tersebut.

3.2.1.1 Flowchart Menu Utama (Jadual Belajar)

Pada menu utama terdapat enam menu yang dapat dipilih user.

Enam menu tersebut meliputi menu belajar angka, menu belajar huruf,

menu berhitung, menu bahasa inggris, menu dongeng dan menu

latihan soal. Setiap menu tersebut akan menggolongkan setiap materi

belajar yang akan dipelajari oleh user. Jika tombol keluar dipilih oleh

user maka akan muncul perintah berupa tampilan peringatan untuk

meyakinkan user agar keluar seutuhnya atau user dapat kembali lagi

26

ke halaman menu jadual belajar. Diagram flowchart dari menu utama

dapat dilihat pada gambar 3.2.

Gambar 3.2 Flowchart menu utama

3.2.1.2 Flowchart Belajar Angka

Setelah user memilih menu belajar angka, user dihadapkan

dengan dua pilihan materi belajar yaitu mengenal angka dan

mengurutkan angka. Setelah user memilih materi belajar, akan masuk

ke pembuka yang berisi kalimat dan suara petunjuk sebelum masuk ke

materi pembelajaran dalam pembuka terdapat tombol mulai yang

berfungsi merujuk ke materi pembelajaran. Pada materi pembelajaran

user akan belajar mengenal angka dan mengurutkan angka. Jika user

selesai belajar, maka akan masuk ke penutup yang berisi kalimat dan

suara petunjuk dengan cara memilih tombol selesai. Pada penutup

terdapat tombol menu, yang berfungsi merujuk ke menu utama.

Flowchart dari menu belajar angka dapat dilihat pada gambar 3.3.

27

Gambar 3.3 Flowchart Belajar Angka

3.2.1.3 Flowchart Belajar Huruf

Setelah user memilih menu belajar huruf, user dihadapkan

dengan dua pilihan materi belajar yaitu mengenal huruf dan

mengurutkan huruf. Setelah user memilih materi belajar akan masuk

ke pembuka yang berisi kalimat dan suara petunjuk sebelum masuk ke

materi pembelajaran, dalam pembuka terdapat tombol mulai yang

berfungsi merujuk ke materi pembelajaran. Pada materi pembelajaran

user akan belajar mengenal huruf dan mengurutkan huruf. Jika user

selesai belajar, maka akan masuk ke penutup yang berisi kalimat dan

suara petunjuk dengan cara memilih tombol selesai. Pada penutup

terdapat tombol menu, yang berfungsi merujuk ke menu utama.

Flowchart dari menu belajar huruf dapat dilihat pada gambar 3.4.

28

Gambar 3.4 Flowchart Belajar Huruf

3.2.1.4 Flowchart Berhitung

Setelah user memilih menu berhitung, user dihadapkan dengan

dua pilihan materi belajar yaitu penjumlahan dan pengurangan dan

perbandingan lebih banyak atau sedikit. Setelah user memilih materi

belajar akan masuk ke pembuka yang berisi kalimat dan suara

petunjuk sebelum masuk ke materi pembelajaran, dalam pembuka

terdapat tombol mulai yang berfungsi merujuk ke materi

pembelajaran. Pada materi pembelajaran user akan belajar berhitung

dengan jari, penjumlahan dan pengurangan, dan perbandingan lebih

banyak atau sedikit. Jika user selesai belajar, maka akan masuk ke

penutup yang berisi kalimat dan suara petunjuk dengan cara memilih

tombol selesai. Pada penutup terdapat tombol menu, yang berfungsi

29

merujuk ke menu utama. Flowchart dari menu berhitung dapat dilihat

pada gambar 3.5.

Gambar 3.5 Flowchart Berhitung

3.2.1.5 Flowchart Bahasa Inggris

Setelah user memilih menu bahasa inggris, user dihadapkan

dengan tiga pilihan materi belajar yaitu mengenal benda, mengenal

hewan dan mengenal warna. Setelah user memilih materi belajar akan

masuk ke pembuka yang berisi kalimat dan suara petunjuk sebelum

masuk ke materi pembelajaran, dalam pembuka terdapat tombol mulai

yang berfungsi merujuk ke materi pembelajaran. Pada materi

pembelajaran user akan belajar mengenal benda, mengenal hewan dan

mengenal warna dalam bahasa inggris. Jika user selesai belajar, maka

akan masuk ke penutup yang berisi kalimat dan suara petunjuk dengan

30

cara memilih tombol selesai. Pada penutup terdapat tombol menu,

yang berfungsi merujuk ke menu utama. Flowchart dari menu bahasa

inggris dapat dilihat pada gambar 3.6.

Gambar 3.6 Flowchart Bahasa Inggris

3.2.1.6 Flowchart Dongeng

Setelah user memilih menu dongeng, user dihadapkan dengan

dua pilihan materi belajar yaitu badu si pemalas dan puteri bulan.

Setelah user memilih materi belajar akan masuk ke pembuka yang

berisi kalimat dan suara petunjuk sebelum masuk ke materi

pembelajaran, dalam pembuka terdapat tombol mulai yang berfungsi

merujuk ke materi pembelajaran. Pada materi pembelajaran user akan

belajar menyimak dongeng dan menjawab pertanyaan. Jika user

selesai belajar, maka akan masuk ke penutup yang berisi kalimat

penjelasan tentang jumlah pertanyaan yang dijawab dengan benar.

31

Pada penutup terdapat tombol menu, yang berfungsi merujuk ke menu

utama. Flowchart dari menu dongeng dapat dilihat pada gambar 3.7.

Gambar 3.7 Flowchart Dongeng

3.2.1.7 Flowchart Latihan Soal

Setelah user memilih menu latihan soal, user pertama kali

diminta untuk memasukan nama. Setelah itu, user akan mengerjakan

soal latihan dimana soal yang disajikan berbentuk pilihan ganda.

Setelah menyelesaikan dua puluh soal yang ada, maka akan masuk ke

penutup yang berisi kalimat penjelasan tentang nama user yang

mengerjakan dan jumlah nilai yang diperoleh. Pada penutup terdapat

tombol menu, yang berfungsi merujuk ke menu utama. Flowchart dari

menu latihan soal dapat dilihat pada gambar 3.8.

32

Gambar 3.8 Flowchart Latihan Soal

3.2.2 Skenario Aplikasi

Skenario berikut merupakan langkah–langkah kegiatan yang

akan dilakukan oleh user ketika menggunakan program ini. Skenario

yang dikembangkan di sini akan memberikan kesempatan kepada user

untuk menjelajah aplikasi sesuai dengan kebutuhan. Dengan demikian

diharapkan user tidak merasa jenuh harus mengikuti aplikasi yang

sudah ditentukan. User dapat membaca menu ”about pintar” terlebih

dahulu atau user juga dapat langsung memulai menjalankan aplikasi.

Adapun skenario pada aplikasi ini yaitu sebagai berikut:

1. Start

Aplikasi pertama kali dijalankan.

33

2. Inisialisai menu tampilan awal.

Setelah aplikasi dijalankan maka selanjutnya akan masuk ke

dalam menu halaman depan :

a. Menu

Jika user memilih ”menu” maka muncul menu jadual belajar

sebagai halaman utama yang meliputi : belajar angka, belajar

huruf, berhitung, bahasa inggris, dongeng, dan latihan soal.

b. About pintar

Jika user memilih ”about pintar” maka muncul menu

penjelasan tentang isi dari aplikasi.

3. Inisialisasi menu utama.

Setelah user memilih ”menu” maka selanjutnya akan masuk

ke dalam menu utama yaitu halaman jadual belajar yang terdiri dari :

a. Belajar angka

Jika user memilih ”belajar angka” maka muncul menu belajar

angka yaitu mengenal angka dan mengurutkan angka. Isi dari

mengenal angka meliputi pengajaran bagaimana user dapat

mengetahui bentuk angka 0 sampai angka 20 dan cara

menulisnya. Isi dari mengurutkan angka meliputi pengajaran

bagaimana user dapat mengetahui urutan angka yang benar

dari angka 1 sampai angka 20. Setelah proses selesai dan user

menginginkan materi lain, user dapat kembali ke menu utama

memilih materi selanjutnya.

b. Belajar huruf

Jika user memilih ”belajar huruf” maka muncul menu belajar

huruf. Isi dari belajar huruf yaitu mengenal huruf dan

34

mengurutkan huruf. Mengenal huruf meliputi pengajaran

bagaimana user dapat mengetahui bentuk huruf A sampai Z

dan cara menulisnya. Mengurutkan huruf meliputi pengajaran

bagaimana user dapat mengetahui urutan huruf alfabet yang

benar. Setelah proses selesai dan user menginginkan materi

lain, user dapat kembali ke menu utama memilih materi

selanjutnya.

c. Berhitung

Jika user memilih ”berhitung” maka muncul menu berhitung.

Isi dari berhitung meliputi penjumlahan dan pengurangan, dan

perbandingan lebih banyak atau sedikit. Isi materi dari

penjumlahan dan pengurangan meliputi pengajaran bagaimana

user dapat melakukan perhitungan penjumlahan dan

pengurangan (yang hasil angkanya tidak lebih dari 20). Isi

materi dari perbandingan lebih banyak atau sedikit meliputi

pengajaran bagaimana user dapat melakukan perhitungan

perbandingan (yang pembanding angkanya tidak lebih dari

20). Setelah proses selesai dan user menginginkan materi lain,

user dapat kembali ke menu utama memilih materi

selanjutnya.

d. Bahasa inggris

Jika user memilih ”bahasa inggris” maka muncul menu bahasa

inggris. Isi dari menu bahasa inggris meliputi mengenal benda,

mengenal hewan dan mengenal warna. Isi materi dari

mengenal benda meliputi pengajaran bagaimana user dapat

mengetahui nama benda dalam bahasa inggris. Isi materi dari

35

mengenal hewan meliputi pengajaran bagaimana user dapat

mengetahui nama hewan dalam bahasa inggris. Isi materi dari

mengenal warna meliputi pengajaran bagaimana user dapat

mengetahui nama warna dalam bahasa inggris. Setelah proses

selesai dan user menginginkan materi lain, user dapat kembali

ke menu utama memilih materi selanjutnya.

e. Dongeng

Jika user memilih ”dongeng” maka muncul menu dongeng. Isi

dari menu dongeng meliputi badu si pemalas dan puteri bulan.

Isi materi badu si pemalas meliputi bagaimana user dapat

mendengarkan dan menyimak cerita, kemudian menjawab

pertanyaan. Isi materi puteri bulan meliputi bagaimana user

dapat mendengarkan dan menyimak cerita, kemudian

menjawab pertanyaan. Setelah proses selesai dan user



f. Latihan Soal

Jika user memilih ”latihan soal” maka muncul menu latihan

soal. Isi dari menu latihan soal meliputi bagaimana user

menjawab pertanyaan–pertanyaan yang mencakup seluruh

materi yang diajarkan. Setelah proses selesai dan user



4. Keluar

Jika tombol “Keluar” dipilih oleh user maka akan muncul

perintah berupa tampilan peringatan untuk meyakinkan user agar

36

keluar seutuhnya atau user dapat kembali lagi ke menu halaman

utama.

3.2.3 Antar Muka User (User Interface)

Setelah skenario kegiatan dibuat, maka langkah selanjutnya

adalah membuat user interface. User Interface berisi desain tampilan

pada layar monitor. Desain tampilan sekurang–kurangnya memuat

informasi tentang judul, materi, nama halaman, kotak tampilan jika

dilihat dilayar komputer, teks narasi, keterangan tampilan, dan

keterangan tentang gambar, animasi.

3.2.3.1 Desain Halaman Depan

Gambar 3.9 menjelaskan desain user interface halaman depan

pada aplikasi. Pada bagian atas terdapat animasi teks yang merupakan

judul aplikasi yaitu ”Ayo Belajar Pintar”. Di samping kiri terdapat dua

tombol yaitu tombol menu, dan tombol about pintar. Tombol menu

berfungsi untuk merujuk ke halaman jadual belajar. Tombol about

pintar berfungsi untuk merujuk ke halaman penjelasan tentang ”Ayo

Belajar Pintar”. Di samping kanan terdapat animasi lebah yang berisi

kalimat pembuka untuk halaman depan yaitu ayo teman-teman mari

kita belajar ”pintar”.

Gambar 3.9 Desain User Interface Halaman Depan

37

Keterangan :

1. Judul Aplikasi

2. Tombol Menu

3. Tombol About Pintar

4. Animasi

3.2.3.2 Desain Halaman About Pintar

Gambar 3.10 menjelaskan desain User Interface menu about

pintar. Pada bagian atas terdapat animasi teks yang merupakan judul

halaman yaitu about pintar. Di bawah terdapat dua tombol yaitu

tombol kembali, dan tombol lanjut. Tombol kembali berfungsi untuk

merujuk ke halaman sebelumnya. Tombol lanjut berfungsi untuk

merujuk ke halaman selanjutnya. Di tengah terdapat tulisan yang

berisi kalimat penjelasan tentang ”Ayo Belajar Pintar”.

Gambar 3.10 Desain User Interface About Pintar

Keterangan :

1. Judul halaman

2. Tombol kembali

3. Tombol lanjut

4. Penjelasan

38

3.2.3.3 Desain Halaman Jadual Belajar

Gambar 3.11 menjelaskan desain user interface jadual belajar.

Pada bagian atas terdapat animasi teks yang merupakan judul halaman

yaitu jadual belajar. Di bagian bawah judul halaman terdapat dua

tombol yaitu tombol home dan tombol keluar. Tombol home berfungsi

untuk merujuk ke halaman depan. Tombol keluar berfungsi untuk

menutup halaman aplikasi sekuruhnya. Di tengah terdapat enam

tombol yaitu tombol belajar angka, tombol belajar huruf, tombol

berhitung, tombol bahasa inggris, tombol dongeng, dan tombol latihan

soal. Tombol belajar angka berfungsi untuk merujuk ke halaman

menu belajar angka. Tombol belajar huruf berfungsi untuk merujuk ke

halaman menu belajar huruf. Tombol berhitung berfungsi untuk

merujuk ke halaman menu belajar berhitung. Tombol bahasa inggris

berfungsi untuk merujuk ke halaman menu belajar bahasa inggris.

Tombol dongeng berfungsi untuk merujuk ke halaman menu dongeng.

Tombol latihan soal berfungsi untuk merujuk ke halaman pembuka

latihan soal. Di samping kanan terdapat animasi lebah yang berisi

kalimat pembuka untuk halaman jadual belajar yaitu pilih materi

pelajaran yang ingin teman pelajari.

Gambar 3.11 Desain User Interface Jadual belajar

39

Keterangan :

1. Judul halaman

2. Tombol belajar angka

3. Tombol belajar huruf

4. Tombol berhitung

5. Tombol bahasa inggris

6. Tombol dongeng

7. Tombol latihan soal

8. Animasi

9. Tombol home

10. Tombol keluar

3.2.3.4 Desain Halaman Pembuka

Gambar 3.12 menjelaskan desain User Interface halaman

pembuka pertama yang akan muncul pada setiap setelah user

mengakses menu belajar, yaitu pada halaman mengenal angka,

mengurutkan angka, mengenal huruf, mengurutkan huruf,

penjumlahan dan pengurangan, perbandingan lebih banyak atau

sedikit, mengenal benda, mengenal hewan, mengenal warna, badu si

pemalas, puteri bulan dan latihan soal. Pada bagian atas terdapat

animasi teks yang merupakan judul halaman. Di samping kiri terdapat

animasi lebah yang berisi kalimat pembuka untuk halaman pembuka

pertama. Di samping kanan terdapat tombol lanjut berfungsi untuk

merujuk ke halaman pembuka kedua.

40

Gambar 3.12 Desain User Interface Halaman Pembuka Pertama

Keterangan :

1. Judul halaman

2. Animasi

3. Tombol lanjut


pembuka kedua. Pada bagian atas terdapat animasi teks yang

merupakan judul halaman. Di samping kiri terdapat animasi lebah

yang berisi kalimat pembuka untuk halaman pembuka kedua. Di

samping kanan terdapat tombol mulai berfungsi untuk merujuk ke

halaman menu materi belajar.

Gambar 3.13 Desain User Interface Halaman Pembuka Kedua

41

Keterangan :

1. Judul halaman

2. Animasi

3. Tombol mulai

3.2.3.5 Desain Halaman Belajar

Gambar 3.14 menjelaskan desain User Interface menu belajar

yang akan muncul setiap setelah user mengakses menu belajar, yaitu

pada halaman belajar angka, belajar huruf, berhitung, bahasa inggris

dan dongeng. Pada bagian atas terdapat animasi teks yang merupakan

judul halaman. Di samping kiri terdapat dua tombol yaitu materi

belajar satu dan materi belajar dua. Tombol materi belajar berfungsi

untuk merujuk ke halaman pembelajaran. Di samping kanan terdapat

tombol menu berfungsi untuk merujuk ke halaman jadual belajar.

Gambar 3.14 Desain User Interface Halaman Belajar

Keterangan :

1. Judul halaman

2. Tombol materi belajar satu

3. Tombol materi belajar dua

4. Tombol menu

42

3.2.3.6 Desain Halaman Urutan Angka atau Huruf


urutan angka atau huruf. Pada bagian atas terdapat teks yang

merupakan judul halaman. Di bagian tengah terdapat dua puluh satu

tombol yaitu tombol angka 0 sampai 20 atau tombol huruf A samapai

Z, yang berfungsi untuk mengeluarkan suara nama angka atau huruf.

Di samping kanan bawah terdapat tombol lanjut berfungsi untuk

merujuk ke halaman belajar mengenal angka atau huruf.

Gambar 3.15 Desain User Interface Halaman urutan angka atau huruf

Keterangan :

1. Judul halaman

2. Tombol suara

3. Tombol lanjut

4. Tombol angka 0 sampai 20 atau huruf A sampai Z

3.2.3.7 Desain Halaman Belajar Mengenal Angka dan Mengenal

Huruf


belajar mengenal angka dan mengenal huruf. Pada bagian atas terdapat

tombol yang juga merupakan judul halaman yaitu mengenal angka

43

atau mengenal huruf, yang berfungsi untuk merujuk ke halaman

belajar angka. Di samping kiri terdapat tombol angka atau huruf yang

berfungsi untuk merujuk ke animasi cara menulis. Di bagian bawah

tombol angka atau huruf terdapat tombol kembali dan lanjut, yang

berfungsi untuk memilih angka atau huruf sebelum dan selanjutnya.

Di samping kanan tombol angka atau huruf terdapat animasi cara

menulis. Di samping kanan animasi terdapat tombol selesai, yang

berfungsi untuk merujuk ke halaman penutup. Di bagian bawah

terdapat keterangan nama angka atau huruf. Di samping keteragan

terdapat tombol ulang, yang berfungsi untuk merujuk ke animasi cara

menulis.

Gambar 3.16 Desain User Interface Halaman Mengenal Angka

Keterangan :

1. Tombol mengenal angka atau mengenal huruf

2. Tombol angka atau huruf

3. Animasi

4. Keterangan

5. Tombol ulang

44

6. Tombol kembali

7. Tombol lanjut

8. Tombol selesai

3.2.3.8 Desain Halaman Belajar Mengurutkan Angka dan

Mengurutkan Huruf


mengurutkan angka dan mengurutkan huruf. Pada bagian atas terdapat

tombol yang juga merupakan judul halaman yaitu mengurutkan angka

atau mengurutkan huruf, yang berfungsi untuk merujuk ke halaman

belajar angka. Di tengah terdapat kotak angka sebanyak 20 kotak,

berfungsi untuk meletakkan urutan angka atau huruf. Di bagian bawah

dan samping kotak angka terdapat tombol angka 1 sampai 20 atau

huruf A sampai Z, yang berfungsi sebagai urutan angka atau huruf. Di

samping kanan bawah terdapat tombol selesai, yang berfungsi untuk

merujuk ke halaman penutup.

Gambar 3.17 Desain User Interface Halaman Mengurutkan Angka

Keterangan :

1. Tombol mengurutkan angka

45

2. Kotak angka

3. Tombol angka

4. Tombol selesai

3.2.3.9 Desain Halaman Berhitung Menggunakan Jari


berhitung menggunakan jari. Pada bagian atas terdapat judul halaman

yaitu berhhitung menggunakan jari. Di samping kiri terdapat gambar

angka, yang berfungsi untuk menjelaskan banyak jari tangan di

samping. Di samping kanan terdapat gambar jari tangan, yang

berfungsi untuk menjelaskan banyak jari tangan sama dengan angka di

samping. Di samping kanan bawah terdapat tombol selesai, yang

berfungsi untuk merujuk ke halaman penutup mengurutkan huruf. Di

bagian bawah tombol kembali dan lanjut, yang berfungsi untuk

merujuk ke halaman sebelum dan selanjutnya.

Gambar 3.18 Desain User Interface Halaman Berhitung Menggunakan Jari

Keterangan :

1. Judul halaman

2. Gambar angka

46

3. Gambar jari tangan

4. Tombol kembali

5. Tombol lanjut

3.2.3.10 Desain Halaman Belajar Penjumlahan dan Pengurangan


belajar penjumlahan dan pengurangan. Pada bagian atas terdapat

tombol penjumlahan dan pengurangan yang juga merupakan judul

halaman yaitu penjumlahan dan pengurangan, yang berfungsi untuk

merujuk ke halaman pembuka belajar penjumlahan dan pengurangan.

Di bagian bawah tombol penjumlahan dan pengurangan terdapat kotak

jumlah kue happy dan kotak jumlah kue birthday, yang berfungsi

untuk menjelaskan angka sebagai jumlah kue yang akan dihitung. Di

bagian bawah kotak jumlah kue happy dan kotak jumlah kue birthday

terdapat kotak kue happy dan kotak kue birthday, yang berfungsi

untuk meletakkan kue yang akan dihitung. Di bagian tengan kotak

jumlah kue happy dan kotak jumlah kue birthday terdapat tombol

jumlah dan kurang, yang berfungsi untuk perhitungan jumlah kue. Di

bagian bawah kotak kue happy dan kotak kue birthday terdapat

tombol kue happy dan tombol kue birthday, yang berfungsi untuk

perhitungan jumlah kue yang akan dihitung. Di bagian bawah tengah

terdapat tombol ulang, yang berfungsi untuk merujuk ke halaman

baru penjumlahan dan pengurangan. Di bagian kanan bawah tombol

ulang terdapat kotak jumlah kue, yang berfungsi untuk menjelaskan

angka sebagai hasil jumlah kue yang telah dihitung. Di bagian kanan

bawah terdapat tombol selesai, yang berfungsi untuk merujuk ke

halaman penutup penjumlahan dan pengurangan.

47

Gambar 3.19 Desain User Interface Halaman Belajar Penjumlahan dan

Pengurangan

Keterangan :

1. Tombol penjumlahan dan pengurangan

2. Kotak jumlah kue happy

3. Kotak jumlah kue birthday

4. Kotak kue happy

5. Kotak kue birthday

6. Tombol jumlah dan kurang

7. Tombol kue happy

8. Tombol kue birthday

9. Tombol ulang

10. Kotak jumlah kue

11. Tombol selesai

3.2.3.11 Desain Halaman Belajar Perbandingan Lebih Banyak atau

Sedikit


belajar perbandingan lebih banyak atau sedikit. Pada bagian atas

terdapat tombol perbandingan lebih banyak atau sedikit yang juga

merupakan judul halaman yaitu perbandingan lebih banyak atau

48

sedikit, yang berfungsi untuk merujuk ke halaman pembuka belajar

perbandingan lebih banyak atau sedikit. Di bagian bawah tombol

perbandingan lebih banyak atau sedikit terdapat kotak jumlah kue pink

dan kotak jumlah kue orange, yang berfungsi untuk menjelaskan

angka sebagai jumlah kue yang akan dibandingkan. Di bagian bawah

kotak jumlah kue pink dan kotak jumlah kue orange terdapat kotak

kue pink dan kotak kue orange, yang berfungsi untuk meletakkan

kue yang akan dibandingkan. Di bagian tengah kotak jumlah kue pink

dan kotak jumlah kue orange terdapat hasil perbandingan, yang

berfungsi untuk sebagai hasil perbandingan jumlah kue. Di bagian

bawah kotak kue pink dan kotak kue orange terdapat tombol kue pink

dan tombol kue orange, yang berfungsi untuk perhitungan jumlah

kue yang akan dihitung. Di bagian bawah tengah terdapat tombol

ulang, yang berfungsi untuk merujuk ke halaman baru perbandingan

lebih banyak atau sedikit. Di bagian atas tombol ulang terdapat

tombol banding, yang berfungsi untuk mengeksekusi perbandingan

kue. Di bagian kanan bawah terdapat tombol selesai, yang berfungsi

untuk merujuk ke halaman penutup belajar perbandingan lebih banyak

atau sedikit.

49

Gambar 3.20 Desain User Interface Halaman Belajar Perbandingan Lebih Banyak

atau Sedikit

Keterangan :

1. Tombol perbandingan lebih banyak atau sedikit

2. Kotak jumlah kue pink

3. Kotak hasil perbandingan kue

4. Kotak kue orange

5. Kotak kue pink

6. Kotak kue orange

7. Tombol kue pink

8. Tombol kue orange

9. Tombol banding

10. Tombol ulang

11. Tombol selesai

3.2.3.12 Desain Halaman Belajar Mengenal Hewan, Mengenal Benda


belajar mengenal hewan dan mengenal benda. Pada bagian atas

terdapat tombol yang juga merupakan judul halaman yang berfungsi

untuk merujuk ke halaman belajar bahasa inggris. Di tengah terdapat

50

gambar berfungsi untuk menjelaskan bentuk hewan atau benda. Di

bagian bawah gambar terdapat tombol kembali dan lanjut, yang

berfungsi untuk memilih gambar sebelum dan selanjutnya. Di samping

kanan bawah tombol lanjut terdapat keterangan nama gambar dalam

bahasa indonesia. Di samping kiri bawah tombol kembali terdapat

keterangan nama gambar dalam bahasa inggris. Di bagian bawah

terdapat keterangan nama gambar dalam bahasa indonesia terdapat

tombol ulang, yang berfungsi untuk merujuk ke suara nama gambar.

Di samping kanan bawah animasi terdapat tombol selesai, yang

berfungsi untuk merujuk ke halaman penutup mengenal hewan atau

benda.

Gambar 3.21 Desain User Interface Halaman Mengenal Hewan, Benda

Keterangan :

1. Tombol mengenal hewan atau benda

2. Gambar

3. Tombol kembali

4. Tombol lanjut

5. Keterangan nama gambar dalam bahasa indonesia

6. Keterangan nama gambar dalam bahasa inggris

51

7. Tombol ulang

8. Tombol selesai

3.2.3.13 Desain Halaman Belajar Mengenal Warna


belajar mengenal warna. Pada bagian atas terdapat tombol mengenal

warna yang juga merupakan judul halaman yaitu mengenal warna,

yang berfungsi untuk merujuk ke halaman bahasa inggris. Di tengah

terdapat tombol warna berfungsi untuk merujuk ke keterangan nama

dan suara warna. Di samping kiri bawah terdapat keterangan nama

warna. Di bagian kanan bawah terdapat tombol ulang, yang berfungsi

untuk merujuk ke suara nama warna. Di samping kanan tombol ulang

terdapat tombol selesai, yang berfungsi untuk merujuk ke halaman

penutup mengenal warna.

Gambar 3.22 Desain User Interface Halaman Mengenal Warna

Keterangan :

1. Tombol mengenal warna

2. Tombol warna

3. Keterangan nama warna

52

4. Tombol ulang

5. Tombol selesai

3.2.3.14 Desain Halaman Badu Si Pemalas atau Puteri Bulan


dongeng badu si pemalas atau puteri bulan. Pada bagian atas terdapat

tombol yang juga merupakan judul halaman yaitu badu si pemalas

atau puteri bulan, yang berfungsi untuk merujuk ke halaman dongeng.

Di samping kiri terdapat gambar. Di bagian kanan terdapat cerita,

yang berfungsi untuk menjelaskan apa yang terjadi pada gambar. Di

samping kanan bawah terdapat tombol lanjut berfungsi untuk

merujuk ke halaman selanjutnya.

Gambar 3.23 Desain User Interface Halaman Badu Si Pemalas atau Puteri Bulan

Keterangan :

1. Tombol badu si pemalas atau puteri bulan

2. Gambar

3. Keterangan cerita

4. Tombol lanjut

53

3.2.3.15 Desain Halaman Latihan Soal

Gambar 3.24 menjelaskan desain User Interface halaman latihan

soal. Pada bagian atas terdapat tombol latihan soal yang juga

merupakan judul halaman yaitu latihan soal, yang berfungsi untuk

merujuk ke halaman pembuka pertama latihan soal. Di bagian kanan

atas terdapat keterangan soal, yang berfungsi untuk menjelaskan soal

keberapa yang sedang dikerjakan. Di bagian tengah terdapat soal,

yang berfungsi untuk menjelaskan isi pertanyaan yang dikerjakan. Di

bagian bawah soals terdapat tombol jawaban, yang berfungsi untuk

menjawab pertanyaan diatasnya dan merujuk ke halaman selanjutnya.

Di samping kanan bawah terdapat keterangan nama dan nilai

berfungsi untuk menjelaskan siapa yang mengerjakan soal dan berapa

nilainya.

Gambar 3.24 Desain User Interface Halaman Latihan Soal

Keterangan :

1. Tombol latihan soal

2. Keterangan soal

3. Pertanyaan

4. Tombol jawaban

54

5. Keterangan nama

6. Keterangan nilai

3.2.3.16 Desain Halaman Penutup


penutup pertama yang akan muncul pada setiap setelah user selesai

mengakses menu materi belajar, yaitu pada halaman mengenal angka,

mengurutkan angka, mengenal huruf, mengurutkan huruf,

penjumlahan dan pengurangan, perbandingan lebih banyak atau

sedikit, mengenal benda, mengenal hewan, dan mengenal warna. Pada

bagian atas terdapat animasi teks yang merupakan judul halaman. Di

samping kiri terdapat animasi lebah yang berisi kalimat untuk halaman

penutup pertama. Di samping kanan bawah terdapat tombol lanjut

berfungsi untuk merujuk ke halaman penutup kedua.

Gambar 3.25 Desain User Interface Halaman Penutup Pertama Keterangan :

1. Judul halaman

2. Animasi

3. Tombol lanjut


penutup kedua. Pada bagian atas terdapat animasi teks yang

55

merupakan judul halaman. Di samping kiri terdapat animasi lebah

yang berisi kalimat penutup untuk halaman penutup kedua. Di

samping kanan bawah terdapat tombol menu berfungsi untuk merujuk

ke halaman jadual belajar.

Gambar 3.26 Desain User Interface Halaman Penutup Kedua

Keterangan :

1. Judul halaman

2. Animasi

3. Tombol menu

3.3 Metode Pengujian Sistem Dalam penelitian ini, pengujian sistem dilakukan dengan metode

alfa testing dan beta testing. Pengujian alfa testing merupakan

pengujian yang dilakukan oleh pemakai di lingkungan pengembang,

pengujian ini dilakukan untuk mengetahui apakah aplikasi bisa

berjalan dengan semestinya dan untuk menemukan kesalahan-

kesalahan yang mungkin terjadi di dalam aplikasi sehingga bisa

dilakukan perbaikan untuk memperbaiki kesalahan tersebut (Romeo,

2009).

56

Sedangkan beta testing merupakan pengujian yang dilakukan

oleh pemakai pada lingkungan operasi pemakai, di mana lingkungan

perangkat lunak tidak lagi dapat dikendalikan oleh pengembang

karena perangkat lunak sudah dirilis. Pengujian beta testing untuk

aplikasi ini dilakukan terhadap murid di sekolah TK Realfunrainbow

Preschool.

Pertama, penulis akan mengujikan sistem pada murid dan

menjelaskan cara dalam menggunakannya. Selanjutnya penulis akan

meminta murid untuk menerapkan aplikasi dalam proses sistem

pembelajaran. Terakhir, penulis akan meminta kepada murid untuk

menjawab latihan soal dari aplikasi yang diujikan. Hasil dari nilai

latihan soal kemudian akan diolah menjadi bentuk statistik untuk

mengetahui apakah aplikasi yang telah dibuat telah sesuai dengan

kebutuhan dan berhasil diterapkan.

Bab 3 Metode dan Perancangan Sistem -...

Documents

Transcript of Bab 3 Metode dan Perancangan Sistem -...