Contoh Aplikasi

Beranda
CSS

Cara Membuat Aplikasi QR Code Generator dengan HTML, CSS, dan JavaScript

Artikel berikut membahas mengenai Cara Membuat Aplikasi QR Code Generator dengan HTML, CSS, dan JavaScript
Cara Membuat Aplikasi QR Code Generator dengan HTML, CSS, dan JavaScript

QR Code (Quick Response Code) kini menjadi salah satu teknologi populer untuk berbagi informasi secara cepat, mulai dari link website, nomor WhatsApp, hingga data teks tertentu. Dengan hanya memindai QR menggunakan kamera smartphone, pengguna bisa langsung mengakses informasi tersebut.

Dalam artikel ini, kita akan membahas cara membuat aplikasi QR Code Generator sederhana menggunakan HTML, CSS, dan JavaScript. Aplikasi ini akan berjalan sepenuhnya di browser (client-side) sehingga tidak memerlukan server atau database.

Mengapa Menggunakan QRCodeJS?

Untuk membuat QR code di web, kita bisa memanfaatkan library QRCodeJS, sebuah pustaka JavaScript ringan dan mudah digunakan. Keunggulan QRCodeJS antara lain:

  • Tanpa server: Semua proses dilakukan di browser.
  • Mudah diintegrasikan: Hanya perlu menyertakan satu file qrcode.min.js.
  • Mendukung berbagai ukuran dan konfigurasi.

Langkah-Langkah Membuat QR Code Generator

1. Struktur Folder

Buat sebuah folder proyek dengan struktur seperti berikut:

/qr-generator
  ├── index.html
  ├── style.css
  ├── script.js

2. Membuat File HTML

File index.html akan menjadi kerangka utama aplikasi. Kita tambahkan input teks untuk memasukkan data yang akan diubah menjadi QR code, tombol Generate, dan div untuk menampilkan hasil QR.

<!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>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h2>QR Code Generator</h2>
  <input id="text" type="text" value="https://example.com" placeholder="Masukkan teks / URL">
  <button id="generate">Generate</button>
  <div id="qrcode"></div>

  <!-- Library QRCodeJS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
  <!-- Script kita -->
  <script src="script.js"></script>

</body>
</html>

3. Menambahkan CSS

File style.css digunakan untuk mempercantik tampilan aplikasi agar terlihat rapi dan user-friendly.

body {
  font-family: sans-serif;
  text-align: center;
  padding: 20px;
  background: #f9fafb;
}

h2 {
  margin-bottom: 10px;
}

input {
  padding: 8px;
  width: 250px;
  max-width: 90%;
}

button {
  padding: 8px 12px;
  margin-left: 5px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #1e4ed8;
}

#qrcode {
  margin-top: 20px;
}

4. Menulis Script JavaScript

File script.js bertugas untuk menangani logika pembuatan QR code. Saat tombol Generate diklik, JavaScript akan memanggil fungsi makeQR() untuk membuat QR code baru sesuai input.

let qrcode;

function makeQR() {
  const val = document.getElementById('text').value.trim();
  if (!val) return alert("Isi teks/URL terlebih dahulu");

  document.getElementById('qrcode').innerHTML = "";
  qrcode = new QRCode(document.getElementById("qrcode"), {
    text: val,
    width: 256,
    height: 256
  });
}

document.getElementById('generate').addEventListener('click', makeQR);

// Render awal
makeQR();

Cara Menggunakan Aplikasi

  1. Buka index.html di browser.
  2. Masukkan teks atau URL yang ingin Anda ubah menjadi QR code.
  3. Klik tombol Generate.
  4. QR code akan muncul di bawahnya, siap untuk dipindai.

Kesimpulan

Dengan HTML, CSS, dan JavaScript, kita dapat membuat aplikasi QR Code Generator yang sederhana namun fungsional. Menggunakan library QRCodeJS memudahkan proses pembuatan QR tanpa harus membuat algoritma encoding manual.

Aplikasi ini dapat dikembangkan lebih lanjut, misalnya dengan:

  • Menambahkan fitur download PNG
  • Mengubah warna QR dan background
  • Menyimpan hasil ke server

Kode Lengkap QR Code Generator

Berikut adalah kode lengkap yang dipisah menjadi tiga file:

index.html

<!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>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h2>QR Code Generator</h2>
  <input id="text" type="text" value="https://example.com" placeholder="Masukkan teks / URL">
  <button id="generate">Generate</button>
  <div id="qrcode"></div>

  <!-- Library QRCodeJS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
  <!-- Script kita -->
  <script src="script.js"></script>

</body>
</html>

style.css

body {
  font-family: sans-serif;
  text-align: center;
  padding: 20px;
  background: #f9fafb;
}

h2 {
  margin-bottom: 10px;
}

input {
  padding: 8px;
  width: 250px;
  max-width: 90%;
}

button {
  padding: 8px 12px;
  margin-left: 5px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #1e4ed8;
}

#qrcode {
  margin-top: 20px;
}

script.js

let qrcode;

function makeQR() {
  const val = document.getElementById('text').value.trim();
  if (!val) return alert("Isi teks/URL terlebih dahulu");

  document.getElementById('qrcode').innerHTML = "";
  qrcode = new QRCode(document.getElementById("qrcode"), {
    text: val,
    width: 256,
    height: 256
  });
}

document.getElementById('generate').addEventListener('click', makeQR);

// Render awal
makeQR();