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 jelas.
28
Embed
Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1078/5/T1_672007146_BAB IV.pdf · Gambar 4.8 adalah hasil dari Gambar 4.2, dengan prototype
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
jelas.
38
- 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.
Gambar 4.3 Prototype 1 Halaman Orbit Tata Surya
39
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
Hasil wawancara kepada user pada Gambar 4.4, user
menyatakan bahwa tampilan kurang besar, titik-titik terjadinya
gerhana tidak jelas dan tampilan disertakan keterangan dari masing-
masing gerhana.
40
- 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.
Gambar 4.6 Prototype 1 Halaman Sistem Penanggalan
41
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
Aplikasi yang dibuat terdapat penambahan dan perubahan
sesuai dengan permintaan user. Proses prototype 2 sebagai berikut:
- Prototype 2 halaman utama aplikasi dapat dilihat pada Gambar
4.7.
Gambar 4.7 Prototype 2 Halaman Utama
Gambar 4.7 adalah hasil prototype dari Gambar 4.1, dimana
tampilan halaman utama diubah menjadi lebih besar dan
penyesuaian letak button menu lebih ke tengah halaman sehingga
tampilan lebih jelas. Hasil dari wawancara kepada user pada
Gambar 4.7, user menyatakan bahwa warna button kurang cerah dan
jenis font yang dipakai kurang menarik.
42
- Prototype 2 pengenalan planet aplikasi dapat dilihat pada
Gambar 4.8.
Gambar 4.8 Prototype 2 Halaman Pengenalan Planet
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.
Gambar 4.9 Prototype 2 Halaman Orbit Tata Surya
43
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
Aplikasi yang dibuat terdapat penambahan dan perubahan
sesuai dengan permintaan user. Proses prototype 3 sebagai berikut:
- Prototype 3 halaman utama aplikasi dapat dilihat pada Gambar
4.10.
Gambar 4.10 Halaman Utama
Gambar 4.10 adalah hasil prototype dari Gambar 4.7, dimana
warna button menu lebih cerah dan jenis font yang lebih menarik.
Hasil wawancara kepada user pada Gambar 4.10, tampilan aplikasi
kurang menarik. User menginginkan background halaman dibuat
seperti langit pada malam hari dengan banyak bintang, disertakan
gambar astronot wanita dengan tulisan mewakili SDN 6 Salatiga.
Warna button menu kurang menarik, dan jenis font belum unik.
44
- Prototype 3 Tampilan halaman pengenalan planet dapat dilihat
pada Gambar 4.11.
Gambar 4.11 Prototype 3 Halaman Pengenalan Planet
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
Aplikasi yang dibuat terdapat penambahan dan perubahan
sesuai dengan permintaan user. Proses prototype 4 sebagai berikut:
45
- Prototype 4 halaman gerhana aplikasi dapat dilihat pada
Gambar 4.12.
Gambar 4.12 Prototype 4 Halaman Utama
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
bantuan diletakkan dibawah dan disertakan button mute pada
halaman utama.
46
- Prototype 4 halaman pengenalan planet aplikasi dapat dilihat
pada Gambar 4.13.
Gambar 4.13 Prototype 4 Halaman Pengenalan Planet
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.
- Prototype 4 halaman orbit tata surya aplikasi terlihat pada
Gambar 4.14.
Gambar 4.14 Prototype 4 Halaman Orbit Tata Surya
47
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.
- Prototype 4 halaman gerhana aplikasi terlihat pada Gambar
4.15.
Gambar 4.15 Prototype 4 Halaman Gerhana
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
Aplikasi yang dibuat terdapat penambahan dan perubahan
sesuai dengan permintaan user. Proses prototype 5 sebagai berikut:
48
- Prototype 5 halaman meteor aplikasi dapat dilihat pada
Gambar 4.16.
Gambar 4.16 Prototype 5 Halaman Utama
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.
- Prototype 5 halaman pengenalan planet aplikasi dapat dilihat
pada Gambar 4.17.
Gambar 4.17 Prototype 5 Halaman Pengenalan Planet
Gambar 4.17 adalah hasil prototype dari Gambar 4.13 dengan
button exit dan mute diletakkan dibawah sebelah kiri. Hasil
wawancara kepada user, menyatakan bahwa tampilan pada Gambar
sudah dapat diterima.
49
- Prototype 5 halaman orbit tata surya aplikasi terlihat pada
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.
- Prototype 5 halaman gerhana aplikasi terlihat pada Gambar
4.19.
Gambar 4.19 Prototype 5 Halaman Gerhana
Gambar 4.19 adalah hasil prototype dari Gambar 4.15. Hasil
wawancara kepada user pada Gambar 4.19, user menyatakan bahwa
animasi gerhana dan tampilan sudah bisa diterima oleh user.
50
- 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
Hasil wawancara kepada user pada Gambar 4.21, user
menyatakan bahwa tampilan sudah bisa diterima user.
51
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
- Meteor dan meteorid
52
- 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 2 3 4 5 6 7 8 9
10 11
</script> </head> <body onLoad="javascript:init()"> <center> <canvas width="1260" height="635" id="canvas" style="padding:0px"> Your Browser is Not Supported </canvas> </center> </body> </html>
Kode Program 4.1 perintah baris (5-6) membuat canvas
dengan ukuran pada width dan height, pada style dengan 0px artinya
jarak dengan elemen yang lain adalah sebesar 0 (nol).
53
Implementasi pada halaman utama untuk menampilkan
gambar astronot, button-button menu dan button mute. Perintah
untuk menampilkan gambar dan button dapat dilihat pada Kode