Contoh Script Membuat QR Barcode
Script untuk membuat QR Barcode
!DOCTYPE html
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Pembuat QR Code Nama Siswa</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 40px;
}
.qrcode-container {
margin-bottom: 30px;
border: 1px solid #ccc;
padding: 10px;
width: fit-content;
}
</style>
</head>
<body>
<h1>QR Code Nama Siswa</h1>
<label for="namaSiswa">Masukkan Nama Siswa:</label><br>
<input type="text" id="namaSiswa" placeholder="Contoh: Rina Saputri">
<button onclick="generateQRCode()">Buat QR Code</button>
<div id="output" style="margin-top: 20px;"></div>
<script>
function generateQRCode() {
const nama = document.getElementById("namaSiswa").value.trim();
const outputDiv = document.getElementById("output");
if (nama === "") {
alert("Nama siswa tidak boleh kosong.");
return;
}
// Buat elemen baru untuk QR code dan label
const container = document.createElement("div");
container.className = "qrcode-container";
const label = document.createElement("div");
label.textContent = nama;
label.style.marginBottom = "10px";
label.style.fontWeight = "bold";
const qrcodeDiv = document.createElement("div");
container.appendChild(label);
container.appendChild(qrcodeDiv);
outputDiv.appendChild(container);
// Buat QR code
new QRCode(qrcodeDiv, {
text: nama,
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
// Reset input
document.getElementById("namaSiswa").value = "";
}
</script>
</body>
/html
Cara menggunakannya adalah disimpan ke dalam folder XAMP di folder htdocs atau WAN di folder www atau upload ke dalam web hosting simpan dengan ekstensi ke dalam format HTML.usahakan diakses menggunakan protokol HTTPS://
.png)
.png)
Posting Komentar untuk "Contoh Script Membuat QR Barcode"