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 kali ini, saya ingin berbagi bagaimana caranya membuat QR Code dengan menggunakan plugin 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. ^^
Berikut adalah tampilan di browser untuk skrip di atas:
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:
Silakan berkreasi sendiri untuk mendapatkan tampilan yang sesuai dengan keinginan kamu. Tutorial sederhana sengaja dikerjakan sangat sederhana agar tidak rumit untuk dikombinasikan dengan proyek kamu. ^^
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. ^^
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>
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