Cara Membuat QR Code Generator Menggunakan QRCode.js

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.

Table of Contents

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 :

Membuat Halaman QR Code Generator di Blogger

1. Buka Dashboard Blogger
2. Pilih menu Halaman > Buat Halaman
3. Ubah tampilan nya ke Mode HTML
4. Salin Code berikut HTML, CSS dan Javascript dan template di halaman
5. Klik Publish

<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>

<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>

<!--[ Script to QR Code Generator ]-->
    <script src="https://cdn.jsdelivr.net/gh/davidshimjs/[email protected]/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>

Kamu bisa sesuaikan kode CSS sesuai dengan tampilan template Blogger yang kamu gunakan agar lebih menarik.

Membuat Halaman QR Code Generator di 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

<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/[email protected]/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>

Kamu bisa sesuaikan kode CSS sesuai dengan tampilan tema wordpress yang kamu gunakan agar lebih menarik.

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.