Usar lector de códigos de barras con PHP


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.

<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:

$('#modalBultos').on('shown.bs.modal', function () {
    $('#codigoEscaneado').focus();
});

Agregamos el modal

<!-- 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">&times;</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.

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.

public function escaner_articulo(){
	$this->load->model('articulo_model');
	
	$codigo = $_POST['codigoEscaneado'];
	
	$data = $this->articulo_model->obtener_articulo_codigo($codigo);
	echo json_encode($data);
}
function obtener_articulo_codigo($codigo){
	$this->db->where('codigo', $codigo);
	$query = $this->db->get('articulos');
	
	return $query->row_array();
}
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

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *