MEDIA PEMBELAJARAN OLAHRAGA BOLA VOLI BERBASIS WEB MENGGUNAKAN HTML5 Media Pembelajaran Olahraga Bola Voli Berbasis Web Menggunakan HTML5.

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

i


ii

iii

iv

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,

v

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.

vi

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.

vii

viii

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

BAB II

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

TINJAUAN PUSTAKA ................................................................

5

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

5

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

7

ix

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

x

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

xi

BAB V

PENUTUP ......................................................................................

72

5.1. Kesimpulan ...........................................................................

72

5.2. Saran ......................................................................................

73

DAFTAR PUSTAKA ....................................................................................

75

LAMPIRAN ...................................................................................................

76

xii

DAFTAR RUMUS
Rumus 3.1. Rumus Prosentase Interpretasi .....................................................

xiii

34

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

xiv

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

xv

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

xvi

DAFTAR LAMPIRAN

Lampiran Surat Keterangan Penelitian
Lampiran Dokumentasi Saat Pengujian
Lampiran Kuisioner
Lampiran Script

xvii

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

xviii