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
Elan Setiawan, 201210225245, ellanstw@gmail.com, 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
Elan Setiawan, 201210225245, ellanstw@gmail.com, 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
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
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
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 x
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
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 xii
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 ------- xiii
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 xv