Membuat Aplikasi Generator QR Code dari Teks atau URL

Dipublikasikan: Juli 2026

QR Code generator adalah web app yang banyak dicari untuk kebutuhan bisnis, promosi, dan berbagi informasi. Tutorial ini menggunakan API gratis untuk menghasilkan QR Code instan.

Fitur

Masukkan teks atau URL
Generate QR Code instan
Pilih ukuran QR (kecil/sedang/besar)
Download QR Code sebagai gambar

Kode Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>QR Code Generator</title>
  <style>
    * { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:'Segoe UI',Arial,sans-serif; background:linear-gradient(135deg,#2d3436,#636e72); min-height:100vh; display:flex; justify-content:center; align-items:center; padding:20px; }
    .container { background:#fff; border-radius:24px; padding:35px; box-shadow:0 20px 60px rgba(0,0,0,0.3); width:100%; max-width:480px; text-align:center; }
    h1 { color:#2d3436; margin-bottom:5px; font-size:26px; }
    .subtitle { color:#636e72; margin-bottom:25px; font-size:14px; }
    .input-group { margin-bottom:20px; }
    .input-group label { display:block; text-align:left; margin-bottom:6px; font-weight:600; color:#2d3436; font-size:14px; }
    .input-group input, .input-group select { width:100%; padding:14px; border:2px solid #dfe6e9; border-radius:10px; font-size:15px; }
    .input-group input:focus, .input-group select:focus { outline:none; border-color:#6c5ce7; }
    .size-row { display:flex; gap:10px; margin-bottom:20px; }
    .size-row select { flex:1; }
    .btn { width:100%; padding:16px; background:#6c5ce7; color:#fff; border:none; border-radius:12px; font-size:17px; cursor:pointer; }
    .btn:hover { background:#5b4bd6; }
    .qr-output { margin-top:25px; padding:25px; background:#f8f9fa; border-radius:16px; display:none; }
    .qr-output.show { display:block; }
    .qr-output img { max-width:100%; width:250px; height:250px; margin-bottom:15px; }
    .download-btn { padding:12px 28px; background:#00b894; color:#fff; border:none; border-radius:10px; cursor:pointer; font-size:15px; }
    .download-btn:hover { background:#00a381; }
    .history { margin-top:25px; text-align:left; }
    .history h3 { font-size:14px; color:#636e72; margin-bottom:10px; }
    .history-item { padding:10px 14px; background:#f8f9fa; border-radius:8px; margin-bottom:6px; font-size:13px; display:flex; justify-content:space-between; align-items:center; }
    .history-item .text { color:#2d3436; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:200px; }
    .history-item .date { color:#b2bec3; font-size:11px; }
  </style>
</head>
<body>
  <div class="container">
    <h1>ðŸ“± QR Code Generator</h1>
    <div class="subtitle">Ubah teks atau URL menjadi QR Code instan</div>
    <div class="input-group"><label>Teks atau URL</label><input id="textInput" placeholder="https://contoh.com atau teks apa saja" /></div>
    <div class="size-row">
      <select id="sizeSelect">
        <option value="150">Kecil (150px)</option>
        <option value="250" selected>Sedang (250px)</option>
        <option value="350">Besar (350px)</option>
      </select>
    </div>
    <button class="btn" onclick="generateQR()">âœ¨ Generate QR Code</button>
    <div class="qr-output" id="qrOutput">
      <img id="qrImage" src="" alt="QR Code" />
      <button class="download-btn" onclick="downloadQR()">â¬‡ Download QR</button>
    </div>
    <div class="history" id="history">
      <h3>Riwayat</h3>
    </div>
  </div>
  <script>
    let currentQR = '';
    let history = JSON.parse(localStorage.getItem('qrHistory')) || [];
    function generateQR() {
      const text = document.getElementById('textInput').value.trim();
      if (!text) return alert('Masukkan teks atau URL');
      const size = document.getElementById('sizeSelect').value;
      const url = `https://api.qrserver.com/v1/create-qr-code/?size=${size}x${size}&data=${encodeURIComponent(text)}`;
      currentQR = url;
      document.getElementById('qrImage').src = url;
      document.getElementById('qrOutput').classList.add('show');
      // Add to history
      history.unshift({ text, date: new Date().toLocaleDateString('id-ID') });
      if (history.length > 10) history.pop();
      localStorage.setItem('qrHistory', JSON.stringify(history));
      renderHistory();
    }
    function downloadQR() {
      if (!currentQR) return;
      const link = document.createElement('a');
      link.href = currentQR;
      link.download = 'qrcode.png';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
    function renderHistory() {
      const div = document.getElementById('history');
      if (history.length === 0) { div.innerHTML = '<h3>Riwayat</h3>'; return; }
      div.innerHTML = '<h3>Riwayat</h3>' + history.map(h => `
        <div class="history-item">
          <div class="text">${h.text}</div>
          <div class="date">${h.date}</div>
        </div>`).join('');
    }
    renderHistory();
    document.getElementById('textInput').addEventListener('keypress', (e) => { if (e.key === 'Enter') generateQR(); });
  </script>
</body>
</html>