How To Build a Custom Barcode Application With Pic2Shop Pro & WordPress

barcode scanner logo   How To Build a Custom Barcode Application With Pic2Shop Pro & WordpressIf you’ve got a company database full of product data, connecting that data to a barcode system can be incredibly useful. Perhaps your warehouse workers need a quick way of looking up the product location, or maybe they need to quickly find out the purchase price for a full box and not by unit.

Whatever the situation, integrating barcode reading facilities can be an expensive and arduous task, but it doesn’t have to be. Today I’m going to show you how to use a $10 app and a custom database to pull product data onto your mobile device without expensive equipment.

This tutorial assumes a basic knowledge of PHP. I’ll also be bootstrapping the project with WordPress simply because I’ll then have a large sample set of data to work with from one of my own sites. In a real world scenario, connecting PHP to a custom database isn’t difficult.

You’ll also need a copy of Pic2Shop PRO Barcode scanner. This is available for iOS and Android for around $10. This app serves no other function that to scan something, and allow us to configure a URL to automatically receive and process that data.

Note: iCody is a similarly popular app and slightly cheaper, but only available on iOS. In the interests of making this as cross-compatible as possible, I chose pic2shop. The WordPress side would work just the same, but the URL format would need to be adjusted for other barcode apps.

Getting Started: The Data

The system I’ll be setting up today will scan the barcode from a physical boardgame, and fetch the relevant review from my iPad board games review site. The first step then is to simply scan the barcode numbers from a variety of board games and add the numbers as custom fields to the relevant reviews. In a real world scenario, you’d probably already have this data in your database from a Point of Sale system.

I’ll be ignoring the format and simply using the content of the barcode. In this case 0655132002387 for the game San Juan. As you can see, the app is pretty basic and unconfigured at this point, so scanning the code simply outputs the data on the screen.

pic2shop get number   How To Build a Custom Barcode Application With Pic2Shop Pro & Wordpress

Copy this into a custom field to populate our database:

wp custom field   How To Build a Custom Barcode Application With Pic2Shop Pro & Wordpress

Processing: The Web App

To process the data, create a new PHP page in the root directory and call it barcode.php. Let’s just test for now with this:

<?php
require_once(‘wp-blog-header.php’); // ensures we can use WordPress functions and db access
print_r($_REQUEST);
?>

In the scanner app, configure the Lookup URL as: http://YOUR_SITE_URL.COM/barcode.php?code=CODE

You needn’t enable GPS locations. The CODE bit will be replaced with the actual code read by the barcode reader app. The output should be something like this:

barcode php test   How To Build a Custom Barcode Application With Pic2Shop Pro & Wordpress

Great, that should be working. The next step is to fetch a post associated with that meta ID, then fetch the user to it. Use the following code, which assumes the custom field you used was called “barcode”.

<?php
require_once('wp-blog-header.php'); // ensures we can use WordPress functions and db access
//print_r($_REQUEST);
query_posts( array(
 'post_type' => 'post',
 'meta_key'=> 'barcode',
 'meta_value' => $_REQUEST['code'],
 'meta_compare' => '='
 ) ); // query for posts with specific meta value 
 if (have_posts()) :
 while (have_posts()) : the_post();
 $url = get_permalink() ;
 echo $_REQUEST['code'];
 echo $url;
 echo get_post_meta(get_the_ID(),'barcode',true);//wp_redirect($url ); exit;
 endwhile;
 else :
 echo 'No entry for game '.$_REQUEST["code"].' exists yet';
endif;

?>

That really couldn’t have been simpler. Here’s a quick demo of the app working. You can download the completed PHP file from here which includes the adjustments made in further work below.

Further Work: Automatic configuration

Typing this URL onto hundreds of devices for your workers is going to be rather laborious, so we can use the automatic configuration built into the app by simply getting them to visit a specific URL. The URL in my case is:

p2spro://configure?lookup=http%3A//ipadboardgames.org/barcode.php?code=CODE

Adjust as neccessary, but note the slight change from the : character to %3A - the rest is simple to understand. In my case, I’ve made this link available to anyone who visits the barcode.php without specifying an actual barcode. They would simply visit the link in their browser, click the link, and it would launch the barcode app on their device if it’s been installed.

auto configuration   How To Build a Custom Barcode Application With Pic2Shop Pro & Wordpress

I hope you agree this was really quite easy. You don’t need expesnive portable scanners if you already have a mobile device with a camera, and integrating it into an existing database system is easy too with a little PHP.

Do you think you could make use of this in your small business? Let us know in the comments.

Check out more about:

The comments were closed because the article is more than 180 days old.

If you have any questions related to what's mentioned in the article or need help with any computer issue, ask it on MakeUseOf Answers—We and our community will be more than happy to help.

3 Comments -

5 votes

illegal3alien

You can use the custom search function in Barcode Scanner (https://play.google.com/store/apps/details?id=com.google.zxing.client.android) for free, but you’ll have to click custom search every time. If you’ll only be using it occasionally, or want to mess around, this is a good free option.

0 votes

James Bruce

Great find, have some upvotes!

0 votes

Benoit

Thank you for the nice writeup!

We have just added Javascript callbacks to pic2shop pro. That is an oft requested feature that lets the scanner insert the barcode content directly into a field. It can also be used for anything a Javascript function can do.

Here is a simple demo that shows how to do it: http://demo.pic2shop.com/p2spro.php