bab 3 metodologi perancangan -...

16
19 Bab 3 Metodologi Perancangan 3.1 Metode Pengembangan Aplikasi Metode yang digunakan untuk pengembangan aplikasi pembelajaran ini adalah metode Prototype. Proses dari metode Prototype ditunjukan pada Gambar 3.1 Gambar 3.1 Metode Prototype (Pressman, 1992)

Upload: phungbao

Post on 06-Feb-2018

232 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: Bab 3 Metodologi Perancangan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2262/4/T1_672007087_BAB II… · dengan membuat perancangan ... Corel Draw X3. dan

19

Bab 3

Metodologi Perancangan

3.1 Metode Pengembangan Aplikasi

Metode yang digunakan untuk pengembangan aplikasi

pembelajaran ini adalah metode Prototype. Proses dari metode

Prototype ditunjukan pada Gambar 3.1

Gambar 3.1 Metode Prototype (Pressman, 1992)

Page 2: Bab 3 Metodologi Perancangan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2262/4/T1_672007087_BAB II… · dengan membuat perancangan ... Corel Draw X3. dan

20

Prototype merupakan proses yang digunakan untuk

membantu pembuat aplikasi perangkat lunak dalam membentuk

model dari perangkat lunak yang akan dibuat. Metode ini dipilih

karena prototype yang dibuat dapat digunakan untuk mengelola

kembali kebutuhan dari perangkat lunak yang dikembangkan,

sehingga pengembang perangkat lunak tidak harus merancang lagi

semua dari awal (Pressman, 1992).

3.1.1 Tahapan-tahapan Prototyping

Tahapan-tahapan dalam prototyping adalah sebagai berikut:

1. Pengumpulan kebutuhan, pada tahap ini dilakukan

pengumpulan data dan informasi serta kebutuhan-kebutuhan

perangkat yang diperlukan untuk proses perancangan

prototype. Perlu adanya peran aktif pengguna dan

pengembang dalam mendefinisikan format seluruh perangkat

lunak, mengedentifikasikan format seluruh perangkat lunak,

mengidentifikasikan semua kebutuhan, dan garis besar

sistem yang akan dibuat.

2. Membangun prototyping, pada tahap ini dilakukan

pembangunan prototyping dengan membuat perancangan

sementara yang berfokus pada penyajian kepada pengguna..

3. Pengujian sistem, dilakukan kembali proses evaluasi yang

bertujuan untuk mengetahui apakah aplikasi yang ada sudah

sesuai dengan yang diharapkan, jika masih ada yang kurang

sesuai pada aplikasi maka diadakan perbaikan pada aplikasi

Page 3: Bab 3 Metodologi Perancangan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2262/4/T1_672007087_BAB II… · dengan membuat perancangan ... Corel Draw X3. dan

21

dengan mulai mengumpulkan data seperti pada tahap

pertama. Apabila aplikasi sesuai dengan yang diinginkan,

maka proses selesai.

3.1.2 Keunggulan Prototyping

Keunggulan prototyping, metode ini memiliki beberapa

keunggulan antara lain adanya komunikasi yang baik antara

pengembang dan pengguna selama pembuatan aplikasi. Selain itu

waktu yang dibutuhkan dalam proses pembuatan juga cenderung

lebih singkat karena pada proses ini pengguna berperan aktif. Pada

ahirnya penerapan dari aplikasi yang dibuat juga menjadi lebih

mudah karena pada pengguna mengetahui tentang apa yang

diharapkannya (Pressman, 1992).

3.2 Analisa Kebutuhan Data

Pengumpulan data untuk kebutuhan aplikasi pembelajaran ini

didapat dengan cara:

a. Buku-buku pelajaran IPA kelas IV materi rangka

manusia.

b. Penelitian melalui wawancara dengan Ibu Robingah

selaku guru kelas IV SDN 02 Pucang, mengenai mata

pelajaran IPA khususnya materi rangka manusia.

c. Materi pembelajaran rangka manusia yang diambil dari

buku-buku lain dan situs internet.

Page 4: Bab 3 Metodologi Perancangan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2262/4/T1_672007087_BAB II… · dengan membuat perancangan ... Corel Draw X3. dan

22

d. Penelitian kepustakaan, diperlukan untuk menunjang

melengkapi dan menyempurnakan data. Teknik

pengumpulan data dengan cara mempelajari jurnal, dan

karya tulis lain yang dijadikan referensi.

3.3 Analisa Kebutuhan Sistem

Perangkat keras (hardware) merupakan media pendukung

untuk membuat dan menjalankan software yang di dalamnya

terdapat unit masukan (input), unut pemprosesan dan unit keluaran

(output). Perangkat keras yang digunakan sebagai pendukung

memiliki spesifikasi sebagai berikut:

- Processor Intel Centrino Duo (2.4 Ghz)

- RAM memory 1 GB

- 120 GB of harddisk space

- Windows XP Service Pack 3

Perangkat lunak (software) merupakan program komputer

yang diperlukan untuk mengoperasikan perangkat keras dan

pengolahan data. Perangkat lunak juga dikatakan sebagai

penerjemah intruksi bahasa pemrograman tingkat tinggi ke bahasa

yang dapat dimengerti mesin. Berikut ini adalah daftar perangkat

lunak yang digunakan dalam penyusunan aplikasi:

- Corel Draw X3

- Adobe Flash CS 4

- Adobe Flash Player 10.0

- Adobe Photoshop CS 4

Page 5: Bab 3 Metodologi Perancangan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2262/4/T1_672007087_BAB II… · dengan membuat perancangan ... Corel Draw X3. dan

23

- Edraw Max 6.3

Adobe Flash versi CS4 ActionScript 2.0 digunakan untuk

membuat program aplikasi pembelajaran rangka manusia. Edraw

Max 6.3 diperlukan untuk membuat data flow diagram yang

menunjang skripsi ini. Corel Draw X3 dan Adobe Photoshop CS 4

diperlukan untuk pembuatan dan pengeditan tampilan.

Ada beberapa proses yang dapat dianalisa dengan kebutuhan

input dan hasil dalam bentuk output. User dapat memberikan input

pada bagian latihan soal dan dapat berinteraksi langsung dengan

materi secara interaktif. User akan memberikan input jawaban

latihan soal dan game pencocokan rangka manusia yang kemudian

diproses sesuai jawaban yang diinput. Setelah itu akan diberikan

hasil dari input jawaban yang di masukan user.

3.4 Perancangan Sistem

Perancangan sistem merupakan tahapan yang digunakan untuk

merancang sistem kerja yang diapresiasikan dalam bentuk gambar

atau grafik. Bertujuan untuk menggambarkan rancangan kerangka

kerja sistem yang akan di bangun mengunakan DFD.

Melalui suatu teknik analisa data terstruktur yang disebut Data

Flow Diagram (DFD), penganalisis dapat merepresentasi proses-

proses data di dalam sistem. Pendekatan aliran data menekankan

logika yang mendasari sistem. Dengan menggunakan kombinasi dari

symbol aliran data, penganalisis sistem dapat menciptakan suatu

Page 6: Bab 3 Metodologi Perancangan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2262/4/T1_672007087_BAB II… · dengan membuat perancangan ... Corel Draw X3. dan

24

gambaran proses-proses yang bisa menampilkan dokumentasi sistem

yang solid (Kendall & Kendall, 2006).

3.4.1 DFD (Data Flow Diagram) Level 0

DFD level 0 (diagram konteks) adalah tingkatan tertinggi

dalam diagram aliran data dan hanya memuat satu proses,

menunjukan sistem secara keseluruhan.

Gambar 3.2 DFD Level 0 (Diagram Konteks)

Pada gambar 3.2 ini dapat dilihat bahwa diagram konteks

pada aplikasi melibatkan satu entity yaitu user, penjelasan secara

singkat dari aliran data diagram diatas yaitu data yang diberikan

pada user saat membuka aplikasi kemudian user memilih menu

yang ditampilkan, dan aplikasi akan memberikan data informasi

tentang materi yang ada pada aplikasi.

Pilihan Menu User

Aplikasi

Pembelajaran

Rangka

Manusia

Tampilan Menu

Page 7: Bab 3 Metodologi Perancangan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2262/4/T1_672007087_BAB II… · dengan membuat perancangan ... Corel Draw X3. dan

25

3.4.2 DFD (Data Flow Diagram) Level 1

DFD level 1 adalah pengembangan diagram konteks dan

menunjukkan aliran data baru pada level yang lebih rendah.

Gambar 3.3 menunjukkan DFD level 1 pada aplikasi.

User

1

Materi

2

Latihan

3

Game

4

Bantuan

Pilih Menu Materi

Tampilan Menu Materi

Pilih Menu Latihan

Tampilan Menu Latihan

Pilih Menu Game

Pilih Menu Bantuan

Tampilan Menu Game

Tampilan Data Menu Bantuan

Page 8: Bab 3 Metodologi Perancangan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2262/4/T1_672007087_BAB II… · dengan membuat perancangan ... Corel Draw X3. dan

26

Gambar 3.3 DFD Level 1

Pada tahap ini terdapat beberapa proses utama yang

dilakukan oleh aplikasi, yaitu proses di menu materi, menu

latihan, menu game dan menu bantuan. Setelah user memilih

menu yang diinginkan sistem akan menampilkan informasi data

dari menu yang dipilih.

3.4.3 DFD (Data Flow Diagram) Level 2

Setiap proses dalam diagram level 1 bisa dikembangkan

untuk menciptakan diagram anak yang lebih mendetail. Proses

pada diagram level 1 yang dikembangkan itu disebut parent

process dan diagram yang dihasilkan disebut child diagram

(diagram level 2).

DFD level 2 untuk Menu Materi

Informasi tentang

Materi Rangka

Pilih Sub Menu

Animasi Rangka

User 1.1

Materi

Rangka

1.2

Animasi

Rangka Informasi tentang Bagan Rangka

Pilih Sub Menu

Materi Umum

Page 9: Bab 3 Metodologi Perancangan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2262/4/T1_672007087_BAB II… · dengan membuat perancangan ... Corel Draw X3. dan

27

Gambar 3.4 DFD Level 2 Menu Materi

Tahap ini adalah penjabaran dari proses pertama pada

DFD (Gambar 3.4). Pada proses DFD level 2 menu materi

dapat dilihat bahwa user masuk ke menu materi, kemudian

system akan memberikan submenu materi animasi rangka

dan menampilkan informasi data tersebut sesuai interaksi

dengan user.

DFD level 2 untuk Menu Latihan

Informasi Nilai Hasil

Latihan

User 2.1

Soal

Latihan

Pilihan Jawaban Soal

Latihan

Page 10: Bab 3 Metodologi Perancangan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2262/4/T1_672007087_BAB II… · dengan membuat perancangan ... Corel Draw X3. dan

28

Gambar 3.5 DFD Level 2 Menu Latihan

Gambar 3.5 merupakan penjabaran dari DFD level 2

untuk menu latihan. Pada proses DFD level 2 untuk menu

latihan dijelaskan aliran data yang diberikan kepada user

berupa pilihan jawaban ganda untuk soal latihan kemudian

menu latihan menampilkan data informasi untuk hasil

jawaban yang dimasukan oleh user.

DFD level 2 untuk Menu Game

Gambar 3.6 DFD Level 2 Menu Game

Pada Gambar 3.6 diatas dijelaskan proses aliran data

untuk DFD level 2 menu game yaitu pada menu game

diberikan informasi data misi pada user untuk menyelesaikan

Data Tampilan Game

User 3.1

Game

Rangka

Mission dari Game

Page 11: Bab 3 Metodologi Perancangan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2262/4/T1_672007087_BAB II… · dengan membuat perancangan ... Corel Draw X3. dan

29

game, kemudian menu game memproses informasi data yang

ditampilkan setelah user menyelesaikan game.

DFD level 2 untuk Menu Bantuan

Gambar 3.7 DFD Level 2 Menu Bantuan

DFD Level 2 untuk menu bantuan dapat dilihat pada

Gambar 3.7. Pada saat user memilih menu bantuan, maka

sistem akan menampilkan halaman yang memberikan data

informasi keterangan bantuan untuk aplikasi.

3.5 Desain Interface

Desain interface adalah hal yang paling penting dalam

perancangan sistem software. Interface merupakan penghubung

antara software dengan pengguna, sehingga bila dilakukan

perancangan interface yang baik maka akan lebih memudahkan dan

lebih menarik bagi pengguna untuk menggunakan software tersebut.

Informasi Data Bantuan

Aplikasi

User 4.1

Menu

Bantuan

Pilih Menu Bantuan

Page 12: Bab 3 Metodologi Perancangan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2262/4/T1_672007087_BAB II… · dengan membuat perancangan ... Corel Draw X3. dan

30

3.5.1 Desain Interface Halaman Intro

Gambar 3.8 adalah desain profil menu. Pada layar ini

terdapat pilihan untuk button menu utama aplikasi. Seperti Materi,

Latihan, Game, dan Bantuan. Merupakan halaman awal pengenalan

aplikasi.

Gambar 3.8 Desain Interface Halaman Intro

Penjelasan dari desain Gambar 3.8 adalah sebagai berikut :

1. Bitmap : Judul aplikasi

2. Tombol : Exit

3. Tombol : Menu

4. Label : Judul Sub menu

5. Movie clip : Chibi skeleton

6. Text : Isi Sub menu

Page 13: Bab 3 Metodologi Perancangan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2262/4/T1_672007087_BAB II… · dengan membuat perancangan ... Corel Draw X3. dan

31

7. Tombol : Next

8. Tombol : Suara

3.5.2 Desain Interface Halaman Materi

Layar ini berisi penjelasan materi secara umum, dan terdapat

tampilan animasi tentang rangka manusia beserta keterangan

lengkap rangka manusia untuk memperjelas gambar.

Gambar 3.9 Desain Interface Halaman Materi

Penjelasan dari desain Gambar 3.9 adalah sebagai berikut :

1. Label : Judul sub menu

2. Movieclip : Animasi materi rangka

3. Movieclip : Chibi skeleton

4. Tombol : Next

5. Tombol : Suara

3.5.3 Desain Interface Halaman Latihan

Page 14: Bab 3 Metodologi Perancangan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2262/4/T1_672007087_BAB II… · dengan membuat perancangan ... Corel Draw X3. dan

32

Di layar ini pengguna dapat melakukan pengujian

penguasaan materi dengan menggunakan soal latihan pilihan ganda,

yang dilengkapi tampilan jawaban jika jawaban yang diinput salah.

Latihan soal ini akan merekam jawaban kemudian menampilkan

nilai setelah semua soal di jawab.

Gambar 3.10 Desain Interface Halaman Latihan

Penjelasan dari desain Gambar 3.10 adalah sebagai berikut :

1. Label : Judul submenu

2. Layer : Soal latihan

3. Tombol : Next

3.5.4 Desain Interface Halaman Game

Pada menu game pengguna dilatih mengasah kemampuan

mengingat letak rangka. Di sini terdapat gambar tubuh manusia,

kemudian pengguna akan diuji untuk mencocokan bagian-bagian

Page 15: Bab 3 Metodologi Perancangan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2262/4/T1_672007087_BAB II… · dengan membuat perancangan ... Corel Draw X3. dan

33

tulang manusia yang terdapat di gambar samping dengan cara drag

gambar. Lebih jelasnya dapat dilihat di gambar 3.11

Gambar 3.11 Desain Interface Halaman Game

Penjelasan dari desain Gambar 3.11 adalah sebagai berikut :

1. Label : Judul sub menu

2. Bitmap : Gambar tulang-tulang

3. Layer : Gambar tubuh manusia

4. Tombol : Next

3.5.5 Desain Interface Halaman Bantuan

Layar pada menu bantuan ini berisi panduan penggunaan aplikasi

untuk menjelaskan isi menu-menu pada aplikasi.

Page 16: Bab 3 Metodologi Perancangan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2262/4/T1_672007087_BAB II… · dengan membuat perancangan ... Corel Draw X3. dan

34

Gambar 3.12 Desain Interface Halaman Bantuan

Penjelasan dari desain Gambar 3.12 adalah sebagai berikut :

1. Label : Judul sub menu

2. Text : Petunjuk Penggunaan

3. Tombol : Next