Cara Membuat QR Code Generator dengan Javascript

Share:

Hello World's! Proses scanning bisa membantu kita untuk melakukan suatu pekerjaan / aktivitas, seperti sekedar mengunjungi laman web, hingga melakukan autentikasi (login) pada sebuah situs web.

Kalau soal scan-menyecan, QR Code adalah jenis scan yang paling populer selain barcode. Oh iya, sebelumnya saya mau ngingetin aja kalau QR Code itu berbeda sama barcode. Kalau QR Code itu yang bentuknya kotak, sedangkan kalau barcode bentuknya garis-garis tebal-tipis (biasa ditemui di belakang kemasan produk di swalayan).

Tapi, gimana sih cara bikin QR Code itu?

Apa mungkin caranya itu nggambar rectangle-rectangle hingga membentuk pola seperti QR Code pada umumnya? Ya enggak lah! Saya sendiri juga ngga tau sih gimana caranya bikin kode QR yang jika discan nanti bakal ada isinya, entah itu URL atau cuma teks.

Lah, gimana sih? Katanya mau bikin QR Code Generator....? Tapi kok ga tau gimana cara buatnya??

Sebentar...

Kita bikin QR Code Generator ini pakai library javascript yang sudah saya sediakan. Jadi ga perlu repot-repot gambar rectangle di canvas.

Pertama, kita buat dulu laman HTML dan sekalian form-nya seperti ini.

<!DOCTYPE html>
<html>
<head>
     <title>QR Code Generator</title>
</head>
<body>

<div id="myQR"></div>

</body>
</html>

Sekarang, kita sisipkan library jquery dan generator-nya di bagian head

<script src="http://belajarnge.web.id/alat/jquery.min.js"></script>
<script src="http://belajarnge.web.id/alat/qrcode.min.js"></script>

Dan berikut ini adalah script yang fungsinya untuk meng-generate qr code; Letakkan di bagian body.

<script>
var area = document.getElementById('myQR');
new QRCode(area, "http://www.belajarnge.web.id"); // URL-nya diganti dengan isi yang diinginkan
</script>

Jadinya akan seperti ini.



Gampang kan? Semua akan terasa mudah apabila kita memakai library. Dan library ini bukan buatan saya, saya cuma pemakai. Kalian bisa contact yang punya via twtiter di @davidshimjs. Salam Koding!

2 komentar: