QR Code (Quick Response Code) adalah kode matriks dua dimensi yang dirancang untuk menyimpan dan memberikan akses cepat ke berbagai informasi. QR Code dapat dipindai menggunakan kamera smartphone atau scanner khusus, dan telah menjadi salah satu metode populer untuk menyampaikan data secara efisien. Pada artikel ini kami akan share Tools Qr Code Generator dan Linear Code Generator.
1. Qr Code Generator
QR Code Generator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code Generator</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
#qr-code {
margin: 20px auto;
text-align: center;
border: 2px solid #333;
padding: 20px;
background-color: #fff;
display:none;
}
.container {
max-width: 600px;
margin: auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="text"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: #28a745;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
margin-top: 15px;
}
button:hover {
background-color: #218838;
}
#download-btn {
display: none;
margin-top: 20px;
padding: 10px 20px;
background-color: #28a745;
color: white;
border: none;
cursor: pointer;
}
#download-btn:hover {
background-color: #218838;
}
</style>
</head>
<body>
<div class="container">
<h1>QR Code Generator</h1>
<input type="text" id="text-input" placeholder="Enter text or URL" />
<button id="generate-btn">Generate QR Code</button>
<div id="qr-code"></div>
<button id="download-btn">Download QR Code</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script>
$(document).ready(function() {
$('#generate-btn').click(function() {
var text = $('#text-input').val();
if (text) {
$('#qr-code').empty().qrcode(text);
$('#qr-code').show();
$('#download-btn').show();
} else {
alert('Please enter a valid text or URL.');
}
});
$('#download-btn').click(function() {
var canvas = $('#qr-code canvas')[0];
var link = document.createElement('a');
link.href = canvas.toDataURL('image/png');
link.download = 'qr-code.png';
link.click();
});
});
</script>
</body>
</html>Fungsi dan Fitur Utama:
- Pembuatan QR Code:
- Mengubah teks, URL, nomor telepon, email, atau data lainnya menjadi QR Code.
- Ideal untuk keperluan digital, seperti menyimpan tautan situs web atau informasi kontak.
- Tipe Data yang Didukung:
- Teks biasa: Menyimpan pesan atau data berupa teks.
- URL: Untuk mengarahkan pengguna ke halaman web.
- Nomor telepon: Membuat kode untuk melakukan panggilan.
- Email: Mengisi alamat email secara otomatis pada aplikasi email.
- Wi-Fi: Memberikan detail login jaringan Wi-Fi.
- vCard: Menyimpan detail kontak dalam format yang mudah diimpor.
2. Linear Code Generator
Linear Code Generator adalah salah satu tools QR Code Generator. Tools ini digunakan untuk membuat barcode linear (kode batang satu dimensi), yang sering digunakan dalam manajemen inventaris, penjualan, dan logistik.
Linear Barcodes Generator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Barcode Generator</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.0/JsBarcode.all.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.container {
max-width: 600px;
margin: auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="text"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: #28a745;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
margin-top: 15px;
}
#barcode {
margin: 20px auto;
text-align: center;
border: 2px solid #333;
padding: 10px;
background-color: #fff;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center">Linear Barcodes Generator</h1>
<div class="form-group">
<label for="inputText">Enter Text:</label>
<input type="text" id="inputText" placeholder="Enter text to generate barcode">
</div>
<button id="generateBtn">Generate Barcode</button>
<div id="barcode">
<svg id="barcodeSVG"></svg>
</div>
</div>
<script>
document.getElementById('generateBtn').addEventListener('click', function() {
var inputText = document.getElementById('inputText').value;
JsBarcode("#barcodeSVG", inputText, {
format: "CODE128",
width: 2,
height: 100,
displayValue: true
});
});
</script>
</body>
</html>Fungsi dan Fitur Utama:
- Pembuatan Linear Barcode:
- Membuat kode batang berdasarkan data numerik atau alfanumerik.
- Linear barcode meliputi jenis seperti Code 39, Code 128, UPC-A, EAN-13, dan lainnya.
- Jenis Linear Barcode yang Didukung:
- UPC-A / UPC-E: Digunakan untuk melabeli produk di toko ritel.
- EAN-13 / EAN-8: Digunakan secara internasional untuk produk konsumen.
- Code 39: Cocok untuk pelabelan di bidang industri atau logistik.
- Code 128: Digunakan untuk menyimpan lebih banyak karakter dengan ukuran lebih kecil.
- ITF (Interleaved 2 of 5): Digunakan untuk pelabelan paket.
Semoga bermanfaat..