{"id":587,"date":"2018-08-16T20:50:14","date_gmt":"2018-08-17T01:20:14","guid":{"rendered":"http:\/\/gregorgonzalez.com.ve\/blog\/?p=587"},"modified":"2018-08-16T20:50:14","modified_gmt":"2018-08-17T01:20:14","slug":"usar-lector-de-codigos-de-barras-con-php","status":"publish","type":"post","link":"https:\/\/gregorgonzalez.com.ve\/blog\/usar-lector-de-codigos-de-barras-con-php\/","title":{"rendered":"Usar lector de c\u00f3digos de barras con PHP"},"content":{"rendered":"

Hace un tiempo estuve trabajando en varios sistemas de inventario y algo que los clientes siempre solicitan es la posibilidad de buscar art\u00edculos a partir del c\u00f3digo de barras, ya sea para una b\u00fasqueda, un conteo de inventario, etc.<\/p>\n

Cabe acotar que el c\u00f3digo lo establecieron ellos y el sistema genera los c\u00f3digos de barras a partir de all\u00ed, se genera en un PDF y ellos lo imprimen y pegan en cada art\u00edculo. Este post es para hablar sobre el lector de c\u00f3digos de barra, ya debes conocer sobre c\u00f3mo realizar un CRUD.<\/p>\n

En el proyecto se us\u00f3: PHP, MySql, Codeigniter, bootstrap 3, JQuery, Ajax, Json.<\/p>\n

Podemos utilizar cualquier lector\/esc\u00e1ner de c\u00f3digos de barras USB, solo con posicionarnos en el input y escanear un c\u00f3digo de barras, se traducir\u00e1 al valor y en este caso el c\u00f3digo del art\u00edculo. Usando javascript o jquery podemos manejar el proceso y agilizarlo.<\/p>\n

Primero necesitamos el HTML, en este caso realic\u00e9 todo en un modal para luego agregarlos en otro listado, por el momento solo explicar\u00e9 el proceso de esc\u00e1ner.<\/p>\n

Cre\u00e9 un bot\u00f3n de bootstrap asociado a un modal y se coloc\u00f3 al bot\u00f3n una funci\u00f3n para que hiciera focus en el input donde se ingresar\u00e1 el c\u00f3digo le\u00eddo por el esc\u00e1ner.<\/p>\n

<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><\/pre>\n
\"\"<\/p>\n
 <\/p>\n
Si usamos una funci\u00f3n onclick no se enfocar\u00e1 el input porque todav\u00eda no es visible, para ejecutar el focus despu\u00e9s de cargar el modal usamos el evento de bootstrap shown.bs.modal:<\/p>\n
$('#modalBultos').on('shown.bs.modal', function () {\r\n    $('#codigoEscaneado').focus();\r\n});\r\n<\/pre>\n
Agregamos el modal<\/p>\n
<!-- Modal -->\r\n<div class=\"modal fade\" id=\"modalArticulos\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"modalArticulosLabel\">\r\n\t<div class=\"modal-dialog\" role=\"document\">\r\n\t\t<div class=\"modal-content\">\r\n\t\t\t<div class=\"modal-header\">\r\n\t\t\t\t<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;<\/span><\/button>\r\n\t\t\t\t<h4 class=\"modal-title\" id=\"modalArticulosLabel\">Ingreso de Art\u00edculos<\/h4>\r\n\t\t\t<\/div>\r\n\t\t\t<div class=\"modal-body\">\r\n\t\t\t\t<div class=\"form-group\">\r\n\t\t\t\t\t<label>Escanear C\u00f3digo de Barras<\/label>\r\n\t\t\t\t\t<div class=\"input-group\">\r\n\t\t\t\t\t\t<div class=\"input-group-addon\"><i class=\"fa fa-barcode\"><\/i><\/div>\r\n\t\t\t\t\t\t<input type=\"text\" class=\"form-control producto\" name=\"codigoEscaneado\" id=\"codigoEscaneado\" autocomplete=\"off\" onchange=\"buscarArticulo();\">\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div>\r\n\t\t\t\t\t<table class=\"table table-striped\" id=\"tablaAgregarArticulos\">\r\n\t\t\t\t\t\t<thead>\t\r\n\t\t\t\t\t\t\t<tr>\r\n\t\t\t\t\t\t\t\t<th>Producto<\/th>\r\n\t\t\t\t\t\t\t\t<th>Cantidad<\/th>\r\n\t\t\t\t\t\t\t\t<th><\/th>\r\n\t\t\t\t\t\t\t<\/tr>\r\n\t\t\t\t\t\t<\/thead>\r\n\t\t\t\t\t\t<tbody>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t<\/tbody>\r\n\t\t\t\t\t<\/table>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t<div class=\"modal-footer\">\r\n\t\t\t\t<button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\" id=\"btnCerrarModal\">Cerrar<\/button>\r\n\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" id=\"btnAgregar\" onclick=\"agregar();\">Agregar<\/button>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/div>\r\n<\/div><\/pre>\n
Y as\u00ed aparecer\u00e1 al abrir el modal:<\/p>\n
\"\"<\/p>\n
 <\/p>\n
El focus se us\u00f3 autom\u00e1tico para que el usuario no tuviera que seleccionar manualmente el input cada vez que quer\u00eda ingresar un art\u00edculo.<\/p>\n
El c\u00f3digo de barras a escanear (tambi\u00e9n generado por el sistema) es el siguiente:<\/p>\n
\"\"<\/p>\n
 <\/p>\n
Al usar el esc\u00e1ner el input recibe el c\u00f3digo y a su vez produce un \u00abEnter\u00bb, el cual podemos capturar para realizar una funci\u00f3n o hacer un submit, en este caso us\u00e9 el evento onchange y se asoci\u00f3 una funci\u00f3n Js llamada buscarArticulo()<\/p>\n
\"\"<\/p>\n
 <\/p>\n
El c\u00f3digo es ingresado por el esc\u00e1ner y luego el onchange se ejecuta con el enter autom\u00e1tico al escanear.<\/p>\n
function buscarArticulo(){\t\r\n\tvar form = $('#formulario-busqueda');\r\n\t$.ajax({\r\n\t\turl: \"<?php echo base_url(); ?>articulos\/escaner_articulo\",\r\n\t\ttype:'POST',\r\n\t\tdata: form.serializeArray(),\r\n\t\tdataType: 'json',\r\n\t\tsuccess: function(data) {\r\n\t\t\tif (data.length === 0) {\r\n\t\t\t\tmsjError('No Encontrado');\r\n\t\t\t\t\r\n\t\t\t\t$('#codigoEscaneado').val('');\r\n\t\t\t\t$('#codigoEscaneado').focus();\r\n\t\t\t} else if (data.codigo) {\r\n\t\t\t\tmsj('Art\u00edculo encontrado');\r\n\t\t\t\t\r\n\t\t\t\tagregarArticulo(data);\r\n\t\t\t}\r\n\t\t},\r\n\t\terror: function(data) {\r\n\t\t\tmsjError('Se ha producido un error al intentar buscar el Art\u00edculo.');\r\n\t\t}\r\n\t});\r\n}<\/pre>\n
La funci\u00f3n onchange se encarga de obtener la informaci\u00f3n del formulario, se env\u00eda al controlador y obtiene la informaci\u00f3n de dicho art\u00edculo. Se devuelve la informaci\u00f3n del art\u00edculo en formato Json y luego se agrega al <body> de la tabla como una l\u00ednea <tr> generada por javascript.<\/p>\n
public function escaner_articulo(){\r\n\t$this->load->model('articulo_model');\r\n\t\r\n\t$codigo = $_POST['codigoEscaneado'];\r\n\t\r\n\t$data = $this->articulo_model->obtener_articulo_codigo($codigo);\r\n\techo json_encode($data);\r\n}<\/pre>\n
function obtener_articulo_codigo($codigo){\r\n\t$this->db->where('codigo', $codigo);\r\n\t$query = $this->db->get('articulos');\r\n\t\r\n\treturn $query->row_array();\r\n}<\/pre>\n
function agregarArticulo(articulo){\t\r\n\tif ($('#detIdModal' + articulo.id).length) { \/\/ si ya esta agregado advierto\r\n\t\tmsjError('El art\u00edculo ya se encuentra incluido');\r\n\t} else { \/\/ si es nuevo agrego\r\n\t\tvar tr = ''; \r\n\t\tvar btnEliminar = '<button type=\"button\" class=\"btn btn-xs btn-danger\" onclick=\"$(this).parent().parent().remove();\"><i class=\"glyphicon glyphicon-minus\"><\/i><\/button>';\r\n\t\tvar inputId = '<input type=\"hidden\" name=\"detIdModal[' + articulo.id + ']\" value=\"' + articulo.id + '\" \/>';\r\n\t\tvar inputCantidad = '<input type=\"hidden\" name=\"detCantidadModal[' + articulo.id + ']\" value=\"' + articulo.cantidad + '\" \/>';\r\n\t\t\r\n\t\ttr += '<tr>';\r\n\t\t\ttr += '<td>' + articulo.descripcion + '<\/td>';\r\n\t\t\ttr += '<td>' + articulo.cantidad + '<\/td>';\r\n\t\t\ttr += '<td>' + btnEliminar + inputId + inputCantidad + '<\/td>';\r\n\t\ttr += '<\/tr>';\r\n\t\t\r\n\t\t$('#tablaAgregarArticulos tbody').append(tr);\r\n\t}\r\n\t\r\n\t$('#codigoEscaneado').val('');\r\n\t$('#codigoEscaneado').focus();\r\n}<\/pre>\n
Un simple controlador y modelo para los datos y la funci\u00f3n javascript agregarArticulo() se encarga de tomar esos datos, crear el html e insertarlo.<\/p>\n
\"\"<\/p>\n
 <\/p>\n
Adicional agregu\u00e9 un mensaje para advertir del proceso al usuario:<\/p>\n
\"\"<\/p>\n
 <\/p>\n
Es un simple uso del esc\u00e1ner y se puede elaborar mucho m\u00e1s. Si lo que buscabas era un lector de im\u00e1genes que contienen c\u00f3digos de barras, puede servirte este enlace:\u00a0https:\/\/github.com\/dynamsoft-dbr\/php-barcode-reader<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Hace un tiempo estuve trabajando en varios sistemas de inventario y algo que los clientes siempre solicitan es la posibilidad de buscar art\u00edculos a partir del c\u00f3digo de barras, ya sea para una b\u00fasqueda, un conteo de inventario, etc. Cabe acotar que el c\u00f3digo lo establecieron ellos y el sistema genera los c\u00f3digos de barras […]<\/p>\n","protected":false},"author":1,"featured_media":590,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[182],"tags":[218,216,217,166],"_links":{"self":[{"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts\/587"}],"collection":[{"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/comments?post=587"}],"version-history":[{"count":0,"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts\/587\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/media\/590"}],"wp:attachment":[{"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/media?parent=587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/categories?post=587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/tags?post=587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}