Introduction to mv/WEB

Part 1 - Basic Structure

This example illustrates basic program flow for an mv/WEB application. The application will:

Set the values of three elements of a dynamic array
Call a web page to display these values as editable fields
After the page is submitted by the end-user, determine which submit button was pressed and process the edited data

This is a portion of the source code for the core application in mv/BASIC:

_PROGRAM APP.FILE APP1

A = 'Jack Smith Company'
B = ''
B<1> = '2471 Jackson Avenue'
B<2> = 'Louisville'

_PAGE HOST C:/WWW/APP/APP1_P1.HTM

BEGIN CASE
   CASE SUBMIT
      ... PROCESS THE SUBMIT LOGIC
   CASE ABORT
      ... PROCESS THE ABORT LOGIC
END CASE

Here is what the application does:

_PROGRAM APP.FILE APP1

This line defines where the PLZ program will generate the executable web application. In this case, the application will be stored in the MV file APP.FILE with a base page name of APP1.HTM.
In order to access the APP1.HTM page, you will need to configure the Coyote web server to access the APP.FILE data file. You do this by entering an HTTP LISTEN line in the PLIP.CTRL CONFIG item:
HTTP DIR=*:80 /APP/ FILE APP.FILE
A = ...

These lines set initial values for the mv/BASIC variable A and dynamic array B. This dynamic array will be used by the web page call to supply initial values to three data entry text input fields.

_PAGE HOST C:/WWW/APP/APP1_P1.HTM

This statement actually causes an HTML page to be transmitted to the user's web browser. The page template is located on the c: drive with a path of c:\www\app\app1_p1.htm. Note that host paths are always specified in mv/WEB with forward slashes to delimit directories.

BEGIN CASE ...

The logic after the _PAGE call is used to determine which of two submit buttons the user pressed in order to process the page. mv/WEB will set the variables associated with submit buttons to boolian values of 0 or 1 for each submit button. This allows the application program to quickly test variables to determine which submit button was pressed on the HTML page.

You should note that the core mv/WEB application code does not include any references to HTML, posted input fields, or other web server elements. Other than calling an HTML display/entry page, the code is very insulated from the web environment. One of the most powerful aspects of mv/WEB is that it allows you to segregate mv/BASIC tasks from HTML layout operations while providing seamless mechanisms to move data between the two environments.

In this example, the application core program calls and HTML page. This page needs to:

Display a single HTML input FORM which contains:

Three <input type="text" ...> fields to display and edit the three editable data values.
Two <input type="submit" ...> buttons that the user can press to submit the page and continue processing.

This is the HTML source code for this web page:

<html>
<head>
  <title>mv/WEB Demo Application</title>
</head>
<body>
  <form>
    <pre>
Company: <input type="text" size="20" name="A"><br>
Address: <input type="text" size="20" name="B&lt;2&gt;"><br>
City:    <input type="text" size="20" name="B&lt;3&gt;"></pre>
    <p>
      <input type="submit" name="SUBMIT" value="Submit">
      <input type="submit" name="ABORT" value="Abort">
    </p>
  </form>
</body>
</html>

When the browser runs the demo application, they will see a page that looks like this:

Company:
Address:
City:

There are several things about the HTML page that you should notice:

The HTML page uses the mv/BASIC variable names and/or dynamic array references as the names of the associates input fields and submit buttons.

Note that HTML will "quote" <> characters as < and >. mv/WEB will handle this correctly.
If you build your HTML pages with an editor like Front Page, you can enter the field names with <> characters and Front Page will convert them to < and > for you.

Input fields do not have a "value" tag to set the initial value.

mv/WEB will automatically generate a value tag that includes the data in the associates variable or dynamic array reference. You can view <input ...> elements as bi-directional edit fields that will begin with a value that originates from your mv/BASIC source code and then returns the new and edited value back to the same variable location.

The <form> tag does not have a target or method specified.

mv/WEB will automatically setup the page with method="post".
The target is left null causing the page to post to the same URL.

When the HTML page is transmitted to the user, they will not see your mv/BASIC variable and dynamic array information.

<input ...> elements are given simple integer names.
mv/BASIC source code is not transmitted to the user.

Introduction to mv/WEB

Part 1 - Basic Structure

Continue to Part 2