Creating and Scanning QR Codes with PHP and JavaScript: A Complete Guide using QRNow
QR codes have become a popular solution for sharing information quickly and easily. Whether it’s for URLs, text, or other data, QR codes help connect the digital world to the real world with just a scan.
I have created a QRNow project which provides an easy solution to create and read QR codes using PHP and JavaScript.
QRNow is a simple PHP and JavaScript application that allows you to easily create and read QR codes. In this article, we will discuss how to use QRNow to generate and scan QR codes using PHP and JavaScript.
QRNow Features
- Generate QR Code: Create QR codes from customizable text or URLs.
- Scan QR Code: Use your device’s camera to scan and read QR codes.
With QRNow, you can create QR codes for various purposes, such as for events, payments, or inventory management. Now, let’s explore how to easily create and scan QR codes using PHP and JavaScript!
Installing QRNow
To get started, follow these steps to set up the QRNow project:
- Clone the QRNow repository:
Run the following command in your terminal or command prompt:
git clone https://github.com/cedonulfi/qrnow.git - Navigate to the project directory:
cd qrnow - Download and set up the phpqrcode library:
- Visit phpqrcode to download the library.
- Extract the downloaded files and place the
phpqrcodefolder in your project’s root directory.
- Ensure PHP is installed and you have a local server running to execute the PHP scripts.
Using QRNow
Once the setup is complete, you can start using QRNow to create and scan QR codes. There are two main parts you need to understand: generating QR codes and scanning QR codes.
1. Generating QR Code with PHP
QRNow uses the phpqrcode library to generate QR codes. You can create a QR code by entering the text or URL you want to encode.
Steps:
- Open the create.php file in your web browser.
- Enter the text or URL you want to convert into a QR code in the provided input field.
- Click the “Generate QR Code” button to generate and display the QR code on the screen.
Here is the basic code to generate a QR code in the create.php file:
<?php
include "phpqrcode/qrlib.php"; // Include the phpqrcode library
// Check if there is any data sent for the QR code
if(isset($_POST['text'])){
$text = $_POST['text']; // Get the text or URL from the form
QRcode::png($text); // Generate the QR code
}
?>
<form method="post" action="">
<label for="text">Enter Text or URL:</label>
<input type="text" id="text" name="text">
<button type="submit">Generate QR Code</button>
</form>
With this code, the QR code will be generated and displayed on the page after you submit the text or URL.
2. Scanning QR Code with JavaScript
To scan QR codes, QRNow uses the html5-qrcode.min.js library. You simply need to open the scan.html page and use your device’s camera to scan the QR code.
Steps:
- Open the scan.html file in your web browser.
- Allow access to your device’s camera.
- Point the camera at the QR code you want to scan.
- Once the QR code is detected, the content inside the QR code will be displayed in an alert.
Here is the basic code to scan QR codes using JavaScript in the scan.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scan QR Code</title>
<script src="https://unpkg.com/html5-qrcode/minified/html5-qrcode.min.js"></script>
</head>
<body>
<h2>Scan QR Code</h2>
<div id="reader" style="width: 600px; height: 400px;"></div>
<script>
function onScanSuccess(decodedText, decodedResult) {
alert("QR Code Detected: " + decodedText); // Display QR code result
}
function onScanFailure(error) {
console.warn(error);
}
var html5QrCode = new Html5Qrcode("reader");
html5QrCode.start(
{ facingMode: "environment" }, // Use the back camera
{ fps: 10, qrbox: 250 }, // Scanning configuration
onScanSuccess,
onScanFailure
);
</script>
</body>
</html>
With the code above, your browser will automatically use the camera to scan the QR code. After the QR code is successfully detected, the information inside it will be displayed as an alert.
Conclusion
With QRNow, you can easily generate and scan QR codes using a combination of PHP and JavaScript. The QR code generation feature using the phpqrcode library allows you to quickly generate QR codes from text or URLs, while the scanning feature using html5-qrcode.min.js lets you scan QR codes directly from your device. QRNow is perfect for applications like payments, inventory management, or even events that require QR code scanning.
By following this tutorial, you can easily integrate QR code generation and scanning into your PHP and JavaScript projects. Happy coding!
If you’d like to explore further, you can download this project from the QRNow GitHub repository.
Don’t forget to check out my other projects on Github.