VFP & Web n-tier session circa 2008

1. Building n-Tier Web
Applications with VFP
Mike Feltman

2. About me
President F1 Technologies
Designer/Lead Developer Visual FoxExpress
Framework
Very Experienced VFP Developer
 xBase Developer Since 1987
 Fox Software Tech Support, Marketing &
Development 1988-1990
Moderately Experienced Web Developer

Web Development Since 1994

ASP, Web Connection, AFP, JavaScript

3. Agenda
Supply List
N-Tier Web Architecture
Model View Controller Web Architecture
Interacting with VFP
Good JavaScript
Bad JavaScript
Introducing Prototype
Adding JavaScript with Prototype

4. Supply List
Web Server
 IIS (Internet Information Server)
 Apache
HTML Editor
 Standards: FrontPage, Dreamweaver, Visual Studio.NET, Microsoft Expression Web
 Popular Low Cost Alternatives: HotDog, CoffeeCup

No-frills: Notepad, VFP

Barf Bag: Word
VFP Compatible Server Side Scripting Language

Web Connection, Active FoxPro Pages (AFP) , FoxWeb or ActiveVFP

ASP, ASP.NET & COM
Javascript Framework

Prototype (and many popular add-ons)

JQuery

DOJO
JavaScript Debuggers

Firebug for Firefox

Debugbar for Internet Explorer

5. N-Tier Web Architecture
UI

HTML/XHTML (content)
 CSS (formattting)
 JavaScript w/ Prototype (behavior)
Business

VFP Objects for communicating between UI & Data
Data
 VFP Tables

6. Model-View-Controller
Model (The Data)
 VFP Tables
View (The User Interface)

HTML/XHTML (content)

CSS (formattting)

JavaScript w/ Protype (behavior)
Controller (The Business Layer)
 JavaScript w/ Protype (plumbing)
 VFP Objects for communicating between UI & Data

7. Interacting with VFP
Web Connection & AFP are ISAPI Extensions
WC & AFP files use <% and %> as script
delimiters
VFP Code can fall anywhere within a web page
between delimiters
Classic ASP is very similar except code is
VBScript/Jscript that gets to VFP via COM.
ASP.NET, PHP and other server platforms with
COM support can also talk to VFP

8. VFP Demos
Rendering an HTML Table
Rendering an HTML Form
Saving with an HTML Form

9. “Good” JavaScript
Pages should be functional w/o
JavaScript. How much depends on your
requirements. JavaScript is used to
enhance functionality & improve the user
experience.
Load JavaScript Last, after DOM is
loaded.
More difficult to write.
Often requires writing it twice.

10. “Bad” JavaScript
Pages require JavaScript to function
Ok, when you control the browser
Becoming more acceptable all the time.
Easier to write.

11. Introducing Prototype
JavaScript Framework
Cross Browser
Class Based OOP
Advanced Events
AJAX
Improved JSON Support

12. Case Study: St. Martin de
Porres
Current Site Wanted

Outdated 
Modern/Current Look &

Ugly website Feel

Static

Old Content to Expire

Requires a “geek” to

New Content to be readily
update it apparent

Poorly maintained &

Consistent Look & Feel
designed: ie bad layouts, 
Real sense of community,
little consistency interaction with the parish
& outlying community

Maintained by Parish
Personnel

13. Solution
VFP & AFP
 Data Driven Content Management System
 Classes Define different types of content
JavaScript with Prototype
 Dynamic Behavior Makes Site Easy To Use
 AJAX based data entry makes it easy for end-
users to update site.

14. Adding JavaScript w/ ProtoType
Prototype functions & objects
 $
 Ajax.Request
UpdateContent
Login (AJAX Form Submission)

15. More Prototype
Template
JSON
Classes
Each

16. Resources
Prototype: http://prototypejs.org
Active FoxProPages: http://afpages.com/
Script.aculo.us: http://script.aculo.us/
Prototype & script.aculo.us

17. Summary
Separation of Concerns makes more
functional, easier to maintain websites.
Prototype makes DOM programming
much easier, less stressful, faster and
more fun.
VFP works well on the web.

18. Thank you!
Remember to fill out your session
evaluation.
Session slides, white paper, and code
samples will be updated.