Web Applications
A Simple Example

This simple example shows how you can write a multi-page web application using Coyote. This example includes a single source code item that operates in conjunction with three HTML pages.

A Data Lookup Example

This small application could be adapted to allow a customer to query the status of some data element on the MultiValue host system. A customer could check his credit status or the status of his outstanding orders or a user could query the price and availability of a product. While this example is very simple, you should be able to see how easy it is to extend the concepts presented here into fully functional web applications.

The Program Flow

When designing a web application, you should start by designing the flow of the application. In this case, the user is:

first presented with a data entry screen that:

Asks for their customer number and password

After they have entered their customer numer and password information they are presented with either

A display page that shows their current account balance, or
An error page that reports that they have entered an invalid customer number of password

Yes, this application is simple, but it does show how a multi-page application goes together.

The Core Program

This application is actually so simple that we will start with the actual mv/BASIC source item that is used to implement this application:

001       _PROGRAM APP.FILE CLOOKUP
002 *
003 *  Sample multi-page web application
004 *
005 *
006 *
007       _PVAR CUST
008       _FILE FILE.VAR CUST.FILE
009 *
010       CUST.ID = ''
011       _PAGE HOST O:/WWW/APP/CUSTPSWD.HTM
012       READ CUST FROM CUST.FILE , CUST.ID ELSE
013          ERRSTR = 'Bad Customer Number'
014          _PAGE HOST O:/WWW/APP/CUSTERR.HTM
015       END
016 *
017       IF CUST<1> <> CUST.PSWD THEN
018          ERRSTR = 'Bad Customer Password'
019          _PAGE HOST O:/WWW/APP/CUSTERR.HTM
020       END
021 *
022       _PAGE HOST O:/WWW/APP/CUSTDISP.HTM

This is the entire application source code. The easiest way of looking at the application is by discussing each line:

001       _PROGRAM APP.FILE CLOOKUP
This line defines the applications location and name. APP.FILE is a MultiValue data file that will be used to store the resulting web application when it is generated. CLOOKUP.HTM will be the name of the application.
002 *
003 *  Sample multi-page web application
004 *
005 *
006 *
007       _PVAR CUST
This line defines an mv/BASIC variable that will be "persistent". In the interest of performance, not all variables are preserved across page executions. You can define up to 490 variables as persistent or local. Persistent variables may contain numbers, strings, or dynamic arrays.
008       _FILE FILE.VAR CUST.FILE
This defines a file variable FILE.VAR that will refer to the MultiValue data file CUST.FILE. Because of the nature of the web, there are limitations to persistent non-string variables such as file variables and select variables. This shorthand allows you to define a mv/BASIC variable that will access a MultiValue data file using standard READ/WRITE mv/BASIC syntax.
009 *
010       CUST.ID = ''
When using HTML forms to input data, you must initialize the variables to avoid "unassigned variable, zero used" run-time errors.
011       _PAGE HOST O:/WWW/APP/CUSTPSWD.HTM
This line actually invokes an HTML page. In this example, the page is currently stored in the HOST file system's O: drive. You can access any page that is stored in a local MultiValue data file, or that is accessible through host file system or PicLan DSG functions. This web page happens to have an HTML <form> that includes two data entry fields named CUST.ID and CUST.PSWD. The data from these two fields will automatically appear in the CUST.ID and CUST.PSWD mv/BASIC variables
012       READ CUST FROM CUST.FILE , CUST.ID ELSE
013          ERRSTR = 'Bad Customer Number'
014          _PAGE HOST O:/WWW/APP/CUSTERR.HTM
Here we have attempted to read the CUST record from the open customer data file. If the record is not on file we call the an error page. The error page can include a merge point for the variable ERRSTR to display detailed information. The error page does not have an HTML <form> associated with it, so it will not return.
015       END
016 *
017       IF CUST<1> <> CUST.PSWD THEN
018          ERRSTR = 'Bad Customer Password'
019          _PAGE HOST O:/WWW/APP/CUSTERR.HTM
If the password in attribute 1 of the customer record does not match the entered password then we display the error page.
020       END
021 *
022       _PAGE HOST O:/WWW/APP/CUSTDISP.HTM
And finally if the customer id and password are both valid, we display the requested data to the end-user. You should note that there is no actual display code here. This is because the CUSTDISP.HTM page can actually include any element from the CUST.ID and CUST mv/BASIC variable as a part of the HTML layout using standard PicLan-IP data merge syntax.

The HTML Web Pages

The three HTML web pages are simple HTML documents that control the layout of what the user sees.

CUSTPSWD.HTM
This HTML page is a data entry page that asks for input form the user for the customer account number and customer page. It might look something like this:

Customer Query Application

Enter Account Number

Enter Password:

The names of the input fields are CUST.ID and CUST.PSWD respectively. The <form> tag is entered with no "action" or "method" as the PicLan-IP software will handle this transparently.

CUSTERR.HTM
This HTML page is used to display errors. It might look something like this:

Customer Query Application
An error |ERRSTR| has occurred.

This page does not have a <form> statement so control cannot go back to the main application. You may wish to add a "restart" link field so that the user can try again without typing in the URL.
CUSTDISP.HTM
This HTML page is used to actually display information to the user from the customer record that has been read from CUST.ID into CUST:
Customer Query Application
Cust ID   :     |CUST.ID|
Cust Name :     |CUST<2>|
Cust Addr :     |CUST<3>|
                |CUST<4>|
                |CUST<5>| |CUST<6>|  |CUST<7>|

Credit Status:  |CUST<20>|

Summary

This simple example shows how mv/BASIC source code and HTML web documents can seamlessly exchange data to produce a fully functional, high quality, multi-page web application. The mv/BASIC code controls the application program flow while the HTML documents control page layout. Even more importantly, you can build this entire application with only minimal awareness that the web is the execution environment.

Web Applications A Simple Example

A Data Lookup Example

The Program Flow

The Core Program

The HTML Web Pages

CUSTPSWD.HTM

Customer Query Application

CUSTERR.HTM

Customer Query Application

CUSTDISP.HTM

Customer Query Application

Summary

Web Applications
A Simple Example