bab 3 metode dan perancangan sistem - uksw

20
17 BAB 3 Metode dan Perancangan Sistem 3.1 Metode Perancangan Sistem Metode yang dipakai untuk membuat sistem ini adalah prototype model. Prototype model memungkinkan adanya interaksi yang lebih baik antara pengembang program dan pengguna, sehingga sistem yang dibuat hasilnya lebih maksimal (Pressman, 1997). Tahap-tahap metode prototype dapat dilihat pada Gambar 3.1. Gambar 3.1 Model Proses Prototype (Pressman, 1997) Model prototype dikembangkan dengan membuat prototype aplikasi perangkat lunak untuk selanjutnya dievaluasi oleh pengguna dan diperbaiki sesuai dengan hasil evaluasi tersebut. Model ini

Upload: others

Post on 23-Nov-2021

15 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: BAB 3 Metode dan Perancangan Sistem - UKSW

17

BAB 3

Metode dan Perancangan Sistem

3.1 Metode Perancangan Sistem Metode yang dipakai untuk membuat sistem ini adalah

prototype model. Prototype model memungkinkan adanya interaksi

yang lebih baik antara pengembang program dan pengguna,

sehingga sistem yang dibuat hasilnya lebih maksimal (Pressman,

1997). Tahap-tahap metode prototype dapat dilihat pada Gambar

3.1.

Gambar 3.1 Model Proses Prototype (Pressman, 1997)

Model prototype dikembangkan dengan membuat prototype

aplikasi perangkat lunak untuk selanjutnya dievaluasi oleh pengguna

dan diperbaiki sesuai dengan hasil evaluasi tersebut. Model ini

Page 2: BAB 3 Metode dan Perancangan Sistem - UKSW

18

sangat cocok untuk dipakai bila pada aplikasi yang dibuat, output

yang diinginkan pengguna kurang terdefinisi secara jelas. Model ini

membutuhkan komunikasi yang jelas antara pengembang perangkat

lunak dengan pengguna sehingga hasil yang diperoleh sesuai dengan

keinginan pengguna.

Adapun tahapan dari model prototype ini adalah sebagai

berikut:

1. Pengumpulan kebutuhan

Tahap pengumpulan ini adalah dilakukan wawancara kepada

guru pengajar mata pelajaran IPA dan bahan atau data yang

diperlukan untuk membuat aplikasi. Pengumpulan materi

pembelajaran kelas VI SD untuk tata surya yang diambil dari buku-

buku paket dan situs internet.

2. Perancangan

Perancangan prototype mulai dilakukan dengan merancang

desain tampilan antarmuka aplikasi, use case diagram, activity

diagram, sequence diagram, dan class diagram.

3. Evaluasi prototype

Pada tahap ini, dilakukan pengujian terhadap aplikasi dengan

wawancara dari Guru kelas VI SDN 06 Salatiga, jika masih ada

yang kurang sesuai pada aplikasi maka diadakan perbaikan pada

aplikasi dengan mulai mengumpulkan data seperti pada tahap

pertama. Apabila aplikasi sesuai dengan yang diinginkan, maka

proses selesai.

Page 3: BAB 3 Metode dan Perancangan Sistem - UKSW

19

3.1.1 Kebutuhan Sistem

Dalam perancangan aplikasi penggunaan multimedia pada

aplikasi alat bantu ajar tata surya, terdiri dari dua perangkat yaitu

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

1. Perangkat keras (hardware) merupakan media pendukung

untuk membuat dan menjalankan perangkat lunak (software), yang

di dalamnya terdapat unit masukan (input) dan keluaran (output).

Perangkat keras secara umum memiliki CPU, Keyboard, Mouse,

Monitor, Speaker. Perangkat keras yang digunakan adalah :

- AMD Turion Dual-Core 2,3 GHz processor

- RAM 1 GB

- 3.5 GB of available hard-disk space

- DVD-ROM drive

2. Perangkat lunak (software) merupakan program komputer

yang diperlukan untuk mengoperasikan perangkat keras dan

pengolahan data. Berikut adalah daftar perangkat lunak yang

digunakan pada aplikasi :

- Adobe Photoshop CS3

- Adobe Dreamweaver CS4

- Rational Rose

3.2 Perancangan Sistem Perancangan sistem merupakan rancangan awal sebelum

dilakukan penyelesaian suatu masalah yang ada. Pencapaian tujuan

atau hasil yang diinginkan sesuai dengan kubutuhan dari

permasalahan yang ada, maka suatu rancangan sistem diperlukan

untuk mendapatkan gambaran secara garis besar selutuh masalah

Page 4: BAB 3 Metode dan Perancangan Sistem - UKSW

20

yang akan di komputerisasi. UML sebagai bahasa pemodelan untuk

merancang sistem pada aplikasi yang akan dibangun ini.

3.2.1 Use Case Diagram

Use case diagram menggambarkan fungsionalitas yang

diharapkan dari sebuah sistem yang menjelaskan keseluruhan kerja

sistem secara garis besar dengan mempresentasikan interaksi antara

aktor yang dibuat, serta memberikan gambaran fungsi-fungsi pada

sistem tersebut.

Gambar 3.2 adalah use case diagram menjelaskan peranan dan

fungsi user yang berperan sebagai pengguna alat bantu ajar ini.

Gambar 3.2 Use Case Diagram Sistem

Berdasarkan use case diagram pada Gambar 3.2, dapat

dijelaskan secara singkat masing-masing fungsi dari use case

sebagai berikut :

1. Use case pengenalan planet, use case berupa tampilan planet-

planet dan penjelasannya.

2. Use case orbit tata surya, use case yang berupa tampilan orbit

tata surya dan penjelasannya.

Page 5: BAB 3 Metode dan Perancangan Sistem - UKSW

21

3. Use case gerhana, use case yang berupa tampilan dari gerhana

matahari dan gerhana bulan serta penjelasannya.

4. Use case meteor dan meteoroid, use case yang berupa

penjelasan tentang meteor dan meteoroid.

5. Use case sistem penanggalan, use case yang berupa penjelasan

tentang kalender masehi dan kelender hijriah.

6. Use case bantuan, use case yang berfungsi untuk mendapatkan

informasi tentang masing-masing materi.

7. Use case latihan soal, use case yang berisi soal-soal mengenai

tata surya.

3.2.2 Activity Diagram

Activity diagram menjelaskan proses user masuk ke halaman

utama, kemudian aplikasi akan menampilkan halaman utama dari

aplikasi. Halaman utama aplikasi pembelajaran tata surya akan

menampilkan beberapa pilihan menu aplikasi, dimana dalam pilihan

tersebut terdapat pengenalan planet-planet, orbit tata surya,

terjadinya gerhana, meteor dan sistem penanggalan.

User memilih menu yang akan ditampilkan pada halaman

menu yang telah dipilih sesuai keinginan user. User dapat

berinteraksi dengan halaman menu yang telah dipilih. Ada button

exit jika user ingin keluar dari tampilan aplikasi.

Page 6: BAB 3 Metode dan Perancangan Sistem - UKSW

22

Gambar 3.3 Activity Diagram User

3.2.3 Sequence Diagram

Sequence diagram menjelaskan bagaiman alur di dalam

menjalankan aplikasi ini. Aplikasi pembelajaran tata surya ada

beberapa Sequence diagram antara lain:

1. Sequence diagram pengenalan planet

User akan masuk ke halaman utama dari aplikasi, dimana akan

ditampilkan pilihan menu yang dapat dipilih. User memilih menu

Pengenalan Planet dan aplikasi akan menampilkan halaman

Pengenalan Planet. Dalam halaman ini, user dapat belajar tentang

planet dengan penjelasan berbagai planet-planet yang ada di dunia

ini. Jika ingin keluar dari aplikasi, user dapat menekan tombol exit

untuk kembali ke halaman menu. Secara lengkap dijelaskan dalam

Gambar 3.4.

Page 7: BAB 3 Metode dan Perancangan Sistem - UKSW

23

Gambar 3.4 Sequence Diagram Pengenalan Planet

2. Sequence diagram orbit tata surya

User akan masuk ke halaman utama dari aplikasi, dimana akan

ditamplikan pilihan menu yang dapat dipilih. User memilih menu

Orbit Tata Surya dan aplikasi akan menampilkan halaman Orbit Tata

surya. Halaman ini user mendapatkan informasi tentang pergerakan

planet-planet dengan tampilan animasi. Jika ingin keluar dari

aplikasi, user dapat menekan tombol exit untuk kembali ke halaman

menu. Secara lengkap dijelaskan dalam Gambar 3.5.

Page 8: BAB 3 Metode dan Perancangan Sistem - UKSW

24

Gambar 3.5 Sequence Diagram Orbit Tata Surya

3. Sequence diagram terjadinya gerhana

User akan masuk ke halaman utama dari aplikasi, dimana akan

ditamplikan pilihan menu yang dapat dipilih. User memilih menu

Gerhana dan aplikasi akan menampilkan halaman Gerhana.

Halaman ini user dapat informasi tentang pergerakan bulan yang

mengakibatkan gerhana matahari dan bulan. Untuk keluar dari

aplikasi user dapat menekan tombol exit untuk kembali ke halaman

menu. Secara lengkap dijelaskan dalam Gambar 3.6.

Page 9: BAB 3 Metode dan Perancangan Sistem - UKSW

25

Gambar 3.6 Sequence Diagram Gerhana

4. Sequence diagram meteor dan meteoroid

User akan masuk ke halaman utama dari aplikasi, dimana akan

ditamplikan pilihan menu yang dapat dipilih. User memilih menu

Meteor dan Meteoroid dan aplikasi akan menampilkan halaman

Meteor dan Meteoroid. Halaman ini user dapat informasi tentang

meteor dengan animasinya Jika ingin keluar dari aplikasi, user dapat

menekan tombol exit untuk kembali ke halaman menu. Secara

lengkap dijelaskan dalam Gambar 3.7.

Page 10: BAB 3 Metode dan Perancangan Sistem - UKSW

26

Gambar 3.7 Sequence Diagram Meteor dan Meteoroid

5. Sequence diagram sistem penanggalan

User akan masuk ke halaman utama dari aplikasi, dimana akan

ditamplikan pilihan menu yang dapat dipilih. User memilih menu

Sistem Penanggalan dan aplikasi akan menampilkan halaman Sistem

Penanggalan. Dalam halaman ini, user dapat informasi tentang

penanggalan menurut perhitungan gerakan matahari dan bulan. Jika

ingin keluar dari aplikasi, user dapat menekan tombol exit untuk

kembali ke halaman menu. Secara lengkap dijelaskan dalam Gambar

3.8.

Page 11: BAB 3 Metode dan Perancangan Sistem - UKSW

27

Gambar 3.8 Sequence Diagram Sistem Penanggalan

3.2.4 Class Diagram

Class diagram merupakan diagram yang digunakan untuk

menampilkan kelas yang ada dalam suatu sistem serta

menggambarkan relasi antar kelas tersebut. Perancangan class

diagram pada sistem ini dapat dilihat pada Gambar 3.9.

Gambar 3.9 Class Diagram Aplikasi

Page 12: BAB 3 Metode dan Perancangan Sistem - UKSW

28

3.3 Desain Antarmuka Rancangan antarmuka aplikasi merupakan halaman yang akan

menampilkan aplikasi desktop. Adapun beberapa rancangan

antarmuka dari aplikasi yaitu halaman utama, halaman pilihan menu,

halaman pengenalan planet, halaman orbit tata surya, halaman

terjadinya gerhana matahari dan bulan, halaman meteor dan

meteoroid, halaman sistem penanggalan, dan halaman bantuan.

3.3.1 Rancangan Antarmuka Halaman Utama

Rancangan antarmuka ini digunakan sebagai halaman utama

dari aplikasi. Halaman ini pengguna dapat melihat sebuah tampilan

buku untuk masuk ke antarmuka yang disediakan pada halaman

utama.

Gambar 3.10 Merupakan tampilan rancangan antarmuka

halaman utama.

Gambar 3.10 Rancangan antarmuka halaman utama

1

2 3

4

5

Page 13: BAB 3 Metode dan Perancangan Sistem - UKSW

29

Gambar 3.10 Yang merupakan rancangan antarmuka halaman

utama aplikasi ini terdiri dari:

1. Tulisan sistem tata surya

2. Gambar astronot

3. Tombol pilihan menu

4. Tombol bantuan

5. Tombol mute

3.3.2 Rancangan Antarmuka Halaman Pengenalan Planet

Halaman ini terdapat gambar planet serta penjelasannya yang

berupa tulisan dan suara. Penjelasan ini berisi informasi planet yang

mengelilingi matahari. Berikut bentuk dari rancangan antarmuka

halaman pengenalan planet. Dalam rancangan antarmuka halaman

pengenalan planet terdapat beberapa bagian yang terdiri dari:

1. Tulisan pengenalan planet

2. Tombol preview

3. Tampilan penjelasan planet

4. Tombol next

5. Tombol mute

6. Tombol exit

Page 14: BAB 3 Metode dan Perancangan Sistem - UKSW

30

Untuk lebih jelasnya dapat dilihat pada Gambar 3.11.

Gambar 3.11 Rancangan antarmuka pengenalan planet

3.3.3 Rancangan Antarmuka Halaman Orbit Tata Surya

Halaman orbit tata surya terdapat animasi planet-planet

mengelilingi matahari dengan garis edarnya masing-masing dan

informasi tentang planet-planet. Berikut bentuk dari rancangan

antarmuka halaman pengenalan planet. Dalam rancangan antarmuka

halaman orbit tata surya terdapat beberapa bagian yang terdiri dari:

1. Tulisan orbit tata surya

2. Animasi orbit tata surya

3. Kolom penjelasan planet

4. Tombol mute

5. Tombol exit

1

2

3

4

5 6

Page 15: BAB 3 Metode dan Perancangan Sistem - UKSW

31

Untuk lebih jelasnya dapat dilihat pada Gambar 3.12.

Gambar 3.12 Rancangan antarmuka orbit tata surya

3.3.4 Rancangan Antarmuka Halaman Gerhana

Halaman ini terdapat animasi gerhana dengan pergerakan

bulan yang mengakibatkan gerhana matahari dan gerhana bulan.

Halaman ini juga terdapat gambar masing-masing gerhana.

Rancangan antarmuka halaman gerhana terdapat beberapa bagian

yang terdiri dari:

1. Tulisan gerhana

2. Animasi gerhana

3. Gambar gerhana matahari

4. Gambar gerhana bulan

5. Tombol mute

6. Tombol exit

1

2 3

5 6

Page 16: BAB 3 Metode dan Perancangan Sistem - UKSW

32

Untuk lebih jelasnya dapat dilihat pada Gambar 3.13.

Gambar 3.13 Rancangan antarmuka gerhana

3.3.5 Rancangan Antarmuka Halaman Meteor dan Meteoroid

Halaman ini terdapat animasi meteor dan penjelasan untuk

meteor dan meteoroid. Rancangan antarmuka halaman meteor dan

meteoroid terdapat beberapa bagian yang terdiri dari:

1. Tulisan meteor dan meteoroid

2. Animasi meteoroid

3. Tulisan penjelasan meteoroid

4. Animasi meteor

5. Tulisan penjelasan meteor

6. Animasi meteorit

7. Tulisan penjelasan meteorit

8. Tombol mute

9. Tombol exit

1

2 4

5 6

Page 17: BAB 3 Metode dan Perancangan Sistem - UKSW

33

Untuk lebih jelasnya dapat dilihat pada Gambar 3.14.

Gambar 3.14 Rancangan antarmuka meteor dan meteoroid

3.3.6 Rancangan Antarmuka Halaman Sistem Penanggalan

Halaman ini terdapat penjelasan sistem penanggalan yang

terbagi menjadi dua, yaitu kalender masehi dan kalender hijriah.

Rancangan antarmuka halaman sistem penanggalan terdapat

beberapa bagian yang terdiri dari:

1. Tulisan sistem penanggalan

2. Tombol preview

3. Tampilan penjelasan sistem penanggalan

4. Tombol next

5. Tombol mute

6. Tombol exit

1

2

3

4

5

6

7 8 9

Page 18: BAB 3 Metode dan Perancangan Sistem - UKSW

34

Untuk lebih jelasnya dapat dilihat pada Gambar 3.15.

Gambar 3.15 Rancangan antarmuka sistem penanggalan

3.3.7 Rancangan Antarmuka Halaman Bantuan

Halaman ini berisi tentang informasi dari masing-masing

materi dalam halaman menu. Rancangan antarmuka halaman

bantuan terdapat beberapa bagian yang terdiri dari:

1. Tulisan bantuan

2. Tulisan penjelasan singkat dari masing-masing materi

3. Tombol exit

1

2 4

3

5 6

Page 19: BAB 3 Metode dan Perancangan Sistem - UKSW

35

Untuk lebih jelasnya dapat dilihat pada Gambar 3.16.

Gambar 3.16 Rancangan antarmuka sistem bantuan

1

2

5 6

Page 20: BAB 3 Metode dan Perancangan Sistem - UKSW

36