bab iii analisis dan perancangan sistem 3.1. analisis …repository.unwira.ac.id/3648/4/bab...

31

BAB III

ANALISIS DAN PERANCANGAN SISTEM

3.1. Analisis dan Perancangan Sistem

Aplikasi yang dibangun merupakan aplikasi multimedia pembelajaran untuk

siswa SMP kelas VIII yang dikembangkan dalam bentuk animasi pembelajaran.

Aplikasi multimedia pembelajaran ini menggunakan metode multimedia

development life cycle, yang mana multimedia mempunyai daya tarik untuk para

pengguna karena mempunyai unsur animasi, suara, gambar, video dan teks.

Dalam aplikasi multimedia ini dibutuhkan materi-materi untuk

menyesuaikan kebutuhan diantaranya:

1. Materi Pernapasan Manusia

Merupakan materi yang berisi tentang organ pernapasan, proses

pernapasan, jenis pernapasan dan infeksi pada pernapasan. Materi yang

disajikan dalam aplikasi ini dipresentasikan dalam bentuk animasi bergerak

dan video.

2. Animasi Materi Pernapasan Manusia

Merupakan bentuk ilustrasi secara visual tentang pernapasan manusia

sehingga siswa dapat memahami proses-proses pernapasan pada manusia,

dan organ-organ yang mendukung dalam proses pernapasan serta infeksi

pada saluran pernapasan.

32

3. Soal Evaluasi

Merupakan saran untuk menguji pengetahuan pengguna sesaat setelah

pengguna membaca atau melihat materi dan animasi dari pernapasan manusia

yang terdapat dalam aplikasi.

3.2. Analisis Peran Sistem

Fungsi analisis peran sistem adalah menghasilkan informasi yang berkualitas

dan akurat apabila terdapat fungsi-fungsi yang nantinya harus dimiliki oleh sistem

yaitu:

1. Aplikasi multimmedia yang dibangun mampu menyampaikan informasi

secara terperinci tentang pernapasan manusia, organ-organ pernapasan

dan infeksi pada saluran pernapasan.

2. Sistem yang dibangun memberi kesempatan pada user untuk bisa

meng-input data maupun informasi tentang materi pada pokok

pembahasan pernapasan manusia, organ-organ pernapasan dan infeksi

pada saluran pernapasan.

3. Aplikasi yang ditampilkan berupa prosses pernapasan manusia, organ-

organ pernapasan manusia dan infeksi pada saluran pernapasan.

3.3. Analisis Peran Pengguna

Pengguna aplikasi ini antara lain adalah guru mata pelajaran Biologi. Dimana

peran guru dalam aplikasi ini adalah sebagai pemberi informasi kepada para

siswa dalam bentuk media interaktif tentang pernapasan manusia.

33

3.4. Analsis Perangkat Pendukung.

Untuk menghasilkan aplikasi yang baik, sistem yang dirancang harus

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

Dalam perancangan aplikasi ini perangkat-perangkat yang diperlukan yaitu:

3.4.1. Sistem Perangkat Keras (Hardware).

Perangkat keras (hardware) adalah perangkat fisik dari sebuah

komputer. Terdiri dari tiga jenis perangkat keras, yaitu perangkat masukkan,

perangkat keluaran dan perangkat pengolah.

Perangkat keras (Hardware) yang digunakan adalah:

1. Procecor Intel(R) CPU B815 1.60 GHz.

2. Memory 2 GB.

3. Hard Disk 320 GB.

4. Mouse.

5. Keyboard.

6. Speaker.

3.4.2. Sistem Perangkat Lunak (Software)

Perangkat lunak (Software) adalah program komputer yang

merupakan suatu susunan instruksi yang diberikan kepada unit pengolah

agar komputer dapat menjalankan tugas sesuai dengan yang diharapkan.

34

Adapun perangkat lunak yang digunakan dalam pembuatan aplikasi inia dalah:

1. Sistem Operasi Windows 10.

2. Adobe flash CS6.

3. Adobe photoshop CS5.

4. Format Factory.

5. Audacity.

3.5. Storyboard.

Tujuan membuat storyboard adalah dapat memberikan gambaran untuk

proses mendeskripsikan tiap scene dan sebagai bagan alir jalannya sistem setelah

melakukan analisis. Storyboard pernapasan manusia dan infeksi pada saluran

pernapasan adalah sebagai berikut.

Gambar 3.1 Hirarki Storyboard

Intro Utama

Multimedia

Menu Utama

Materi Profil Kuis Animasi Keluar

Pernapasan Manusia

Organ Pernapasan

Proses Pernapasan

Infeksi Pernapasan

Jenis Pernapasan

35

Storyboard merupakan sketsa gambar yang disusun secara berurutan

dalam membuat konsep komunikasi dan ungkapan kreatif, teknik dan media

untuk menyampaikan pesan dan gagasan secara visual. Storyboard aplikasi

multimedia pembelajaran pernapasan manusia dan infeksi pada saluran

pernapasan untuk siswa kelas VIII SMPN 1 Mamboro dapat dilihat pada

Tabel storyboard.

SCENE SQUANCE VISUAL DURASI KETERANGAN

1.Preloader

‘

00:00:10

Animasi 2D dengan efek suara. B1 : skip intro

2. Menu Utama

00:03:00

B1 : Tombol X, berfungsi untuk Keluar B2 :Tombol Materi. B3:Tombol animasi pernapasan. B4 : Tombol Kuis B5 : Tombol Profil

3.(Materi

Organ

Pernapasan

Manusia)

00:03:00 B6 : Materi Hidung. B7 : Materi Faring B8 : Materi Trakea B8 :Materi Bronkus B9 : Materi Bronkiolus B10: Materi Paru-paru B11 : Materi Diafragma B12 : Tombol Home kembali ke menu utama B13 : Tombol kembali berfungsi kembali ke menu materi B14 : Tombol keluar berfungsi untuk

36

menutup aplikasi

1.(Materi Organ Hidung)

00:06.00

Pada menu ini berisi penjelasan tentang hidung

2.(Materi Organ Faring)

00:06:00 Pada menu ini berisi penjelasan tentang Faring

3.(Materi Organ Trakea)

00:06:00 Pada menu ini berisi penjelasan tentang Trakea.

4.(Materi Organ Bronkus)

00:06:00

Pada menu ini berisi penjelasan tentang Bronkus.

5.(Materi Organ Bronkiolus)

00:06:00

Pada menu ini berisi penjelasan tentang Bronkiolus.

6.(Materi Organ Paru-paru)

00:06:00

Pada menu ini berisi penjelasan tentang Paru-paru.

37

7.(Materi Organ Diafragma)

00:06:00

Pada menu ini berisi penjelasan tentang Diafragma

4.Materi

Proses

Pernapasan

00:06:00

B15: Tombol Materi inspirasi B16: Tombol Materi Ekspirasi B17 : Tombol kembali berfungsi kembali ke menu materi B18: Tombol Home kembali ke menu utama B19: Tombol keluar berfungsi untuk menutup aplikasi

1.(Materi Inspirasi)

00:06:00 Pada menu ini berisimateri tentang proses inspirasi

2.(Materi Ekspirasi)

00:06:00 Pada menu ini berisi materi tentang proses ekspirasi

5.Materi jenis Pernapasan

00:03:00

B20 : Materi Pernapasan Dada B21 : Materi Pernapasan Perut B16: Home kembali ke menu utama B22: Tombol keluar berfungsi untuk keluar B23 : Tombol

38

kembali ke menu materi

1.(Materi Pernapasan dada)

00:6:00

Pada menu ini berisi penjelasan pernapasan Dada B24: Tombol Back berfungsi kembali ke menu jenis pernapasan

1.(Materi Pernapasan Perut)

00:6:00

Pada menu ini berisis penjelasan pernapasan Perut

5.Materi Infeksi Pernapasan

00:03:00

B25 : Materi radang pernapasan B26 : Materi asma B27 :Home. kembali ke menu utama B29 : Tombol keluar berfungsi untuk menutup aplikasi B30 : Tombol kembalike menu materi

1.(Materi Radang Pernapasan)

00:06:00

Pada menu ini berisis materi penjelasan tentang radang pernapasan

2.(Materi Asma)

00:10:00

Pada menu ini berisi video penjelasan penyakit Asma.

39

3.(Materi ISPA)

00:10:00

Pada menu ini berisi video penjelasan ISPA.

3.(Materi Sinus)

00:10:00

Pada menu ini berisi video penjelasan Infeksi pada Sinus.

6. Animasi 1.(Animasi Pernapasan)

00:5:00

Pada menu ini berisi penjelasan Animasi Pernapasan Manusia B31 : Tombol animasi pernapasan dada B32 : Tombol animasi pernapasan perut B 33 : Tombol kembali berfungsi kembali ke menu utama B34: Tombol home kembali ke menu utama B35: Tombol keluar berfungsi untuk menutup aplikasi.

1.(Animasi Pernapasan Dada)

00:5:00

Pada menu ini berisi penjelasan Animasi Pernapasan Dada

40

2.(Animasi Pernapasan Perut)

00:5:00

Pada menu ini berisi penjelasan animasi pernapasan perut

7. Kuis 00:30:00 Dari masing-masing tombol A, B, C, D dan E salah satunya adalah jawaban yang benar. Jika jawaban yang benar diklikmaka akan berpindah ketampilan berikutnya dengan ditambah nilai skor. Sebaliknya jika jawaban salah yang dipilih akan berpindah ketampilan tes berikutnya tanpa nilai skor, hingga tampilan akan sampai pada tampilan hasil tes. B36:Tombol mulai kuis B37 : Tombol keluar kuis dan juga untuk menutup aplikasi B38 : Tombol home kembali ke menu utama

8. Profil 00:01:00 Pada menu ini berisi tentang biodata penulis.

41

3.1 Tabel Storyboard

3.6. Perancangan Tampilan

Rancangan tampilan yang ada dalam aplikasi akan dijelaskan pada tahap ini.

Tampilan dimulai dengan menu preloader kemudian akan terhubung ke menu

utama.

3.6.1 Rancangan Tampilan Preloader

Gambar 3.3 Rancangan Tampilan Preloader

Rancangan tampilan ini digunakan sebagai tampilan awal

berupaanimasi intro yang berupa teks, gambar dan suara. Pada menu

initerdapat tombol skip intro untuk masuk pada menu utama.

9. Keluar

00:01:00 B39 : Tombol tutup aplikasi B40 : Tombol kembali ke menu utama.

42

3.6.2 Rancangan Tampilan Menu Utama

Gambar 3.4 Rancangan Tampilan Menu Utama.

Pada tampilan menu utama terdapat 4 tombol menu utama yaitu:

Materi, Animasi, Kuis dan Profil. Pada menu materi terdapat 4 pilihan

pokok materi, pada menu animasi terdapat 2 pilihan animasi

pernapasan manusia dan jenis pernapasan manusia yang menampilkan

gambar bergerak sesuai dengan pokok materi, pada menu kuis

terdapat soal-soal acak yang diberikan untuk menguji kemampuan

pengguna, pada menu pada menu profil menampilkan biodata penulis.

Pada bagian kiri atas terdapat tombol home yang berfungsi kembali ke

menu utama dan tombol keluar pada bagian kanan atas untuk keluar

dari aplikasi. Pengguna dapat mengklik pada tombol yang diinginkan

dan akan masuk ke dalam menu yang dipilih.

3.6.3 Rancangan Tampilan Menu Materi Pernapasan Manusia.

Gambar 3.5 Rancangan Tampilan Menu Materi Pernapasan Manusia

43

Pada menu materi pernapasan manusia ini terdapat 4 pilihan sub

materi yang akan dipelajari, pengguna dapat memilih sub menu materi

yang akan dipelajari dengan mengklik salah satu sub menu materi.

3.6.4 Rancangan Tampilan Menu Materi Organ Pernapasan Manusia.

Gambar 3.6 Rancangan Tampilan Sub Menu Materi

Organ Pernapasan Manusia.

Pada sub menu materi pengertian organ pernapasan manusia ini

terdapat gambar organ hidung, bronkus, bronkiolus, faring, trakea

dan paru-paru. Pengguna dapat mengklik tombol nama organ-organ

pernapasan manusia, tombol nama organ tersebut berhubungan

dengan materi. Dan pada bagian kanan bawah terdapat tombol untuk

kembali ke menu materi pernapasan manusia.

3.6.5 Rancangan Tampilan Sub Menu Materi Organ Hidung.


Organ Hidung.

44

Pada sub menu materi pengertian organ hidung ini pada bagian atas

kolom merupakan nama organ dan bagian bawah nama organ adalah

gambar organ, di bawah gambar organ terdapat kolom yang berisi

materi. Pada bagian sebelah kiri bawah terdapat tombol back untuk

kembali ke materi sebelumnya dan tombol home untuk kembali ke

menu utama.

3.6.6 Rancangan Tampilan Sub Menu Materi Organ Faring.

Gambar 3.8 Rancangan Tampilan Sub Menu Materi Organ

Faring.

Pada sub menu materi pengertian organ faring ini pada bagian atas

kolom merupakan nama organ, danbagian bawah nama organ adalah

gambar organ, di bawah gambar organ terdapat kolomyang berisi

materi.Pada bagian sebelah kiri bawah terdapat tombol back untuk

kembali ke materi sebelumnya dan tombol home untuk kembalike

menu utama.

45

3.6.7 Rancangan Tampilan Sub Menu Materi Organ Trakea.


Organ Trakea.

Pada sub menu materi pengertian organ trakea ini pada bagian atas



materi.Pada bagian sebelah kiri bawah terdapat tombol back untuk


menu utama.

3.6.8 Rancangan Tampilan Sub Menu Materi Organ Bronkus.


Organ Bronkus.

Pada sub menu materi pengertian organ bronkus ini pada bagian atas

kolom merupakan nama organ, dan bagian bawah nama organ adalah



46


menu utama.

3.6.9 Rancangan Tampilan Sub Menu Materi Organ Bronkiolus.


Organ Bronkiolus.

Pada sub menu materi pengertian organ trakea ini pada bagian atas

kolom merupakan nama organ, dan bagian bawah nama organ adalah




menu utama.

3.6.10 Rancangan Tampilan Sub Menu Materi Organ Paru-paru.

Gambar 3.12 Rancangan Tampilan Sub Menu Materi Organ

Paru-paru.

47

Pada sub menu materi pengertian organ paru-paru ini pada bagian atas





menu utama.

3.6.11 Rancangan Tampilan Sub Menu Materi Organ Diafragma.


Organ Diafragma.

Pada sub menu materi pengertian diafragma ini pada bagian atas

kolom merupakan nama organ, danba gian bawah nama organ adalah




menu utama.

48

3.6.12 Rancangan Tampilan Menu Materi Proses Pernapasan

Manusia.

Gambar 3.14 Rancangan Tampilan Menu Materi

Proses Pernapasan Manusia.

Pada menu materi proses pernapasan manusia ini pada bagian atas

kolom merupakan gambar dan pada bagian bawah gambar sebelah kiri

dan kanan merupakan tombol materi inspirasi dan ekspirasi.

3.6.13 Rancangan Tampilan Sub Menu Proses Pernapasan Inspirasi.


Jenis Pernapasan Inspirasi.

Pada sub menu materi jenis pernapasan inspirasi ini pada bagian

sebelah kanan kolom merupakan gambar jenis pernapasan dada

sebelah kiri kolom merupakan materi. Pada bagian sebelah kiri bawah

terdapat tombol back untuk kembali ke materi sebelumnya dan tombol

home untuk kembali ke menu utama.

49

3.6.14 Rancangan Tampilan Sub Menu Materi Pernapasan Ekspirasi

Gambar 3.16 Rancangan Tampilan Sub Menu

Materi Pernapasan Ekspirasi.

Pada sub menu materi pengertian pernapasan ekspirasi, pada bagian

atas kolom merupakan nama materi, danbagian bawah nama materi

adalah kolom teks yang berisi materi. Pada bagian sebelah kiri bawah



3.6.15 Rancangan Tampilan Menu Materi Infeksi Pernapasan.


Infeksi Pernapasan.

Pada menu materi infeksi pernapasan manusia ini pada bagian atas


dan kanan merupakan tombol materi radang pernapasan dan asma.

50

3.6.16 Rancangan Tampilan Sub Menu Materi Radang Pernapasan.

Gambar 3.18 Rancangan Tampilan Sub Menu

Materi Radang Pernapasan.

Pada sub menu materi radang pernapasan, pada bagian atas kolom

merupakan nama materi, dan bagian bawah nama materi adalah kolom

teks yang berisi materi, dan bagian kiri kolom materi terdapat gambar

yang berhubungan degan materi. Pada bagian sebelah kiri bawah



3.6.17 Rancangan Tampilan Sub Menu Materi Asma.

Gambar 3.19 Rancangan Tampilan Sub Menu Materi Asma.

Pada sub menu materi pengertian asam, pada bagian atas kolom


yang berisi video penjelsan tentang penyakit asma. Pada bagian

51

sebelah kiri bawah terdapat tombol back untuk kembali ke materi

sebelumnya dan tombol home untuk kembali ke menu utama.

3.6.18 Rancangan Tampilan Sub Menu Materi Laringitis

Gambar 3.20 Tampilan Sub Menut Materi Laringitis

Pada sub menu materi pengertian laringitis, pada bagian atas kolom


yang berisi video penjelsan tentang penyakit laringitis. Pada bagian

sebelah kiri bawah terdapat tombol back untuk kembali ke materi

sebelumnya dan tombol home untuk kembali ke menu utama.

3.6.19 Rancangan Tampilan Menu Materi Jenis Pernapasan.

Gambar 3.21 Rancangan Tampilan Menu Materi Jenis

Pernapasan

52

Pada menu materi infeksi pernapasan manusia ini pada bagian atas


dan kanan merupakan tombol materi pernapasan dada dan pernapasan

perut.

3.6.20 Rancangan Tampilan Sub Menu Materi Pernapasan Dada.


Pernapasan Dada.

Pada sub menu materi pernapasan dada, pada bagian atas kolom

merupakan nama materi, dan bagian bawah sebelah kiri nama materi

adalah kolom teks yang berisi materi, dan bagian kanan kolom materi

terdapat gambar yang berhubungan degan materi. Pada bagian sebelah

kiri bawah terdapat tombol back untuk kembali ke materi sebelumnya

dan tombol home untuk kembali ke menu utama.

3.6.21 Rancangan Tampilan Sub Menu Materi Pernapasan Perut.


Pernapasan Perut.

53

Pada sub menu materi pernapasan perut, pada bagian atas kolom

merupakan nama materi, dan bagian bawah sebelah kiri nama materi

adalah kolom teks yang berisi materi, dan bagian kanan kolom materi

terdapat gambar yang berhubungan degan materi. Pada bagian sebelah

kiri bawah terdapat tombol back untuk kembali ke materi sebelumnya

dan tombol home untuk kembali ke menu utama.

3.6.22 Rancangan Tampilan Menu Animasi Pernapasan Manusia.

Gambar 3.24 Rancangan Tampilan Menu Animasi

Pernapasan Manusia.

Pada menu animasi pernapasan manusia ini terdapat 2 pilihan sub

menu animasi yang akan dipelajari, pengguna dapat memilih sub

menu animasi yang akan dipelajari dengan mengklik salah satu sub

menu animasi. Pada bagian bawah sebelah kiri terdapt tombol home

untuk kembali ke menu utama.

3.6.23 Rancangan Tampilan Sub Menu Animasi Pernapasan Dada

Gambar 3.25 Rancangan Tampilan Sub Menu Animasi

Pernapasan Dada.

54

Pada sub menu animasi pernapasan dada ini pada bagian sebelah kiri

kolom merupakan teks materi dan sebelah kanan kolom merupakan

gambar yang berhubungan dengan materi. Pada bagian bawah

sebelah kiri merupakan tombol back utuk kembali ke materi

sebelumnya.

3.6.24 Rancangan Tampilan Sub Menu Animasi Pernapasan Perut.

Gambar 3.26 Rancangan Tampilan Sub Menu Animasi Pernapasan Perut.

Pada sub menu animasi pernapasan Perut ini pada bagian sebelah

kiri kolom merupakan teks materi dan sebelah kana kolom

merupakan gambar yang berhubungan dengan materi. Pada bagian

bawah sebelah kiri merupakan tombol back utuk kembali ke materi

sebelumnya.

3.6.25 Rancangan Tampilan Menu Kuis

Gambar 3.27 Rancangan Tampilan Menu Kuis

55

Pada menu kuis diberikan 10 pertanyaan acak dari 70 jumlah soal,

masing-masing tombol A, B, C, D, dan E satunya adalah jawaban

yang benar. Jika jawaban yang benar diklik maka akan berpindah

ketampilan berikutnya dengan ditambah nilai skor. Sebaliknya jika

jawaban salah yang dipilih akan berpindah ke

tampilan test berikutnya tanpa nilai skor, hingga tampilan akan

sampai pada tampilan hasil tes.

3.6.26 Rancangan Tampilan Menu Profil

Gambar 3.28 Rancangan Tampilan Menu Profil.

Pada menu profil ini, pada bagian sebelah kanan kolom merupakan

teks biodata penulis dan sebelah kiri kolom merupakan foto penulis.

Pada bagian atas sebelah kiri terdapat tombol home, yang berfungsi

untuk kembali ke menu utama, dan pada bagian atas sebelah kanan

terdapat tombol keluar yang berfungsi untuk menutup aplikasi.

3.6.27 Rancangan Tampilan Menu Keluar.

Gambar 3.29 Rancangan Tampilan Menu Keluar.

56

Pada menu keluar ini, pada bagian bawah sebelah kanan dan kiri

terdapat dua tombol.

Pada bagian bawah sebelah kiri terdapat tombol keluar, yang

berfungsi untuk menutup aplikasi dan pada bagian bawah sebelah

kanan terdapat tombol yang berfungsi kembali ke menu utama.

3.7. Entity Relationship Diagram (ERD)

Gambar 3.30 Entity Relationship Diagram (ERD)

materi

id_materi judul

isi

kuis

id_kuis soal a

b

c

d

e

kunci

57

3.8. Perancangan Database

Sistem database adalah suatu informasi mengintegrasikan kumpulan dari

data yang saling berhubungan satu dengan yang lain dan membuatnya tersedia di

dalam suatu aplikasi. Database itu sendiri adalah salah satu komponen yang

terpenting di dalam suatu tabel informasi, karena infromasi sebagai dasar untuk

menyediakan informasi bagai pemakai (user).

3.8.1 Tabel Materi

Tabel ini berisi materi yang akan dimuat pada tampilan menu

materi pernapasan manusia dan infeksi pada saluran pernapasan.

Perancangan tabel materi dapat dilihat pada tabel 3.2.

Field Tipe Data Size Key Keterangan

id int 11 Primary Key

id_materi

judul varchar 500 judul materi

isi text isi materi

Tabel 3.2 Tabel Materi

3.8.2 Tabel Kuis

Tabel ini berisi soal kuis yang dimuat pada tampilan menu kuis

tentang pernapasan manusia dan infeksi pada saluran pernapasan.

Perancangan tabel dapat dilihat pada tabael 3.3.

58

Field Tipe Data Size Key Keterangan

id int 11 Primary Key

id_materi

soal varchar 255 soal kuis

a varchar 255 option a

b varchar 255 option b

c varchar 255 option c

d varchar 255 option d

e varchar 255 option e

kunci varchar 255 kunci

jawaban

Tabel 3.3 Tabel Kuis

bab iii analisis dan perancangan sistem 3.1. analisis …repository.unwira.ac.id/3648/4/bab...

Documents