PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS KOMUNIKASI DAN...

i

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

ii

HALAMAN PERSETUJUAN

Skripsi dengan judul



Diajukan oleh :

Lukman Harun

L200100130

Telah disetujui oleh :

Pembimbing 1

Drs. Sudjalwo, M.Kom. tanggal ………………

NIK : 404

Pembimbing 2

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

iii

HALAMAN PENGESAHAN



Dipersiapkan dan disusun oleh :

LUKMAN HARUN

NIM : L200100130

Telah dipertahankan di depan dewan penguji

Pada tanggal :………………..

Susunan Dewan Penguji

Pembimbing 1

Drs. Sudjalwo, M.Kom.

NIK : 404

Dewan Penguji

Dr. Heru Supriyono, M.Sc

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

Fakultas Komunikasi dan Informatika

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

NIK : 706

Ketua Program Studi

Teknik Informatika

Dr. Heru Supriyono, M.Sc

NIK : 970

iv

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

Pembimbing 1

(Drs. Sudjalwo, M.Kom.)

Pembimbing 2

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

Mengetahui :

NIK : 404 NIK : 882

v

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)

vi

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 teman-

teman 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.

vii

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.

viii

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

ix

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

x

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

xi

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………………………………………………………….

xii

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

xiii

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


Gambar 4.5: Tampilan Video Menu Irritabilita pada


Gambar 4.6: Tampilan Video Menu Makan pada

xiv


Gambar 4.7: Tampilan Video Menu Ekskresi pada


Gambar 4.8: Tampilan Video Menu Tumbuh pada


Gambar 4.9: Tampilan Video Menu Berkembangbiak pada


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

xv

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

PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS KOMUNIKASI DAN...

Documents

Transcript of PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS KOMUNIKASI DAN...