Cara Membuat QR Code Generator Menggunakan QRCode.js

QR Code sering kali kerap kita temukan dalam sebuah desain cetak atau visual, dokumen atau media lainnya. Baik digunakan 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?

Banyak perpustakaan pihak ketiga atau source code sumber terbuka dan cara untuk membuat QR Code yang bisa kamu gunakan. Salah satunya membuat QR Code Generator menggunakan javascript dan QRCode.js.

Membuat QR Code Generator Menggunakan Javascript dan QRCode.js

QRCode.js adalah library javascript untuk membuat QRCode. QRCode.js mendukung Cross-browser dengan HTML5 Canvas dan tag tabel di DOM. QRCode.js tidak memiliki ketergantungan. Ini adalah pustaka sumber terbuka yang keren, dan mudah dimengerti.

Jika kamu penasaran bagaimana membuat QR Code Generator menggunakan QRCode.js di website Blogger ataupun Wordpress, berikut langkah-langkahnya :

Pengguna Blogger

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
5. Klik Publish

<div class='qr-generator'>
  <input class="form-control" id="myinput" type="text" onchange="refreshqr()" placeholder="Enter Your QR Here">
  <button class="btn" onclick="refreshqr()">Generate QR Code</button>
  <div align="center" id="yourid"></div>
</div>
<!--[ Css QR Code Generator ]-->
<style>
.qr-generator>*+* {margin-top:1rem}
.form-control {width: 100%;outline: none;border: none;border-radius: 0.5rem;background: #9b8774ad;}
.btn {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>
<!--[ 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>

Pengguna Wordpress

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
5. Klik Publish

Demo QR Code Generator

Penutup

Nah itu tadi Cara Membuat QR Code Generator Menggunakan QRCode.js. Jika artikel ini bermanfaat bisa kamu share dan rekomendasikan ke teman-teman yang membutuhkan, jika ada pertanyaan lain bisa bertanya melalui komentar.