201210225245 Elan Setiawan Cover Daftar Lampiran

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

  

Elan Setiawan, 201210225245, ellan 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. iv

  Media Interaktif..., Elan, Fakultas Teknik 2016

  

Elan Setiawan, 201210225245, ellan 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. v

  Media Interaktif..., Elan, Fakultas Teknik 2016

  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

  8. Adi Muhajirin, S.Kom., M.Kom, selaku dosen Pembimbing I yang memberi referensi tentang materi pembahasan dalam pembuatan 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

  13. Dan pihak-pihak lain yang tidak dapat disebutkan satu persatu namanya yang telah membantu pembuatan proposal skripsi ini.

  12. Teman-teman seperjuangan di Universitas Bhayangkara yang juga sedang menyusun dan menyelesaikan skripsinya.

  11. Kepada pihak perusahaan PT. Inovasi Sukses Sentosa yang telah memberikan ijin untuk cuti dalam usaha penyelesaian skripsi ini.

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

  9. Achmad Muhazir, S.T, M.T, selaku dosen Pembimbing II yang memberi pengarahan dalam metodelogi penulisan dalam pembuatan skripsi ini.

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

  Universitas Bhayangkara ” sebagai salah satu syarat untuk memperoleh gelar sarjana strata satu ( S1 ) pada Program Studi Teknik Informatika Fakultas Teknik Universitas Bhayangkara Jakarta Raya.

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

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

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

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

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

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

  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 :

  Jakarta, Agustus 2016 Penulis

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

  ix Media Interaktif..., Elan, Fakultas Teknik 2016

  x

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

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

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

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

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

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

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

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

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

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

  BAB III METODOLOGI PENELITIAN

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

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

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

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

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

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

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

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

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

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

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

  BAB II LANDASAN TEORI

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

  Media Interaktif..., Elan, Fakultas Teknik 2016

  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

  xi Media Interaktif..., Elan, Fakultas Teknik 2016

DAFTAR TABEL

Tabel 1.1 Data mahasiswa Teknik Universitas Bhayangkara Jakarta Jaya kampus II Bekasi pada periode tahun 2014 --------------------------------------- 1Tabel 1.2 Data mahasiswa Teknik Universitas Bhayangkara Jakarta Jaya kampus II Bekasi pada periode tahun 2015 ---------------------------------------- 2Tabel 2.1 Daftar browser terpopular yang mendukung bahasa pemrograman

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

Tabel 2.2 Simbol pada use case diagram ------------------------------------------ 11Tabel 2.3 Simbol pada activity diagram ------------------------------------------- 12Tabel 2.4 Simbol pada activity diagram ------------------------------------------- 14Tabel 4.1 Percobaan B-1, Tabel input pada praktikum percobaan pada gerak harmonik sederhana pada pegas ----------------------------------------------------- 30Tabel 4.2 Percobaan B-2, Tabel input pada praktikum percobaan pada gerak harmonik sederhana pada bandul ---------------------------------------------------- 31Tabel 4.3 Pengujian white box fungsional media simulasi pada pegas -------- 46Tabel 4.4 Pengujian white box fungsional media simulasi pada bandul ------ 48Tabel 4.5 Pengujian black box antarmuka media simulasi pada pegas -------- 50Tabel 4.6 Pengujian black box antarmuka media simulasi pada bandul ------ 51Tabel 4.7 Percobaan input mencari periode pada aplikasi media simulasi pada pegas ------------------------------------------------------------------------------------ 52Tabel 4.8 Percobaan input mencari grafitasi pada aplikasi media simulasi pada pegas ------------------------------------------------------------------------------------ 52Tabel 4.9 Percobaan input mencari grafitasi pada aplikasi media simulasi pada bandul ----------------------------------------------------------------------------------- 53Tabel 4.10 Daftar browser dan versinya yang mendukung aplikasi media simulasi ini ------------------------------------------------------------------------------ 54

  xii Media Interaktif..., Elan, Fakultas Teknik 2016

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 ------------------------------------------------ 12Gambar 2.3 contoh Class diagram -------------------------------------------------- 13Gambar 2.4 contoh Sequence diagram --------------------------------------------- 14Gambar 2.5 contoh Statemachine diagram ----------------------------------------- 14Gambar 2.6 contoh Collaboration

   diagram ---------------------------------------- 15

Gambar 2.7 contoh Deployment diagram ------------------------------------------ 15Gambar 2.8 contoh Component diagram ------------------------------------------- 16Gambar 2.9 contoh Object diagram ------------------------------------------------- 17Gambar 2.10 contoh Timing diagram ----------------------------------------------- 17Gambar 2.11 contoh Interaction Overview diagram ------------------------------ 18Gambar 2.12 contoh Composite Structure diagram ------------------------------ 19Gambar 2.13 contoh Package diagram --------------------------------------------- 20Gambar 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----- 29Gambar 4.2 Rancangan mockup halaman beranda aplikasi --------------------- 32Gambar 4.3 Rancangan mockup halaman menu pilihan aplikasi --------------- 33Gambar 4.4 Rancangan mockup halaman simulasi pada pegas ---------------- 33Gambar 4.5 Rancangan mockup animasi simulasi pada pegas ----------------- 34Gambar 4.6 Rancangan mockup halaman simulasi pada bandul --------------- 34Gambar 4.7 Rancangan mockup animasi simulasi pada pegas ----------------- 35

  xii Media Interaktif..., Elan, Fakultas Teknik 2016

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 ------------------------------ 39Gambar 4.12 Component diagram simulasi pegas sistem usulan ------------- 40Gambar 4.13 Component diagram simulasi bandul sistem usulan ----------- 40Gambar 4.14 Deployment diagram sistem usulan ------------------------------- 41Gambar 4.15 Package diagram sistem usulan ------------------------------------ 42Gambar 4.16 Tampilan halaman utama media simulasi ------------------------ 43Gambar 4.17 halaman menu utama simulasi ------------------------------------- 43Gambar 4.18 halaman simulasi gerak harmonik sederhana pada pegas ------ 44Gambar 4.19 halaman simulasi gerak harmonik sederhana pada bandul ----- 44Gambar 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 -------

  xiii Media Interaktif..., Elan, Fakultas Teknik 2016