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 Drs. Sudjalwo, M.Kom. NIK : 404 tanggal Pembimbing 2 Hernawan Sulistyanto, S.T,.M.T. NIK : 882 tanggal. 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. NIK : 404 Pembimbing 2 Dr. Heru Supriyono, M.Sc NIK : 970 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 NIK : 706 Dr. Heru Supriyono, M.Sc 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, Mengetahui : Lukman Harun Pembimbing 1 Pembimbing 2 (Drs. Sudjalwo, M.Kom.) (Hernawan Sulistyanto, S.T,.M.T.) NIK : 404 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... 40 Gambar 4.6: Tampilan Video Menu Makan pada xiii
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