PENGEMBANGAN MODEL APLIKASI PEMBELAJARAN KEANEKARAGAMAN MAKHLUK HIDUP MENGGUNAKAN HTML5 Pengembangan Model Aplikasi Pembelajaran Keanekaragaman Makhluk Hidup Menggunakan HTML5.

PENGEMBANGAN MODEL APLIKASI PEMBELAJARAN
KEANEKARAGAMAN MAKHLUK HIDUP MENGGUNAKAN HTML5

SKRIPSI
Disusun Sebagai Salah Satu Syarat Menyelesaikan Jenjang Strata 1
Pada Program Studi Teknik Informatika Fakultas Komunikasi dan Informatika
Universitas Muhammadiyah Surakarta

Oleh :
LUKMAN HARUN
L200100130

PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS KOMUNIKASI DAN INFORMATIKA
UNIVERSITAS MUHAMMADIYAH SURAKARTA
2014

i

HALAMAN PERSETUJUAN


Skripsi dengan judul

PENGEMBANGAN MODEL APLIKASI PEMBELAJARAN
KEANEKARAGAMAN MAKHLUK HIDUP MENGGUNAKAN HTML5

Diajukan oleh :
Lukman Harun
L200100130

Telah disetujui oleh :

Pembimbing 1

tanggal ………………

Drs. Sudjalwo, M.Kom.
NIK : 404
Pembimbing 2

tanggal ……………….


Hernawan Sulistyanto, S.T,.M.T.

NIK : 882

ii

HALAMAN PENGESAHAN
PENGEMBANGAN MODEL APLIKASI PEMBELAJARAN
KEANEKARAGAMAN MAKHLUK HIDUP MENGGUNAKAN HTML5
Dipersiapkan dan disusun oleh :
LUKMAN HARUN
NIM : L200100130
Telah dipertahankan di depan dewan penguji
Pada tanggal :………………..

Susunan Dewan Penguji

Pembimbing 1


Dewan Penguji

Drs. Sudjalwo, M.Kom.

Dr. Heru Supriyono, M.Sc

NIK : 404

NIK : 970

Pembimbing 2

Hernawan Sulistyanto, S.T,.M.T.
NIK : 882

Skripsi ini telah diterima sebagai salah satu persyaratan
untuk memperoleh gelar sarjana
Dekan

Ketua Program Studi


Fakultas Komunikasi dan Informatika

Teknik Informatika

Husni Thamrin, S.T, M.T, Ph.D

Dr. Heru Supriyono, M.Sc

NIK : 706

NIK : 970

iii

DAFTAR KONSTRIBUSI
Dengan ini saya menyatakan bahwa skripsi ini tidak terdapat karya yang
pernah diajukan untuk memperoleh gelar kesarjanaan di suatu Perguruan Tinggi,
dan sepanjang pengetahuan saya juga tidak terdapat karya atau pendapat yang
pernah ditulis atau diterbitkan oleh orang lain kecuali yang secara tertulis diacu

dalam naskah ini dan disebutkan dalam daftar pustaka.
Berikut saya sampaikan daftar kontribusi dalam penyusunan skripsi :
1. Dalam perancangan dan pembuatan aplikasi pembelajaran keanekaragaman
makhluk hidup ini dengan bantuan buku dan internet yang dilampirkan pada
daftar pustaka. Persentase pembuatan aplikasi 75% dibuat sendiri dan 25%
diskusi dengan teman-teman.
2. Untuk materi pada aplikasi pembelajaran diperoleh dari buku guru dan siswa
yang diperoleh dari guru mata pelajaran IPA serta dari internet.
3. Untuk animasi, gambar dan video saya dapat melalui buku dan internet.
Demikian pernyataan dari daftar kontribusi ini saya buat dengan
sejujurnya. Saya bertanggung jawab atas isi dan kebenaran daftar di atas.
Surakarta, ………………

Lukman Harun
Mengetahui :
Pembimbing 1

Pembimbing 2

(Drs. Sudjalwo, M.Kom.)

NIK : 404

(Hernawan Sulistyanto, S.T,.M.T.)

NIK : 882
iv

MOTTO DAN PERSEMBAHAN

MOTTO :

“kita dianugerahkan mata untuk melihat, kaki untuk melangkah, tangan untuk
bekerja, otak untuk berfikir dan mulut untuk berdoa gunakan itu semua sebagai
kendaraan yang akan mengantarkan menuju mimpi-mimpi dan
tujuan dalam hidup”
(Penulis)

“kekeliruan terbesar yang mungkin kita perbuat adalah hidup terus-menerus
dalam ketakutan kalau-kalau kita membuat kekeliruan”
(John C. Maxwell)


"Manusia yang paling lemah adalah ialah orang yang tidak mampu mencari
teman. namun yang lebih lemah dari itu ialah orang yang mendapatkan banyak
teman tetapi menyia-nyiakanya''
(Ali bin Abi Thalib)

v

PERSEMBAHAN :
Syukur Alhamdulilah kupersembahkan karyaku ini kepada orang-orang
yang telah mendukung & memotivasi saya dalam pengerjaan Tugas Akhir ini :
1. Ibu, ibu, ibu dan ayah tercinta (Alm. Ibu Chuzaemah dan Alm. Bapak H.
Tarjono) yang telah memberikan kasih dan sayangnya hingga akhir hayat
kepadaku yang tak akan mungkin terbalaskan.
2. Kakak-kakakku dan Adikku yang selalu memberikan dukungan baik
dalam hal moril dan materiil.
3.

Teman-teman seperjuangan informatika angkatan 2010 terutama temanteman GEMBEL yang telah menjadi seperti keluarga sendiri dimana saling
bantu-membantu saat ada teman yang dalam kesusahan moga jalinan

silahturahmi kita akan tetap terjaga.

4. Teman-teman kos AL-FIKR yang telah berbagi atap hidup bersama selama
menuntut ilmu di UMS.
5. Keluarga besar Teknik Informatika UMS tempatku menuntut ilmu dan
berbagi pengalaman.
6. Semua pihak yang tidak dapat penulis sebutkan satu persatu terima kasih
atas dukungannya.

vi

KATA PENGANTAR
Assalamualikum warohmatullahi wabarakatuh.
Syukur alhamdulilah penulis panjatkan kehadirat Allah SWT, atas rahmat,
taufiq, dan hidayah-Nya sehingga penyusunan skripsi ini bisa diselesaikan dengan
baik. Semua ini tidak lepas dari campur tangan orang-orang yang telah
mendukung dan membantu dalam proses pengerjaannya, oleh karena itu penulis
mengucapkan terima kasih kepada :
1. Allah S.W.T sang pencipta alam semesta dan pemilik semua nikmat yang
ada di dunia ini. Rasa syukur kupanjatkan atas semua nikmat yang telah

Engkau limpahkan kepada hamba-Mu.
2. Shalawat dan salam kuhaturkan kepada nabi akhir jaman Muhammad
SAW yang telah menjadi suri tauladan bagi umatnya.
3. Orang tua dan keluarga penulis yang telah memberikan do’a dan dukungan
yang tiada henti serta atas kasih sayanganya yang diberikan kepada
penulis.
4. Bapak Husni Thamrin, S.T., M.T Ph.D selaku dekan Fakultas Komunikasi
dan Informatika Universitas Muhammadiyah Surakarta.
5. Bapak Dr. Heru Supriyono, M.Sc selaku ketua program studi Teknik
Informatika

Fakultas

Komunikasi

dan

Informatika

Universitas


Muhammadiyah Surakarta.
6. Bapak Drs. Sudjalwo, M.Kom dan Bapak Hernawan Sulistyanto, S.T.,M.T
selaku pembimbing skripsi yang telah memberikan masukan dan saran
hingga terselesaikannya laporan ini.

vii

7. Teman-teman

seperjuangan,

terima

kasih

atas

kerjasama


dan

kekompakannya selama berjuang untuk mendapatkan gelar Strata 1
Fakultas Komunikasi dan Informatika Universitas Muhammadiyah
Surakarta.
8. Semua pihak yang tidak dapat penulis sebutkan satu persatu yang telah
membantu dalam penyelesaian laporan ini.
Laporan ini masih jauh dari kata sempurna, kritik dan saran yang membangun
penulis terima demi kesempurnaan penyusunan skripsi ini. Semoga hasil dari
penelitian ini dapat memberikan manfaat bagi penulis serta pembaca dalam
menambah ilmu pengetahuan dan wawasan.
Wassalamu’alaikum Warohmatullohi Wabarokatuh.

Surakarta, 12 Juli 2014

Penulis

viii

DAFTAR ISI
Halaman Judul……………………………………………………………. i
Halaman Persetujuan……………………………………………………... ii
Halaman Pengesahan……………………………………………………... iii
Daftar Kontribusi……………..…………………………………………... iv
Motto dan Persembahan…………………………………………………... v
Kata Pengantar………..…………………………………………………... vii
Daftar Isi………………………………………………………………….. ix
Daftar Tabel……….……………………………………………………... xii
Daftar Gambar…….……………………………………………………... xiii
Abstraksi…………..……………………………………………………... xv
BAB I PENDAHULUAN
1.1. Latar Belakang Masalah…………………………………………….

1

1.2. Rumusan Masalah…….…………………………………………….

3

1.3. Batasan Masalah…………………………………………………….

3

1.4. Tujuan Penelitian…….……..……………………………………….

4

1.5. Manfaat Penelitian…….…………………………………………….

4

1.6. Sistematika Penulisan……………………………………………….

5

BAB II TINJAUAN PUSTAKA……………………………………….

6

2.1. Telaah Penelitian…….……………………………………………...

6

2.2. Landasan Teori……………………………….…………………….

9

1. Aplikasi Multimedia Dalam Pendidikan………………………….

9

2. Web……………………………………………………………….

11

ix

3. HTM5…..………………………………………………………….

11

4. CSS3……………………………………………………………….

13

5. Waterfall..………………………………………………………….

14

BAB III METODE PENELITIAN……………………………………

18

3.1. Waktu dan Tempat………………………………………………….

18

3.2. Peralatan Utama dan Pendukung……..…………………………….

18

3.3. Alur Penelitian….………………………………………………….

19

3.4. Perancangan Aplikasi………..…………………………………….

22

1. Metode Pengumpulan Data….…………………………………….

22

2. Metode Perancangan……..….…………………………………….

23

3. Desain Secara Umun……..….…………………………………….

24

a). Data Flow Diagram Level 0…………………………………..

24

b). Data Flow Diagram Level 1……………...……………………..

25

3.5. Perancangan Use Case………..…………………………………….

28

1. Use Case Diagram…..………..…………………………………….

28

2. Use Case Description…..………..………………………………….

30

3.6. Rancangan User Interface………..…………………………..…….

31

BAB IV HASIL DAN PEMBAHASAN……………………………..

35

4.1. Hasil Penelitian…………………..…………………………..…….

35

1. Tampilan Halaman Home...………..……….………………..…….

35

2. Tampilan Halaman Ciri-ciri Makhluk Hidup..………………..…….

37

3. Tampilan Halaman Klasifikasi Makhluk Hidup..……………….….

45

4. Tampilan Halaman Sistem Organisasi Kehidupan..………………..

53

x

5. Tampilan Halaman Latihan……………………..……………….….

54

6. Tampilan Halaman About……………………..……………….….

56

4.2. Analisa dan Pembahasan………..…………………………..…….

57

1. Pengujian Aplikasi…………………..………………………….….

57

2. Kelebihan dan Kekurangan Aplikasi..………………………….….

66

a. Kelebihan Aplikasi Pembelajaran………………………………

66

a. Kekurangan Aplikasi Pembelajaran……………………….……

66

BAB V PENUTUP……………………………………………………

67

5.1. Kesimpulan……………………..…………………………..…….

67

5.2. Saran…………………..………..…………………………..…….

67

DAFTAR PUSTAKA………………………………………………..

68

LAMPIRAN………………………………………………………….

xi

DAFTAR TABEL
Tabel 3.1: Tabel Simbol Data Flow Diagram (DFD)…..………………….. 27
Tabel 4.1: Tabel hasil Pengisian kuesioner……………………………….. 58
Tabel 4.2: Tabel Hasil Perhitungan……………………………………….. 62

xii

DAFTAR GAMBAR
Gambar 2.1: Waterfall……………..……….…………………………..

15

Gambar 3.1: Flowchart Penelitian…..…….……………………………..

20

Gambar 3.2: Tahapan Metode Waterfall ………………………………..

23

Gambar 3.3: DFD Level 0……………..………………………………..

24

Gambar 3.4: DFD Level 1……………..…,……………………………..

25

Gambar 3.5: Use Case Diagram……..….……………………………….

29

Gambar 3.6: Rancangan Tampilan Home.……………………………….. 31
Gambar 3.7: Rancangan Tampilan Ciri-ciri Makhluk Hidup…………….. 32
Gambar 3.8: Rancangan Tampilan Klasifikasi Makhluk Hidup………….. 32
Gambar 3.9: Rancangan Tampilan Sistem Organisasi Kehidupan……….. 33
Gambar 3.10: Rancangan Tampilan Latihan…………………….……….. 34
Gambar 3.11: Rancangan Tampilan About……………………………….. 34
Gambar 4.1: Tampilan Halaman Home………………………………….. 35
Gambar 4.2: Tampilan Halaman Ciri-ciri Makhluk Hidup……..……….... 37
Gambar 4.3: Tampilan Video Menu Bernapas pada
Ciri-ciri Makhluk Hidup............................................................................

38

Gambar 4.4: Tampilan Video Menu Bergerak pada
Ciri-ciri Makhluk Hidup............................................................................

39

Gambar 4.5: Tampilan Video Menu Irritabilita pada
Ciri-ciri Makhluk Hidup............................................................................
Gambar 4.6: Tampilan Video Menu Makan pada

xiii

40

Ciri-ciri Makhluk Hidup............................................................................

40

Gambar 4.7: Tampilan Video Menu Ekskresi pada
Ciri-ciri Makhluk Hidup............................................................................

41

Gambar 4.8: Tampilan Video Menu Tumbuh pada
Ciri-ciri Makhluk Hidup............................................................................

42

Gambar 4.9: Tampilan Video Menu Berkembangbiak pada
Ciri-ciri Makhluk Hidup............................................................................

43

Gambar 4.10: Tampilan Video Menu Adaptasi pada
Ciri-ciri Makhluk Hidup............................................................................. 44
Gambar 4.11: Tampilan Halaman Klasifikasi Makhluk Hidup……..….... 45
Gambar 4.12: Tampilan Halaman Klasifikasi Hewan………………….... 46
Gambar 4.13: Tampilan Materi Avertebrata……………………………... 47
Gambar 4.14: Tampilan Materi Vertebrata…………….….…..………....

48

Gambar 4.15: Tampilan Klasifikasi Tumbuhan……….…..…..………....

49

Gambar 4.16: Tampilan Mater Bryophyta………….....…..…..………....

50

Gambar 4.17: Tampilan Materi Pteridophyta……………..….…..…….... 51
Gambar 4.18: Tampilan Materi Spermatophyta………………..……….... 52
Gambar 4.19: Tampilan Halaman Sistem Organisasi Kehidupan..…….... 53
Gambar 4.20: Tampilan Halaman Latihan…....……..………………….... 54
Gambar 4.21: Tampilan Drag n Drop…….…...……..………………….... 55
Gambar 4.22: Tampilan About………………………….……..………….. 56
Gambar 4.23: Prosentase Kelompok Responden…..…...……..….…….... 63

xiv

ABSTRAKSI
Aplikasi pembelajaran merupakan suatu program yang dirancang untuk
membantu siswa dalam proses belajar. Aplikasi yang dibuat harus terdapat
interaksi antar komponen-komponen pembelajaran sehingga bisa disebut sebagai
aplikasi pembelajaran interaktif. Peneliti mengambil objek pada materi
pembelajaran tentang keanekaragaman makhluk hidup yang terdiri dari beberapa
sub materi yaitu ciri-ciri makhluk hidup, klasifikasi makhluk hidup dan sistem
organisasi kehidupan. Dengan materi yang begitu banyak pasti akan sulit bagi
siswa dalam mempelajarinya, maka peneliti mengambil inisiatif untuk membuat
aplikasi pembelajaran tentang keanekaragaman makhluk hidup agar lebih mudah
dipahami oleh siswa.
Perancangan aplikasi pembelajaran ini menggunakan metode Waterfall
yang terdiri dari lima tahap yaitu : analisa kebutuhan, desain sistem, penulisan
kode program, pengujian program dan penerapan program. Sedangkan untuk
bahasa pemrograman yang digunakan yaitu html5, css3 dan javaScript.
Hasil yang diperoleh dari penilaian kuesioner yang diberikan kepada siswa
kelas tujuh dan guru SMP Muhammadiyah 5 Ulujami menyatakan 92%
menyatakan aplikasi pembelajaran ini interaktif dan lebih dari 84% menyatakan
aplikasi ini bisa menjadi media alternatif non konvensional.

Kata Kunci: Aplikasi Pembelajaran, Keanekaragaman Makhluk Hidup, HTML5

xv