Inventory Management System with Barcode Scanner in PHP, a Definitive Guide

By doitintheroad used under Creative Common

Introduction

We are going to add another cool feature to the popular Inventory Management System tutorial. The last missing piece, and one that many have asked for, is the integration of a barcode scanner.

In this last installment of the Inventory Management tutorial, you will learn how to track outbound and incoming warehouse stock units using a barcode scanner.

How the Barcode Scanner (Really) Works

There is nothing mystical about a scanner. Barcode scanners, wired or wireless, function like a keyboard, but only produce input for a single field.

Before attempting a scan, the correct input element — such as INPUT TEXT FIELD or TEXT AREA — must be in focus. Then you can use the scanner/reader to read the barcode that will populate the HTML input element that’s currently in focus. In the following, the input named “productId” will receive the scanner’s input.

<form action=“add-purchase.php" method="post">
    <input name=“productId" onmouseover="this.focus();" type="text">
</form>

By default, most bar code readers will append an extra special character string called CRLF — equivalent to pressing the ENTER key on the keyboard.

Types of Barcodes

There are many types of barcodes. Most of barcode scanners support the following common barcodes: CODE39, CODE128, Interleaved25, EAN8, EAN13, PDF417 and QRCODE. In our tutorial, we will use Code 128. It can store any character of the ASCII 128 character set and hence is the most suitable barcode symbology for use in the supply chain.

Types of different barcode standards

The video below explains how the barcode works in depth.

Decoding barcodes video

Pick a Barcode Scanner

While I didn’t get a chance to test all scanners available on the market, I have verified that this USB barcode scanner from TaoTronics works quite well. The scanner is inexpensive ($20), plug and play and there’s no driver to install, at least not on the Mac.

PHP Barcode Library

We will use a free, but excellent, PHP-Barcode-Generator. It supports output as simple HTML and CSS rather than as images which would require an additional image library such as GD or Imagik.

Using Composer

Below is a copy of our “composer.json” which could vary slightly from what you have. Notice the autoload value that register our phpGrid and phpChart libraries in the autoloader. The autoloader ensures that any PHP external libraries and components can easily be referenced anywhere in the PHP code without using the traditional “require” or “php include” function.

composer.json

{
    "name": "phpgrid/inventory-manger",
    "description": "Inventory management system built on top of phpGrid, phpChart and OSS",
    "require": {
        "picqer/php-barcode-generator": "^0.2.2"
    },
    "autoload": {
        "files": ["phpGrid/conf.php", "phpChart/conf.php"]
    }
}

The autoload settings should reference to the locations of phpGrid and phpChart. By now, you should already have phpGrid and phpChart installed from the previous inventory management tutorials and have configured the “conf.php” file in the phpGrid folder. For complete instructions on how to set values in conf.php, check out phpGrid configuration online documentation.

Important:
Don’t forget to run “composer dump-autoload” or “composer update” for the changes to take effect!

composer dump-autoload

-OR-

composer update

Your folder structure should be similar to this:

Now you are all set for the next step. Coding.

Let’s Start Coding!

Photo by Fabian Grohs on Unsplash

First, we will need to generate some barcodes from the current inventory. We want to print some barcodes like this: a series of labels with a barcode, part number and description.

We want to print barcode in grid format

1. Generate & Print Barcodes from the Current Inventory

Let’s create a new menu item in ‘inc/menu.php’ called ‘Barcodes’. This page will display a list of barcodes for each inventory item that we wish to print out for our barcode scanner later.

Luckily, there is a code snippet that can be used for generating an array to handle this function at https://phpgrid.com/example/complex-query/. It uses the phpGrid database abstract class C_Database that works with ANY database type including MySQL, MS SQL and DB2.

$db = new C_DataBase(PHPGRID_DB_HOSTNAME, PHPGRID_DB_USERNAME, PHPGRID_DB_PASSWORD, PHPGRID_DB_NAME, PHPGRID_DB_TYPE,PHPGRID_DB_CHARSET);
$results = $db->db_query($sql);
$data1 = array();
$count = 0;
while($row = $db->fetch_array_assoc($results)) {
 $data_row = array();
    for($i = 0; $i < $db->num_fields($results); $i++) {
        $col_name = $db->field_name($results, $i);
        $data1[$count][$col_name] = $row[$col_name];
    }
    $count++;
}

We will need to add a few things. First, let’s create the barcode generator object.

$generator = new Picqer\Barcode\BarcodeGeneratorHTML();

Then, we generate and print each barcode. Be sure to specify TYPE_CODE_128 as the generator type.

Here, we use the auto-increment integer primary key to generate an eight-digit, unique barcode using str_pad by padding ‘0’ before the key; so 1 becomes 00000001 with 7 leading zeros, 124 is 00000124 with 5 leading zeros, and so on.

$code = str_pad($data1[$count][‘id’], 8, ‘0’, STR_PAD_LEFT);
echo $generator->getBarcode($code, $generator::TYPE_CODE_128, 2, 50);

We limit our barcode in the tutorial to 8 characters so we can have a uniform barcode format that’s always the same length, but you can certainly use more than 8 characters in your string. The General Specification, or GS1, the non-profit organization that governs barcode standards, limits 48 characters per symbol for GS1–128 (the formal application of Code 128 to the supply chain industry) specification.

Though it’s totally not required for this tutorial, you might want to check out the video below to learn more about GS1.

Lastly, there are some additional changes to the CSS that will ensure that the barcode layout appears in a nice, printable grid format. We’ve also included labels in the printout.

$label = $data1[$count]['ProductLabel’];
    
echo '<li><div>';
echo $generator->getBarcode($code, $generator::TYPE_CODE_128, 2,50);
echo "<div>$code</div>";
echo "<div>$label</div>";
echo '</div></li>';

The complete barcodes display for printing:

use phpGrid\C_DataBase;
$db = new C_DataBase(PHPGRID_DB_HOSTNAME, PHPGRID_DB_USERNAME, PHPGRID_DB_PASSWORD, PHPGRID_DB_NAME, PHPGRID_DB_TYPE,PHPGRID_DB_CHARSET);
$results = $db->db_query('SELECT * FROM products');
$data1 = array();
$count = 0;
$generator = new Picqer\Barcode\BarcodeGeneratorHTML();
echo '<ul class="barcode">';
while($row = $db->fetch_array_assoc($results)) {
    for($i = 0; $i < $db->num_fields($results); $i++) {
        $col_name = $db->field_name($results, $i);
        $data1[$count][$col_name] = $row[$col_name];
    }
    $code = str_pad($data1[$count]['id'], 8, '0', STR_PAD_LEFT);
    $label = $data1[$count]['ProductLabel'];
    echo '<li><div>';
    echo $generator->getBarcode($code, $generator::TYPE_CODE_128, 2, 50);
    echo "<div>$code</div>";
    echo "<div>$label</div>";
    echo '</div></li>';
    $count++;
}
echo '</ul>’;

2. Print the Barcodes

Before we proceed to print, set the ‘Print Background’ in print settings and go ahead and print them out. We will need them for the next step in our inventory management app.

Your printout should look something like this:

3. Adding New Purchases to our Inventory Management System

To add a new purchase to our inventory, we simply add to call to enable_edit() in incoming-orders.php as well as a button below the menu bar so that users can enter new purchases easily.

<button class="add-new-row”>Add New Purchase</button>

Add an event handler to display the new purchase form.

<script>
$(function(){    
    $(".add-new-row").on("click",function(){
        $("#add_purchases").click();
    });
});
</script>

The above should give us the add new purchase button.

Button for new in-coming purchase

For our scanner to successfully pick up the right product, we need to modify the Product autocomplete line to include the barcode string in the labels.

$dgPur->set_col_edittype('ProductId', 'autocomplete', "select id, CONCAT(LPAD(id, 8, '0'), ' | ', ProductLabel) from products”);

4. Testing with the Barcode Scanner

You will need a barcode scanner for testing. If you don’t have one, I use this $20 barcode reader. Make sure the barcode reader is connected and working. Now, click the Add New Purchase button. It should trigger the add form. Make sure the Product Dropdown field is in focus before scanning.

Now take out the barcodes we printed previously and scan any barcode. It should read the barcode and select the matching Product from the dropdown.

Demo (2x for the dramatic effect :)

Testing the barcode scanner.. it works!

Fill out the rest of the form with information such as the Number Received and choose a supplier. Finally submit the form.

Voilá!

You have successfully added a new purchase into your inventory system using a barcode reader.

5. Adding Orders

Before you pop the cork, there’s still one more thing left to do — add orders to our inventory system. This is identical to the Add Purchase portion of the tutorial except the database table changes from ‘products’ to ‘orders’.

That’s it. You are done!

Now you have a fully-functional inventory management system with reports and a barcode reader. Now, go and impress your boss with this new and shiny swag you have in your tool arsenal!

Thanks for reading. If you enjoyed this article, please hit that clap button 👏 to help others find it and check out other tutorials.

Run Demos

• Barcodes
• Current Inventory
• Incoming Purchases
• Outgoing orders
• Reports

PHP Libraries & Tools

• PHP-Barcode-Generator
• phpGrid
• phpChart
• USB barcode reader

Source code can be obtained here.