i

MEDIA PEMBELAJARAN OLAHRAGA BOLA VOLI

BERBASIS WEB MENGGUNAKAN HTML5

SKRIPSI

Disusun Sebagai Salah Satu Syarat Menyelesaikan Jenjang Strata I

Pada Program Studi Teknik Informatika Fakultas Komunikasi dan Informatika

Universitas Muhammadiyah Surakarta

Oleh :

ADJIE SAPOETRA

NIM : L200100138

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS KOMUNIKASI DAN INFORMATIKA

UNIVERSITAS MUHAMMADIYAH SURAKARTA

2014

ii

iii

iv

v

MOTTO DAN PERSEMBAHAN

MOTTO :

“ Bersabarlah dalam menjalani kehidupan,

karena sifat sabar mampu mengendalikan amarahmu untuk tetap

melakukan hal positif dalam hidup“

( Adjie Sapoetra )

PERSEMBAHAN :

1. Kedua orang tuaku tercinta, Bapak Syaefudin dan Ibu Siti Kadhiroh

untuk kasih sayang, doa dan dukungan moral hingga materi serta

memberikan kesempatan saya untuk menempuh pendidikan sampai

saat ini.

2. Adikku tercinta Awaliyah Nurul Hikmah yang selalu mendukung dan

menjadi semangatku untuk dapat mengarahkanmu menjadi anak yang

lebih pandai.

3. Teman – teman Kontrakan Vegas, Yoga teman sejak SMP, Alfi dan

Tuwuh teman sejak masih duduk dibangku SMA yang selalu

mendukung saya.

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

Aziz, Lukman, Amin, Eko, Bias, Rizal, Agung, Alvin, Dinar, Burit,

vi

Reza, Victor dan mas Setyawan teman seperjuangan suka duka selama

4 tahun ini.

5. Teman – teman Remaja Ngasinan, Dondy, Supri, Aris, Andri, Dani,

Kanul yang selalu menjadi penghilang jenuh ketika berada dirumah.

6. Teman – teman kelas E Informatika angkatan 2010, teman menuntut

ilmu dari awal masa perkuliahan.

7. Teman – teman HIMATIF UMS, tempat pertama kali saya mengenal

organisasi.

8. Keluarga besar IT UMS dan IT Helpdesk yang telah menjadi tempat

untuk mengembangkan dan bertukar ilmu dibidang IT.

9. Semua pihak yang selalu ada untuk mendukung saya yang tidak bisa

kusebutkan satu persatu.

vii

KATA PENGANTAR

Alhamdulillah, kami panjatkan puji syukur kehadirat Allah SWT yang telah

melimpahkan rahmat, nikmat, dan hidayah-Nya sehingga penulis dapat

menyelesaikan skripsi ini dengan judul “ Media Pembelajaran Olahraga Bola Voli

Berbasis Web Menggunakan Html5 ”.

Skripsi ini disusun untuk memenuhi kurikulum pada Program Studi Teknik

Informatika Universitas Muhammadiyah Surakarta, sebagai kewajiban mahasiswa

dalam rangka menyelesaikan program sarjana.

Penulis menyadari bahwa skripsi ini jauh dari kesempurnaan, oleh karena

itu kritik saran yang membangun dari berbagai pihak sangat diharapkan penulis

demi perbaikan – perbaikan ke depan.

Terwujudnya skripsi ini tidak lepas dari bantuan berbagai pihak. Oleh

karena itu dalam kesempatan ini penulis ingin mengucapkan terima kasih yang

sebesar – besarnya 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 telah memberikan bimbingan, dukungan, dan

pengarahan kepada penulis sehingga dapat menyelesaikan penyusunan

skripsi dari awal hingga akhir.

viii

ix

DAFTAR ISI

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

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

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

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

Motto dan Persembahan .................................................................................. v

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

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

Daftar Rumus .................................................................................................. xiii

Daftar Tabel .................................................................................................... xiv

Daftar Gambar ................................................................................................. xv

Daftar Lampiran .............................................................................................. xvii

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

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

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

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

1.3. Batasan Masalah .................................................................... 2

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

1.5. Manfaat Penelitian ................................................................ 3

1.6. Sistematika Penulisan ........................................................... 4

BAB II TINJAUAN PUSTAKA ................................................................ 5

2.1. Telaah Pustaka ...................................................................... 5

2.2. Landasan Teori ...................................................................... 7

x

2.2.1. Pendidikan .......................................................... 7

2.2.2. Olahraga Bola Voli ............................................. 8

2.2.3. Html5 ................................................................. 9

2.2.4. Notepad ++ ......................................................... 9

2.2.5. Javascript ............................................................ 10

2.2.6. CSS3 ................................................................... 10

2.2.7. Web Browser ...................................................... 11

2.2.8. Adobe Photoshop CS4 ....................................... 11

BAB III METODOLOGI PENELITIAN ................................................. 12

3.1. Waktu dan Tempat Penelitian ............................................... 12

3.2. Alat dan Bahan Penelitian ..................................................... 12

3.2.1. Pembuatan Program .................................................. 13

1) Perangkat Lunak .................................................. 13

2) Perangakat Keras ................................................. 13

3.2.2. Penggunaan Program ................................................. 14

1) Perangkat Lunak .................................................. 14

2) Perangkat Keras ................................................... 14

3.3. Alur Penelitian ...................................................................... 14

3.4. Perancangan Sistem .............................................................. 18

3.4.1. Analisis Kebutuhan ................................................... 18

3.4.2. Pengumpulan Data .................................................... 19

3.4.3. Perancangan Desain Web .......................................... 19

xi

1) Desain Umum ...................................................... 19

A. DFD Level 0 ............................................ 19

B. DFD Level 1 ............................................ 20

C. Use Case Diagram ................................... 22

2) Desain Terperinci ................................................ 24

A. Halaman Menu Awal ( Home ) ............... 24

B. Halaman Menu Sejarah ........................... 25

C. Halaman Menu Peraturan ........................ 26

D. Halaman Menu Teknik ............................ 28

E. Halaman Menu Latihan ........................... 31

3.4.4. Perancangan Pengujian ............................................. 32

BAB IV HASIL DAN PEMBAHASAN .................................................... 37

4.1. Hasil Penelitian ..................................................................... 37

4.1.1. Halaman Menu Utama .............................................. 37

4.1.2. Halaman Menu Sejarah ............................................. 38

4.1.3. Halaman Menu Peraturan .......................................... 40

4.1.4. Halaman Menu Teknik .............................................. 44

4.1.5. Halaman Menu Latihan ............................................. 49

4.2. Pembahasan ........................................................................... 52

4.3. Analisa Kuisioner .................................................................. 59

4.4. Analisa Sistem ....................................................................... 70

4.4.1. Kelebihan .................................................................. 70

4.4.2. Kekurangan ............................................................... 71

xii

BAB V PENUTUP ...................................................................................... 72

5.1. Kesimpulan ........................................................................... 72

5.2. Saran ...................................................................................... 73

DAFTAR PUSTAKA .................................................................................... 75

LAMPIRAN ................................................................................................... 76

xiii

DAFTAR RUMUS

Rumus 3.1. Rumus Prosentase Interpretasi ..................................................... 34

xiv

DAFTAR TABEL

Tabel 3.1. Rancangan Kuisioner Guru ............................................................ 33

Tabel 3.2. Rancangan Kuisioner Siswa ........................................................... 35

Tabel 4.1. Tabel Hasil Pengisian Kuisioner Siswa ......................................... 59

Tabel 4.2. Tabel Skoring Kuisioner Siswa ...................................................... 60

Tabel 4.3. Tabel Hasil Pengisian Kuisioner Guru ........................................... 64

Tabel 4.4. Tabel Skoring Kuisioner Guru ....................................................... 65

xv

DAFTAR GAMBAR

Gambar 3.1. Diagram Alir ............................................................................ 15

Gambar 3.2. DFD Level 0 ............................................................................. 19

Gambar 3.3. DFD Level 1 ............................................................................. 20

Gambar 3.4. Use Case Diagram .................................................................... 22

Gambar 3.5. Rancangan Halaman Menu Utama ........................................... 24

Gambar 3.6. Rancangan Halaman Menu Sejarah ......................................... 25

Gambar 3.7. Rancangan Halaman Menu Peraturan ...................................... 27

Gambar 3.8. Rancangan Halaman Menu Teknik .......................................... 29

Gambar 3.9. Rancangan Halaman Menu Latihan ......................................... 31

Gambar 4.1. Halaman Menu Utama ............................................................. 38

Gambar 4.2. Halaman Menu Sejarah ............................................................ 39

Gambar 4.3. Tampilan Isi Sejarah International ........................................... 40

Gambar 4.4. Halaman Menu Peraturan ......................................................... 42

Gambar 4.5. Tampilan Lapangan dan Net .................................................... 42

Gambar 4.6. Tampilan Posisi Pemain ........................................................... 43

Gambar 4.7. Tampilan Rotasi Pemain .......................................................... 43

Gambar 4.8. Tampilan Posisi Wasit .............................................................. 44

Gambar 4.9. Halaman Menu Teknik ............................................................. 46

Gambar 4.10. Tampilan Servis Underhand ..................................................... 46

Gambar 4.11. Tampilan Video Servis Underhand .......................................... 47

Gambar 4.12. Tampilan Passing Bawah ......................................................... 47

Gambar 4.13. Tampilan Video Passing Bawah .............................................. 48

xvi

Gambar 4.14. Tampilan Video Smash Quick ................................................. 48

Gambar 4.15. Tampilan Video Blocking ........................................................ 49

Gambar 4.16. Halaman Menu Beranda Latihan .............................................. 50

Gambar 4.17. Halaman Latihan 1 ................................................................... 51

Gambar 4.18. Tampilan Soal Latihan 1 .......................................................... 52

Gambar 4.19. Tampilan Video Blocking pada Mozilla Firefox 29.0.1 ........... 53

Gambar 4.20. Spesifikasi Video Blocking pada Mozilla Firefox 29.0.1 ........ 54

Gambar 4.21. Tampilan Video Blocking pada Google Chrome 34.0.1 .......... 54

Gambar 4.22. Spesifikasi Video Google Chrome 34.0.1 ................................. 55

Gambar 4.23. Tampilan Video Blocking pada Internet Explorer 11 ............... 56

Gambar 4.24. Spesifikasi Video Internet Explorer 11 ..................................... 57

Gambar 4.25. Tampilan Video Blocking pada Opera 21 ................................ 57

Gambar 4.26. Spesifikasi Video Internet Opera 21 ........................................ 58

Gambar 4.27. Prosentase Penilaian Responden Siswa ................................... 61

Gambar 4.28. Prosentase Penilaian Responden Guru ..................................... 66

xvii

DAFTAR LAMPIRAN

Lampiran Surat Keterangan Penelitian

Lampiran Dokumentasi Saat Pengujian

Lampiran Kuisioner

Lampiran Script

xviii

ABSTRAK

Siswa Sekolah Menengah Pertama dalam proses belajar mengajar untuk

mata pelajaran olahraga masih berupa penyampaian langsung dari guru khusunya

bola voli. Sebagai penunjang adalah membaca buku materi, namun metode

tersebut kurang interaktif. Oleh karena itu dibutuhkan media yang menarik siswa

dalam memahami materi. Berdasarkan permasalahan tersebut, peneliti akan

merancang dan membangun serta menguji media pembelajaran berupa website.

Website ini memuat tentang materi olahraga bola voli dasar secara lengkap dan

benar dengan tampilan yang menarik sehingga mampu menarik minat serta

meningkatkan pemahaman siswa untuk mata pelajaran olahraga bola voli.

Metode pembuatan media pembelajaran ini menggunakan metode SDLC (

System Development Life Cycle ) yaitu model waterfall, dimana dalam merancang

dan pembangunannya melalui beberapa tahapan meliputi definisi kebutuhan,

analisis kebutuhan, desain sistem, pembangunan sistem, pengujian, dan

pemeliharaan.

Hasil dari penelitian ini adalah media pembelajaran berupa website dengan

memuat materi tentang teknik dasar olahraga bola voli sesuai dengan kurikulum

untuk siswa Sekolah Menengah Pertama yaitu mampu melakukan servis, passing,

smash, dan blocking. Dari data dapat disimpulkan bahwa tampilan media ini

menarik, mampu menarik minat siswa untuk mempelajari materi sehingga dapat

meningkatkan pemahaman siswa terhadap mata pelajaran olahraga bola voli.

Dengan demikian tujuan dibuatnya tugas akhir ini telah tercapai.

Kata Kunci : Bola Voli, Siswa, Sekolah Menengah Pertama, interaktif