i

MEDIA PEMBELAJARAN TEKNIK DASAR

OLAHRAGA BULUTANGKIS PADA SMP

MENGGUNAKAN HTML5

SKRIPSI

Disusun sebagai salah satu syarat menyelesaikan Program Studi Strata I

pada Program Studi Informatika Fakultas Komunikasi dan Informatika

Universitas Muhammadiyah Surakarta

Oleh :

SYAIFURRIZAL ZHAFIRIN

NIM : L200100140

PROGRAM STUDI INFORMATIKA

FAKULTAS KOMUNIKASI DAN INFORMATIKA

UNIVERSITAS MUHAMMADIYAH SURAKARTA

2015

ii

iii

iv

v

MOTTO

“ Siapa pun yang dikehendaki kebaikan oleh Allah ia pasti akan diuji “

( H.R. Bukhari )

“ Bersungguh – sungguh adalah syarat utama dalam meraih sukses“

( Syaifurrizal Zhafirin )

vi

PERSEMBAHAN

1. Allah SWT yang telah melimpahkan rahmat serta hidayahNya.

2. Kedua orang tuaku tercinta, Bapak Drs. Rochani dan Ibu Sih ngaini

yang telah mendidik dan membimbing saya dari lahir sampai saat ini.

3. Kakak ku Azharrudin Aufar yang selama ini menjadi contoh yang baik

untuk saya, adikku Ady Prasetya Nugraha yang memberikan semangat.

4. Octavia Rahmawati yang selama lima tahun ini selalu ada baik saat

senang maupun susah.

5. Teman – teman GEMBEL ( Gerombolan Belajar ), Yaka, Jati, Fikri,

Aziz, Lukman, Amin, Eko, Bias, Adjie, Agung, dan Alvin teman

seperjuangan suka duka selama 5 tahun ini.

6. Teman – teman kelompok bulutangkis dan futsal yang telah menerima

aku sebagai anggota.

vii

KATA PENGANTAR

Syukur Alhamdulliah saya ucapkan kepada Allah SWT yang telah

memberikan rahmat dan hidayahNya serta melimpahkan nikmat yang tidak ada

batasnya sehingga penulis dapat menyelesaikan skripsi dengan judul “ Media

Pembelajaran Teknik Dasar Olahraga Bulutangkis Pada SMP Menggunakan

Html5”.

Penulis menyadari sepenuhnya bahwa skripsi ini tidak akan selesai tanpa

bantuan dari berbagai pihak sehingga dalam kesempatan ini penulis ingin

mengucapkan terima kasih kepada :

1. Bapak Husni Thamrin, S.T, M.T., Ph.D. selaku Dekan Fakultas

Komunikasi dan Informatika Universitas Muhammadiyah Surakarta.

2. Bapak Dr. Heru Supriyono, S.T., M.Sc selaku Ketua Jurusan Teknik

Informatika Universitas Muhammadiyah Surakarta serta menjadi

pembimbing skripsi yang berkenan untuk meluangkan waktu untuk

membimbing serta mengarahkan penulis dari awal hingga penulis dapat

menyelesaikan penyusunan skripsi.

3. Dewan penguji yang telah memberikan masukan serta saran yang sangat

membangun.

4. Segenap dosen dan karyawan progdi Tenik Informatika atas bantuan dan

ilmu yang diberikan kepada penulis selama masa perkuliahan dari pertama

masuk kulah hingga dinyatakan mendapat gelar Strata 1.

viii

5. Kepada orang tua yang selalu memberikan dukungan berupa doa,

semangat, dan motivasi dengan tiada hentinya kepada penulis.

6. Teman – teman angkatan 2010 Teknik Informatika.

7. Semua pihak yang tidak bisa disebutkan satu - persatu yang telah

membantu dari awal hingga terselesaikannya skripsi ini.

Akhirnya penulis hanya dapat membalas doa dari semua pihak yang telah

membantu dalam penyusunan skripsi ini serta berharap semoga skripsi ini dapat

berguna untuk semua pihak dan bermanfaat bagi penuis, serta pembaca pada

umumnya dalam menambah pengetahuan dan wawasan ilmu.

Surakarta, Maret 2015

Syaifurrizal Zhafirin

ix

DAFTAR ISI

Halaman Judul ................................................................................................. i

Lembar Persetujuan ......................................................................................... ii

Lembar Pengesahan ........................................................................................ iii

Daftar Kontribusi ............................................................................................ iv

Motto ............................................................................................................... v

Persembahan ................................................................................................... vi

Kata Pengantar ................................................................................................ vii

Daftar Isi .......................................................................................................... ix

Daftar Tabel .................................................................................................... xiii

Daftar Gambar ................................................................................................. xiv

Daftar Lampiran .............................................................................................. xv

Abstrak ............................................................................................................ xviii

BAB I PENDAHULUAN ......................................................................... 1

1.1. Latar Belakang Masalah ........................................................ 1

1.2. Rumusan Masalah ................................................................. 2

1.3. Batasan Masalah .................................................................... 3

1.4. Tujuan Penelitian .................................................................. 3

1.5. Manfaat Penelitian ................................................................ 4

1.6. Sistematika Penulisan ........................................................... 5

BAB II TINJAUAN PUSTAKA ................................................................ 6

2.1. Telaah Pustaka ...................................................................... 6

2.2. Landasan Teori ...................................................................... 8

x

2.2.1. Pendidikan .......................................................... 8

2.2.2. CSS3 .................................................................... 8

2.2.3. JavaScript ........................................................... 8

2.2.4. Bulutangkis ........................................................ 9

2.2.5. Html5 ................................................................. 9

2.2.6. Database ............................................................. 10

2.2.7. MySQL ............................................................... 10

2.2.8. Adobe Dreamweaver .......................................... 10

BAB III METODOLOGI PENELITIAN ................................................. 11

3.1. Waktu dan Tempat Penelitian ............................................... 11

3.2. Peralatan Utama dan Pendukung .......................................... 11

3.2.1. Pembuatan Program .................................................. 12

1) Perangkat Keras ................................................... 12

2) Perangakat Lunak ................................................ 12

3.2.2. Penggunaan Program ................................................. 12

1) Perangkat Keras ................................................... 12

2) Perangkat Lunak .................................................. 13

3.3. Alur Penelitian ...................................................................... 13

3.4. Perancangan Aplikasi ............................................................ 16

3.4.1. Analisis Kebutuhan ................................................... 16

3.4.2. Pengumpulan Data .................................................... 16

3.4.3. Perancangan Desain Web .......................................... 16

1) Desain Sistem ...................................................... 16

xi

A. DFD Level 0 ............................................ 16

B. DFD Level 1 ............................................ 17

C. Use Case Diagram ................................... 19

2) Desain Terperinci ................................................ 21

A. Tampilan Menu Utama ........................... 21

B. Tampilan Menu Sejarah .......................... 22

C. Tampilan Menu Teknik Dasar ................. 23

D. Tampilan Menu Peraturan ....................... 25

E. Tampilan Menu Kejuaraan ...................... 26

F. Tampilan Menu Quiz ............................... 28

G. Tampilan Menu Tentang .......................... 30

3.4.4. Perancangan Pengujian ............................................. 31

BAB IV HASIL DAN PEMBAHASAN .................................................... 35

4.1. Hasil Penelitian ..................................................................... 35

4.1.1. Halaman Menu Utama .............................................. 35

4.1.2. Halaman Menu Sejarah ............................................. 36

4.1.3. Halaman Menu Teknik Dasar ................................... 37

4.1.4. Halaman Menu Peraturan .......................................... 40

4.1.5. Halaman Menu Kejuaraan .......................................... 44

4.1.6. Halaman Menu Quiz ................................................. 46

4.1.7. Halaman Menu Tentang ............................................ 49

4.2. Pembahasan ........................................................................... 49

4.3. Analisa Kuesioner ................................................................. 56

xii

4.4. Analisa Sistem ....................................................................... 67

4.4.1. Kelebihan .................................................................. 67

4.4.2. Kekurangan ............................................................... 68

BAB V PENUTUP ...................................................................................... 69

7.1. Kesimpulan ........................................................................... 69

7.2. Saran ...................................................................................... 70

DAFTAR PUSTAKA .................................................................................... 71

LAMPIRAN .................................................................................................... 73

xiii

DAFTAR TABEL

Tabel 3.1. Rancangan Kuisioner Guru ............................................................ 32

Tabel 3.2. Rancangan Kuisioner Siswa ........................................................... 33

Tabel 4.1. Tabel Hasil Pengisian Kuisioner Siswa ......................................... 56

Tabel 4.2. Tabel Skoring Kuisioner Siswa ...................................................... 57

Tabel 4.3. Tabel Hasil Pengisian Kuisioner Guru ........................................... 62

Tabel 4.4. Tabel Skoring Kuisioner Guru ....................................................... 63

xiv

DAFTAR GAMBAR

Gambar 3.1. Diagram Alir ............................................................................ 14

Gambar 3.2. DFD Level 0 ............................................................................. 16

Gambar 3.3. DFD Level 1 ............................................................................. 17

Gambar 3.4. Use Case Diagram .................................................................... 19

Gambar 3.5. Rancangan Menu Utama .......................................................... 21

Gambar 3.6. Rancangan Menu Sejarah ......................................................... 22

Gambar 3.7. Rancangan Hasil Menu Sejarah ............................................... 22

Gambar 3.8. Rancangan Menu Teknik Dasar ............................................... 23

Gambar 3.9. Rancangan Hasil Menu Teknik Dasar ...................................... 24

Gambar 3.10. Rancangan Menu Peraturan .................................................... 25

Gambar 3.11. Rancangan Hasil Menu Peraturan ........................................... 25

Gambar 3.12. Rancangan Menu Kejuaraan ................................................... 27

Gambar 3.13. Rancangan Hasil Menu Kejuaraan ........................................... 27

Gambar 3.14. Rancangan Menu Quiz ............................................................ 28

Gambar 3.15. Rancangan Hasil Menu Quiz ................................................... 29

Gambar 3.16. Rancangan Menu Tentang ....................................................... 30

Gambar 3.17. Rancangan Hasil Menu Tentang ............................................. 31

Gambar 4.1. Halaman Menu Utama ............................................................. 36

Gambar 4.2. Tampilan Isi Sejarah Bulutangkis di Dunia ............................ 37

Gambar 4.3. Tampilan Isi Sejarah Bulutangkis di Indonesia ....................... 37

Gambar 4.4. Tampilan Menu Teknik Dasar .................................................. 38

Gambar 4.5. Tampilan Materi Service .......................................................... 39

xv

Gambar 4.6. Tampilan Materi Memegang Raket .......................................... 39

Gambar 4.7. Tampilan Materi Teknik Smash ............................................... 40

Gambar 4.8. Tampilan Menu Teknik Dropshot ............................................ 40

Gambar 4.9. Tampilan Menu Peraturan ........................................................ 41

Gambar 4.10. Tampilan Peraturan Lapangan ................................................. 41

Gambar 4.11. Gambar Lapangan Bulutangkis ................................................. 42

Gambar 4.12. Tampilan Peraturan Penilaian .................................................. 42

Gambar 4.13. Tampilan Peraturan Jenis Permainan ....................................... 43

Gambar 4.14. Tampilan Peraturan Untuk Kesalahan ....................................... 43

Gambar 4.15. Tampilan peraturan Umum Dalam Pertandinan........................ 44

Gambar 4.16. Tampilan Pertandingan Bulutangkis ......................................... 45

Gambar 4.17. Tampilan Pertandingan Internasional ....................................... 45

Gambar 4.18. Tampilan Pertandingan Nasional ............................................. 46

Gambar 4.19. Halaman Menu Quiz ................................................................. 46

Gambar 4.20. Tampilan Menu Quiz Sejarah ................................................... 47

Gambar 4.21. Tampilan Menu Quiz Teknik Dasar .......................................... 47

Gambar 4.22. Tampilan Menu Quiz Peraturan ................................................ 48

Gambar 4.23. Tampilan Menu Quiz Kejuaraan ............................................... 48

Gambar 4.23. Tampilan Menu Tentang ........................................................... 49

Gambar 4.24. Tampilan Pada Mozilla Firefox 32.0.2...................................... 50

Gambar 4.25. Spesifikasi Mozilla Firefox 32.0.2 ............................................ 51

Gambar 4.26. Tampilan Pada Google Chrome 38.0.2 ..................................... 51

Gambar 4.27. Spesifikasi Google Chrome 38.0.2 ............................................ 52

xvi

Gambar 4.28. Tampilan Pada Internet Explorer 10 ......................................... 53

Gambar 4.29. Spesifikasi Internet Explorer 10 ................................................ 54

Gambar 4.30. Tampilan Pada Opera 10.62 ...................................................... 54

Gambar 4.31. Spesifikasi Opera 10.62............................................................. 55

Gambar 4.32. Prosentase Penilaian Responden Siswa .................................... 59

Gambar 4.33. Prosentase Penilaian Responden Guru ...................................... 64

xvii

DAFTAR LAMPIRAN

Lampiran Surat Keterangan Penelitian

Lampiran Dokumentasi Saat Pengujian

Lampiran Kuisioner

Lampiran Script

xviii

ABSTRAK

Proses pembelajaran di Madrasah Tsanawiyah yang masih dilakukan hingga

saat ini adalah guru menyampaikan secara lisan dan sebagai penunjang

pembelajaran hanya buku materi sehingga siswa merasa kesulitan dalam

memahami materi. Dalam proses belajar mengajar para pendidik dituntut untuk

mengembangkan keterampilan dalam memberikan materi agar siswa lebih mudah

dalam memahami materi. Berdasarkan permasalahan itu peneliti merancang dan

menguji media pembelajaran menggunakan html5. Media pembelajaran ini

memuat materi tentang olahraga bulutangkis dengan menampilkan materi sejarah,

teknik dasar, peraturan serta kejuaraan olahraga bulutangkis dengan tampilan

yang menarik dan interaktif sehingga dapat menarik minat siswa dalam belajar

mata pelajaran olahraga bulutangkis

Metode pembuatan media pembelajaran ini menggunakan model waterfall,

dimana dalam merancang dan pembangunannya melalui beberapa tahapan seperti

definisi kebutuhan, analisis kebutuhan, desain sistem, pembangunan sistem,

pengujian, dan pemeliharaan.

Hasil dari penelitian ini adalah media pembelajaran yang memuat tentang

olahraga bulutangkis yang sesuai dengan kurikulum untuk Madrasah Tsanawiyah

Negeri 1 Klaten. Dari data yang diperoleh setelah pengujian dapat disimpulkan

bahwa aplikasi ini dapat membuat siswa lebih tertarik untuk belajar tentang

olahraga bulutangkis. Hal ini terbukti dari hasil kuesioner 82% siswa yang

semakin tertarik untuk belajar olahraga bulutangkis setelah mempelajari materi

yang ada dalam aplikasi ini.

Kata Kunci : bulutangkis, media berbasis web, madrasah tsanawiyah,