En este apartado veremos como generar código QR usando la librería Endrid la cual podrán descargar junto con el proyecto que les dejaré más abajo.
Crearemos un formulario para que el usuario introduzca sus datos, utilizaremos jquery para que podamos ver el resultado en una misma página
en nuestra página index.html crearemos el formualrio de la siguiente forma, puedes compiar y pegar el código html
<div class='container'>
<h1>Generar códigos QR con PHP usando la librería ENDROID</h1>
<form method='post' id="generador">
<div class='row'>
<div class='col-md-6'>
<div class="form-group">
<input type="text" class="form-control m-2" id="names" placeholder="Nombres">
<input type="text" class="form-control m-2" id="lastnames" placeholder="Apellidos">
<input type="text" class="form-control m-2" id="celular" placeholder="Número celular">
<input type="text" class="form-control m-2" id="empresa" placeholder="Empresa">
<input type="text" class="form-control m-2" id="cargo" placeholder="Cargo">
<input type="text" class="form-control m-2" id="id" placeholder="Cédula / Passaporte">
<label for="textqr" class="m-2">Tamaño</label>
<select class='form-control m-2' id='sizeqr'>
<option value='100' selected>100 px</option>
<option value='200'>200 px</option>
<option value='300'>300 px</option>
<option value='400'>400 px</option>
<option value='500'>500 px</option>
</select>
<button type="submit" class="m-2 btn btn-primary">Generar</button>
</div>
</div>
<div class='col-md-6'>
<div class='result'>
</div>
</div>
</div>
</div>
</form>
</div>
Como vemos hemos creado campos de tipo text y un campo de tipo select que lo utilizaremos para darle el tamaño a nuestro código qr
Ahora tenemos nuestro código Jquery que se encargará de enviar los datos a nuestro archivo php sin salirnos de nuestro index,html
aquí el código.
<script>
$("#generador").submit(function(event) {
var names = $("#names").val();
var lastnames = $("#lastnames").val();
var celular = $("#celular").val();
var empresa = $("#empresa").val();
var cargo = $("#cargo").val();
var id = $("#id").val();
var sizeqr = $("#sizeqr").val();
parametros = {
"name": names,
"lastname": lastnames,
"celular": celular,
"empresa": empresa,
"cargo": cargo,
"id": id,
"sizeqr": sizeqr
};
$.ajax({
type: "POST",
url: "qr.php",
data: parametros,
success: function(datos) {
$(".result").html(datos);
}
})
event.preventDefault();
});
</script>
Como podemos ver este código nos envía los datos cargados por nuestro formulario y los envía a la pagina php qr.php, que es la que llamará a la librería Endroid y luego nos generará la imagen de nuestro código.
<?php
$name=$_POST['name'];
$lastname=$_POST['lastname'];
$celular=$_POST['celular'];
$empresa=$_POST['empresa'];
$cargo=$_POST['cargo'];
$id=$_POST['id'];
$sizeqr=$_POST['sizeqr'];
$mensaje="Nombre: ".$name."\n";
$mensaje .="Apellido: ".$lastname."\n";
$mensaje .="Celular: ".$celular."\n";
$mensaje .="Empresa: ".$empresa."\n";
$mensaje .="Cargo: ".$cargo."\n";
$mensaje .="Id: ".$id;
include('vendor/autoload.php');
use Endroid\QrCode\QrCode;
$qrCode = new QrCode($mensaje);
$qrCode->setSize($sizeqr);
$image= $qrCode->writeString();
$imageData = base64_encode($image);
echo '<img src="data:image/png;base64,'.$imageData.'">';
?>
Les dejo el ejemplo completo para que puedan descargar los archivos necesarios
Comentarios
Publicar un comentario