Integrating FrontPage with Web Connection
By Darrell Gardner
Last Updated: 11/30/2001
Source code and entire project for this article can be found at:
This article’s sample in action:
http://sample.dngsolutions.net/
Web Connection is a powerful tool for creating dynamic web content. However, for those that are graphically challenged (like many programmers) the problem is whether to hire a designer to create something that looks half way decent or to make an attempt at it yourself. Unfortunately most projects can be accepted or denied based on their appearance. The easiest method is to use tools that are readily available today and that you can work with the best of breed in your particular industry. For me that was FrontPage and Web Connection and FrontLook. After discovering the power of visual editing and the ease of use of FrontPage I noticed that my time to delivery decreased as well. A key issue for me was to use FrontPage themes made available from http://www.pixelmill.net/ . They have over 2000 themes to choose from and you can even contract with individual artists for custom work. Prices range from free to 49 dollars. You can re-design or change themes after you have your client signed off on your project J. Another Tool that is helpful is FrontLook for designing banners and active graphics as well as some pretty cool splash pages.
We will take you through a step by step process of creating a website using FrontPage and Web Connection. There are some assumptions here:
- You are familiar with Web Connection (basically can create a project and use the ExpandTemplate method).
- You are familiar with FrontPage (you can apply a theme and edit pages as well as understand the navigational view).
One of the biggest issues is your directory structure as well as the executable status of your website. Web Connection requires that you have an executable directory that the wc.dll file will reside in. FrontPage on the other hand does not like executable directories and will not allow you to publish your web if it sees an executable directory within it’s structure. I understand there is a flag you can turn on or off to have FrontPage not complain about the executable status of a folder within it’s structure. I like to keep Web Connection executable and maintenance files separate from the web so I keep them out of the FrontPage web. In order to do this, you have to setup your FrontPage site first then worry about the Web Connection files and directories.
*note: if you already have Web Connection installed and running on a Web it will not hurt it. The FrontPage files will be added to the existing structure. If you want to take the executable rights off of the root of your web and create a virtual with executable rights that is a good way to go as well.
The first thing to do is setup your web site as a front page website.
Create the subdirectory where your html files will reside. For our example it is: c:\inetpub\wwwroot\sample\
Then create your site using IIS:
|
|
Enter a good description for your site. |
|
|
Note that the host header will be different depending on the environment: Production: www.sample.com Development: sample.<localmachine> |
|
|
|
In order to develop using web url’s instead of ip addresses or localhost (since I develop multiple sites on one machine), I make entries in my host file so I can point a url at my site and have the host header work. This makes the development environment more closely resemble the production environment. Using Notepad I edit the hosts file located:
\winnt\system32\drivers\etc\hosts.
# Copyright (c) 1993-1999 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
# 102.54.94.97 rhino.acme.com # source server
# 38.25.63.10 x.acme.com # x client host
127.0.0.1 localhost
127.0.0.1 sample.dpglap
127.0.0.1 www.sample.com
# 216.240.130.14 www.sample.com
If you use the same name to point to your website as the production name www.sample.com make sure you change the hosts file back after you are finished otherwise you could have confusion when you are trying to get to the real site and it is still pointing to localhost. The changes that are made to the hosts file are immediate. You will not need to reboot your computer for them to take effect. You might need to close your browser and re-open it in order to cause the browser to re-query the hosts file. Once your browser has resolved a name to an IP it will not re-query that address… That is why you will need to close your browser and then re-open to get a changed IP address.
If you are using virtuals off of the root then this will not apply.
Now back to the web site setup:
|
Point the path to the subdirectory that you will be placing you html files and the frontpage website. |
This next slide is important in that you will leave all of
the defaults. We will be creating a virtual directory that has executable rights later. |
|
|
|
Configuring FrontPage extensions for your site:
|
Just right click on your website and select all tasks->configure server extensions And the following wizard will appear: |
|
|
|
|
|
|
Your server extensions are now setup for this site via IIS. Now just click on Finish. |
The following site will now be setup in IIS:
These are all of the files and subdirectories associated with a front page web. Notice we have not even dealt with Web Connection yet.
Setting up Web Connection
I do two different things when setting up with Web Connection. One is to create a separate location for the application than the standard Web Connection location of \wconnect. This allows you to install new versions of Web Connection without messing up your applications. You can then choose to upgrade individual applications one at a time as necessary.
|
First Create your subdirectory structure: Temp directory : c:\temp\wc\sample\ Application directory: c:\wcapps\sample\ Update directory for exe: c:\wcapps\sample\update\ Data directory for application: c:\wcapps\sample\wwdata\ |
Run Console.exe from the \wconnect install directory.
You will see the following screens. Since we are going to move the application from the \wconnect directory we will run the setup so it creates all of the necessary files and virtuals. I don’t go into VFP to run console. I just run it from explorer.
|
|
I am using sample for the project name and sampleproc for the process class name. The web server is based on my current server. You will need to put the appropriate names in for your application and web server. |
|
|
You will notice that I have changed the path for the virtual. I have changed the virtual name from the app name to WC (an internal standard) This will be the only executable virtual on the website so we can conform to FrontPage standards. The path also represents a subdirectory underneath the actual website of sample |
|
|
At this point you can click on finish. |
You will now have a website in IIS that looks like:
All of the files below WC were put there from the console.exe setup project setup… We must now go into the properties of both the root web as well as the virtual to make sure our settings are correct.
|
|
|
Notice that the root web (on left) has scripts only for execution permissions and the WC virtual has Scripts and Executables. Both have Low (iis process).
We will look at the script maps for the root web and apply them to all sub directories. The console.exe has already set up the script map for us on the virtual but since we are integrating with FrontPage and we might want some dynamic content to show up in the FrontPage navigational bots we will need this script map on the root as well (bots are server sided delivery items).
|
|
Go to the Home directory tab in the properties and select the configuration button:
Then select Add … |
|
You can choose any scriptmap you like, but you will have to make sure FrontPage is setup to handle it. So it recognized the file type and will allow you to edit it. Under current settings the FrontPage bots will not work unless it is a supported extension. L That is why I choose a supported extension such as .htx since I know I won't be using that type of extension in my web development. If you are using unsupported scriptmaps and or file extensions, with out too much trouble, you could create a scriptmap of .html or .htx (any supported extension) and rename all occurrances of your extension in your application to .html or .htx and get the results you are looking for. Being able to use the file as a normal FrontPage file J. |
|
Now we have a website that is ready to be published… Or do we?
Let’t jump into the FrontPage part of this:
Setting up your FrontPage website:
There are some pre-requisites that must occur:
- You have a theme that you have downloaded and setup so that it is available (if you want to use a theme… You can start from scratch as well).
- You have setup any script maps as editable within FrontPage. This is only necessary if you plan on editing the script map files with FrontPage.
In order to make sure you can edit all of the file types that will be in your web site you might need to add a file type to FrontPage in order to edit your script map files. I chose .htx for my script maps because it is already defined as a file type to FrontPage and I don’t have any other uses for .htx files. If you want to use a different file type or use .wc in your website you will need to add that. Here is how that is done:
Setting up File extensions that match your script maps:
Got to Tools->Options->Configure Editors
|
|
Enter the Editor Name as FrontPage and the command line should be the full path to FrontPage. You can just copy this line from one of the other extensions and paste it in the new association. Hit OK and then OK again at the options window. This will allow the .wc files to show up and be edited within FrontPage. (Whatever script map you choose). Keep in mind If you are going to use Bots that they will not work (At this time, I am researching this further) within the expandtemplate method. I think the server extensions don’t expand the bot unless it is a hard coded accepted extension. |
In order to make .wc or “non-standard” FrontPage files operational with bots and WC you will need to make the following changes or verify that they are there:
Production Server
Install FrontPage Extensions Resource Kit and Admin Forms: (since you already have FrontPage installed on your development machine this is not an issue. Only for production machine).
After installing the FrontPage server Extensions Resource kit The HKEY_CLASSES_ROOT\htxfile was created in the registry. If you already have FrontPage installed on your machine then the htxfile reference should already be in the registry.
Then I copied the registry entries from .htx to .wc. Notice the data type of the default entry is htxfile.
Now the site properly process the .wc extension files as a type of htxfile. And will process the display of the .wc files as regular FrontPage files and show all bots correctly. J
Now, Creating your Web:
Open up FrontPage and select New Web from the File->new Web option:
I have selected a theme that we purchased from Pixelmill. Notice that I put in the subdirectory name that matches my project name. You should override the name that FrontPage puts in which is usually the last web you created with a number incremented at the end.
This will create all of the content for you based on the particular web theme you have chosen. You can publish this web locally and see what it looks like (or just view within FrontPage, But I like to test the site and all of my settings).
HINT: You can
place a subdirectory in your FrontPage site to store static files or zip
files. You can edit those files directly with what ever program they
require. Then wen you publish you
web they will be included in your update to the public site. I am doing that same thing here in the
sample app with the documentation as well as the sample.zip file. I just edit the file in the FrontPage
directory then go into FrontPage and F5 the folder list and publish the
web. It handles sending the files to the web site for me J.
You can trim this down however you like. This is standard web site design and you can create static content pages. I will leave this part alone and look into the dynamic content.
|
Make sure you have changed your host file to reflect localhost. If you are using subdirectories off of the main root web then your address would be http://localhost/sample |
If your website security is setup properly you should be prompted with a username and password. You will see FrontPage start processing the site and then
display: Hopefully!! |
You should now edit the content of your “static” pages directly with FrontPage and then publish the site again. It is a good Idea to have a “blank” page to use as a starting template that you can copy for placing new pages that will become data driven pages. The helloword2.htx would be a good candidate for this since it already has the <%= lcHTML %> variable in the page.
Here is a quick Tutorial for editing the templates: (provided by Arch Blue Template).
|
FrontPage 2000 Web Template Tutorial:
Navigation Bars
A navigation bar is a set of hyperlinks used for navigating a Web site. You can display a navigation bar on every page in your web so that your site visitors can always get to the web's main pages, quickly and easily. Before you create your own Navigation Bars, you need to set up a Navigation Structure of your web first, and then let FrontPage create the Navigation Bars for you.
Navigation Structure
1. On the View menu, click Navigation. 2. You will see the Navigation Structure of this web.
You are at the Tutorials page right now. Other pages in this navigation structure are sample pages. You can delete them, add a new/existing page to the structure or simply change the title of a page.
Change the title of a page Right click a page in the navigation structure and select Rename.
Delete a page Right click the page you want to delete and select Delete.
Add a new page 1. On the View menu, select Page 2. On the File menu, select New, and then select Page 3. On the General tab, you will see a list of page templates to choose from. Double click ICE_Arch Blue template. 4. Save the new page. (You will notice that there is no banner and navigation bars, but don't worry about it now.) 5. Now switch to Navigation Structure by selecting Navigation from the View menu 6. On the toolbar, select Folder List button 7. Click the newly created page in the Folder List and drag the page to the position in the Navigation Structure where you want it. Rename the title of the page if you want to. 8. Double click the page. This will take you to the page view. Now you see the banner and navigation bars.
Navigation Bar Property 1. Double click the vertical Navigation Bar on the left hand side
2. You will see the Navigation Bar Property dialog similar to the following picture.
3. In order to understand the Navigation Bar Properties, we need to take a look at the Navigation Structure of this web again.
Home Page: This page is the first page added to a navigation structure,
typically named index.htm or default.htm, and is indicated by
Top-Level Pages: "Location" and "FAQ" are the Top-Level Pages (Not including Home Page)
Child-Level Pages: "Tutorials", "Company Info", "Products" and "Contact Us" are the Child-Level Pages of "Home". "Products" has two Child-Level Pages.
Parent-Level Pages: Include the parent page of another page, plus pages that are directly connected to the parent page on the same level. For example, the parent-level pages for "Company Info" are "Home" (parent page), "Location", and "FAQ". The parent-level pages for "order" are "Products" (parent page), "Tutorials", "Company Info", and "Contact Us".
Same Level Pages: Include pages that are on the same level and have the same parent page. For example, "Tutorials", "Company Info", "Products", and "Contact Us" are same level.
Back and Next: This is for browsing a sequence of same level pages. For example, the next page of "Tutorials" is "Company Info". The previous page of "Location" is "Home".
The rest of the features in the Navigation Bar Properties are pretty self-explanatory. Practice for a while before you build your website.
Add a Banner and Navigation Bars to a page If you accidentally delete the page banners or navigation bars, you can still restore them and of course the page has to be in the Navigation Structure first.
1. On the Insert menu, select Page Banner and type the text you want to display in the page banner.
2. Again, on the Insert menu, select Navigation Bar. Select the type of hyperlinks, orientation and appearance you want on the navigation bar.
For Netscape Browser Users Background pictures do not display correctly - The web template is made from may tables and cells. Due to a bug in Netscape, a table cell must have some content - text, picture or empty key spaces - for its background picture to display correctly in the Netscape browser.
Navigation buttons do not lineup (the bottom button is misaligned) - usually when they are in a table. Click on the navigation bar. Click the HTML tab at the bottom of the Page View. What will be highlighted is something that starts with "<webbot bot" and ends with "-->". Close the "gap" (white spaces or carriage return) between the end tag (-->) and whatever follows it. |
.
Now you have 
The above directions have some specific references to the ice Blue theme used here.
Now lets create our first Web Connection based hit. Since we have created a script map called .htx we can know that any page that is called with the .htx extension will cause a hit to the WC server.
Before we launch our newly created project, let’s move it to our stated file structure c:\wcapps\sample … you want to get the following files and either copy or move based on their content. The files you wan to move are:
From \wconnect to \wcapps\sample\
Bld_sample.*
Sample.*
And the files you want to copy are:
Config.fpw
Wwipstuff.dll
Wconnect.h
Folder:classes
After you have copied the config.fpw it is a good Idea to edit it to match your new paths so the application is starting in the proper directory:
TITLE=West Wind Web Connection 4.0 for Visual FoxPro
PATH=.\classes\;.\wwdevregistry\;
DELETED=ON
EXACT=OFF
STRICTDATE=0
_vfpstart=
COMMAND=
You should then create a vfp shortcut to that directory on you desktop so you have a quick way into your application. Make sure the starting directory matches your application:
|
|
Now launch VFP from that short cut and select open project. Select your project. The first thing you will see is:
just answer yes to this. You will now be able to build your project so all of the classes are pulled in. You should do this first. |
We need to now add the .htx scriptmap handling in the samplemain.prg
DO CASE
CASE lcExtension = "HTX"
DO sampleproc with THIS
*** ADD SCRIPTMAP EXTENSIONS ABOVE - DO NOT MOVE THIS LINE ***
*** Default Web Connection script handling
CASE lcExtension = "WC" OR lcExtension == "FXP"
DO wwScriptMaps with THIS
CASE lcExtension == "WWSOAP"
DO wwDefaultWebService with THIS
OTHERWISE ……
We can now run our application and test to see that WC is working properly:
Use the following url in your browser to test the server. (make sure to replace sample.dpglap with your base URL).
http://sample.dpglap/wc/wc.dll?sampleproc~HelloWorld
or:
http://sample.dpglap/helloworld.htx
Notice that I did not include the virtual /wc in the second address… That is because we defined the script map of .htx from the root of the web to point at the /wc/wc.dll for us…
This is traditional Web Connection so what we want to do is have that hit come from the FrontPage Theme. So we need to create an .htx file and put it in the structure of our FrontPage web. I also want to make it apart of the navigational menus. Let’s copy one of the pages and rename it to match our helloworld function call.
I have copied the companyinfo page and will rename it to helloworld.htx I will then place that file in the navigation screen as a sibling page to company info. Make sure to copy the page that you want the level to be at. Once you understand the navigational properties of FrontPage this will be easy. When renaming a file you will get a message from FrontPage stating that the page could become unstable…. Go ahead and say yes J .. and then drag that file into the Navigational structure. Make sure to rename the title to helloworld so it will show up properly in the menu structure.
Let’s save any changes to the web and publish to our local machine…
Then launch your browser and point it to http://sample.dpglap you will see a new menu option called helloworld. Go ahead and click on it.
|
Resulting Page from clicking on helloword menu option. |
What this has done is cause a hit to the WC Server. Since we have hit the helloworld method The App has control. At this time the server did not return anything from the FrontPage web, but it sent output directly to the output stream so the actual file helloworld.htx has no meaning other than allowing us to put methods within WC servers in the navigational menus of a FrontPage website. |
Just Place your cursor where you want to insert your WC
Code with asp style syntax <%= variable %> Select
insert->advanced->HTML an you will get a box that you can enter your
WC Script code. You can also enter
information via the html screen.
When copying make sure to highlight
the file you want to copy in the folder list and then press cntrl-C and then
cntrl-V. This will move all of the
theme content for you. Don’t forget to publish the web again. 
Now lets do the same thing with the Server returning content within the FrontPage web site.
So copy the helloworld.htx file to helloworld2.htx. and let’s copy the helloworld method to helloworld2 method within the sampleproc.prg. Instead of writing to the output stream we will use expandtemplate to show the page within the FrontPage hierarchy. Edit the content to show an asp style entry in the location that you want the return html to show:
*********************************************************************
FUNCTION HelloWorld()
************************
THIS.StandardPage("Hello World from the sampleproc process",;
"If you got here, everything should be working fine.<p>" + ;
"Time: <b>" + TIME()+ "</b>")
ENDFUNC
*********************************************************************
FUNCTION HelloWorld2()
************************
lcHTML = "Hello World from the sampleproc process" +;
"If you got here, everything should be working fine.<p>" + ;
"Time: <b>" + TIME()+ "</b>"
this.oResponse.expandtemplate('c:\inetpub\wwwroot\sample\helloworld2.htx')
ENDFUNC
Refresh your browser and select the helloworld2 menu option and you will now see the expanded page with the content correctly expanded for lcHTML.
At this point, All of the functionality of Front Page is still active. We can put in a page counter, or frontlook applet. IT will all be expanded by Web connection and you now have the full power of Web Connection while mainting your site In FrontPage.
I will now show you how to put in the results of a multi page showcursor method. This is very easy using the showcursor method provided by Web Connection. First copy the wwDevRegistry.* files from the wwDevRegistry folder from \wconnect to \wcapps\sample\wwDevRegistry\. I will add one method in sampleproc.prg:
FUNCTION showtable
use wwDevRegistry\wwDevRegistry
SELECT Company, Name as Contact, State, City, Country ;
FROM wwDevRegistry ;
INTO CURSOR TQuery
loSC = CREATEOBJECT("wwShowCursor")
loSC.lAlternateRows = .T.
loSC.cExtraTableTags = " style='font:normal normal 8pt tahoma'"
loSC.nPage_itemsPerpage = 8
loSc.cPage_PageUrl = "showtable.htx?"
loSC.ShowCursor()
lcHTML = loSC.GetOutput()
IF RECCOUNT() = 0
lcHTML = lcHTML + ;
"<p><center><b style='color:darkred'>No entries matched your search</b></center></p>"
ENDIF
use in wwDevRegistry
this.oResponse.ExpandTemplate('c:\inetpub\wwwroot\sample\showtable.htx')
RETURN
Since we have the showtable method, We can now just copy the helloworld2.htx file in Frontpage and change the name to match the method name. Then drag it into the navigational view. We only need to rename the title on the file after moving and we are ready to process our new request.
Now publish your web and refresh your browser to show the new showtable menu option. If you select it you will see the following:
The key is to make sure your output from the response object is saved to the variable that will be expanded using the expandtemplate method. It is that easy!!!
The only code that we have generated in sampleproc.prg is:
FUNCTION showtable
use wwDevRegistry\wwDevRegistry
SELECT Company, Name as Contact, State, City, Country ;
FROM wwDevRegistry ;
INTO CURSOR TQuery
loSC = CREATEOBJECT("wwShowCursor")
loSC.lAlternateRows = .T.
loSC.cExtraTableTags = " style='font:normal normal 8pt tahoma'"
loSC.nPage_itemsPerpage = 8
loSc.cPage_PageUrl = "showtable.htx?"
loSC.ShowCursor()
lcHTML = loSC.GetOutput()
IF RECCOUNT() = 0
lcHTML = lcHTML + ;
"<p><center><b style='color:darkred'>No entries matched your search</b></center></p>"
ENDIF
use in wwDevRegistry
this.oResponse.ExpandTemplate('c:\inetpub\wwwroot\sample\showtable.htx')
RETURN
*********************************************************************
FUNCTION HelloWorld()
************************
THIS.StandardPage("Hello World from the sampleproc process",;
"If you got here, everything should be working fine. <p>" + ;
"Use your back button to return to FrontPage Site. <p>" + ;
"Time: <b>" + TIME()+ "</b>")
ENDFUNC
EOF sampleproc::HelloWorld
*********************************************************************
FUNCTION HelloWorld2()
************************
lcHTML = "Hello World from the sampleproc process" +;
"If you got here, everything should be working fine.<p>" + ;
"Time: <b>" + TIME()+ "</b>"
this.oResponse.expandtemplate('c:\inetpub\wwwroot\sample\helloworld2.htx')
ENDFUNC
The functionality that you can gain is pretty much unlimited. Have fun and keep me posted on any sites that you develop with FontPage (or any visual editor) and Web Connection. The same basics stated here can be applied to any visual editor. The next article will be publishing your web to a production server. You can view this sample site at: http://sample.dngsolutions.net
|
I hope this article has been helpful to you. This by no means is the only way to integrate with Web Connection but it is a start. There are many more options to show such as editing of records and dynamic process lists. If you would like a full functioning example FrontPage and wwSession with login tracking you can go to http://asample.dngsolutions.net and download that entire project and website. Please note the theme used in this example is property of DNG and not for replication. You will need to use one of your own themes or purchase one. And don’t forget, when you are ready to host your application that DNG is your applications place to call home! |
Resources:
For comments, you can post a message at:
http://www.dngsolutions.net/wwthreads/
FrontPage Website and Web Connection Source Code:
http://sample.dngsolutions.net/files/sample.zip
This article in Word format: (right click and save as)
http://sample.dngsolutions.net/files/IntegratingFrontPageandWC.doc
This article’s sample in action:
http://sample.dngsolutions.net/
|
|
Darrell Gardner is the owner of DNG Solutions and has been a xBase
programmer since 1984. Spent most of
his development years working in the clipper S87 environment and switched to
Foxpro 2.x in 1991 and to Visual Foxpro in 1997. Prior to working at DNG Full time, Darrell was the Director of
I.T. at two companies. One in the distribution industry and the other in the
high tech consulting arena (including data centers). Darrell was a Web Connection MVP nominee
this year and is very active on the support boards at West Wind Technologies. |
