-
2
1. Pendahuluan
Dalam setiap kegiatan belajar-mengajar di bidang ilmu alam (baik fisika,
biologi, maupun kimia), setiap sekolah wajib menyediakan fasilitas laboratorium
sekolah guna mendukung kegiatan praktikum para siswa. Laboratorium
menyediakan alat-alat praktikum sesuai dengan jenis peralatannya, sebagai contoh,
laboratorium fisika menyediakan alat-alat praktikum seperti beban bercelah, katrol,
lensa optik, cermin, dan alat-alat lain yang berhubungan dengan fisika. Alat-alat
tersebut nantinya akan dipakai oleh siswa dalam kegiatan praktikum.
Dalam menggunakan suatu peralatan praktikum, seorang siswa harus
terlebih dahulu mengetahui kegunaan dan cara pakainya supaya tidak terjadi
kerusakan pada peralatan praktikum tersebut. Sebagaimana yang juga terjadi di
SMA Krista Mitra yang memiliki 3 laboratorium lengkap dengan peralatannya.
Siswa dapat bertanya kepada guru pembimbing atau kepada laboran mengenai
fungsi dan cara pemakaian dari peralatan praktikum yang tidak diketahui. Sudah
menjadi tugas guru maupun laboran untuk memberikan penjelasan kepada para
siswa yang bertanya. Namun siswa tidaklah harus selalu bergantung pada guru /
laboran saja, siswa juga sebaiknya dituntut untuk dapat belajar mandiri. Oleh
sebab itu ada baiknya apabila ada sebuah solusi untuk membantu siswa untuk
dapat belajar mengenal peralatan laboratorium secara mandiri, tanpa perlu
bertanya kepada guru / laboran.
Quick Response Code (QR Code), merupakan gambar dua dimensi yang
merepresentasikan suatu data dalam bentuk teks [1]. QR Code disebut dua
dimensi karena merupakan revolusi dari barcode yang hanya berdimensi satu.
Secara otomatis, kapasitas penyimpanan data pada QR Code lebih besar daripada
barcode. Oleh sebab itu, banyak perusahaan besar yang memanfaatkan teknologi
QR Code ini untuk berbagai tujuan salah satunya sebagai penyimpanan alamat
URL. Penggunaan QR Code ini sebenarnya sudah sering digunakan di luar negeri,
sementara di Indonesia penggunaannya masih jarang. Salah satu contoh adalah
harian Kompas, yang mengklaim sebagai pelopor QR Code di Indonesia [2].
Pembaca dapat mengakses berita yang ingin dibaca secara online cukup dengan
melakukan scan QR Code melalui ponsel mereka. QR Code tersebut berisi alamat
URL dari berita yang dituju. Akan menjadi suatu hal yang bagus apabila teknologi
QR Code ini diterapkan pada bidang lain, seperti pendidikan.
Berdasar pada latar belakang tersebut, perlu dibuat sebuah aplikasi pada
laboratorium SMA Krista Mitra yang dapat membantu siswa dalam mendapatkan
informasi mengenai kegunaan alat-alat praktikum dan penggunaan dengan lebih
mudah dan lebih cepat, cukup dengan melakukan scanning kode QR yang
ditempelkan pada alat-alat tersebut melalui web camera yang terhubung ke
komputer laboratorium.
Perancangan sistem akan dibuat berdasarkan pada rumusan masalah
yang meliputi 1)bagaimana merancang aplikasi yang menerjemahkan kode QR
menjadi sebuah informasi yang terhubung pada sebuah halaman berisi informasi
peralatan praktikum; 2)bagaimana merancang sebuah aplikasi berbasis web yang
berisikan informasi mengenai panduan penggunaan peralatan praktikum.
-
3
Tujuan dari pembuatan sistem adalah untuk membantu menjelaskan
informasi mengenai peralatan praktikum melalui media elektronik yaitu komputer.
Manfaat dari pembuatan sistem ini diharapkan dapat memberikan kemudahan bagi
para siswa maupun guru dalam memperoleh informasi mengenai peralatan
praktikum.
2. Kajian Pustaka
Berdasarkan penelitian yang telah dilakukan oleh Ardi Setiawan dan
Imam Riadi yang berjudul “Aplikasi Multimedia Pembelajaran Tentang Memori
Menggunakan Adobe Flash” mengungkapkan pembelajaran organisasi dan
arsitektur komputer mengenai materi memori bagi sebagian mahasiswa cukup
sulit untuk dipahami, karena memerlukan memerlukan penalaran logika, dan
kemampuan dalam mencerna bahan ajar berdasarkan buku teks yang ada.
Berdasar pada masalah tersebut, dikembangkan sebuah solusi untuk dapat
membantu mahasiswa, yaitu dengan membangun sebuah aplikasi berbasis
multimedia yang membantu mahasiswa dalam memahami materi organisasi dan
arsitektur komputer khususnya materi memori menggunakan mikrotik.[3]
Berdasarkan penelitian yang dilakukan oleh Endang Nugraheni yang
berjudul “Peran dan Kompetensi Guru dalam E-Learning” mengungkapkan bahwa
pembelajaran yang sebelumnya berpusat pada guru mengalami pergeseran kepada
pembelajaran yang berpusat pada siswa yang menyebabkan peran guru dan siswa
menjadi berubah, dan e-learning memperkuat pergeseran tersebut. Dari
permasalahan tersebut solusi yang perlu dilaksanakan adalah dengan persiapan
diri dan adaptasi oleh guru agar dapat menerapkan konsep pembelajaran e-
learning.[4]
Berdasarkan penelitian yang dilakukan oleh Kartika Firdausy, Selamat
Riyadi, Tole Sutikno, dan Muchlas yang berjudul “Aplikasi Webcam untuk
Sistem Pemantauan Berbasis Web” mengungkapkan bertapa pentingnya sistem
keamaan seiring meningkatnya kasus kriminal. Salah satu penyelesaian dari
masalah tersebut adalah dengan mengembangkan sebuah sistem keamanan yang
dapat memantau secara real time dan ditampilkan di browser.[5]
Dari penelitian tersebut didapatkan ide baru untuk memanfaatkan
teknologi web camera guna mengembangkan sistem pembelajaran siswa SMA
Krista Mitra untuk dapat mempelajari fungsi dan kegunaan dari peralatan
laboratorium.
PHP merupakan sebuah bahasa pemrograman yang berbentuk scripting,
sistem kerja dari program ini adalah sebagai Interpreter, bukan sebagai
Compiler.[6] Bahasa Compiler adalah bahasa yang akan mengubah script-script
program ke dalam source code yang selanjutnya dari bentuk source code akan
diubah menjadi bentuk object code, bentuk dari object code akan menghasilkan
file yang lebih kecil dari file mentah sebelumnya. Sedangkan bahasa Interpreter
sangat berbeda dengan Compiler. Pada bahasa Interpreter, script mentahnya tidak
harus diubah ke dalam bentuk source code, sehingga pada saat menjalankan
bentuk program, kode dasar secara tidak langsung akan dijalankan tanpa harus
-
4
melalui proses pengubahan ke dalam bentuk source code. Hal ini membuat
program akan tetap berjalan meski terdapat kesalahan pada script.[6]
Kelebihan dari pemrograman PHP adalah pemrograman PHP bersifat
cross platform, yaitu dapat berjalan dalam sistem operasi seperti Windows, Linux,
MacOS, dan sebagainya. Kelebihan dari PHP juga adalah merupakan embedded
script, yaitu dapat diletakkan dalam tag HTML. Oleh karena itu , script PHP dapat
bekerja sama dengan script pendukung lainnya seperti JavaScript.[7]
jQuery merupakan salah satu pustaka yang dikembangkan dengan
menggunakan JavaScript. Dengan menggunakan jQuery, penulisan kode
JavaScript menjadi lebih sederhana, terlebih lagi pembuatan halaman web yang
interaktif menjadi jauh lebih diimplementasikan daripada menulis JavaScript
sendiri. Salah satu Kelebihan dari jQuery adalah dapat menyembunyikan /
menampilkan elemen yang menyusun web. Selain itu jQuery juga dapat
memodifikasi script DOM (Document Object Model).[8]
Library jQuery ada dua versi, yaitu: versi Minified (jQuery.min.js) dan
versi Regular (jQuery.js). Sebenarnya isi dari kedua versi tersebut sama, hanya
saja yang membedakan adalah pada target penggunanya.[8] jQuery versi Minified
diciptakan untuk kepentingan produksi, bila library dari jQuery Minified dibuka,
maka dapat dilihat terdapat ribuan fungsi yang saling berdempetan tanpa adanya
keterangan-keterangan penjelasan fungsi tersebut. Sedangkan untuk jQuery versi
Reguler lebih diperuntukkan ke para pengembang, hal ini dikarenakan
penyusunan fungsi-fungsi lebih teratur supaya mudah dibaca oleh para
pengembang, hanya saja versi Reguler memakan memori jauh lebih besar dari
versi Minified.
Script jQuery juga dapat digunakan untuk membuat sebuah layer yang
dipakai menghubungkan web camera dengan aplikasi web, sehingga dapat
digunakan untuk merekam gambar dan menyimpannya.[9] Ada banyak library
yang dikembangkan oleh developer, salah satu contohnya adalah library untuk
menerjemahkan barcode QR (QR Code) bernama ZXing (Zebra Crossing).
Library ini akan berfungsi sebagai decoder. Fungsi yang digunakan untuk
melakukan proses penerjemahan adalah fungsi decode yang terdapat pada baris
ke-28 di QRCode.js, seperti yang digambarkan pada Kode Program 1.
Kode Program 1 Kode Program untuk fungsi decode
44 var image = new Image();
45 image.onload=function(){
46
47 var canvas_qr = document.createElement('canvas');
48 var context = canvas_qr.getContext('2d');
49 var canvas_out = document.getElementById("out-canvas");
50 if(canvas_out!=null)
51 {
52 var outctx = canvas_out.getContext('2d');
53 outctx.clearRect(0, 0, 320, 240);
54 outctx.drawImage(image, 0, 0, 320, 240);
55 }
56 canvas_qr.width = image.width;
57 canvas_qr.height = image.height;
58 context.drawImage(image, 0, 0);
59 qrcode.width = image.width;
60 qrcode.height = image.height;
-
5
QR Code merupakan gambar dua dimensi yang memiliki kemampuan
untuk menyimpan data. QR Code biasa digunakan untuk menyimpan data berupa
teks, baik itu numerik maupun kode biner.[1] QR Code banyak digunakan untuk
keperluan komersil, khususnya di Jepang, biasanya berisi link URL ke alamat
tertentu atau sekedar teks berisi iklan, promosi, dan lain-lain.[10] QR Code
pertama kali dikembangkan oleh perusahaan Jepang bernama Denso Wave pada
tahun 1994.[11] Kelebihan QR Code adalah mampu menampung informasi hingga
ribuan. QR Code juga dapat menampung berbagai tipe informasi.[12] QR Code
memiliki 40 versi, semakin tinggi versi, semakin banyak data yang dapat
ditampung oleh QR Code. Data numerik yang mampu ditampung QR Code versi
tertinggi (versi 40) dengan penyesuaian kesalahan scan adalah sebanyak 7.089
karakter.[13]
3. Metode Penelitian
Penelitian ini terdiri atas lima tahap metode penelitian, yaitu:
1) Persiapan; 2) Analisis; 3)Pengumpulan Data; 4)Perancangan Sistem;
5)Penulisan Laporan.
Gambar 1 Tahap Metode Penelitian
Pada tahap persiapan, dihasilkan keluaran berupa asumsi dasar, hipotesis,
dan kerangka konsep. Kemudian tahap analisis menghasilkan keluaran berupa
sumber penelitian, variabel penelitian, dan penentuan sumber data. Tahap
pengumpulan data menghasilkan keluaran berupa data primer dan data sekunder.
Pada tahap perancangan sistem, dihasilkan keluaran berupa web sistem informasi
alat praktikum. Tahap terakhir adalah penulisan laporan yang menghasilkan
keluaran berupa laporan penelitian.
Penelitian dimulai dengan melakukan persiapan (tahap persiapan), yaitu
dengan studi literatur dan studi pustaka untuk menentukan topik dan memastikan
topik yang akan digunakan tersebut belum pernah dipakai orang lain. Kemudian
dilakukan proses identifikasi permasalahan untuk memunculkan hipotesis dan
kerangka konsep dari penelitian yang akan dilakukan.
Pada tahap analisis berisikan instrumen penelitian yang dilakukan.
Instrumen tersebut berupa subjek penelitian, variabel penelitian, dan sumber data.
Subjek penelitian ini adalah sistem pengenalan QR Code melalui web camera
pada penerapan di laboratorium sekolah. Variabel penelitian ini berupa data alat-
alat praktikum. Sumber data penelitian ini diambil dari studi kasus pada SMA
Krista Mitra yang terletak di perum. Puri Anjasmoro blok FF-1, Semarang.
Tahap ketiga setelah melakukan analisis data adalah tahap pengumpulan
data. Pengumpulan data terdiri atas data primer dan sekunder. Data primer
-
6
didapatkan dengan melakukan observasi dan analisis konten. Untuk data sekunder
didapatkan melalui proses Computer Assisted Data Colection (CADAC). Data
yang didapatkan ini akan digunakan untuk pencapaian tujuan penelitian. Data
primer berupa data alat-alat praktikum dari tiga kategori alat praktik. Kemudian
untuk data sekunder diperoleh dengan melakukan penelitian terkait dengan topik
dan pencarian jurnal-jurnal yang dapat digunakan sebagai acuan penelitian.
Tahap keempat yaitu tahap perancangan sistem. Perancangan sistem ini
merupakan implementasi dari semua data penelitian yang telah terkumpul
sebelumnya. Perancangan sistem pengenalan QR Code melalui web camera pada
penerapan di laboratorium sekolah akan menggunakan metode prototype.
Gambar 2 Metode Prototype[13]
Gambar 2 menjelaskan proses kerja dari metode prototype. Tahap
metode prototype pada perancangan sistem pengenalan Quick Response Code
melalui web camera ini meliputi 1) tahap pengumpulan data; 2) tahap
perancangan sistem; 3) tahap evaluasi.
Pada tahap pengumpulan data, dilakukan pengumpulan segala data /
informasi yang dibutuhkan untuk perancangan sistem. Data ini meliputi kumpulan
informasi mengenai alat-alat praktikum yang berupa nama alat, fungsi, serta cara
pakai, serta data referensi terkait yang dapat membantu dalam proses perancangan
sistem ini.
Pada tahap perancangan sistem dilakukan proses pembuatan prototype
sistem pengenalan QR Code melalui web camera. Langkah pertama yang
dilakukan adalah dengan membuat skema sistem dengan menggunakan UML
(Unified Modeling Language). Pembuatan UML ini berdasar pada kebutuhan dari
target pengguna sistem, yaitu para guru dan siswa di sekolah. Data yang didapat
pada tahap-tahap sebelumnya diimplementasikan di metode ini berupa tabel-tabel
data beserta rancangan.
UML yang akan digunakan pada perancangan sistem adalah use
casediagram, activity diagram, dan class diagram. Gambar 3 menggambarkan
use case diagram, pada use cese diagram sistem dapat diakses secara langsung
oleh user tanpa harus melalui login. Akan memakan waktu apabila untuk
mendapatkan sebuah informasi mengenai alat praktikum, setiap user terlebih
-
7
dahulu melakukan login ke sistem. Output yang akan ditampilkan oleh sistem ini
adalah berupa halaman web informasi sebuah alat praktikum. Halaman Admin
hanya dapat diakses oleh admin saja dengan melalukan login terlebih dahulu yang
terdapat pada halaman user.
Gambar 3 Use Case Diagram Sistem
Activity diagram user menjelaskan proses pencarian informasi yang
terjadi antara user dengan sistem. Proses dimulai dari melakukan scan kode QR
yang terdapat pada alat praktikum, yang kemudian akan diterjemahkan oleh
sistem lalu informasi akan ditampilkan sesuai dengan id alat praktikum yang
dipindai. Kemudian user dapat memutuskan untuk melakukan scan ulang atau
tidak.
Gambar 4 Activity Diagram User
Activity diagram admin menjelaskan proses pengaturan informasi yang
terjadi antara admin dengan sistem. Proses dimulai dengan admin melakukan
login terlebih dahulu ke sistem yang terdapat pada halaman utama user. Setelah
melalui proses validasi, maka sistem akan menampilkan halaman admin. Admin
berhak melakukan pengolahan terhadap data alat-alat praktikum, seperti
melakukan penambahan data, edit data, dan hapus data. Hak akses admin
dianggap selesai apabila admin telah melakukan logout pada sistem.
-
8
Gambar 5 Activity Diagram Admin
Class diagram menggambarkan struktur beserta hubungan yang terjadi
di dalam sistem. Setiap objek maupun class digambarkan dalam satu tabel. Tiap
tabel memiliki relasi terhadap tabel lain sehingga membuat sistem akan saling
berhubungan. Relasi one to many terjadi pada tabel informasi_admin terhadap
data_alat yang menjelaskan setiap admin dapat melakukan perubahan beberapa
data alat. Relasi one to one terjadi pada user dengan informasi_alat, yang
menjelaskan tiap user hanya dapat melihat satu informasi pada saat itu juga.
Relasi ini juga ada pada tabel scan_kode_qr dengan informasi_alat, dimana setiap
kode QR yang dipindai akan mengakses satu informasi alat saja. Relasi juga
terjadi pada tabel data_alat dengan scan_kode_qr yang menjelaskan setiap kode
QR hanya boleh mewakili satu id_qr pada tiap alat saja. Untuk relasi many to one
terjadi pada tabel admin dengan informasi_admin dimana beberapa admin dapat
melakukan login secara bersamaan pada satu sistem.
Gambar 6 Class Diagram Sistem
Tahap yang selanjutnya adalah proses evaluasi atau pengujian guna
mengetahui apakah sistem telah sesuai dengan apa yang diinginkan atau apakah
sistem masih memiliki kekurangan, dengan begitu maka dapat dilakukan
-
9
perbaikan pada sistem. Tahap ini dianggap selesai apabila sistem telah sesuai
dengan yang diinginkan.
4. Implementasi dan Pembahasan
Implementasi dari penelitian ini meliputi decoding QR code, encoding
QR code, dan implementasi dari sistem yang dibuat. Proses decoding QR code ini
diimplementasikan dengan menggunakan jQuery sebagai penghubung web
camera dengan sistem serta juga sebagai pemindai QR code. Web server yang
digunakan untuk penelitian ini adalah Wamp Server 2.4.
Gambar 7 Alur Proses Decoding
Proses kerja sistem dalam menerjemahkan QR code digambarkan seperti
pada Gambar 7. Pertama sistem akan mengakses kelas decode untuk kemudian
mengaktifkan komponen web camera. Decoder akan melakukan scan secara
berulang, hingga menemukan kode yang dapat diterjemahkan. Kode QR
diterjemahkan di decoder dengan memakai library ZXing. Image yang terpindai
oleh web camera diproses di kelas qr.js, kemudian mengakses fungsi QRCode.js,
dan kemudian menggunakan library jquery-1.7.2.min.js untuk menerjemahkan
kode tersebut. Kode Program 2 menunjukkan fungsi yang digunakan untuk
memanggil fungsi decode yang terdapat di dalam library, yaitu capture yang
terdapat pada baris ke-34 hingga baris ke-43. Fungsi ini akan menyimpan hasil
capture video pada interval yang ditentukan (tiap 1 detik) dan mengubahnya
menjadi gambar, dan kemudian memanggil fungsi decode.
Kode Program 2 Kode program untuk melakukan decode
34 function capture() {
35
36 var w = video.videoWidth * scale;
37 var h = video.videoHeight * scale;
38 var qr_can = document.getElementById('qr-canvas').getContext('2d');
39 qr_can.drawImage(video, 0, 0, w, h);
40 try { qrcode.decode(); }
41 catch(err) { $("#qr-value").text("Marker QR tidak ditemukan"); }
42
43 }
-
10
Kode QR yang diterjemahkan akan menghasilkan sebuah informasi
bernama “id”. Tiap satu id ini akan mewakili satu nama alat praktikum. Kemudian
dari decoder, id dikirimkan ke kelas destiny.php. kelas ini berfungsi untuk
memisahkan tipe pemindaian kode QR. Untuk user, variabel id akan dikirim ke
halaman utama sistem (index.php) dengan method post.
Sistem secara default menampilkan sebuah halaman informasi alat
praktikum secara acak (random show). Namun ketika ada sebuah id yang
dikirimkan oleh kelas decode, sistem akan langsung menggunakan id tersebut
untuk dicocokkan dengan “id_qr” yang terdapat pada database (dbLab.data_alat).
Sistem kemudian menerima informasi dari database yang sesuai dengan id yang
dicocokkan. Apabila id yang dicocokkan oleh sistem ternyata tidak terdapat di
dalam database, maka sistem akan secara otomatis mengakses kembali kelas
decode agar user dapat melakukan scan ulang.
Kelas decode juga digunakan untuk proses pencarian data oleh admin.
Admin melakukan pencarian data melalui scan QR yang terdapat pada halaman
utama admin (index_admin.php). Sama seperti pada sebelumnya, index_admin
akan mengakses kelas decode untuk melakukan proses scan kode QR. Kode yang
berhasil diterjemahkan, akan dikirim ke kelas destiny.php. Untuk admin, kelas ini
akan mengubah variabel id menjadi variabel search, lalu kemudian variabel
tersebut dikirim kembali ke halaman utama admin. Sistem yang menerima
variabel search akan secara otomatis mencocokkan variabel tersebut dengan
variabel id_qr di database. Informasi kemudian dikirim balik ke halaman admin
untuk dapat diproses lebih lanjut.
Tahap encode dilakukan pada proses penambahan data alat praktikum.
Hal ini membuat proses ini hanya dapat dilakukan oleh admin saja. Setelah admin
memasukkan keterangan-keterangan alat yang akan dimasukkan ke dalam
database, maka sistem secara otomatis akan meng-generate variabel id secara
acak dan unique. Variabel ini akan dikirimkan ke generate_array.php.
Proses pembuatan QR Code pertama dilakukan di kelas
generate_array.php. Segala proses algoritma QR Code dilakukan oleh kelas ini.
Pembuatan QR Code sesuai dengan standar internasional penyusunan QR Code
(International Standard – ISO/IEC 18004) dengan menggunakan QR versi 1 yang
cukup untuk menampung nilai dari sebuah variabel id. Dari generate_array.php
didapatkan tiga buah variabel, yaitu mMPD sebagai nilai modul, mMPE sebagai
nilai error correction, dan formatInfo sebagai nilai informasi QR.
Ketiga variabel tersebut kemudian dikirim ke generate_array.php untuk
proses akhir pembuatan kode. Kelas ini berfungsi untuk menghasilkan QR Code
dan kemudian ditampilkan ke layar untuk kemudian dicetak ke kertas.
Penggambaran QR Code menggunakan format SVG (Scalable Vector Graphics).
Ouput berupa gambar QR Code seperti pada Gambar 8 dan gambar dapat
langsung dicetak di kertas.
-
11
Gambar 8 Tampilan akhir dari proses encode
Masuk ke pembahasan sistem, sistem terbagi menjadi dua bagian: bagian
user dan bagian admin. Halaman utama user adalah index.php, yang berfungsi
untuk menampilkan informasi mengenai alat-alat praktikum. Halaman user inilah
yang akan menerima keluaran dari proses scan kode QR untuk kemudian
ditampilkan berupa informasi peralatan praktikum. Informasi alat praktikum yang
ditampilkan adalah berupa nama alat praktikum, fungsi alat, cara pakai alat, dan
gambar alat praktikum. Gambar 9 menunjukkan bentuk tampilan dari halaman
utama user.
Gambar 9 Tampilan halaman utama user
Gambar 10 decoder QR Code
“QR Scan” akan menghubungkan halaman web yang sedang diakses
oleh user ke halaman decoder dan mengaktifkan web camera, seperti yang dapat
dilihat pada Gambar 10. Setelah user melakukan scan QR Code, halaman utama
-
12
user ditampilkan kembali dengan isi informasi mengenai alat praktikum yang
telah di-scan.
Seluruh data informasi peralatan praktikum diatur oleh admin. Admin
harus terlebih dahulu melakukan login yang terdapat pada halaman utama user,
sebelum dapat melakukan pengaturan data peralatan praktikum. Setelah melalui
proses validasi username dan password, sistem akan menampilkan halaman utama
admin, index_admin.php. tampilan halaman admin seperti ditunjukkan pada
Gambar 11.
Gambar 11 Tampilan halaman utama admin
Tampilan data informasi alat praktikum yang terdapat pada halaman
admin hanya terdiri dari kode QR, nama alat, dan gambar alat. Untuk
memperbesar gambar dengan memasukkan jQuery script ke dalam PHP script.
Kode program 3 merupakan script untuk memperbesar gambar pada data alat
yang berada pada baris program ke-31 hingga ke-42.
Kode Program 3 Kode program untuk memperbesar gambar
Dapat terlihat ada tiga kategori peralatan praktikum, yaitu: fisika, biologi,
dan kimia. Untuk melakukan pencarian data alat praktikum, admin dapat
mengetikkan kata kunci pencarian pada kotak text bertuliskan “Search”. Pencarian
data melalui kotak search ini akan meliputi nama alat, QR Code, dan seluruh tipe
alat.
44 $(document).ready(function() {
45
46 $("#thumbnail img").click(function(e){
47 $("#background").css({"opacity" : "0.7"})
48 .fadeIn("slow");
49
50 $("#large").html("
"+$(this).attr("rel")+"")51 .center()
52 .fadeIn("slow");
53
54 return false;
55 });
-
13
Adapun bila admin ingin melakukan pencarian yang lebih spesifik lagi,
dapat melakukan pencarian data melalui scan kode yang terdapat pada peralatan
praktikum. Dengan begitu data yang ditampilkan hanya akan ada satu macam alat
saja, karena output yang dikeluarkan adalah berupa kode QR yang bersifat unique.
Admin dapat melakukan penambahan data peralatan dengan mengakses
add_data.php. Kemudian admin mengisi data-data yang diperlukan, juga dapat
dengan menyertakan gambar dari alat tersebut. Gambar 12 menunjukkan contoh
proses penambahan data.
Gambar 12 Contoh proses penambahan data
Sistem akan menampilkan halaman konfirmasi apabila admin telah
selesai memasukkan data. Apabila admin telah yakin pada data yang telah
diinputkan, maka sistem akan melakukan penyimpanan data ke dalam database.
Script SQL untuk melakukan penyimpanan data ke dalam database ditunjukkan
pada Kode Program 4.
Kode Program 4 Script SQL penambahan data
Gambar 13 Detail informasi alat
"INSERT INTO data_alat (id_qr,nama_alat,tipe_alat,kegunaan,penggunaan,gambar)
VALUES('".$joinSplit."', '".$namaAlat."', '".strtolower($jenisAlat)."',
'".$gunaAlat."', '".$caraPakai."', '".$linkImage."')"
-
14
Terdapat halaman detail.php yang menampilkan informasi lengkap
mengenai alat praktikum yang dicari. Tampilan detail data ditunjukkan seperti
pada Gambar 13. Untuk melakukan proses perbaruan data, dapat langsung
dirubah pada tampilan detail. Dan untuk melakukan proses hapus data, admin
diwajibkan untuk melakukan konfirmasi penghapusan data. Admin juga dapat
mengakses data profil. Halaman profil admin berisikan informasi dari admin yang
mengakses sistem tersebut, tampilan halaman admin ditunjukkan seperti pada
Gambar 14.
Gambar 14 Tampilan profil admin
Setelah pembuatan rancangan dasar sistem selesai, dilakukan tahap
pengujian awal sistem sesuai dengan alur prototype. Pada pengujian ini, halaman-
halaman web masih belum memiliki desain. Sistem hanya sebatas membaca
informasi alat praktikum melalui pencarian berdasar nama alat praktikum. Data
informasi alat sudah dapat ditampilkan pada layar user. Pengolahan data
dilakukan oleh admin dengan terlebih dahulu melakukan login ke dalam sistem
admin. Penanganan error masih sebatas pada validasi login dan otorisasi akses.
Kemudian dilakukan tahap evaluasi awal. Dari evaluasi ini, sistem diperbarui
dengan melakukan penambahan sistem pencarian data melalui pindai kode QR
pada halaman utama user. Halaman web juga ditampilkan dengan desain yang
lebih baik.
Pada pengujian tahap kedua, user telah dapat melakukan pencarian
informasi alat praktikum dengan melakukan scan QR Code melalui web camera.
Selain itu tampilan halaman web juga telah diperbarui dengan menambahkan
desain yang sesuai dengan permintaan customer. Proteksi sistem juga telah
disempurnakan. Evaluasi kedua dilakukan setelah adanya masukan dari customer
untuk menambahkan proses pencarian data dengan scan QR Code pada halaman
admin, mengingat nantinya jumlah data akan terus bertambah banyak. Pada
halaman admin juga ditambahkan halaman profil admin beserta pengaturan
password untuk admin.
Tahap pengujian ketiga merupakan tahap pengujian akhir. Sistem telah
diperbarui, baik pada error proteksi, penambahan komponen database untuk
admin, maupun penyempurnaan tampilan halaman web.
Setelah sistem dibangun, perlu dilakukan pengujian ulang terhadap
sistem supaya dapat mengetahui apakah sistem yang telah dibangun berjalan
dengan benar dan sesuai dengan tujuan dari penelitian. Pengujian meliputi
pengujian alfa dan pengujian beta.
-
15
Metode yang dipakai dalam pengujian alfa adalah menggunakan black
box testing, dengan menguji apakah proses yang berjalan menghasilkan output
yang diharapkan ketika menerima input. Tiap input yang ada akan diuji dan tiap
input yang diberikan sesuai dengan output diharapkan diberi nilai valid.
Tabel 1 Tabel pengujian alfa
Dari data yang telah didapat pada pengujian alfa, dapat terlihat bahwa
semua pengujian dapat dieksekusi dengan benar oleh sistem dan tidak mengalami
kendala error.
Setelah pengujian alfa telah selesai, dilakukan pengujian beta, yaitu
mengadakan uji sistem dengan melibatkan responden yang merupakan murid-
murid sekolah SMA Krista Mitra. Sebanyak 20 responden dikumpulkan dan
diberikan kuesioner mengenai tampilan aplikasi dan kinerja sistem, apakah sudah
dapat memenuhi kebutuhan user.
Dari hasil kuesioner tersebut, akan dihitung persentase dari tiap jawaban
yang diberikan oleh tiap responden, dengan tiga pilihan jawaban tiap pertanyaan:
Baik, Cukup, dan Kurang. Jumlah pertanyaan yang diajukan berjumlah lima soal.
Soal pertama menguji apakah tampilan aplikasi sudah baik dan menarik. Soal
kedua menguji kelengkapan informasi data pada sistem, apakah informasi data
peralatan sudah lengkap. Soal ketiga mengenai efektifitas dalam pemakaian,
apakah aplikasi mudah dijalankan oleh user. Soal keempat menguji efisiensi dari
sistem, apakah dengan memakai sistem tersebut, user dapat menghemat waktu
lebih banyak dalam mencari informasi data alat. Soal kelima menguji apakah
aplikasi yang dibangun telah dapat mengatasi permasalahan yang diangkat pada
penelitian.
Dari soal pertama didapatkan hasil sebanyak 16 responden menjawab
tampilan sudah baik, 3 responden menjawab cukup, dan 1 responden memberikan
jawaban kurang. Pada soal kedua, diperoleh sebanyak 17 responden menjawab
-
16
informasi alat praktikum lengkap, dan 3 responden menyatakan informasi cukup
lengkap, sementara tidak ada responden yang menyatakan kuran. Pada soal ketiga,
sebanyak 19 responden menyatakan aplikasi mudah dijalankan, 1 responden
menyatakan cukup, dan tidak ada responden yang menyatakan kurang. Pada soal
keempat didapatkan sebanyak 18 responden menanggapinya dengan baik, 1
responden menanggapi dengan cukup puas, dan 1 responden menyatakan kurang.
Dari soal kelima sebanyak 17 responden menyatakan baik, 2 responden
menyatakan cukup, dan 1 responden menyatakan kurang. Tabel 2 merupakan
tampilan hasil pengujian melalui kuesioner.
Tabel 2 Persentase hasil kuesioner
Dari data persentase diatas didapatkan sebanyak 88,5% pada hasil Baik,
10% pada hasil Cukup, dan 1,5% pada hasil Kurang. Dapat disimpulkan bahwa
sistem yang dibangun telah sesuai dan dapat memenuhi kebutuhan user.
5. Kesimpulan
Dari pembahasan yang telah terungkap sebelumnya, maka dapat ditarik
kesimpulan bahwa aplikasi pembaca QR Code yang telah dirancang dapat
mengambil informasi pada database peralatan praktikum dan ditampilkan pada
halaman informasi alat. Penggunaan PHP script telah membantu dalam proses
perancangan sistem informasi panduan penggunaan peralatan praktikum karena
script PHP dapat membaca embedded script lain seperti javascript dan jQuery,
sehingga tampilan halaman web menjadi lebih baik.
Sistem yang telah selesai dibuat dapat mengelola informasi data peralatan
praktikum dengan baik. Dengan adanya sistem pencarian informasi menggunakan
scan QR Code, kegiatan praktikum dapat berjalan lebih efisien dan kinerja guru
pembimbing pun menjadi efektif. Kedepannya, sistem ini dapat dikembangan
menjadi lebih baik lagi dengan penambahan komponen-komponen baru, seperti
penambahan fitur simulasi pemakaian peralatan praktikum dengan menggunakan
Flash sehingga murid bisa lebih memahami cara penggunaan tiap alat praktikum.
-
17
6. Daftar Pustaka
[1] Nugraha, M. Pasca, Rinaldi Munir. 2011. Pengembangan Aplikasi QR Code Generator dan QR Code Reader dari Data Berbentuk Image.
Bandung: Institut Teknologi Bandung.
[2] QR Code Kompas Perkaya Konten bagi Pembaca. http://tekno.kompas.com/read/2009/06/15/0850503/QR.Code.Kompas.Perk
aya.Konten.bagi.Pembaca. Diakses tanggal 23 Oktober 2013.
[3] Setyawan, Ardi, Imam Riadi. 2013. Aplikasi Multimedia Pembelajaran Tentang Memori Menggunakan Adobe Flash. Yogyakarta: Universitas
Ahmad Dahlan.
[4] Nugraheni, Endang. 2009. Peran dan Kompetensi Guru dalam E-Learning. Jakarta: Universitas Terbuka.
[5] Firdausy, Kartika, Selamat Riyadi, Tole Sutikno, dkk., 2008. Aplikasi Webcam untuk Sistem Pemantauan Ruang Berbasis Web. Yogyakarta:
Universitas Ahmad Dahlan.
[6] Nugroho, Bunafit, 2009, Aplikasi Pemrograman Web Dinamis dengan PHP dan MySQL, Yogyakarta: Penerbit Gava Media.
[7] Definisi, Sejarah, kelebihan dan kekurangan PHP. http://pionermediacomputer.com/berita-130-definisi-sejarah-kelebihan-
dan-kekurangan-php.html. Diakses tanggal 25 Oktober 2013.
[8] Kadir, Abdul, 2011, Buku Pintar jQuery dan PHP, Jakarta: MediaKom. [9] Control Webcams With JavaScript (jQuery).
http://www.webresourcesdepot.com/control-webcams-with-javascript-
jquery/. Diakses tanggal 20 November 2013.
[10] What Are QR Codes User For. http://www.mobile-qr-codes.org/what-are-qr-codes-used-for.html. Diakses
tanggal 24 November 2013.
[11] Denso Wave Incoporated. http://www.denso-wave.com/en/. Diakses tanggal 29 November 2013.
[12] About 2D Code - QR Code http://archive.is/20120915040049/http://www.qrcode.com/en/aboutqr.html.
Diakses tanggal 29 November 2013.
[13] QR Code Standardization http://www.qrcode.com/en/about/standards.html. Diakses tanggal 29
November 2013.