Metode Penelitian T1 672009014 Full text

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