9
Gambar 8 Rancangan Home Gambar 9 Rancangan Halaman Quiz
Gambar 8 menunjukkan rancangan tampilan halaman utama home, pada halaman ini dirancang untuk menampilkan unsur-unsur kimia dalam bentuk tabel
periodik standar. Tiap kotak pada tabel mewakili satu simbol unsur kimia. Gambar 9 menunjukkan rancangan tampilan halaman quiz.
4. Hasil dan Pembahasan
Hasil implementasi sistem berdasarkan perancangan yang telah dibuat, dijelaskan sebagai berikut.
Gambar 10Tampilan Halaman Home
10 Pada Gambar 10, ditunjukkan tampilan halaman Home, halaman awal dari
sistem. Sesuai dengan rancangan tampilan Gambar 8, pada halaman Home ditampilkan tabel periodik unsur kimia.
Kode Program 1 Perintah untuk Menampilkan Tabel Periodik
1 td class=pt-elm
2 a href= class=pt-elm-fill pt-logam-alkali data-na=3
3 span class=pt-na3span
4 span class=pt-kodeLispan
5 span class=pt-namaLithiumspan
6 a
td
Kode Program 1 merupakan perintah HTML untuk menampilkan sebuah cell
dari sebuah tabel HTML, dengan tag
td
. Di dalam cell, terdapat perintah a href, yang berfungsi untuk menampilkan informasi tentang unsur Kimia, dalam
kode program diatas, yaitu Lithium.
Gambar 11 Tampilan Halaman Registrasi
Pada Gambar 11, ditunjukkan tampilan halaman Login dan Registrasi. Nomor Induk Siswa NIS digunakan sebagai username, namun siswa tetap harus
melakukan registrasi sebagai member untuk dapat mengakses halaman quiz dan scoreboard
.
Gambar 12 Tampilan Halaman Quiz
Pada Gambar 12, ditunjukkan tampilan halaman Quiz. Setiap pertanyaan disediakan 5 pilihan jawaban. Pada setiap halaman soal, ditampilkan nomor-
nomor soal, dimaksudkan untuk mempermudah akses dari satu soal ke soal yang lain. Untuk transisi antar soal, digunakan JavaScript untuk update soal dan pilihan
jawaban, sehingga tidak perlu dilakukan reloadrefresh keseluruhan halaman web. Perintah untuk proses transisi ditunjukkan pada Kode Program 2.
11
Kode Program 2 Perintah untuk Menampilkan Soal dan Pilihan Jawaban
1 next.clickfunctione {
2 .soal.show.addClasshide.hide.removeClassshow;
3 .soal. + soal_show + 1.addClassshow.show;
4 soal_show++;
5 };
6 7
prev.clickfunctione { 8
.soal.show.addClasshide.hide.removeClassshow; 9
.soal. + soal_show - 1.addClassshow.show; 10
soal_show--; };
Kode Program 2 merupakan perintah JavaScript untuk tombol navigasi Selanjutnya dan Sebelumnya, seperti ditunjukkan pada Gambar 12. Ketika
tombol Selanjutnya ditekan, maka perintah pada baris 7-11 akan dijalankan. Proses yang dilakukan adalah menampilkan soal dengan nomor yang sama dengan
nilai variable
soal_show + 1
, pada baris 2 dan 3. Kemudian menaikkan nilai variabel
soal_show
sebesar 1 incremental, pada baris 4. Perintah untuk tombol navigasi Sebelumnya, adalah melakukan proses sebaliknya, yaitu menampilkan
soal dengan nomor
soal_show-1
, pada baris 8 dan 9. Kemudian menurunkan nilai dari variabel
soal_show
tersebut, pada baris 10.
Gambar 13 Tampilan Halaman Skor Nilai
Pada Gambar 13, ditunjukkan halaman yang digunakan untuk menampilkan nilai dari masing-masing Member, dengan nilai tertinggi berada
diposisi paling atas. Pengujian sistem dilakukan untuk menguji fungsi-fungsi aplikasi hasil
implementasi. Blackbox Testing, dilakukan untuk mengetahui bahwa semua fungsi dan fitur pada sistem bekerja dengan tepat. Pengujian dilakukan dengan
cara melihat fungsi-fungsi pada sistem, kemudian membandingkan hasil pengujian dengan hasil yang diharapkan. Hasil dari blackbox testing ditampilkan
pada Tabel 1.
Tabel 1 Hasil Blackbox Testing Test
ID Deskripsi
Hasil yang Diharapkan Hasil yang Diberikan
Sistem
1.
Siswa melakukan registrasi
Data registrasi tersimpan sebagai member.
Sesuai yang diharapkan.
12
2.
Siswa melakukan registrasi
dengan menggunakan
nomor induk yang telah ada di sistem.
Sistem memberikan pesan kesalahan bahwa nomor
induk tidak
dapat digunakan.
Sesuai yang diharapkan.
3.
Siswa melakukan registrasi
dengan menggunakan
password kosong.
Sistem memberikan pesan kesalahan bahwa password
harus diisi. Sesuai yang diharapkan.
4.
Siswa melakukan login
dengan nomor induk dan
password yang
telah terdaftar Login
berhasil. Sesuai yang diharapkan.
5.
Siswa melakukan login
dengan nomor induk atau
password yang
salah Sistem memberikan pesan
kesalahan login. Sesuai yang diharapkan.
6.
Siswa mengisi kuis dan
mengumpulkan jawaban
Sistem menampilkan score berdasarkan jawaban yang
benar. Sesuai yang diharapkan.
7.
Siswa melihat
halaman scoreboard
Sistem menampilkan nilai- nilai dari siswa yang lain.
Sesuai yang diharapkan.
8.
Siswa melihat
detail informasi
unsur kimia. Sistem
menampilkan halaman detail unsur.
Sesuai yang diharapkan.
9.
Siswa menekan
tombol play video tentang
unsur kimia.
Sistem memainkan video. Sesuai yang diharapkan.
Berdasarkan hasil blackbox testing pada Tabel 1, disimpulkan bahwa fungsi-fungsi pada sistem bekerja sesuai dengan yang diharapkan. Fungsi-fungsi
untuk registrasi member nomor pengujian 1-3 berjalan dengan yang diharapkan. Fungsi-fungsi untuk login nomor pengujian 4-5 berjalan sesuai dengan hasil
yang diharapkan. Fungsi-fungsi untuk kuis nomor pengujian 6-7 berjalan sesuai dengan hasil yang diharapkan. Serta fungsi untuk menampilkan informasi unsur
kimia berupa teks dan video nomor pengujian 8-9 juga berjalan sesuai dengan hasil yang diharapkan.
Pada sistem yang telah dikembangkan, dilakukan pengujian terhadap 30 responden. Karakteristik responden adalah: 1 siswa kelas XII dari berbagai SMA
di Salatiga; 2 dari hasil wawancara awal, seluruh responden mengalami kesulitan dalam belajar Tabel Periodik; 3 20 siswa memiliki akses ke komputer
dan internet, namun keseluruhan siswa sudah pernah menggunakan browser internet sebelumnya. Hasil pengujian ditunjukkan pada Tabel 2. Pengujian
13 dilakukan untuk mengetahui apakah sistem telah memenuhi ciri-ciri media
pembelajaran terutama media pembelajaran tabel periodik unsur kimia.
Tabel 2 Hasil Pengujian Terhadap 30 Responden
Nomor Pertanyaan
Ya Tidak
1 Tabel periodik yang ditampilkan pada sistem
memiliki susunan yang familiar sesuai dengan buku pelajaran, sehingga mudah digunakan.
30 2
Sistem memberikan informasi yang jelas tentang tabel periodik kimia dan unsur-unsur kimia yang
ada di dalamnya. 28
2 3
Sistem memberikan informasi yang lengkap tentang tabel periodik kimia dan unsur-unsur
kimia yang ada di dalamnya. 28
2 4
Tampilan menarik, sehingga menumbuhkan minta belajarrasa ingin tahu lebih.
29 1
5 Sistem dapat membantu belajar tabel periodik
28 2
Berdasarkan pertanyaan nomor 1 semua responden setuju bahwa tabel periodik yang ditampilkan memiliki susunan yang familiar sehingga mudah untuk
dipahami, hal ini dikarenakan susunan tabel periodik yang digunakan merupakan tabel periodik yang sesuai pada buku pelajaran Kimia. Untuk pertanyaan nomor 2,
28 siswa setuju bahwa informasi yang diberikan tentang unsur-unsur kimia sudah jelas dan dapat mendukung siswa dalam belajar tentang unsur kimia. Berdasarkan
hasil pertanyaan nomor 3, dapat dikatakan bahwa sistem memberikan informasi yang lengkap mengenai tabel periodik kimia dan unsur-unsur kimia, hal ini
didukung oleh jawaban dari 28 responden dari 30 siswa. Aplikasi ini juga dapat dikatakan memiliki tampilan yang menarik sehingga menumbuhkan minat belajar
dan rasa ingin tahu lebih, hal ini didukung oleh 29 orang dari 30 responden yang ada. Selain itu sistem juga dapat membantu belajar tentang tabel periodik
berdasarkan jawaban yang ditunjukan dari 28 responden. Dari 30 responden yang ada, sekitar 1 sampai 2 responden memberikan respon yang negatif, hal ini
dikarenakan mereka tidak terbiasa menggunakan komputer, sehingga mengalami kesulitan untuk menggunakan aplikasi.
5. Simpulan
