Creo que ya todo han escuchado sobre los Códigos QR que son códigos de respuesta rápida son en forma de barras 2D que se utilizar para almacenar texto como url, teléfonos, y texto simple. Aquí te mostramos como Generar códigos QR con PHP y HTML.
Generar códigos QR con PHP y HTML
Para generar código QR solo se necesitan 3 pasos:
- Crear un formulario HTML para enviar texto.
- Descargar la librería Endroid desde Github para nuestro proyecto.
- Crear un archivo PHP que se encargue de generar los códigos QR.
Paso 1: Crear un formulario HTML para enviar texto.
Para este paso lo que haremos es crear un archivo llamado index.php, el cual contendrá el formulario para enviar los datos al generador, también se ha creado una pequeña función JavaScript para enviar los datos a través de ajax.
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Generador de códigos QR con PHP</title>
</head>
<body>
<div class='container' >
<h1>Generador de códigos QR con PHP</h1>
<form method='post' id="generador">
<div class='row'>
<div class='col-md-4'>
<div class="form-group">
<label for="textqr">Ingresa el texto</label>
<input type="text" class="form-control" id="textqr" placeholder="Ingresa el texto" required>
</div>
<button type="submit" class="btn btn-primary">Generar</button>
</div>
<div class='col-md-2'>
<div class="form-group">
<label for="textqr">Tamaño</label>
<select class='form-control' id='sizeqr'>
<option value='100'>100 px</option>
<option value='200' selected>200 px</option>
<option value='300'>300 px</option>
<option value='400'>400 px</option>
<option value='500'>500 px</option>
</select>
</div>
</div>
<div class='col-md-6'>
<div class='result'>
</div>
</div>
</div>
</form>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$( "#generador" ).submit(function( event ) {
var textqr=$("#textqr").val();
var sizeqr=$("#sizeqr").val();
parametros={"textqr":textqr,"sizeqr":sizeqr};
$.ajax({
type: "POST",
url: "qr.php",
data: parametros,
success: function(datos){
$(".result").html(datos);
}
})
event.preventDefault();
});
</script>
</body>
En el paso anterior he creado un formulario para enviar el texto ingresado por el usuario. Dicho archivo se encarga de enviar los datos a través de ajax al archivos llamado: qr.php
Paso 2: Descargar la librería Endroid desde Github
Para descargar la librería endroid desde Github, he utilizado un manejador de dependencias como los es composer. La instalación de la librería es realmente simple, solo debes abrir tu consola y colocamos el siguiente comando:
composer require endroid/qr-code
Paso 3: Crear un archivo PHP que se encargue de generar los códigos QR.
Luego vamos a crear un archivo y lo nombrare qr.php, el cual recibe los datos vía ajax, para poder crear el código QR
<?php
$textqr=$_POST['textqr'];//Recibo la variable pasada por post
$sizeqr=$_POST['sizeqr'];//Recibo la variable pasada por post
include('vendor/autoload.php');//Llamare el autoload de la clase que genera el QR
use Endroid\QrCode\QrCode;
$qrCode = new QrCode($textqr);//Creo una nueva instancia de la clase
$qrCode->setSize($sizeqr);//Establece el tamaño del qr
//header('Content-Type: '.$qrCode->getContentType());
$image= $qrCode->writeString();//Salida en formato de texto
$imageData = base64_encode($image);//Codifico la imagen usando base64_encode
echo '<img src="data:image/png;base64,'.$imageData.'">';
?>
En este paso tendremos el texto ingresado por el usuario para crear el código QR y luego incluimos la clase que se encarga de la generación del código QR.
Si puedes mejorar este generador de Códigos QR déjanos el código para actualizar este POST.
También te invito a que le des un vistazo a la documentación oficial de la clase que se encarga de generar los códigos QR aquí: https://github.com/endroid/qr-code
Descargar Código Fuente para generar códigos QR con PHP y HTML
Sigue ampliando tus conocimientos con nosotros:
| Facturación php |
| CSS para tablas |
| PDF con JavaScript |
| Descargar gif de cargando |