Hace un tiempo estuve trabajando en varios sistemas de inventario y algo que los clientes siempre solicitan es la posibilidad de buscar artículos a partir del código de barras, ya sea para una búsqueda, un conteo de inventario, etc.
Cabe acotar que el código lo establecieron ellos y el sistema genera los códigos de barras a partir de allí, se genera en un PDF y ellos lo imprimen y pegan en cada artículo. Este post es para hablar sobre el lector de códigos de barra, ya debes conocer sobre cómo realizar un CRUD.
En el proyecto se usó: PHP, MySql, Codeigniter, bootstrap 3, JQuery, Ajax, Json.
Podemos utilizar cualquier lector/escáner de códigos de barras USB, solo con posicionarnos en el input y escanear un código de barras, se traducirá al valor y en este caso el código del artículo. Usando javascript o jquery podemos manejar el proceso y agilizarlo.
Primero necesitamos el HTML, en este caso realicé todo en un modal para luego agregarlos en otro listado, por el momento solo explicaré el proceso de escáner.
Creé un botón de bootstrap asociado a un modal y se colocó al botón una función para que hiciera focus en el input donde se ingresará el código leído por el escáner.
|
1 |
<button class="btn btn-success" type="button" id="btnNuevo" data-toggle="modal" data-target="#modalArticulos" data-keyboard="false" data-backdrop="static"><i class="fa fa-plus"></i> Nuevo Bulto</button> |
Si usamos una función onclick no se enfocará el input porque todavía no es visible, para ejecutar el focus después de cargar el modal usamos el evento de bootstrap shown.bs.modal:
|
1 2 3 |
$('#modalBultos').on('shown.bs.modal', function () { $('#codigoEscaneado').focus(); }); |
Agregamos el modal
|
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 |
<!-- Modal --> <div class="modal fade" id="modalArticulos" tabindex="-1" role="dialog" aria-labelledby="modalArticulosLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="modalArticulosLabel">Ingreso de Artículos</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Escanear Código de Barras</label> <div class="input-group"> <div class="input-group-addon"><i class="fa fa-barcode"></i></div> <input type="text" class="form-control producto" name="codigoEscaneado" id="codigoEscaneado" autocomplete="off" onchange="buscarArticulo();"> </div> </div> <div> <table class="table table-striped" id="tablaAgregarArticulos"> <thead> <tr> <th>Producto</th> <th>Cantidad</th> <th></th> </tr> </thead> <tbody> </tbody> </table> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal" id="btnCerrarModal">Cerrar</button> <button type="button" class="btn btn-primary" id="btnAgregar" onclick="agregar();">Agregar</button> </div> </div> </div> </div> |
Y así aparecerá al abrir el modal:
El focus se usó automático para que el usuario no tuviera que seleccionar manualmente el input cada vez que quería ingresar un artículo.
El código de barras a escanear (también generado por el sistema) es el siguiente:
Al usar el escáner el input recibe el código y a su vez produce un «Enter», el cual podemos capturar para realizar una función o hacer un submit, en este caso usé el evento onchange y se asoció una función Js llamada buscarArticulo()
El código es ingresado por el escáner y luego el onchange se ejecuta con el enter automático al escanear.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
function buscarArticulo(){ var form = $('#formulario-busqueda'); $.ajax({ url: "<?php echo base_url(); ?>articulos/escaner_articulo", type:'POST', data: form.serializeArray(), dataType: 'json', success: function(data) { if (data.length === 0) { msjError('No Encontrado'); $('#codigoEscaneado').val(''); $('#codigoEscaneado').focus(); } else if (data.codigo) { msj('Artículo encontrado'); agregarArticulo(data); } }, error: function(data) { msjError('Se ha producido un error al intentar buscar el Artículo.'); } }); } |
La función onchange se encarga de obtener la información del formulario, se envía al controlador y obtiene la información de dicho artículo. Se devuelve la información del artículo en formato Json y luego se agrega al <body> de la tabla como una línea <tr> generada por javascript.
|
1 2 3 4 5 6 7 8 |
public function escaner_articulo(){ $this->load->model('articulo_model'); $codigo = $_POST['codigoEscaneado']; $data = $this->articulo_model->obtener_articulo_codigo($codigo); echo json_encode($data); } |
|
1 2 3 4 5 6 |
function obtener_articulo_codigo($codigo){ $this->db->where('codigo', $codigo); $query = $this->db->get('articulos'); return $query->row_array(); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
function agregarArticulo(articulo){ if ($('#detIdModal' + articulo.id).length) { // si ya esta agregado advierto msjError('El artículo ya se encuentra incluido'); } else { // si es nuevo agrego var tr = ''; var btnEliminar = '<button type="button" class="btn btn-xs btn-danger" onclick="$(this).parent().parent().remove();"><i class="glyphicon glyphicon-minus"></i></button>'; var inputId = '<input type="hidden" name="detIdModal[' + articulo.id + ']" value="' + articulo.id + '" />'; var inputCantidad = '<input type="hidden" name="detCantidadModal[' + articulo.id + ']" value="' + articulo.cantidad + '" />'; tr += '<tr>'; tr += '<td>' + articulo.descripcion + '</td>'; tr += '<td>' + articulo.cantidad + '</td>'; tr += '<td>' + btnEliminar + inputId + inputCantidad + '</td>'; tr += '</tr>'; $('#tablaAgregarArticulos tbody').append(tr); } $('#codigoEscaneado').val(''); $('#codigoEscaneado').focus(); } |
Un simple controlador y modelo para los datos y la función javascript agregarArticulo() se encarga de tomar esos datos, crear el html e insertarlo.
Adicional agregué un mensaje para advertir del proceso al usuario:
Es un simple uso del escáner y se puede elaborar mucho más. Si lo que buscabas era un lector de imágenes que contienen códigos de barras, puede servirte este enlace: https://github.com/dynamsoft-dbr/php-barcode-reader
Buen dia estimado grégor, usted seria tan amable de compartirme este proyecto, ya qu em einteresa automatizar unas capturas, lo que realmente me interesa es el ingreso se un articulo o articulos mediante el scanner.
si fuera posible de enviarmelo por correo se lo agradeceria mucho
Saludos.
Hola Javier, yo realizo proyectos completos personalizados para cada cliente y el proyecto es del cliente, el cual es privado y por el rubro que manejan no le funcionaría a otra persona. La sección que compartí es un simple ejemplo de uso de escaner.
Saludos
Te felicito porque en afan de ayudar no violaste la confidencialidad de tu cliente ya que cuando a uno le pagan un proyecto el proyecto es propiedad del cliente.
Así es. Como es un acuerdo previo se debe respetar. Si otro cliente necesita algo similar lo creo totalmente desde cero y personalizado.
Saludos.
Buen día Gregor, estoy buscando información acerca del tema de los lectores de código de barras y tu articulo me fue muy util.
Solo tengo una duda, que modelos de lectores de código pueden vincularse con un desarrollo en php, crees que me puedas apoyar con mencionarme algunos que tengan ésta compatibilidad.
Saludos!!!
Hola Mario, con las compañías que he trabajado ya tenían sus propios lectores, entonces no recomendaba sino que utilizábamos cualquiera que tuvieran.
Nunca tuvimos problemas con ninguno. Lo importante es el tipo de código de barras que puede leer el lector y que el sistema también maneje el mismo. Por ejemplo, existen varios tipos de códigos:
GTIN 13 (EAN 13)
GTIN 12 (UPC-A)
GTIN 8 (EAN-8)
GTIN-14 (DUN-14, ITF-14)
GS1 DATABAR
GS1-128 (UCC/EAN-128 ó EAN-128)
GS1 Datamatrix
GS1 QR-Code
Los cuales más utilizamos es EAN-8, EAN-128 y QR. Los lectores actuales ya manejan casi todos los estándares e incluso usamos apps de android con lectores de código, así que no deberías tener problema con ninguno.
Espero te sirva, saludos.
Amigo deseo el proyecto
Hola Diego, el proyecto es un inmenso sistema para cierta industria, créeme, no te serviría. Es como descargar archivos de 12gb para solo usar uno de 130kb. Por eso comparto el ejemplo, para que lo adapten a cualquier sistema. Saludos.
porque solo me agrega el producto a la tabla cuando hago clic?
El onchange debería capturar el cambio automáticamente, puede ser algún problema del navegador o algún otro script en tú página que haga conflicto. De ser el caso de que no es compatible con el navegador utilizado, deberías buscar alguna alternativa a ejecutar la búsqueda mediante onchange. Saludos.
Hola Gregor tu codigo tambian funciona con la camara de un telefono movil para realizar la captura del codigo de barras
Hola, este es un ejemplo utilizando un lector independiente que al ser escaneado ingresa el código en el input. Ahora para un móvil he utilizado es una app de android propia pero con una app de lectura de terceros (esto es mayor complejidad). Luego me enteré de que existen plugins en javascript para hacer un escaneo en vivo. Por ejemplo esta página: https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html y aquí hay una breve explicación en Stackoverflow https://stackoverflow.com/questions/57622085/how-to-initiate-barcode-scanner-from-html-button
Saludos.
Buenas tardes Grégor, es la primera vez que voy a hacer uso del lector de código de barras, mi pregunta es si hay que agregar una configuración(libreria) para el lector? como es que tu campo input detecta que se hizo cacho el código de barras?. Te agradezco la aportación. Saludos
Hola, no se necesita ninguna, los lectores se conectan a la pc via usb y funcionan como un teclado. Cuando posicionas el cursor en el input y luego al escanear un código de barras, el lector escribe el código como un «copiar y pegar». Puede que haya otros distintos o que haga el «enter» automáticamente.
Saludos
Hola Gregor mi pregunta para mi proyecto es: Yo tengo un sistema en php y mysql hacia las lecturas de los codigos de barras con lector conectado a un pc o dispositivo movil. mi pregunta es con este codigo podria hacer la lectura desde el telefono sin conectar a otros dispositivos.
Hola Julian. El código html/js/php lo que hace es enviar la consulta a bd. La parte de leer códigos lo hace el lector de códigos de barras y siempre es necesario. Ahora con un tlf inteligente se puede usar el escaner incluido del tlf pero esto solo te indicaría el código que representa las barras ejemplo «12345», no tendría ninguna acción ni comunicaría con la pagina web.
Otras opciones:
Si aparte se creara un código QR, se podría colocar una url completa, digamos que un código QR de un item del inventario, se traduciría a «mipagina.com/producto?id=12345» y podría mostrar esa pagina para consultar el item. Pero es muy limitado, no tendría otra acción y el sistema tendría que estar abierto al publico.
Otra similar, hay lectores de códigos de barra en Android, que te permite configurar una url y al escanear te reenvían hacia esa pagina + el código leído. Entonces si configuras en esa app con una url «mipagina.com/producto?id=» y al leer el código de barras se completa el id «12345» y te redirige hacia la pagina de consulta de producto.
Hola Gregor, en que momento escribes la descripcion del artículo cuando es nuevo?, lo obtienes del codigo de barras?, o bien tienes un catálogo de artículos previo?. Saludos!
Hola. Es un catalogo de artículos previo ya guardado en base de datos. EL código de barras solo contiene el código del articulo «FOX10410» y de allí lo tomo para consultar todos los datos de ese artículo en bd. Si no existe no lo va a encontrar y esta sección es para contar ya existentes, no registra nuevos.
No valida si existe el articulo , no hace la comparacion con el input ? Me puedes decir Porque
Hola, la función «buscarArticulo()» se encarga de enviar el formulario completo al controlador «articulos/escaner_articulo» y luego el controlador llama al modelo «obtener_articulo_codigo» que devuelve un array con los datos del articulo. En codeigniter usar «row_array» con un código no existente devuelve NULL. La validación se realiza después de la consulta en «buscarArticulo()»
if (data.length === 0) { msjError(‘No Encontrado’); }
Que indica no encontrado si el articulo no existe en base de datos y no devuelve un array. No se cual sea tu caso pero puedes revisar paso a paso y verificar si la consulta se realiza o no, o si devuelve un array vacío que saltaría la validación.
Saludos.
Buenos dias Grégor, tengo la siguiente consulta luego de leer lo que publicaste, desde ya muy didactico y facil de aplicar. Se puede determinar que sea por el lector de codigo de barra y evitar que el operador digite caracter por caracter?
Desde ya muchas gracias!
Saludos.
Hector Sanchez
Hello, un poco tarde pero igual respondo. Para evitar que lo escriban simplemente se puede bloquear con alguna función en javascript con el uso de eventos onkeypress o también onkeyup retornando false, existen varios ejemplos online. Nota: si colocas el campo readonly, no servirá para escanear.
Saludos.
Al momento de desarrollar el sistema es necesario crear una función especial para que mi input detecte el lector de código de barras o es un input simple que solo le pasa los datos recabados por el lector?
Saludos!
Hola, es automático, no necesitas crear nada en especial. El lector al leer un código de barras, introduce el texto en el input como si fuese un teclado. Lo único es que el input debe estar enfocado para que escriba allí. Algunos lectores automáticamente envían un «Enter», entonces se puede aprovechar para que haga la búsqueda automática.
Saludos.
Hola Grégor, gracias por tu aporte, una pregunta, cómo es posible ocultar el input para que el usuario no pueda verlo, he intentando con display: none y Hidden y nada, solo me falta implementar eso, gracias!