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("<img src='"+ $(this).attr("alt") +"'

alt='"+$(this).attr("alt")+"' style=\"min-width:250; min-height:250; max-

width:300px; max-height:300px;\" /><br/>"+$(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.