What is New in Tech World: How To Create QR Code Generator & Scanner In Oracle APEX

Quick Response (QR) Codes are a popular type of two-dimensional barcode. They are also known as hard links or physical world hyperlinks. QR Codes store up to 4,296 alphanumeric characters of arbitrary text. This text can be anything, for example, a URL, contact information, a telephone number, or even a poem! QR codes can be read by an optical device with the appropriate software. Such devices range from dedicated QR code readers to mobile phones. In this video, you will learn the use of QR codes in your Oracle APEX applications.

Generating QR Code Manually

In the following initial steps, the QR Code will be generated after clicking a button.

1. Download SourceCode, Open the QRcode folder, and import the QRCode.sql plug-in into your application.

2. Create a blank page and add a region with the following attributes. The region will generate the manual QR code.

Property	Value
Title	Manual QR Code
Type	Static Content
Custom Attribute	style="background-color: rgba(255,255,255,0.05);"

3. Add a Text Field item to the page using the following attributes. The text you enter in this item will be transformed into a QR code.

Property	Value
Name	P14_INPUT_TEXT (my page number is 14)
Type	Text Field
Label	Enter Text:
Region	Manual QR Code
Default Type	Static
Static Value	Submit Text

4. Add one more page item for the plug-in using the following attributes. The plug-in will use the P14_INPUT_TEXT item’s value as its source.

Property	Value
Name	P14_PLUGIN
Type	QR Code Item [Plug-In]
Label	No label
Region	Manual QR Code
Source Type	Item
Source Item	P14_INPUT_TEXT
Used	Always, replacing any existing value in session state

5. Add a button to the region as follows. The QR code will be generated after clicking this button.

Property	Value
Button Name	SUBMIT
Label	Submit Text
Region	Manual QR Code
Button Position	Copy
Hot	Yes
Action	Submit Page

Save and run the page, which will appear with a default value (Submit Text) in the sole text field page item along with the generated QR code. Type some other text in the text field item and hit the Submit Text button. The QR code will be refreshed for the newly entered text.

Generating QR Code Dynamically

Execute the following steps to use the same QR code plug-in to generate the code dynamically. In this tutorial, you will create a dynamic action to generate the code. Here’re the steps:

1. Add another region to the same page with the following attributes:

Property	Value
Title	Dynamic QR Code
Type	Static Content
Custom Attribute	style="background-color: rgba(255,255,255,0.05);"

2. Add a text field item to the region, as follows:

Property	Value
Name	P14_DYNAMIC_TEXT
Type	Text Field
Label	Enter Text:
Region	Dynamic QR Code

3. Add the following item to hold the plug-in:

Property	Value
Name	P14_DYNAMIC_PLUGIN
Type	QR Code Item [Plug-In]
Label	No label
Color	#000077
Region	Dynamic QR Code

4. Finally, create the following dynamic action to generate the QR code dynamically.

Property	Value
Name	Generate QR Code
Event	Key Release
Selection Type	Item(s)
Item(s)	P14_DYNAMIC_TEXT
Action	Execute JavaScript Code
Code	renderQR_P14_DYNAMIC_PLUGIN($x("P14_DYNAMIC_TEXT").value);

Save and run the page. As you start to enter some value in the text field item, the QR code gets updated by the dynamic action.

Generating a Dynamic QR Code List

Let's move a step forward to address a real-world scenario. In this step, you will create a dynamic list of QR codes (as shown in Figure-2) for all the products in the DEMO_PRODUCT_INFO table in Object Browser. The QR codes will store product ids.

Here’re the steps to follow:

1. Create a new interactive report page using the following SQL query:

SELECT p.product_id,

p.product_name,

p.product_description,

p.category,

decode(p.product_avail, 'Y','Yes','N','No') product_avail,

p.list_price,

p.list_price as qr_code,

(select sum(quantity) from demo_order_items where product_id = p.product_id) units,

(select sum(quantity * p.list_price) from demo_order_items where product_id = p.product_id) sales,

(select count(o.customer_id) from demo_orders o, demo_order_items t

where o.order_id = t.order_id and t.product_id = p.product_id group by p.product_id) customers,

(select max(o.order_timestamp) od from demo_orders o, demo_order_items i where o.order_id =

i.order_id and i.product_id = p.product_id) last_date_sold, p.product_id img,

apex_util.prepare_url(p_url=>'f?p='||:app_id||':6:'||:app_session||

'::::P6_PRODUCT_ID:'||p.product_id) icon_link,

decode(nvl(dbms_lob.getlength(p.product_image),0),0,null,

'<img alt=" '||p.product_name||' " title=" '||p.product_name||' " style="border: 4px solid #CCC;

-moz-border-radius: 4px; -webkit-border-radius: 4px;" '||

'src=" '||apex_util.get_blob_file_src('P6_PRODUCT_IMAGE',p.product_id)||' " height="75"

width="75" />') detail_img,

decode(nvl(dbms_lob.getlength(p.product_image),0),0,null,

apex_util.get_blob_file_src('P6_PRODUCT_IMAGE',p.product_id)) detail_img_no_style

FROM demo_product_info p

2. In Page Designer, expand the Columns node and click on the PRODUCT_IMAGE column. Set the following attributes for this column. The Display Image type enables the column to show images. The PRODUCT_IMAGE BLOB column is the column that contains the images you want to show on the page.

Property	Value
Type	Display Image
Table Name	DEMO_PRODUCT_INFO
BLOB Column	PRODUCT_IMAGE
Primary Key Column 1	PRODUCT_ID

3. Click the QR_CODE column, and enter the following code in its HTML Expression property:

<div id="#PRODUCT_ID#" class="qrcode" qrcodedata="#PRODUCT_ID#"></div>

4. Create a dynamic action using the following properties and values.

Property	Value
Name	Generate QR Code List
Event	Before Refresh
Selection Type	Region
Region	QR Code List
Action	Execute JavaScript Code
Code	$('.qrcode').each(function(){ var qrcode = new QRCode ($(this).attr('id'),{ text: $(this).attr('qrcodedata'), width: 80, height: 80, colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.H }); });
Fire on Initialization	Yes

5. Go to Shared Components, and upload qrcode.min.js file using the Static Application Files option from the SourceCode\QRcode folder. It is a JavaScript library for generating QRCode. It allows you to easily add QRCode to your web pages. It is standalone and doesn’t rely on external services that go on and off, or add latency while loading.

6. Finally, add a reference to the JS file. Click the root node of your page. In the Properties pane, scroll down to the JavaScript section, and type #APP_IMAGES#qrcode.min.js in the File URLs property.

Save and run the page, which should resemble Figure-2. The QR codes are ready to be used on products. You can scan these codes with the help of optical devices or smartphones to retrieve details from the database, and this is what you are going to do in the next step.

Scanning QR Code

After generating QR codes in your application and using them on your products, you will definitely need a solution that enables you to scan and retrieve information from these codes. The instructions provided in this section will allow you to integrate a QR Code scanner plug-in into your application. With the help of this plug-in, you can scan QR codes via an optical device, smartphone, or laptop to get details held in these codes, as shown in Figure-3.

Execute the following steps to complete the task.

1. Go to Shared Components and import QRCodeScanner.sql plug-in from \SourceCode\QRcode folder.

2. Create a Blank page, and name it QR Code Scanner.

3. Add a region to the page to hold the plug-in, and set the following attributes for this region:

Property	Value
Title	QR Code Scanner
Type	APEX QR Code Scanner [Plug-In]
Set Mode (under Attributes)	Set APEX Item
Item that is set	P19_QRCODE

4. Add a Page Item, and set the following properties. The item will display the product id extracted from the QR Code.

Property	Value
Name	P19_QRCODE
Type	Display Only
Label	QR Code
Template	Optional - Floating

5. Add a second-page item to display the product name.

Property	Value
Name	P19_PRODUCT_NAME
Type	Display Only
Label	Product
Template	Optional - Floating

6. Add one more page item to display the product price.

Property	Value
Name	P19_LIST_PRICE
Type	Display Only
Label	Price
Template	Optional - Floating

7. Create a dynamic action using the following properties and values. The dynamic action will fetch the product name and price based on the scanned QR Code, which carries the ids of the products.

Property	Value
Name	Generate Product Info
Event	Change
Selection Type	Item(s)
Item(s)	P19_QRCODE
Action	Set Value
Set Type	SQL Statement
SQL Statement	SELECT product_name, list_price FROM demo_product_info WHERE product_id = :P19_QRCODE
Items to Submit	P19_QRCODE
Selection Type (under Affected Elements)	Item(s)
Item(s)	P19_PRODUCT_NAME, P19_LIST_PRICE

I ran this scanner page on my Android smartphone, and the QR Code List page (created in the previous section) on my PC to scan the QR codes from the list. As you bring your smartphone near to a QR code in the list, the code is scanned, and the relevant product id, name, and price are shown in relevant page items.