Tutorial Membuat QR Code dengan 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. ^^
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:
<!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>Berikut tampilan skrip di atas pada editor saya:
 |
| 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 |
Tag
How to create a qr code with jquery php
cara membuat qrcode dengan jquery php
Tutorial Membuat QR Code dengan jQuery
Reviewed by Anan Bahrul Khoir
on
00.26
Rating:
Reviewed by Anan Bahrul Khoir
on
00.26
Rating:
Anan Bahrul Khoir
Kim Fransiskus mencoba mengasah kemampuan menulisnya melalui blog dengan membagikan tutorial seputar web design dan bahasa pemrograman lainnya yang dikuasai. Diharapkan blog ini dapat bermanfaat dan membantu programmer dan kawan-kawan yang berhubungan dengan tema blog ini. Terima kasih .
Best Bet in Casino: Expert Tips, Free Bets & Review
BalasHapusThe best betting tips at Mr Gambler · Sportsbook ì²ì£¼ 출장안마 review 서울특별 출장안마 · 남양주 출장안마 Exclusive promotions · 춘천 출장안마 Offers & betting guides · Bonus 논산 출장마사지 offers and