AJAX & JSON with CGI Programming in IBM-I

Hello Friends,

In our last article we have seen how to use CGIDEV2 to update an external HTML from RPGLE and using that we were able to see some good looking outputs in browser. Now in this article we are going to see a step further and learn some basics about the following,

1. What is AJAX
2. What is JSON
3. How to use JSON in AJAX in CGI programming

AJAX: Asynchronous JavaScript and XML

In simple term, this is a technique to update the web page content without reloading the page. Also  update includes, sending request to a server in background and based on response received we can update web page content.

E.g.: Let’s take our Order Inquiry example

We call ORDINQ CGI program from web which displays the order inquiry screen and gets input (say 123) and when we click submit, it redirect to ORDLISTCGI program with parameter as 123.

Here, after we click submit the page reloads with ORDLISTCGI program and HTML output is displayed with order details of order# 123.

Now, with AJAX we are going to send HTTP request and receive the response in the background and finally going to display the order list output in the same page without reloading it.

i.e.:

Step 1: Let's create new RPGLE CGI program

I have created a simple CGI program ORDHTML which returns order details in HTML format. It is pretty straight forward. If the order is found, then I am returning the values under <H3> tag.

If we want to test this, check the url http://as400/cgi/ordhtml?order=555 in browser

Now we want this piece of information to be updated in our main page (ORDINQAJAX) when we click submit button.

The good thing is our main page (ORDINQAJAX) is not necessarily being a CGI program. Instead it can be a plain HTML/JavaScript on your desktop.

ORDINQAJAX html:

What we have done here is, when we click Retrieve Order button, it calls loadDoc() function. This is forming the url by concatenating our input number value.

Once the url is formed, a XMLHttpRequest object is created using which we are requesting the response of ORDHTML url.

And finally the output available in responseText is replaced with the paragraph tag with id = “demo”

Input:

Output:

Take a note that the page is not reloaded and result is showed in the same ordinqajax.html

Here we have achieved AJAX and eliminated the dependency of input screen coming from AS400 CGI program. Since, our input screen is our HTML file, we can play with CSS and JavaScript to make it good looking and make is responsive.

But wait… what if we want to change the display format of order details? Currently it is always coming as <H3> header directly from ORDHTML page. Here is JSON comes into play…

JSON: JavaScript Object Notation

JSON is a Java Script object. I am not going in depth about it (because there is lot of tutorial in web). But I will show the basic by giving some examples.

Have a look at the below comparison of a sample XML and converted JSON format. 

JSON string enclosed by curly braces { and } and it is made up of “key” : “value” pair and colon ( “:”) to separate both. If any set is repeated, forms an array which enclosed by square brackets [ and ].

In our example, key “id” has value “901” & phones is an array and each phones contain keys “type” & “number”. Unlike XML, we don’t have any end tag here. So this really helps to reduce the file size.

We are quite familiar with XMLs in AS400/IBM-I but not much with JSON. But this JSON will become handy when dealing with web service or with CGI programming.

Since this is a JavaScript object, we can easily parse this and get the values inside JavaScript program.

E.g.: Once we assign this JSON string into a variable (say variable X) then we can start accessing the values using dot operator.

How to use JSON in AJAX:

The basic idea is we are going to return the json format of output to browser (instead of plain html content). When we receive this result in our HTML we can assign it to a variable in the JavaScript and can split the details and use it inside HTML.

E.g.: program ORDJSON which returns the response as JSON. Please note that I have changed my content-type as text/plain in this RPGLE.

As of now the code looks ugly. I shall come back about this later.

With this program in place,  we are already ready to see the json output in the browser.

http://as400/cgi/ordjson?order=555

Now let’s change our ORDINQAJAX html to parse this json and display output.

Modified ORDINQAJAX.html

We can see, the url is changed to point ordjson CGI program. The result in this.responseText is parsed into JSON using JSON.parse JavaScript method and stores the json object in obj variable.

Then it is just simple programming to use the values inside json. Here in this example, order number and date are just displayed and item details are added into rows of table (which has id=”detail”)

Let us see the input & output.

Input:

Output:

I hope you would have learnt something interesting and useful. Now a day, AS400 business logics (existing RPLGE) is being served as web services. If you have a deeper look, we have just created a RESTful web service based on order number input and it returns order detail as output JSON.

In the world of web programming, you can very well share this URL to your clients and they can use it accordingly to their needs.

What next?

Remember I have highlighted regarding ugly json formatting in RPGLE? You may think what will be the best possible way to create JSON in rpgle. Also if we need some complex JSON to be formed, concatenation is not at all a best way. Also how do we parse a JSON inside RPGLE?

For all these questions, I shall come back with answers in my next article. Until then...

Have Fun…!!! Happy Coding..!!!

CGI Programming with CGIDEV2

Hello Friends,

As you remember in our last article we have seen how to setup external HTML with CSS and also handling Forms with get and post methods. However the redirected output page was still plain HTML. So in this article we are going to see how we can dynamically change the HTML content from RPGLE and this can be achieved by CGIDEV2 tool.

What is CGIDEV2:

Easy400.net is the home of CGIDEV2, a tool created by IBMer Mel Rotham that allows RPG and COBOL programmers to develop Web apps using familiar techniques. When Giovanni Perotti left IBM in 2005, the website surrounding the CGIDEV2 software soon fell into disrepair. And when Perotti asked IBM to give up its copyright for CGIDEV2, it relented. But thanks to a very impressive letter-writing campaign (Word doc), IBM was convinced to donate CGIDEV2 into the open source realm, where Rotham can continue to enhance it in his retirement. Today, CGIDEV2 is one of a number of free tools available at Easy400.net.

How it works:

You can download CGIDEV2 tool (basically it is a SAVF) and upload & install the same into your IBM i. Clear steps are provided in the website. Once it is done, you can start accessing wide variety of in build procedures offered by CGIDEV2.

There are also handful amount of examples provided in the website for our reference and the source codes are also available in the SAVF.

CGIDEV2 in web development:

CGIDEV2 provides a very simple way of editing HTML from a RPG application.

• A “template” for the HTML is put in an IFS file.
• You divide your template into “sections” or “chunks” to be written at one time.
• You specify fill-in “variables” that will be populated from your RPG code

We can see that different chunk of codes are written into browser by wrtsection(‘sectionname’). Also notice before we write ‘Customer’ section, we are filling the values of variables inside customer section using updHtmlVar procedure.

Now, let’s change our ORDLIST program using CGIDEV2.

I have cloned our ORDLIST program as ORDLISTCGI and created HTML file and placed in IFS path.

Sections in my HTML:

Program to handle this section:

We can follow same steps until we get the order number (using REQUEST_URI or QUERY_STRING) for GET and (using standard input procedure) for POST methods.

Once the order number is parsed we can do our program logic and substitute HTML variables using CGIDEV2 procedure uptHTMLVar. 

WrtSection(‘*fini’) will write all the buffer data into browser. This should be your last statement after writing all the sections of your HTML.

Output of my first CGIDEV2 program:

I have changed my ORDINQ program’s form method to GET  & action as /CGI/ORDLISTCGI

Now if we inquiry the order from ORDINQ, it should go to ORDLISTCGI program

Input Order: 123

Input Order : 555

Input Order: 999

I hope you would got a basic idea how we can make our external HTML to become more dynamic with use of CGIDEV2 tool. I have explained only a basics of what it provides to us. You can very well explore a lot by your own since it is open source and can even customize to our needs.

What next?

So, it is been few weeks we are seeing more towards web development and HTML stuffs. Let us take a break here and I will be explaining how IBM i can be used under Web services (using SOAP & REST protocols) and also how do we use CGIDEV2 in our web services. until then...

Have Fun...!!! Happy Coding...!!!

AS400 CGI with external HTML CSS & Forms

Hello Friends,

In our previous few post, we have been looking into CGI concept from AS400. But all those example were raw HTML inside RPGLE. That really concerns because we really do not want in that fashion since we cannot really compile the program again and again if we want to change the content of our HTML.

So the best way is take it out the HTML content and put it outside the program. If we think outside RPGLE we have two things,

1. Physical File
2. An IFS file

Physical file:

The idea is to store the HTML in the physical file. We can use sequence number as key field to retrieve the data in sequence and write it into browser.

The RPGLE code will look like this.

Pros: By this way we do not want to compile the program again and again. We can simply add data into Physical File and see the result in the browser.

Cons: Maintaining the PF is difficult. We need to make sure the data retrieved in the proper sequence. And we cannot really make sure of it.

To resolve this we have the next solution, IFS path.

I assume most of you guys are familiar with IFS path and reading & writing the data into IFS.

IFS path:

We just need to have our HTML inside a IFS folder. Then with a simple RPGLE we can read the whole content and write it to browser.

RPLGE code will look like this.

Output 1 from IFS path:

Change the IFS HTML content:

Output 2:

Pros: Yes, we are having our HTML outside the code, so we can get rid of dependency of compiling the RPGLE. And importantly we can change our HTML as like we want. Just add any HTML code inside the IFS file in a readable format and this will be displayed in your browser.

Cons: I have one but I will be explaining at the end of this article.

Now, let’s jump into something interesting.

Hope you would remember our last post about listing order details in the form of HTML table. But it was done by getting input from browser URL and parsing it inside RPGLE and display the corresponding data. Now, how to get the same done from a HTML Form?

The idea is to create HTML form to get Order number. And when we hit submit we should be able to redirect to our ORDLIST program and catch this inputted order number and show the result(order detail of this order) in HTML browser.

Step 1: Creating HTML form

With our IFS html concept, it is pretty straight forward. You are just going to create HTML with CSS and place the stylish front end in IFS path. (Learn about CSS here) https://www.w3schools.com/css/

E.g.:

Step 2: Redirect to Order List program

We can redirect to other HTML page using action keyword in form tag. But there are two methods, either “get” or “post”.

<form method="get" action="/cgi/ordlist">

(or)

<form method="post" action="/cgi/ordlist">

Let us see how our ordlist program behaves for each method.

1. With "get" Action

Since my input tag field name is "order"

i.e.: <input type="number" name="order" min="0" max="999999999">

We are seeing re-directed URL as /cgi/ordlist?order=123

But it seems our OrdList program is not recognizing this.

Do you remember our correct URL input for ORDLIST program is /cgi/ordlist/123

Because currently it thinks order number will come after “/ordlist/”. So it is not recognizing /cgi/ordlist?order=123

Thus, we need to change the program little to parse this order number from this URL.

2. With "post" action

Using post action, the parameter values will not be passed in the URL. Instead it will be converted as standard input.

This standard input (coming from browser) can be obtained using QtmhRdStin procedure.

Code to read from standard input :

The input will be saved RtnBuffer variable.

Putting it all together:

Now to test both “get” & “post” I am going to write a simple program which receives the input and displays in browser.

This program name is ordinput.  So we need to change our re-direct action such as

<form method="get" action="/cgi/ordinput">

The below outcome is clear, we got the parameters in URL and no standard input is read.

<form method="post" action="/cgi/ordinput">

Here we go..!!! the URL contains nothing. But standard input got value “order=123” due to post action.

One final touch:

I have quickly modified my ordlist program to get the input from Standard input (rather than from URL) and changed my re-direction to /cgi/ordlist with method as "post" and below is my result

What next?

Do you remember I have stated one cons with IFS external HTML. Yes, that is exactly the output we see here. The front end was looking nice with CSS styling but the output is again the plain HTML.

If we want to move this output as external IFS, we have a problem on how do we change the HTML data dynamically from RPGLE? Because the Table may grow or shrink based on input but we need some way to change the IFS HTML itself dynamically.

The good news is, we can do it by CGIDEV2 tool. And my next post will be based on that. Until then…

Have fun…!!! Happy coding…!!!