Code website tạo mã QR đơn giản
Mã code là gì?
Mã code hay QR code là tên viết tắt của cụm từ Quick Response Code. Đây là những Mã phản hồi nhanh hoặc Mã vạch ma trận, Mã vạch hai chiều có khả năng mã hóa thông tin và hiển thị sao cho máy có thể đọc được.
Khái niệm mã code là gì xuất hiện lần đầu vào năm 1994. Chúng được tạo bởi Denso Wave – một công ty con của hãng Toyota. Những QR code thường xuất hiện dưới dạng chấm đen trong một ô vuông có nền màu trắng. Chúng chứa những thông tin như thời gian, địa điểm sự kiện, URL, giới thiệu sản phẩm, tài khoản thanh toán,…
Có thể nói, tác dụng của mã QR code là gì đã được thể hiện ngay từ tên của nó. Loại mã này cho phép quét và đọc mã nhanh hơn nhờ các thiết bị điện tử. Ví dụ như máy đọc mã vạch hay smartphone có camera với ứng dụng quét QR code. Chính nhờ sự tiện lợi đem lại đã giúp mã code xuất hiện nhiều trong cuộc sống ngày nay.
Tiện ích của mã code là gì?
Tiện ích của QR Code đã được đề cập ngay từ tên đầy đủ của mã code là gì. Hiểu một cách đơn giản, đây là code được sinh ra dưới dạng mã hóa nhằm để thay thế một chuỗi kí tự nào đó. Điều này giúp việc truyền đạt thông tin trở nên đơn giản và dễ dàng hơn. Ví dụ như URL, số điện thoại, tài khoản thanh toán, SMS, địa chỉ hoặc nội dung nào đó.
Hướng dẫn code website tạo mã QR
Để tạo một trang web đơn giản để xử lý nhập một đường link và tạo ra mã QR, chúng ta cần sử dụng HTML, CSS và JavaScript.
Đầu tiên, chúng ta sẽ tạo một form đơn giản để người dùng có thể nhập đường link. Sau đó, chúng ta sẽ sử dụng một thư viện JavaScript để tạo ra mã QR từ đường link này.
Đây là mã HTML và CSS để tạo form nhập đường link:
Tạo 1 tệp tin index.php
Coppy các đoạn mã sau và dán vào
<!DOCTYPE html>
<html>
<head>
<title>Tạo mã QR từ đường link</title>
<style>
input[type="text"] {
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
margin-right: 10px;
}
input[type="submit"] {
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
border: none;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<form id="qr-form">
<label for="link-input">Nhập đường link:</label>
<input type="text" id="link-input" name="link">
<input type="submit" value="Tạo mã QR">
</form>
<div id="qr-container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcode-generator/1.4.4/qrcode.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Chúng ta sử dụng CSS để tạo một form đơn giản và style cho các input và button.
Sau đó để xử lý dữ liệu ta tạo 1 tệp tin tên script.js ở thu mục gốc của website
chúng ta sẽ sử dụng JavaScript để xử lý sự kiện khi người dùng nhấn nút “Tạo mã QR” và tạo ra mã QR từ đường link được nhập vào.
Đây là mã JavaScript:
const form = document.getElementById('qr-form');
const qrContainer = document.getElementById('qr-container');
form.addEventListener('submit', (event) => {
event.preventDefault(); // Ngăn chặn form submit lại trang
const linkInput = document.getElementById('link-input');
const link = linkInput.value;
if (!link) {
alert('Vui lòng nhập đường link!');
return;
}
// Tạo mã QR từ đường link
const qr = qrcode(0, 'L');
qr.addData(link);
qr.make();
const qrImg = qr.createImgTag(4);
// Hiển thị mã QR trên trang web
qrContainer.innerHTML = qrImg;
});Chúng ta sử dụng thư viện qrcode-generator để tạo mã QR từ đường link. Sau khi tạo xong, chúng ta sẽ hiển thị mã QR lên trang web bằng cách thêm nó vào div có id là “qr-container”.
