Session E-WEB2

Introduction to the Internet
and the Internet-Wizard

Rod Paddock
Dash Point Software, Inc

Introduction

The Internet has taken the world by storm. Some say its hype some say its substance. What are you going to do now to prepare for the day when your company or clients ask you for an Internet solution. This session will address the needs of Visual FoxPro developers when it comes to “Internet Enabling” your Visual FoxPro applications. In this session you will learn:

Basic Internet terminology
Basic HTML Page construction techniques
How to use the Visual FoxPro Internet Wizard
How to modify the Internet Wizard to do some cool stuff.

Basic Internet Terminology

With all new technologies comes a new set of terminology. The Internet is no different. Before we can begin talking about developing Internet applications you need to understand some basic Internet terminology.

Term	Meaning
Hypertext	The Internet as we know it today is a huge hypertext system. Hypertext allows you to add a reference in a document. This reference can "jump" you to a completely different document or even web server. Common hypertext systems that you may be familiar with include Help Files.
Internet	This is the communication network upon which the World Wide Web Resides. In the context of your company or your clients companies it resides in the outside world.
Intranet	This is essentially an Internet that resides inside your company. These are currently being used to present formatted information to internal company users.
TCP/IP	The networking protocol used as the backbone of the Internet and your Intranets.
WWW (World Wide Web)	The World Wide Web is the cornerstone of today’s Internet. The WWW allows developers to create documents that are linked together much like the threads on a spider web.
Web Page	Where the WWW is the cornerstone of the Internet, Web pages are the bricks that make up the road of the Information Superhighway. Web pages are simply word processing style documents that contain formatted information and possibly links to other Web Pages.
HTML	Hypertext Markup Language - HTML is the language that you use to create Web Pages. HTML is much like most word processing programs that you have used, only with HTML you see the formatting codes in your document. It is the job of your particular web browser to present a formatted document.
Web Browser	An application that is capable of reading an HTML web page and formatting it accordingly. The most popular browsers are Netscape, Internet Explorer and Mosaic.
Internet Servers	These applications serve Web pages to the Internet.
CGI	Common Gateway Interface - This is the protocol used to execute applications from within Web Pages

Now that you have an understanding of some basic Internet terminology you can begin looking at developing your own Internet applications.

Basic HTML Page Construction

Your first step in developing Internet applications is to understand the language that you use to create web pages. In this section you will learn some of the basic techniques used to create web pages.

Note: In the remainder of this session the terms Intranet and Internet are equivalent. We will be developing Intranet components here but the same techniques apply to developing Internet applications.

Creating a Basic Web Page

Whenever you create a new web page there is a set of very basic information that is required. The following code demonstrates the minimum lines of text necessary to create a very basic web page.

<HTML>
<HEAD>
<TITLE>German DevCon 1996</TITLE>
<H1>German DevCon 1996</H1>
<H2>Frankfurt, Germany</H2>
<HR>
</HEAD>
</HTML>

Upon creating this web page you can go into your favorite web browser and look at the document you created. The following illustration takes our HTML page and shows the following image.

Now lets look at the code we generated and break it down:

<HTML> This tag specifies that this is a HTML web page.
<HEAD> This tag specifies that this the header section of text.
<TITLE> This tag specifies the title that is displayed in the title bar of the web browser when this page is active.
<H1> This tag specifies that this is a Header line and will be displayed in bold text.

</HTML>, </HEAD>, </TITLE>, </H1> Web pages consist of text surrounded by textual tags. These tags commonly have a beginning and ending tag. The ending tag is the beginning tag with a backslash pre-prended to the beginning tag name.

Now lets spruce our document up.

Adding Bulleted Lists

The following code create a web page with a bulleted list:

<HTML>
<HEAD>
<TITLE>German DevCon 1996</TITLE>
<H1>German DevCon 1996</H1>
<H2>Frankfurt, Germany</H2>
<HR>
<H2>New Visual FoxPro Features
<UL>
<LI> Active X
<LI> New Debugger
<LI> New Commands, Wizards and Development Features
<UL>
</HEAD>
</HTML>

Notice that this new code used the <UL>, </UL> tags and <LI> as a bulleted item. The <LI> tags do not have an ending tag because they are wrapped in a <UL>,</UL> tag combination:

Adding Tables

The following code creates a table to be displayed by a web browser:

<HTML>
<HEAD>
<TITLE>Visual FoxPro Table Creation Demo</TITLE>
</HEAD>
<BODY>
<TABLE Border>
<CAPTION>Test Table Creation</CAPTION>
<TR><TH>Column 1<TH>Column 2
</TR><TR><TD>Data 1 <TD>Data 1a
</TR><TR><TD>Data 2 <TD>Data 2a
</TR><TR><TD>Data 3 <TD>Data 3a
</TR>
</TABLE>
</BODY>
</HTML>

Adding Controls

The following tags demonstrates adding some controls that might look familiar to Visual FoxPro developers

Text Entry Field

Password Entry Field

Push Buttons

List dropdown control

<SELECT Name="Selected-Report">
<OPTION>Annual Sales
<OPTION>Current Inventory
<OPTION>A/R Aging
</SELECT>

List Box Control

<SELECT Name="Selected-Report" Multiple Size="3">
<OPTION>Annual Sales
<OPTION>Current Inventory
<OPTION>A/R Aging
<OPTION>Another report
</SELECT>

Radio Buttons

<INPUT TYPE="radio" Name="MY-RADIO" Value="No"> Yes
<INPUT TYPE="radio" Name="MY-RADIO" Value="Yes"> No
<INPUT TYPE="radio" Name="MY-RADIO" Value="Maybe"> Maybe

Memo Editor

<TEXTAREA Name="comments" Rows="5" Cols ="40">Memo Style Field</TEXTAREA>

Now lets look at a form with all of the above controls on it:

Creating Web Pages From Visual FoxPro

Now that you understand some of the basics of Web Page creation you can begin looking at creating them from your applications. For instance lets look at creating a web page table from a Visual FoxPro table. The following code creates a web page table and populates it with data from a Visual FoxPro table.

CLOSE ALL
CLEAR ALL
USE TEST

SET TEXTMERGE TO RODTEST.HTML
SET TEXTMERGE ON

\<HTML>
\<HEAD>
\<TITLE>Visual FoxPro Table Creation Demo</TITLE>
\</HEAD>
\<BODY>

\<TABLE Border>
\<CAPTION>Test Table Creation</CAPTION>
\<TR>
FOR X = 1 TO FCOUNT()
\\<TH><<FIELD(x)>>
ENDFOR
\</TR>

GO TOP

SCAN
\\<TR>
FOR X = 1 TO FCOUNT()
\\<TD><<EVAL(FIELD(x))>>
ENDFOR
\</TR>
ENDSCAN
\</TABLE>
\</BODY>
\</HTML>

SET TEXTMERGE OFF

CLOSE ALL

Now lets look at breaking it down to be a little more generic and using a different method:

*-- This function creates a string that is equivalent to a web
*-- page. This string can be saved to a file
LPARAMETERS pcAlias, pcTitle

LOCAL lc_String, cCRLF
lc_String = ""

cCRLF = CHR(13) + CHR(10)

*-- Begin header
lc_string = lc_string + 'Content-Type: text/html'+cCRLF+cCRLF
lc_string = lc_string + "<html>" + cCRLF
lc_string = lc_string + "<head>" + cCRLF

*-- Create titles and header
lc_string = lc_string + "<title>" + pcTitle + "</title>" + cCRLF
lc_string = lc_string + "</head>" + cCRLF
lc_string = lc_string + "<center><h1>"+ pcTitle + "</h1></center>" + cCRLF

*-- Begin body of report
lc_string = lc_string + "<body>" + cCRLF
lc_string = lc_string + "<TABLE Border>" + cCRLF
lc_string = lc_string + "<CAPTION>Table Test/CAPTION>" + cCRLF
lc_string = lc_string + "<TR>" + cCRLF

SELECT (pcAlias)

*-- Create column headers
FOR X = 1 TO FCOUNT()
lc_string = lc_string + "<TH>" + FIELD(x) && NO cCRLF Here at
ENDFOR

*-- End column headers
lc_string = lc_string + "</TR>" + cCRLF
*-- Create body of table

GO TOP

SCAN
lc_string = lc_string + "<TR>" && NO cCRLF Here
FOR X = 1 TO FCOUNT()
lc_string = lc_string + "<TD>" + EVAL(FIELD(x)) && NO cCRLF
ENDFOR
lc_string = lc_string + "</TR>" + cCRLF
ENDSCAN

*-- End report
lc_string = lc_string + "</body>" + cCRLF
lc_string = lc_string + "</html>" + cCRLF

RETURN lc_String

One item that you will notice is that we created a string and stored the final string to a file created with the FCREATE function. We could have used the TEXTMERGE set of commands to do this. This is a fine method however, you will see later why we chose the method that we did.

Using The Visual FoxPro Internet Wizard

Now that you understand some of the basic techniques used to create web pages from your Visual FoxPro applications you can begin looking at creating interactive database applications using the Visual FoxPro Internet Wizard. The Visual FoxPro Internet Wizard is a tool provided by Microsoft to aid Visual FoxPro developers with the process of creating interactive database applications. The Internet Wizard consists of three very important components:

WWWPAGE.APP - This wizard assists in the creation of a Web Page.
VFPCGI.EXE an executable program that is used by the Wizard Generated Web Page to send data to an Internet Server.
SERVER.APP - A Visual FoxPro application that processes Internet requests and returns a web page as a result set for a query.

Installing The Internet Wizard

The most difficult piece of creating an Internet integrated application is the installation of all the web components. In order to create an interactive web page using Visual FoxPro and the Internet Wizard you must have the following:

Visual FoxPro 5.0 or 3.0b
The Visual FoxPro Internet Wizard (found in the VFP\TOOLS\INETWIZ directory)
Windows NT 3.51 or 4.0 running TCP/IP as a network protocol
The Microsoft Internet Information Server or another CGI compatible Web Server (IIS comes with NT 4.0 or can be downloaded from the web)

After successfully installing these applications you need to do the following:

Copy the VFPCGI.EXE file that comes with the Visual FoxPro Internet wizard into the wwwroot directory (or whatever your equivalent directory.
Go into the Internet Server properties sheet and change the rights of the wwwroot directory to Read and Execute. The following illustration shows how to set up these options.

After creating the Web pages and associated files with the WWWPAGE application copy those to the wwwroot directory.
Lastly, run SERVER.APP program. You need to set the server options by pressing the Options button. Upon activating this screen you can enter the correct parameters for your server. Set its settings to: 1) The scripts should be the scripts directory installed by your server applications, the HTTP directory to the wwwroot (or equivalent) and lastly you need to set the path property to the directory to the files you wish to query.

After configuring the server and all of its appropriate files you can generate a Web Page using the Internet Wizard web page generator. This Wizard create a web page capable of querying a single table. This wizard much like all other wizards takes you step by step through the criteria necessary to create web page. The following illustrations demonstrate the steps taken by the wizard.

The first step is to select a single table that you want to query. The path to this table will need to be added to the SERVER.APP configuration screen.
Select a single indexed field that will be used for your selection criteria.
Specify the title and text for your web page.
Specify optional images to be displayed on your web page. This screen also allows you to allow users to download the resulting data as a file.
Select the fields for return to your user. You are limited to 5.
Optionally specify a background and header image file to be displayed. They can be in JPEG or GIF formats.

After finishing these options the Wizard will prompt you with the Wizard Finish line screen. Upon pressing Finish you will be prompted for a name for your web page files. The Wizard will save these files with the name you specify and three extensions that are explained below.

Now that you have generated a web page with the Wizard you need to copy the files it generated into the wwwroot directory. The web page generator creates three files. They end in the following extensions (HTM. IDC. HTX) The HTM file is the web page that will be presented to your users. The HTX file is a file that is used to format the output of a web page, and the IDC file is a file used to specify query information.

After copying these files to the appropriate directories you can then proceed to open the file in your web browser. The following illustrations show the generated web page and the results sent back from the server when it processes one of its requests.

Hacking The Visual FoxPro Internet Server

One of the nice things about the Visual FoxPro Internet Server is its openness. The developers of the Internet Wizard provide the source code to: 1) your generated web pages and 2) The SERVER.APP that processes requests and returns them to the server. What this means is you can add or replace the capabilities of either side of your Internet application.

Tweaking SERVER.PRG

The entire SERVER.APP application centers around SERVER.PRG. This program takes the queries submitted by your web pages processes a query and returns a web page. The web page that is returned is, in this authors opinion, rather bland. It returns the results as a set of single lines and is limited to returning only five columns. It would be nice to modify it to return your result set as a HTML table instead of a bunch of single lines. To perform this operation you need to intercept the SERVER.PRG program before it generates its result set. To do this you need to insert your code after it calls its MakeData function. The following code shows how to intercept this call with your own function. (The modified version of this program is included on the conference CD)

lnRecordsReturned=RECCOUNT('TempResult')
IF lnRecordsReturned = 0
CurrentRecord=0
ELSE
CurrentRecord=1
IF llReturnData
=Cleanup()
RETURN makedata()
ENDIF
ENDIF
ENDIF

*****************************************
*-- Call Custom Function By RJP 04.10.96
RETURN My_Server_Function("TempResult")
*****************************************

*Create HTML return page from .HTX and data
*Verify the existence of the Template (.HTX) file.
*It must be next to the .IDC file,
*pathed relative to the .IDC file, or in the Script root.
lcTmpFile=lcTemplate

As you can see you hand the name of the query result cursor set to your own function. This function need to return a string that is the web page to be returned to your browser. The following code demonstrates returning a simple web page and the resulting web page shown in the browser.

FUNCTION My_Server_Function
LPARAMETERS pcAlias
LOCAL lc_String, cCRLF
lc_String = ""
cCRLF = CHR(13) + CHR(10)

lc_string = lc_string + 'Content-Type: text/html'+cCRLF+cCRLF
lc_string = lc_string + "<html>" + cCRLF
lc_string = lc_string + "<head>" + cCRLF
lc_string = lc_string + "<title>Rod's Return Page</title>"
lc_string = lc_string + cCRLF
lc_string = lc_string + "</head>" + cCRLF
lc_string = lc_string + "<center><h1>Rod's Return “
lc_string = lc_string + “Page</h1></center>" + cCRLF
lc_string = lc_string + "<body>" + cCRLF
lc_string = lc_string + "<ul>" + cCRLF
lc_string = lc_string + "<li>1. Line 1 <hr>" + cCRLF
lc_string = lc_string + "<li>2. Line 2 <hr>" + cCRLF
lc_string = lc_string + "<li>3. Line 3 <hr>" + cCRLF
lc_string = lc_string + "</ul>" + cCRLF
lc_string = lc_string + "</body>" + cCRLF
lc_string = lc_string + "</html>" + cCRLF
RETURN lc_String

Now that you have set up the basic framework you can add the code generated earlier in this session to return a table. The following code shows how to return a table to the web browser. (See figure below)

FUNCTION My_Server_Function_Return_Table
LPARAMETERS pcAlias, pcTitle

LOCAL lc_String, cCRLF
lc_String = ""
cCRLF = CHR(13) + CHR(10)

lc_string = lc_string + 'Content-Type: text/html'+cCRLF+cCRLF
lc_string = lc_string + "<html>" + cCRLF
lc_string = lc_string + "<head>" + cCRLF
lc_string = lc_string + "<title>" + pcTitle + "</title>" + cCRLF
lc_string = lc_string + "</head>" + cCRLF
lc_string = lc_string + "<h1>" + pcTitle + "</h1>" + cCRLF
lc_string = lc_string + "<body>" + cCRLF
lc_string = lc_string + "<TABLE Border>" + cCRLF
lc_string = lc_string + "<CAPTION>"+pcTitle+"</CAPTION>" + cCRLF
lc_string = lc_string + "<TR>" + cCRLF

SELECT (pcAlias)
FOR X = 1 TO FCOUNT()
lc_string = lc_string + "<TH>" + FIELD(x) && NO cCRLF Here
ENDFOR
lc_string = lc_string + "</TR>" + cCRLF

GO TOP
SCAN
lc_string = lc_string + "<TR>" && NO cCRLF Here
FOR X = 1 TO FCOUNT()
lc_string = lc_string + "<TD>" + EVAL(FIELD(x)) && NO cCRLF
ENDFOR
lc_string = lc_string + "</TR>" + cCRLF
ENDSCAN

lc_string = lc_string + "</body>" + cCRLF
lc_string = lc_string + "</html>" + cCRLF
RETURN lc_String

Tweaking the Web Page

Now that you have modified the server application to return a different web page you can alter the query web page to perform different tasks. To do this you need to understand how the SERVER.PRG program processes a query.

Whenever the SERVER.PRG program receives a query it takes a string passed to it from the server and creates an array with the options provided by the Web Page. This array contains the parameters that are input on the web page. The following web page has a few options on it. The first is a TEXT input type. One item you will is that the TEXT input type field specifies an option called name. This is the name of the variable handed to the server. The second thing you will notice is a dropdown list of reports that can be called by the user. By intercepting these parameters you can create your own types of stored requests and queries.

<P>This demonstration shows how you can use Visual FoxPro as an internet server application.</P>
<FORM ACTION="vfpcgi.exe?IDCFile=FOXTEACH.IDC" METHOD="POST">
<INPUT NAME="SearchParam" SIZE=40 VALUE="" >
<INPUT TYPE="SUBMIT" VALUE="Search">
<br>

<!List dropdown control>
<SELECT Name="Selected-Report">
<OPTION>Annual Sales
<OPTION>Current Inventory
<OPTION>A/R Aging
</SELECT>
<br>

Lets say you want to run a report on whatever the user selected above. To do this you will need to modify the SERVER.PRG to return a web page depending upon whatever your users select. The following code demonstrates how to search for the parameter named Selected-Report in the array and process a report accordingly

FUNCTION My_Server_Function2
LPARAMETERS pcAlias, paArrayOfParameters
EXTERNAL ARRAY paArrayOfParameters

*-- Declare our variables
LOCAL lnReportParam, lc_string
*-- Store array element parameter here
lnReportParam = ASCAN(paArrayOfParameters,"Selected-Report")

*-- If we go an an element then our parameter is the next element
*-- So Add One and see what it is
IF lnReportParam > 0
lcReportToRun=UPPE(ALLT(paArrayOfParameters(lnReportParam+1)))
DO CASE
CASE lcReportToRun = "A/R AGING"
lc_string = ar_report()
OTHERWISE
lc_string = ErrorPage("[" + lcReportToRun + "] + ;
”Is not ready yet. Please try again later.")
ENDCASE
ELSE
lc_string = ErrorPage("Invalid Report Parameter Specified")
ENDIF
RETURN lc_string

FUNCTION ar_report
LOCAL lc_string, cCRLF
cCRLF = CHR(13) + CHR(10)

lc_string = ""
lc_string = lc_string +'Content-Type: text/html'+cCRLF+cCRLF
lc_string = lc_string + "<html>" + cCRLF
lc_string = lc_string + "<head>" + cCRLF
lc_string = lc_string + "<title>AR Aging Report</title>" + cCRLF
lc_string = lc_string + "</head>" + cCRLF
lc_string = lc_string + "<center><h1>Accounts Receivable Report”
lc_string = lc_string + “</h1></center>" + cCRLF
lc_string = lc_string + "<body>" + cCRLF
lc_string = lc_string + "</body>" + cCRLF
lc_string = lc_string + "</html>" + cCRLF
RETURN lc_string

Now you can see how to create your own stored procedures using the above techniques.

Summary

As you can see integrating Visual FoxPro into the Internet is very basic and uses some simple FoxPro techniques. Now that you have a beginning can you seen where this might be applicable to you or one of your clients ?