SKRIPSI MEDIA INTERAKTIF PEMBELAJARAN FISIKA DENGAN …repository.ubharajaya.ac.id/657/1/201210225245_Elan... · ini, dalam skripsi ini penulis mengambil judul mengenai “Media interaktif

SKRIPSI

MEDIA INTERAKTIF PEMBELAJARAN FISIKA

DENGAN POKOK BAHASAN GERAK HARMONIK

SEDERHANA

PADA UNIVERSITAS BHAYANGKARA

Diajukan Oleh :

NAMA : ELAN SETIAWAN

NIM : 201210225245

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS BHAYANGKARA JAKARTA RAYA

JAKARTA

2016

SKRIPSI

MEDIA INTERAKTIF PEMBELAJARAN FISIKA

DENGAN POKOK BAHASAN GERAK HARMONIK

SEDERHANA

PADA UNIVERSITAS BHAYANGKARA

Diajukan Sebagai Salah Satu Syarat Menyelesaikan Program Sarjana Strata

Satu (S1) Pada Fakultas Teknik Universitas Bhayangkara Jakarta Raya

Diajukan Oleh :

NAMA : ELAN SETIAWAN

NIM : 201210225245

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS BHAYANGKARA JAKARTA RAYA

JAKARTA

2016

Media Interaktif..., Elan, Fakultas Teknik 2016




iv

Elan Setiawan, 201210225245, [email protected], Media interaktif

pembelajaran fisika dengan pokok bahasan gerak harmonik sederhana pada

Universitas Bhayangkara.

ABSTRAKSI

Pada Universitas Bahayangkara Jakarta Raya dalam percobaan praktikum

fisika dasar I yang diikuti oleh mahasiswa teknik yang merupakan matakuliah wajib

lulus, dengan menggunakan alat realitas yang ketersediaan alat dan bahan yang

terbatas. Dan ketersediaan komputer pada lab. komputer cukup lebih banyak

dibanding ketersediaan alat dan bahan praktikum fisika. Sampai saat ini belum

adanya ketersedian media interaktif simulasi pembelajaran dengan pokok bahasan

gerak harmonik sederhana yang merupakan bahasan pada praktikum fisika dasar I

pada Universitas Bhayangkara Jakarta Raya. Dalam perkembangan teknologi dan

informasi saat ini bahasa pemrograman HTML5 tag <canvas> dan javscript mampu

menampilkan animasi dan lebih popular dibanding adoble flash yang belum

menampilkan perkembangannya. Untuk meningkatkan efisiensi waktu praktikum dan

dana pembelian alat praktikum maka perlu dibuatkannya media interaktif simulasi

pembelajaran fisika dasar I dengan pokok bahasan gerak harmonik sederhana

menggunakan bahasa pemrograman HTML5, CSS3 dan javascript.

Kata Kunci : Media interaktif simulasi pembelajaran fisika, gerak harmonik

sederhana, HTML5, CSS3 dan javascript.


mailto:[email protected]

v

Elan Setiawan, 201210225245, [email protected], Interactive medium of

learning physics with simple harmonic motion subject at the University

Bhayangkara

ABSTRACTION

At University Bahayangkara Jakarta Raya in basic physics lab experiment I,

followed by engineering students who are required to pass the course, using the tools

of reality that the availability of tools and materials are limited. And the availability

of computers in the lab. computer quite a lot more than the availability of tools and

materials physics lab. Until now, the lack of availability of interactive media

simulation study on the subject of simple harmonic motion which is a discussion on

the basic physics lab at the University I Bhayangkara Jakarta Raya. In the

development of technology and information currently programming language

HTML5 tag <canvas> and javscript able to display animations and more popular than

adoble flash is not yet showing its development. To improve the efficiency of lab

time and funds to purchase the necessary practical tools dibuatkannya interactive

media learning basic physics simulation I to the subject of simple harmonic motion

using the programming language HTML5, CSS3 and JavaScript.

Keywords : Media interactive learning simulation physics , simple harmonic motion

, HTML5, CSS3 and javascript.


mailto:[email protected]


KATA PENGANTAR

Puji syukur atas rahmat Allah SWT, penulis dapat menyelesaikan skripsi

ini, dalam skripsi ini penulis mengambil judul mengenai “Media interaktif

pembelajaran fisika dengan pokok bahasan gerak harmonic sederhana pada

Universitas Bhayangkara” sebagai salah satu syarat untuk memperoleh gelar

sarjana strata satu ( S1 ) pada Program Studi Teknik Informatika Fakultas Teknik

Universitas Bhayangkara Jakarta Raya.

Penulis mengucapkan banyak terimakasih kepada pihak - pihak yang telah

membantu, baik sebelum penulisan skripsi dan pada saat penulisan skripsi ini,

pihak – pihak tersebut antara lain :

1. Drs. H. Bambang Karsono, SH, MM,selaku Rektor Universitas

Bhayangkara.

2. Evi Siti Sofiyah, Ph.D,selaku Wakil Rektor I Universitas Bhayangkara.

3. Dr. Hj. Silvia Nurlaila, S.pd, MM, selaku Wakil Rektor II Universitas

Bhayangkara.

4. Drs. H. Bagus Harry S. selaku Wakil Rektor III Universitas Bhayangkara.

5. I.B. Ardhana Putra, Ir, Ph.D, selaku Wakil Rektor IV Universitas

Bhayangkara.

6. Ahmad Diponegoro, M.S.I.E., Ph.D, selaku Dekan Fakultas Teknik

Universitas Bhayangkara.

7. Hendarman Lubis, S.Kom, M.Kom, selaku Ketua Program Studi Teknik

Informatika Universitas Bhayangkara.

8. Adi Muhajirin, S.Kom., M.Kom, selaku dosen Pembimbing I yang

memberi referensi tentang materi pembahasan dalam pembuatan skripsi

ini.

9. Achmad Muhazir, S.T, M.T, selaku dosen Pembimbing II yang memberi

pengarahan dalam metodelogi penulisan dalam pembuatan skripsi ini.

10. Kedua orang tua yang selalu memberikan dukungan kepada penulis dalam

setiap kegiatan perkuliahan.

11. Kepada pihak perusahaan PT. Inovasi Sukses Sentosa yang telah

memberikan ijin untuk cuti dalam usaha penyelesaian skripsi ini.

12. Teman-teman seperjuangan di Universitas Bhayangkara yang juga sedang

menyusun dan menyelesaikan skripsinya.

13. Dan pihak-pihak lain yang tidak dapat disebutkan satu persatu namanya

yang telah membantu pembuatan proposal skripsi ini.

Penulismenyadari bahwa skripsi ini masih banyak kekurangan dan

kesalahan, untuk itu penulis mengharapkan adanya saran yang membangun demi

pengembangan ilmu pengetahuan. Akhir kata semoga skripsi ini dapat bermanfaat

bagi semua pihak yang memerlukan

Jakarta, Agustus 2016

Penulis


ix

DAFTAR ISI

Halaman Judul

Lembar Persetujuan ---------------------------------------------------------------------- ii

Lembar Pengesahan --------------------------------------------------------------------- iii

Lembar Pernyataan. --------------------------------------------------------------------- iv

Abstraksi ---------------------------------------------------------------------------------- v

Lembar Pernyataan Publikasi ---------------------------------------------------------- vii

Kata Pengantar --------------------------------------------------------------------------- viii

Daftar Isi -------------------------------------------------------------------------------- ix

Dafrar Gambar --------------------------------------------------------------------------- xii

Daftar Tabel ---------------------------------------------------------------------------- xiv

Dafrar Lampiran ----------------------------------------------------------------------- xv

BAB I PENDAHULUAN

1.1 Latar Belakang ------------------------------------------------------------ 1

1.2 Identifikasi Masalah ------------------------------------------------------ 4

1.3 Rumusan Masalah -------------------------------------------------------- 4

1.4 Batasan Masalah ---------------------------------------------------------- 4

1.5 Tujuan Penelitian -------------------------------------------------------- 4

1.6 Manfaat Penelitian ------------------------------------------------------- 4

1.7 Tempat dan Waktu Penulisan ------------------------------------------- 5

1.8 Metode Penelitian -------------------------------------------------------- 5

a. Metode survei -------------------------------------------------------- 5

b. Studi pustaka --------------------------------------------------------- 5


x

1.9 Metode Konsep Pengembangan Software ---------------------------- 5

1.10 Sistematika Penulisan ------------------------------------------------- 6

BAB II LANDASAN TEORI

2.1 Bahasa pemrograman --------------------------------------------------- 7

2.1.1 HTML5 ------------------------------------------------------------- 7

2.1.2 HTML5 Canvas --------------------------------------------------- 8

2.1.3 CSS3 ---------------------------------------------------------------- 8

2.1.4 Javascript ---------------------------------------------------------- 9

2.2 Simulasi ------------------------------------------------------------------ 9

2.2.1 Definisi Simulasi ------------------------------------------------ 9

2.2.2 Manfaat simulasi ------------------------------------------------ 9

2.3 Bahasan Materi pada simulasi ---------------------------------------- 10

2.4 UML (Unified Modeling Language) ---------------------------------- 10

2.5 Software perancangan apllikasi ---------------------------------------- 20

BAB III METODOLOGI PENELITIAN

3.1 Jenis penelitian ----------------------------------------------------------- 21

3.1.1 Perancangan penelitian ------------------------------------------ 21

3.1.1 Flowchart penyusunan penelitian ----------------------------- 21

3.2 Teknik Pengumpulan dan pengolahan data -------------------------- 22

3.2.1 Tempat dan waktu penelitian ----------------------------------- 22

3.2.2 Informan penelitian ---------------------------------------------- 23

3.2.3 Metode pengumpulan data -------------------------------------- 23

3.2.1.1 Metode survei ------------------------------------------- 23

3.2.1.2 Observasi ------------------------------------------------ 24


xi

3.2.4 Analisis data ------------------------------------------------------ 24

3.3 Metode dari konsep pengembangan software yang digunakan -- 25

3.3.1 Pengertian extreme programming ----------------------------- 25

3.3.2 Tujuan penggunaan metode ------------------------------------ 28

BAB IV PERANCANGAN SISTEM DAN IMPLEMENTASI

4.1 Analisis Sistem Eksiting ----------------------------------------------- 29

4.2 Perancangan dari Analisis Sistem dan Implementasi --------------- 32

4.2.1 Konsep Dasar ---------------------------------------------------- 32

4.2.2 Rancangan Antarmuka Aplikasi ------------------------------- 32

4.2.3 UML (Unifield modeling language) --------------------------- 35

4.2.4 Hasil Antarmuka Aplikasi --------------------------------------- 43

4.2.5 Pengujian black box dan white box ---------------------------- 46

4.2.5.1 Pengujian white box ------------------------------------- 46

4.2.5.2 Pengujian black box ------------------------------------- 50

4.2.6 Spesifikasi Software Pendukung aplikasi -------------------- 53

4.2.7 Penanganan crash (kegagalan memuat halaman media

simulasi) ------------------------------------------------------------------

54

BAB V KESIMPULAN DAN SARAN

5.1 Kesimpulan --------------------------------------------------------------- 55

5.2 Saran ----------------------------------------------------------------------- 55

Daftar Pustaka -------------------------------------------------------------------------- 56

Lampiran ------------------------------------------------------------------------------- xiii


xii

DAFTAR TABEL

Tabel 1.1 Data mahasiswa Teknik Universitas Bhayangkara Jakarta Jaya

kampus II Bekasi pada periode tahun 2014 --------------------------------------- 1

Tabel 1.2 Data mahasiswa Teknik Universitas Bhayangkara Jakarta Jaya

kampus II Bekasi pada periode tahun 2015 ---------------------------------------- 2

Tabel 2.1 Daftar browser terpopular yang mendukung bahasa pemrograman

HTML5 canvas ------------------------------------------------------------------------ 8

Tabel 2.2 Simbol pada use case diagram ------------------------------------------ 11

Tabel 2.3 Simbol pada activity diagram ------------------------------------------- 12

Tabel 2.4 Simbol pada activity diagram ------------------------------------------- 14

Tabel 4.1 Percobaan B-1, Tabel input pada praktikum percobaan pada gerak

harmonik sederhana pada pegas ----------------------------------------------------- 30

Tabel 4.2 Percobaan B-2, Tabel input pada praktikum percobaan pada gerak

harmonik sederhana pada bandul ---------------------------------------------------- 31

Tabel 4.3 Pengujian white box fungsional media simulasi pada pegas -------- 46

Tabel 4.4 Pengujian white box fungsional media simulasi pada bandul ------ 48

Tabel 4.5 Pengujian black box antarmuka media simulasi pada pegas -------- 50

Tabel 4.6 Pengujian black box antarmuka media simulasi pada bandul ------ 51

Tabel 4.7 Percobaan input mencari periode pada aplikasi media simulasi pada

pegas ------------------------------------------------------------------------------------ 52

Tabel 4.8 Percobaan input mencari grafitasi pada aplikasi media simulasi pada

pegas ------------------------------------------------------------------------------------ 52

Tabel 4.9 Percobaan input mencari grafitasi pada aplikasi media simulasi pada

bandul ----------------------------------------------------------------------------------- 53

Tabel 4.10 Daftar browser dan versinya yang mendukung aplikasi media

simulasi ini ------------------------------------------------------------------------------ 54


xii

DAFTAR GAMBAR

Gambar 1.1 Grafik peningkatan mahasiswa teknik Universitas Bhayangkara

Jakarta pada tahun 2014 sampai 2015 ----------------------------------------------

2

Gambar 2.1 contoh Use case diagram ---------------------------------------------- 11

Gambar 2.2 contoh Activity diagram ------------------------------------------------ 12

Gambar 2.3 contoh Class diagram -------------------------------------------------- 13

Gambar 2.4 contoh Sequence diagram --------------------------------------------- 14

Gambar 2.5 contoh Statemachine diagram ----------------------------------------- 14

Gambar 2.6 contoh Collaboration diagram ---------------------------------------- 15

Gambar 2.7 contoh Deployment diagram ------------------------------------------ 15

Gambar 2.8 contoh Component diagram ------------------------------------------- 16

Gambar 2.9 contoh Object diagram ------------------------------------------------- 17

Gambar 2.10 contoh Timing diagram ----------------------------------------------- 17

Gambar 2.11 contoh Interaction Overview diagram ------------------------------ 18

Gambar 2.12 contoh Composite Structure diagram ------------------------------ 19

Gambar 2.13 contoh Package diagram --------------------------------------------- 20

Gambar 3.1 flowchart diagram penyusunan penelitian sistem usulan media

simulasi gerak harmonik sederhana (GHS) ---------------------------------------

21

Gambar 3.2 Extreme Programming Model ---------------------------------------- 26

Gambar 4.1 Use case diagram sistem berjalan pembelajaran fisika dasar----- 29

Gambar 4.2 Rancangan mockup halaman beranda aplikasi --------------------- 32

Gambar 4.3 Rancangan mockup halaman menu pilihan aplikasi --------------- 33

Gambar 4.4 Rancangan mockup halaman simulasi pada pegas ---------------- 33

Gambar 4.5 Rancangan mockup animasi simulasi pada pegas ----------------- 34

Gambar 4.6 Rancangan mockup halaman simulasi pada bandul --------------- 34

Gambar 4.7 Rancangan mockup animasi simulasi pada pegas ----------------- 35


xiii

Gambar 4.8 Use case diagram sistem usulan media simulasi gerak harmonik

sederhana (GHS) secara offline ------------------------------------------------------

35

Gambar 4.9 Use case diagram sistem usulan media simulasi gerak harmonik

sederhana (GHS) secara online ------------------------------------------------------

36

Gambar 4.10 Activity diagram sistem usulan media simulasi gerak harmonik

sederhana (GHS) online --------------------------------------------------------------

36

Gambar 4.11 Activity diagram sistem usulan media simulasi gerak harmonik

sederhana (GHS) secara offline ------------------------------------------------------

37

Gambar 4.10 Sequence diagram sistem usulan ------------------------------------ 38

Gambar 4.11 Collaboration diagram sistem usulan ------------------------------ 39

Gambar 4.12 Component diagram simulasi pegas sistem usulan ------------- 40

Gambar 4.13 Component diagram simulasi bandul sistem usulan ----------- 40

Gambar 4.14 Deployment diagram sistem usulan ------------------------------- 41

Gambar 4.15 Package diagram sistem usulan ------------------------------------ 42

Gambar 4.16 Tampilan halaman utama media simulasi ------------------------ 43

Gambar 4.17 halaman menu utama simulasi ------------------------------------- 43

Gambar 4.18 halaman simulasi gerak harmonik sederhana pada pegas ------ 44

Gambar 4.19 halaman simulasi gerak harmonik sederhana pada bandul ----- 44

Gambar 4.20 Tampilan awal simulasi pada pegas ------------------------------- 45

Gambar 4.21 Tampilan Setelah “Tombol: Beri Beban” ditekan -------------- 45

Gambar 4.22 Tampilan awal pada simulasi bandul ----------------------------- 46

Gambar 5 Struktur organisasi Uuniversitas Bhayangkara Jakarta Raya -------


xv

DAFTAR LAMPIRAN

Lampiran 1 Kartu bimbingan skripsi

Lampiran 2 Daftar permintaan data

Lampiran 3 Tabel data mahasiswa teknik periode 2014 – 2015

Lampiran 4 Tabel jadwal praktikum fisika dasar I

Lampiran 5 Modul praktikum fisika pokok bahasan gerak harmonik sederhana

Lampiran 6 Struktur organisasi Universitas Bhayangkara Jakarta Raya

Lampiran 7 Tanggung Jawab dan Kewenanngan Universitas Bhayangkara Jakarta

Raya

Lampiran 8 Biodata mahasiswa


Documents

SKRIPSI MEDIA INTERAKTIF PEMBELAJARAN FISIKA DENGAN …repository.ubharajaya.ac.id/657/1/201210225245_Elan... · ini, dalam skripsi ini penulis mengambil judul mengenai “Media interaktif