Membuat QR Code Generator Menggunakan QRCode.js

QR Code merupakan hal yang biasa kamu lihat dan sangat mudah digunakan baik untuk menyampaikan informasi berupa alamat URL, nomer telepon, teks, gambar, ataupun hal lainnya tergantung keperluan.

Ada banyak layanan tools online untuk membuat QR code secara gratis. Tapi bagaimana jika kamu ingin membuat QR Code dengan QR Code Generator yang kita buat sendiri? Nah dalam artikel ini codepelajar akan memberikan cara untuk membuat QR Code Generator dengan sangat mudah.

Apa itu QR Code?

QR Code adalah singkatan dari "Quick Response Code" atau Kode Respons Cepat dalam bahasa Indonesia. QR Code merupakan jenis kode matriks dua dimensi yang dapat menyimpan informasi dalam bentuk teks, URL, nomor telepon, alamat email, dan berbagai jenis data lainnya. QR Code dapat dengan mudah dibaca menggunakan kamera smartphone atau pemindai QR Code yang tersedia di banyak perangkat.

QR Code biasanya digunakan untuk berbagai tujuan, termasuk pemasaran, identifikasi produk, pembayaran, dan keperluan logistik. Dengan memindai QR Code menggunakan perangkat yang sesuai, pengguna dapat mengakses informasi, mengunjungi situs web, atau melaksanakan tindakan lain yang terkait dengan kode tersebut.

QR Code memiliki kelebihan dalam hal kecepatan dan kapasitas penyimpanan data yang lebih besar dibandingkan dengan kode batang tradisional. QR Code juga sering digunakan dalam aplikasi pembayaran digital, seperti e-wallet atau dompet digital, di mana pengguna dapat membayar hanya dengan memindai kode tersebut.

Cara Membuat QR Code Generator Menggunakan QRCode.js

Blogger

Jika kamu menggunakan blogger silahkan ikuti langkah-langkah berikut:

1. Buka Dashboard Blogger

2. Pilih menu Halaman > Buat Halaman

3. Ubah tampilan ke Mode HTML

4. Salin Code berikut HTML, CSS dan Javascript dan template di halaman

HTML

HTML dapat di pasang dalam halaman blogger

<input class="user-input" id="myinput" type="text" onchange="refreshqr()" placeholder="Enter Your QR Here"> <p class='note'>Supports Dynamic Codes, Tracking, Analytics, Free text, vCards and more.</p> <button class="button" onclick="refreshqr()">Generate QR Code</button> <br><br> <div align="center" id="yourid"></div>

CSS

Silahkan pasang ini di atas kode </style> atau di atas </head>

<style> .user-input {width: 100%;outline: none;border: none;border-radius: 0.5rem;background: #9b8774ad;} .button {display:inline-flex;align-items:center; margin:10px 0;padding:12px 15px;outline:0;border:0; border-radius:3px;line-height:20px; color:#fffdfc; background:#204ecf; font-size:14px;white-space:nowrap;overflow:hidden;max-width:320px} </style>

JavaScript

Pasang kode ini di atas kode </body>

<!--[ Script to QR Code Generator ]--> <script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@master/qrcode.js"></script> <script type="text/javascript"> var qrcode = new QRCode(document.getElementById("yourid"), { text: 'MyText', width: 350, height: 350, colorDark : "#000", colorLight : "#fff", correctLevel : QRCode.CorrectLevel.H }); function refreshqr(){ qrcode.makeCode(document.getElementById('myinput').value); // make another code. } </script>

5. Klik Publish

Wordpress

Jika kamu ingin memasangnya pada wordpress silahkan ikuti langkah-langkah berikut:

1. Buka Dashboard Worpdress

2. Pilih Halaman > Buat Halaman Baru

3. Ubah tampilan nya ke Mode HTML

4. Salin Code berikut dan template di halaman

<style> .user-input {width: 100%;outline: none;border: none;border-radius: 0.5rem;background: #9b8774ad;} .button {display:inline-flex;align-items:center; margin:10px 0;padding:12px 15px;outline:0;border:0; border-radius:3px;line-height:20px; color:#fffdfc; background:#204ecf; font-size:14px;white-space:nowrap;overflow:hidden;max-width:320px} </style> <input class="user-input" id="myinput" type="text" onchange="refreshqr()" placeholder="Enter Your QR Here"> <p class='note'>Supports Dynamic Codes, Tracking, Analytics, Free text, vCards and more.</p> <button class="button" onclick="refreshqr()">Generate QR Code</button> <br><br> <div align="center" id="yourid"></div> <!--[ Script to QR Code Generator ]--> <script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@master/qrcode.js"></script> <script type="text/javascript"> var qrcode = new QRCode(document.getElementById("yourid"), { text: 'MyText', width: 350, height: 350, colorDark : "#000", colorLight : "#fff", correctLevel : QRCode.CorrectLevel.H }); function refreshqr(){ qrcode.makeCode(document.getElementById('myinput').value); // make another code. } </script>

5. Klik Publish

Demo QR Code Generator

Supports Dynamic Codes, Tracking, Analytics, Free text, vCards and more.

Penutup

Dengan ini blog dan website kamu akan lebih berwarna lengkap dengan fitur di dalamnya, mungkin ini saja yang dapat codepelajar sampaikan untuk hari ini dan terimakasih sudah membaca.