Los códigos QR también se les conoce como código de respuesta rápida, es un código de formato de código de barras 2D que se usa para almacenar texto como números de teléfono, correos electrónicos, direcciones y texto simple, etc. En este tutorial te mostraremos cómo 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
- 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 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
<!doctype html> <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:
|
1 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?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 obtenemos 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.
Vídeo tutorial Generar códigos QR con PHP y HTML
Eso es todo, de esta forma muy fácil se puede crear un generador de códigos QR usando PHP y HTML. Puedes personalizar este código aún más según tus requerimientos.
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
