Using JSON and RPG To Create Interactive Web 2.0 Applications

February 8, 2012 Alex Roytman

Note: The code accompanying this article is available for download here.

In my last article, Meet JSON, I introduced you to the concept of JavaScript Object Notation and how it’s changing the way Web applications are being built. Let’s explore JSON syntax a little further by building a really simple customer inquiry Web application. The code can be downloaded here.

This application consists of three simple parts:

CustInq.html–Simple HTML page to ask for customer number and present customer information
CUSTINQ.rpgle–RPG/CGI program to output customer information in JSON format
CustInq.js–JavaScript code to facilitate the communication between the RPG and the HTML

The example is meant to run on an IBM i Apache server configured for CGI. Because we’re learning about the basics, I have not introduced any CGI or JavaScript frameworks, other than a simple AJAX library, which is included in the accompanying ZIP file.

The HTML

The first piece is CustInq.html. This is the starting point for this application, which is launched directly in the browser as a static HTML page. The page uses an HTML table to present several rows of fields. The first row shows an input box to allow the user to enter a Customer Number. The rows that follow will show information for the customer number specified.

Each area in the HTML that is meant to be dynamic is marked with an ID. This allows JavaScript code to update the HTML as soon as it receives the JSON response from the RPG program.

Note that in more sophisticated applications, you may choose to use something other than a simple HTML page for representing the user interface. It can be a dynamic CGI page, for example. It can also be represented entirely in JSON coupled with a JavaScript framework that translates the JSON to dynamic HTML on the fly. This allows for the ultimate user experience, as HTML by itself is fairly primitive.

The RPG

RPG program CUSTINQ uses the QtmhGetEnv API (Get Environment Variable) to read in the customer number from a query string parameter, chains to the Customer Master file to get additional customer information, and finally outputs this customer information to standard out using the QtmhWrStout API (Write to Standard Out). To make this a self-contained RPG program example, I have used raw CGI APIs here, but nothing stops you from using your favorite CGI libraries or tools to accomplish the same results.

This is not your typical CGI program, however. Traditionally, CGI programs output HTML to the browser. But here the output is JSON, and it is sent in response to an AJAX request. This means the page will never reload–it is simply updated with new customer information as the user interacts with the page.

The JSON

So what does the JSON look like when the RPG program responds? In this case, the output is a simple list of name/value pairs, which are the basic building blocks of JavaScript Object Notation. The entire JSON expression is surrounded in curly braces, which indicate an object consisting of one or more name/value pairs. The pairs are comma separated, with a colon between each name and value, like this:

{ "company": "Profound Logic Software", "address": "562 Congress Park, 
Dayton, OH 45459", "contact": "Alex Roytman", "phone": 
" (937) 439-7925" }

The JavaScript

The JavaScript code is simple, yet key to this application as it facilitates the communication between the RPG and the HTML. There are two distinct parts to the JavaScript code.

The first part sends a request to the RPG using a simple function provided by the AJAX Library. I decided to send a request for updated customer information with each key stroke, using the “onkeyup” event in the HTML. After all, it is a Web 2.0 AJAX application, and we want the screen to be as responsive as possible. As soon as a valid customer is keyed in, the customer information will be populated–you don’t even have to press Enter!

The second part of the JavaScript receives the output from the RPG program and places it on the browser page. This is where the IDs in the HTML code come into play. Notice that no special JSON parsing is required. We refer to the data directly (i.e., response.company, response.address, etc.)

So, now you know the basics of building a Web 2.0 application with JSON and RPG. Have fun!

Alex Roytman is an innovator in the field of legacy application modernization, with a concentration on creating rich browser interfaces on the IBM i (iSeries/AS400) system. His company, Profound Logic Software, provides an innovative graphical user interface platform for ILE RPG developers on the IBM i. Profound Logic has facilitated the modernization of many millions of lines of legacy RPG code, and serviced thousands of customers, including prominent enterprises such as Nintendo, Disney, Nike, Pepsi, FedEx, Volvo, Sony, General Electric, and Warner Brothers. Most recently, Alex and his team have worked closely with IBM to define a new era for the IBM i platform–an era where a graphical user interface is native to the system. Through a joint offering (RPG OA from IBM and Profound UI from Profound Logic), developers can use sophisticated design tools to create native IBM i user interface objects to modernize and extend existing legacy code. This new approach has proven to be 10 to 20 times more effective compared to traditional application modernization.

Meet JSON

                     Post this story to del.icio.us
               Post this story to Digg
    Post this story to Slashdot

Tags:

CYBER-ATTACKS ON THE RISE. PROTECT WITH THE TRIPLE PLAY.

COVID-19 has not only caused a global pandemic, but has sparked a “cyber pandemic” as well.

“Cybersecurity experts predict that in 2021, there will be a cyber-attack incident every 11 seconds. This is nearly twice what it was in 2019 (every 19 seconds), and four times the rate five years ago (every 40 seconds in 2016). It is expected that cybercrime will cost the global economy $6.1 trillion annually, making it the third-largest economy in the world, right behind those of the United States and China.”1

Protecting an organization’s data is not a single-faceted approach, and companies need to do everything they can to both proactively prevent an attempted attack and reactively respond to a successful attack.

UCG Technologies’ VAULT400 subscription defends IBM i and Intel systems against cyber-attacks through comprehensive protection with the Triple Play Protection – Cloud Backup, DRaaS, & Enterprise Cybersecurity Training.

Cyber-attacks become more sophisticated every day. The dramatic rise of the remote workforce has accelerated this trend as cyber criminals aggressively target company employees with online social engineering attacks. It is crucial that employees have proper training on what NOT to click on. Cyber threats and social engineering are constantly evolving and UCG’s Enterprise Cybersecurity Training (powered by KnowBe4) is designed to educate employees on the current cutting-edge cyber-attacks and how to reduce and eliminate them.

A company is only as strong as its weakest link and prevention is just part of the story. Organizations need to have a quick response and actionable plan to implement should their data become compromised. This is the role of cloud backup and disaster-recovery-as-a-service (DRaaS).

Data is a company’s most valuable asset. UCG’s VAULT400 Cloud Backup provides 256-bit encrypted backups to two (2) remote locations for safe retrieval should a cyber-attack occur. This is a necessary component of any protection strategy. Whether a single click on a malicious link brings down the Windows environment or an infected SQL server feeds the IBM i, once the data is compromised, there is no going back unless you have your data readily available.

Recovery is not a trivial task, especially when you factor in the time sensitive nature of restoring from an active attack. This leads to the third play of the Triple Play Protection – DRaaS. Companies have myriad concerns once an attack is realized and a managed service disaster recovery allows employees to keep focus on running the business in a crisis state.

The combination of training employees with secure backup and disaster recovery offers companies the best chance at avoiding financial disruption in an age of stronger, more frequent cyber-attacks.

Reach out to UCG Technologies to discuss your company’s security needs and develop a data protection plan that fits you best.

ucgtechnologies.com/triple-play

800.211.8798 | info@ucgtechnologies.com