Institutional Repository | Satya Wacana Christian University: Aplikasi Pembelajaran IPA Berbasis Multimedia Interaktif Menggunakan HTML5 (Studi Kasus: SD Negeri 06 Salatiga) T1 672007146 BAB IV

(1)

37

Bab 4

Hasil dan Pembahasan

4.1 Prototype

Pembuatan aplikasi tidak lepas dari kebutuhan user untuk memenuhi kebutuhan dan materi yang ada. Proses prototyping aplikasi terdapat penambahan yang dibutuhkan user, penambahan-penambahan itu sebagai berikut:

1. Prototype 1

Aplikasi yang dibuat terdapat penambahan dan perubahan sesuai dengan permintaan user. Proses prototype 1 sebagai berikut:

- Prototype 1 halaman utama aplikasi terlihat pada Gambar 4.1.

Gambar 4.1 Prototype 1 Halaman Utama

Hasil dari wawancara kepada user pada Gambar 4.1, user menyatakan bahwa tampilan aplikasi kurang besar, dan letak button

menu disesuaikan dengan tampilan aplikasi yang lebih besar dan

(2)

- Prototype 1 halaman pengenalan planet aplikasi dapat dilihat

pada Gambar 4.2.

Gambar 4.2 Prototype 1 Halaman Pengenalan Planet

Hasil wawancara kepada user pada Gambar 4.2, tampilan halaman kurang besar dan tampilan pada penjelasan planet agar dibuat lebih besar. Background tampilan kurang bagus, diganti dengan tema background yang bisa mewakili aplikasi. Disertakan

button preview dan next untuk melihat penjelasan-penjelasan planet.

- Prototype 1 halaman orbit tata surya aplikasi terlihat pada

Gambar 4.3.

(3)

Hasil wawancara kepada user pada Gambar 4.3, user menyatakan bahwa tampilan kurang besar dan tidak ada keterangan planet.

- Prototype 1 halaman gerhana aplikasi terlihat pada Gambar

4.4.

Gambar 4.4 Prototype 1 Halaman Gerhana

(4)

- Prototype 1 halaman meteor aplikasi terlihat pada Gambar

4.5.

Gambar 4.5 Prototype 1 Halaman Meteor

Hasil wawancara kepada user pada Gambar 4.5, user menyatakan bahwa tampilan aplikasi kurang besar dan untuk gambar meteoroid agar sesuai dengan penjelasan, yaitu berupa batu-batuan kecil yang banyak.

- Prototype 1 halaman sistem penanggalan aplikasi terlihat pada

Gambar 4.6.

(5)

Hasil wawancara kepada user pada Gambar 4.6, user menyatakan bahwa tampilan kurang besar dan penjelasan kalender ditampilkan satu persatu dan diperbesar agar lebih jelas.

2. Prototype 2

- Prototype 2 halaman utama aplikasi dapat dilihat pada Gambar

4.7.

(6)

- Prototype 2 pengenalan planet aplikasi dapat dilihat pada

Gambar 4.8.

Gambar 4.8 adalah hasil prototype dari Gambar 4.2, dengan tampilan yang diperbesar sehingga lebih jelas, background diganti dengan gambar planet, dan disertakan button preview dan next. Hasil wawancara kepada user pada pada Gambar 4.8, user menyatakan bahwa ukuran font pada penjelasan planet kurang besar, sehingga kurang jelas dan jenis font diganti dengan yang lebih unik.

- Prototype 2 halaman orbit tata surya aplikasi dapat dilihat

pada Gambar 4.9.

(7)

Gambar 4.9 adalah hasil prototype dari Gambar 4.3, dengan tampilan lebih besar dan disamping animasi disertakan keterangan planet. Hasil wawancara kepada user pada Gambar 4.9, user menyatakan bahwa animasi gerak planet tidak jelas.

3. Prototype 3

- Prototype 3 halaman utama aplikasi dapat dilihat pada Gambar

4.10.

Gambar 4.10 Halaman Utama

(8)

- Prototype 3 Tampilan halaman pengenalan planet dapat dilihat

pada Gambar 4.11.

Gambar 4.11 adalah hasil prototype dari Gambar 4.8, dengan perubahan ukuran font pada penjelasan planet menjadi lebih besar dan jenis font yang lebih unik. Hasil wawancara kepada user pada Gambar 4.11, user menyatakan gambar penjelasan planet kurang besar dan jenis font diganti yang lebih unik, pada Background tampilan dibuat sama dengan background halaman utama.

4. Prototype 4

(9)

- Prototype 4 halaman gerhana aplikasi dapat dilihat pada

Gambar 4.12.

Gambar 4.12 adalah hasil prototype dari Gambar 4.10, dimana

background halaman dibuat seperti tema aplikasi yaitu seperti langit

malam hari dengan banyak bintang. Tampilan disertakan gambar astronot wanita dengan membawa tongkat yang bertuliskan SDN 6 Salatiga. Warna button menu dibuat putih bercorak hitam, dan jenis

font lebih unik. Hasil wawancara kepada user pada Gambar 4.12, user berpendapat bahwa tampilan aplikasi sudah bagus, tetapi button

(10)

pada Gambar 4.13.

Gambar 4.13 adalah hasil prototype dari Gambar 4.11 dengan

background langit malam hari dengan banyak bintang, penjelasan

planet diperbesar, dan jenis font yang lebih unik. Hasil wawancara kepada user pada Gambar 4.13, user menyatakan bahwa tampilan sudah bagus, namun untuk button exit dan mute dipindahkan dibawah.

Gambar 4.14.

(11)

Gambar 4.14 adalah hasil prototype dari Gambar 4.9, animasi terlihat jelas. Hasil wawancara kepada user pada Gambar 4.14, user mengatakan tampilan sudah bagus, namun letak button exit dan mute agar diletakkan dibawah sebelah kiri.

4.15.

Gambar 4.15 adalah hasil prototype dari Gambar 4.4, animasi gerhana lebih jelas dengan pemberian tanda angka dimana setiap titik terjadinya gerhana, dan disertakan keterangan gambar mengenai gerhana. Hasil wawancara kepada user pada Gambar 4.15, user menyatakan bahwa tampilan aplikasi sudah bagus dengan tanda keterangan setiap terjadinya gerhana.

5. Prototype 5

(12)

- Prototype 5 halaman meteor aplikasi dapat dilihat pada

Gambar 4.16.

Gambar 4.16 adalah hasil prototype dari Gambar 4.12. Hasil wawancara kepada user pada Gambar 4.16, user menyatakan bahwa tampilan pada Gambar sudah dapat diterima.

pada Gambar 4.17.

Gambar 4.17 adalah hasil prototype dari Gambar 4.13 dengan

button exit dan mute diletakkan dibawah sebelah kiri. Hasil

(13)

Gambar 4.18.

Gambar 4.18 Prototype 5 Halaman Orbit Tata Surya

Gambar 4.18 adalah hasi prototype dari Gambar 4.14. Hasil dari wawancara kepada user pada Gambar 4.18, user menyatakan bahwa animasi pergerakan planet, penjelasan planet dan tampilan sudah bisa diterima oleh user.

4.19.

(14)

- Prototype 5 halaman meteor aplikasi terlihat pada Gambar

4.20.

Gambar 4.20 Prototype 5 Halaman Meteor

Hasil wawancara kepada user pada Gambar 4.20, user menyatakan bahwa tampilan sudah bisa diterima oleh user.

- Prototype 5 halaman sistem penanggalan aplikasi terlihat pada

Gambar 4.21.

Gambar 4.21 Prototype 5 Halaman Sitem Penanggalan

(15)

4.2 Implementasi Sistem

Tahap implementasi bertujuan untuk memastikan perangkat lunak yang dibuat dapat bekerja secara efektif dan efisien sesuai dengan yang diharapkan. Implementasi sistem ini digunakan data-data dari buku yang digunakan Guru Kelas VI SD Negeri 06 Salatiga. Gambaran program yang dilakukan berupa tampilan pergerakan planet atau orbit tata surya, pergerakan bulan pada gerhana, dan gerakan meteor.

4.2.1 Implementasi Halaman Utama

Halaman utama akan menjadi halaman yang pertama kali tampil pada saat program dijalankan. Tampilan aplikasi juga mempunyai tema yaitu angkasa seperti benda-benda langit dan astronot. Pemilihan warna disesuaikan dengan warna langit atau angkasa pada malam hari agar terlihat cahaya bintang, pemilihan warna putih bercahaya, hitam terang seperti langit pada malam hari dengan cahaya bintang-bintang.

Bagian kanan bawah terdapat button bantuan dan sound off atau mute. Bagian kiri terdapat gambar astronot yang mewakili aplikasi mengenai tata surya. Halaman ini juga terdapat

button-button yang berfungsi untuk menyambungkan ke halaman yang

dipilih seperti:

- Pengenalan planet-planet

- Orbit tata surya

- Gerhana

(16)

- Sistem penanggalan

Secara lengkap dapat dilihat pada Gambar 4.22.

Gambar 4.22 Tampilan Halaman Utama

Kode program dalam teknologi HTML5 disebut juga

Javascript. Kode progam untuk membuat canvas dapat dilihat pada

Kode Program 4.1

Kode Program 4.1 Pembuatan Canvas 1

Your Browser is Not Supported </canvas>

</center> </body>

</html>

(17)

Implementasi pada halaman utama untuk menampilkan gambar astronot, button-button menu dan button mute. Perintah untuk menampilkan gambar dan button dapat dilihat pada Kode Program 4.2

Kode Program 4.2 Halaman Utama 1

ctx.drawImage(imgAstronot,10,80); if (btnMenu1Over) else ctx.drawImage(imgBtnMenu6,btnMenu6x,btnMenu6y);

if (music == 1) {

(18)

utama dan pada perintah baris (22) sampai dengan perintah baris (31) menampilkan button musik.

4.2.2 Implementasi Halaman Pengenalan Planet

Halaman pengenalan planet adalah halaman yang berisi tentang penjelasan planet-planet yang ada di tata surya. Bagian kiri bawah terdapat button exit untuk keluar dari halaman pengenalan planet dan button sound off atau mute. Bagian tengah terdapat gambar planet dan penjelasannya, bagian kanan dan kiri penjelasan terdapat button next dan preview. Fungsi dari button tersebut antara lain:

- Mute, berfungsi untuk menghentikan suara.

- Exit, berfungsi keluar dari halaman pengenalan planet.

- Next, berfungsi untuk penjelasan planet berikutnya.

- Preview, berfungsi untuk kembali ke penjelasan planet

sebelunnya.

Secara lengkap dapat dilihat pada Gambar 4.23.

(19)

Kode program untuk tampilan halaman pengenalan planet dapat dilihat pada Kode Program 4.3.

Kode Program 4.3 Tampilan Pengenalan Planet 1

ctx.fillText("PENGENALAN PLANET-PLANET TATA SURYA", 320, 100);

if (planetIndex == 1) ctx.drawImage(imgPlanet1,220,120); else if (planetIndex == 2) ctx.drawImage(imgPlanet2,220,120); else if (planetIndex == 3) ctx.drawImage(imgPlanet3,220,120); else if (planetIndex == 4) ctx.drawImage(imgPlanet4,220,120); else if (planetIndex == 5) ctx.drawImage(imgPlanet5,220,120); else if (planetIndex == 6) ctx.drawImage(imgPlanet6,220,120); else if (planetIndex == 7) ctx.drawImage(imgPlanet7,220,120); else if (planetIndex == 8) ctx.drawImage(imgPlanet8,220,120);

if (btnPrevOver) ctx.drawImage(imgBtnPrevOver,btnPrevX,btnPrevY); else ctx.drawImage(imgBtnPrev,btnPrevX,btnPrevY); if (btnNextOver) ctx.drawImage(imgBtnNextOver,btnNextX,btnNextY);

else ctx.drawImage(imgBtnNext,btnNextX,btnNextY);

(20)

4.2.3 Implementasi Halaman Orbit Tata surya

Halaman orbit tata surya pada bagian kiri terdapat animasi sistem tata surya, di sampingnya terdapat penjelasan matahari dan planet-planet. Bagian kanan atas terdapat button exit dan sound off atau mute.

Gambar 4.24 Tampilan Halaman Orbit Tata Surya

Kode program untuk membuat tampilan halaman orbit tata surya dapat dilihat pada Kode Program 4.4.

Kode Program 4.4 Halaman Orbit Tata Surya 1

SISTEM TATA SURYA

ORBIT TATA SURYA

(21)

20 21 22 23

Wuri Pujayanti </center>

</body> </html>

Kode Program 4.4 perintah baris (4) sampai dengan perintah baris (6) membuat menampilakan background dengan full size. Perintah baris (10) sampai dengan bari (21) adalah menampilan tulisan, jenis tulisan, dan menampilkan video dengan ukuran lebar 640 dan tinggi 480.

4.2.4 Implementasi Halaman Gerhana

Halaman gerhana pada bagian tengah atas terdapat animasi gerhana yang menjelaskan gerhana matahari dan gerhana bulan. Bagian bawah terdapat kolom penjelasan untuk gerhana matahari dan di sampingnya kolom yang berisi penjelasan untuk gerhana bulan. Bagian kanan atas terdapat button exit dan button sound off atau mute.

(22)

4.2.5 Implementasi Halaman Meteor dan Meteoroid

Halaman meteor dan meteroid pada bagian tengah terbagi menjadi 3 untuk animasi penjelasan meteor, meteroit dan meteroid, di bawah dari masing-masing animasi terdapat penjelasan singkat. Bagian kiri bawah terdapat button mute dan exit, yang tampak seperti pada Gambar 4.26.

Gambar 4.26 Tampilan Halaman Meteor dan Meteroid

4.2.6 Implementasi Halaman Sistem Penanggalan

Halaman sistem penanggalan pada bagian tengah berisi penjelasan tentang sistem penanggalan yaitu kalender masehi dan hijriah, pada samping kanan kirinya terdapat button preview dan

next. Bagian kiri bawah terdapat button mute dan exit. Halaman

(23)

Gambar 4.27 Tampilan Halaman Sistem Penanggalan

4.3 Pengujian Aplikasi

Setelah aplikasi alat bantu ajar dibuat, maka dilakukan pengujian terhadap aplikasi dengan user (guru) menggunakan aplikasi sebagai alat bantu ajar mengajar. Sejauh mana aplikasi ini dapat membantu guru untuk memaksimalkan penyampaian materi kepada siswa, serta mengetahui tingkat kemudahan oleh user dalam menjalankan aplikasi.

4.3.1 Pengujian Aplikasi pada User

Pengujian alat bantu ajar untuk guru dilakukan dengan cara perbandingan, yaitu pengujian dengan cara konvensional dan pengujian dengan menggunakan aplikasi. Pengujian dilakukan kepada siswa-siswi kelas VI SDN 6 Salatiga, yakni kelas A dan B. Materi tata surya disampaikan oleh guru yang sama, yaitu Bapak Wagimin sebagai guru kelas VI. Pengujian menggunakan materi yang sama dan latihan soal yang disediakan di dalam aplikasi.

(24)

selesai, guru memberikan latihan soal kepada siswa yang berupa lembar soal yang disediakan oleh guru. Sedangkan pengujian dengan aplikasi, yaitu guru menggunakan aplikasi untuk mengajar dengan materi yang terdapat pada aplikasi. Setelah materi selesai, guru memberikan latihan soal kepada siswa berupa lembar soal. Materi yang disampaikan dan latihan soal dalam pengujian konvensional maupun pengujian menggunakan aplikasi adalah sama, untuk kelas A maupun B.

Berikut ini adalah tabel hasil belajar siswa dengan membandingkan hasil belajar dengan cara konvensional dan hasil belajar menggunakan aplikasi. Hasil belajar siswa kelas A terlihat pada Tabel 4.1.

(25)

16. Hadid L 70 Rata-rata 48,85

Tabel 4.1 menunjukkan nilai hasil belajar siswa kelas VI A dengan pengujian secara konvensional. Hasil dari pengujian menunjukkan nilai rata-rata siswa dengan penyampaian materi secara konvensional adalah 48,85.

Berikut ini adalah tabel hasil belajar siswa menggunakan aplikasi. Hasil belajar siswa kelas B terlihat pada Tabel 4.2.

Tabel 4.2 Tabel Perbandingan Nilai Kelas B

(26)

8. Obbie L 80 Rata-rata 64,61

Tabel 4.2 menunjukkan nilai hasil belajar siswa kelas VI B dengan pengujian menggunakan aplikasi. Hasil dari pengujian menunjukkan nilai rata-rata siswa menggunakan aplikasi menunjukkan nilai rata-rata adalah 64,61.

(27)

Nilai rata pengujian menggunakan aplikasi – nilai rata-rata pengujian konvensional = selisih nilai hasil belajar siswa

64,61 – 48,85 = 15,76

(28)