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; 3Pengumpulan Data; 4Perancangan Sistem;
5Penulisan 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
A
ctivity 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.getElementByIdqr-canvas.getContext2d; 39
qr_can.drawImagevideo, 0, 0, w, h; 40
try { qrcode.decode; } 41
catcherr { qr-value.textMarker 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
–
ISOIEC 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.readyfunction {
45 46
thumbnail img.clickfunctione{ 47
background.css{opacity : 0.7} 48
.fadeInslow; 49
50 large.htmlimg src=+ this.attralt +
alt=+this.attralt+ style=\min-width:250; min-height:250; max- width:300px; max-height:300px;\ br+this.attrrel+
51 .center
52 .fadeInslow;
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 di
input
kan, 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., .strtolowerjenisAlat.,
.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