Beberapa proyek aplikasi web membutuhkan QR Code sebagai salah satu referensi atau kegunaan lainnya. Artikel saya kali ini berisi tentang tutorial membuat QR Code dengan menggunakan jQuery.
Tutorial ini akan membantu proyek website kamu yang membutuhkan QR Code di dalamnya. Mungkin ada yang membutuhkannya atau mungkin tidak. Yang terpenting berbagi ilmu dan bermanfaat. ^^
- [message]
- ##warning## Kebutuhan dan plugin
- Silakan unduh plugin jQuery.qrcode di sini: link.
Saat saya menulis tutorial ini, versi dari jQuery.qrcode adalah versi 0.14.0. Kamu klik link di atas untuk menuju halaman plugin jQuery.qrcode dan tekan tombol DOWNLOAD. - Kemampuan dasar bahasa pemrograman HTML dan jQuery
Berikut adalah langkah-langkahnya:
Ekstrak File Zip
Setelah kamu mengunduh file plugin jQuery untuk tutorial kali ini, kamu harus mengekstrak file zip tersebut dan simpan di salah satu folder localhost kamu. Berikut contohnya:
 |
| Gambar 1: Manajemen folder latihan untuk membuat QR Code dengan menggunakan jQuery |
File yang akan kita gunakan adalah jquery-qrcode-0.14.0 dan jquery-qrcode-0.14.0.min. Kedua file tersebut berekstensi js (javascript).
Buat File Index
Setelah mengekstrak file zip jQuery.qrcode, langkah selanjutnya adalah membuat halaman index untuk tampilan kita nanti. Kamu bisa menggunakan ekstensi php atau html. Tapi, karena saya akan menggunakan jQuery dan tidak ada proses yang membutuhkan PHP, dalam tutorial ini saya menggunakan ekstensi html. Berikut adalah skripnya:
Berikut tampilan skrip di atas pada editor saya:[<!DOCTYPE html> <html> <head> <title>Tutorial Membuat QR Code dengan jQuery - Anan Bahrul Khoir</title> </head> <body> <textarea id="teks" rows="10" cols="50"></textarea> <br /> <button>Generate Teks</button> <div id="qrcode"></div> </body> </html>]
 |
| Gambar 2: Tampilan halaman index pada editor saya |
 |
| Gambar 3: Tampilan skrip halaman index pada browser |
Masukkan Plugin jQuery.qrcode di File Index
Langkah selanjutnya adalah meng-include file library jQuery dan salah satu file plugin tadi ke dalam file index yang sudah kita buat sebelumnya sehingga tampilan skripnya menjadi seperti ini:
[<!DOCTYPE html> <html> <head> <title>Tutorial Membuat QR Code dengan jQuery - Anan Bahrul Khoir</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript" src="jquery-qrcode-0.14.0.js"></script> </head> <body> <textarea id="teks" rows="10" cols="50"></textarea> <br /> <button>Generate Teks</button> <div id="qrcode"></div> </body> </html>]
Buat Fungsi untuk Generate Teks menjadi QR Code
Setelah memasukkan file plugin jQuery.qrcode tadi, langkah selanjutnya adalah membuat fungsi untuk men-generate teks yang kita inputkan di dalam kotak textarea. Berikut adalah tampilan perubahan skripnya:
[<!DOCTYPE html>
<html>
<head>
<title>Tutorial Membuat QR Code dengan jQuery - Anan Bahrul Khoir</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="jquery-qrcode-0.14.0.js"></script>
<script type="text/javascript">
function generate_qrcode(){
var teks = document.getElementById('teks');
$('#qrcode canvas').remove();
$('#qrcode').qrcode({
render: 'canvas',
text: teks.value
});
}
</script>
</head>
<body>
<textarea id="teks" rows="10" cols="50"></textarea> <br />
<button onclick="generate_qrcode()">Generate Teks</button>
<div id="qrcode"></div>
</body>
</html>]
Selesai. :)Saatnya kamu mencoba hasil skrip di atas di browser kamu dan coba isi textarea lalu tekan tombol Generate Teks untuk melihat QR Code dari teks tersebut. Berikut adalah hasilnya:
 |
| Gambar 4: Tampilan hasil generate teks menjadi QR Code |
COMMENTS