Building n-Tier Web Building n-Tier Web Applications with VFPApplications with VFP

Mike FeltmanMike Feltman

About meAbout me

President F1 TechnologiesPresident F1 TechnologiesDesigner/Lead Developer Visual FoxExpress Designer/Lead Developer Visual FoxExpress FrameworkFrameworkVery Experienced VFP DeveloperVery Experienced VFP Developer xBase Developer Since 1987xBase Developer Since 1987 Fox Software Tech Support, Marketing & Fox Software Tech Support, Marketing &

Development 1988-1990Development 1988-1990

Moderately Experienced Web DeveloperModerately Experienced Web Developer Web Development Since 1994Web Development Since 1994 ASP, Web Connection, AFP, JavaScriptASP, Web Connection, AFP, JavaScript

AgendaAgenda

Supply ListSupply List

N-Tier Web ArchitectureN-Tier Web Architecture

Model View Controller Web ArchitectureModel View Controller Web Architecture

Interacting with VFPInteracting with VFP

Good JavaScriptGood JavaScript

Bad JavaScriptBad JavaScript

Introducing PrototypeIntroducing Prototype

Adding JavaScript with PrototypeAdding JavaScript with Prototype

Supply ListSupply ListWeb ServerWeb Server

IIS (Internet Information Server)IIS (Internet Information Server) Apache Apache

HTML EditorHTML Editor Standards: FrontPage, Dreamweaver, Visual Studio.NET, Microsoft Expression Web Standards: FrontPage, Dreamweaver, Visual Studio.NET, Microsoft Expression Web Popular Low Cost Alternatives: HotDog, CoffeeCupPopular Low Cost Alternatives: HotDog, CoffeeCup No-frills: Notepad, VFPNo-frills: Notepad, VFP Barf Bag: WordBarf Bag: Word

VFP Compatible Server Side Scripting LanguageVFP Compatible Server Side Scripting Language Web Connection, Active FoxPro Pages (AFP) , FoxWeb or ActiveVFPWeb Connection, Active FoxPro Pages (AFP) , FoxWeb or ActiveVFP ASP, ASP.NET & COMASP, ASP.NET & COM

Javascript FrameworkJavascript Framework Prototype (and many popular add-ons)Prototype (and many popular add-ons) JQueryJQuery DOJODOJO

JavaScript DebuggersJavaScript Debuggers Firebug for FirefoxFirebug for Firefox Debugbar for Internet ExplorerDebugbar for Internet Explorer

N-Tier Web ArchitectureN-Tier Web Architecture

UIUI HTML/XHTML (content)HTML/XHTML (content) CSS (formattting)CSS (formattting) JavaScript w/ Prototype (behavior)JavaScript w/ Prototype (behavior)

BusinessBusiness VFP Objects for communicating between UI & DataVFP Objects for communicating between UI & Data

DataData VFP Tables VFP Tables

Model-View-ControllerModel-View-Controller

Model (The Data)Model (The Data) VFP Tables VFP Tables

View (The User Interface)View (The User Interface) HTML/XHTML (content)HTML/XHTML (content) CSS (formattting)CSS (formattting) JavaScript w/ Protype (behavior)JavaScript w/ Protype (behavior)

Controller (The Business Layer)Controller (The Business Layer) JavaScript w/ Protype (plumbing)JavaScript w/ Protype (plumbing) VFP Objects for communicating between UI & DataVFP Objects for communicating between UI & Data

Interacting with VFPInteracting with VFP

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

VFP DemosVFP Demos

Rendering an HTML TableRendering an HTML Table

Rendering an HTML FormRendering an HTML Form

Saving with an HTML FormSaving with an HTML Form

““Good” JavaScriptGood” JavaScript

Pages should be functional w/o JavaScript. Pages should be functional w/o JavaScript. How much depends on your requirements. How much depends on your requirements. JavaScript is used to enhance functionality JavaScript is used to enhance functionality & improve the user experience.& improve the user experience.

Load JavaScript Last, after DOM is loaded.Load JavaScript Last, after DOM is loaded.

More difficult to write.More difficult to write.

Often requires writing it twice.Often requires writing it twice.

““Bad” JavaScriptBad” JavaScript

Pages require JavaScript to functionPages require JavaScript to function

Ok, when you control the browserOk, when you control the browser

Becoming more acceptable all the time.Becoming more acceptable all the time.

Easier to write.Easier to write.

Introducing PrototypeIntroducing Prototype

JavaScript FrameworkJavaScript Framework

Cross BrowserCross Browser

Class Based OOPClass Based OOP

Advanced EventsAdvanced Events

AJAXAJAX

Improved JSON SupportImproved JSON Support

Case Study: St. Martin de Case Study: St. Martin de PorresPorres

Current SiteCurrent Site OutdatedOutdated Ugly websiteUgly website StaticStatic Requires a “geek” to Requires a “geek” to

update itupdate it Poorly maintained & Poorly maintained &

designed: ie bad layouts, designed: ie bad layouts, little consistencylittle consistency

WantedWanted Modern/Current Look & Modern/Current Look &

FeelFeel Old Content to ExpireOld Content to Expire New Content to be readily New Content to be readily

apparentapparent Consistent Look & FeelConsistent Look & Feel Real sense of community, Real sense of community,

interaction with the parish interaction with the parish & outlying community& outlying community

Maintained by Parish Maintained by Parish PersonnelPersonnel

SolutionSolution

VFP & AFPVFP & AFP Data Driven Content Management SystemData Driven Content Management System Classes Define different types of contentClasses Define different types of content

JavaScript with PrototypeJavaScript with Prototype Dynamic Behavior Makes Site Easy To UseDynamic Behavior Makes Site Easy To Use AJAX based data entry makes it easy for end-AJAX based data entry makes it easy for end-

users to update site.users to update site.

Adding JavaScript w/ ProtoTypeAdding JavaScript w/ ProtoType

Prototype functions & objectsPrototype functions & objects $$ Ajax.RequestAjax.Request

UpdateContentUpdateContent

Login (AJAX Form Submission)Login (AJAX Form Submission)

More PrototypeMore Prototype

TemplateTemplate

JSONJSON

ClassesClasses

EachEach

ResourcesResources

Prototype: Prototype: http://prototypejs.orghttp://prototypejs.org

Active FoxProPages: Active FoxProPages: http://afpages.com/http://afpages.com/

Script.aculo.us: Script.aculo.us: http://script.aculo.us/http://script.aculo.us/

Prototype & script.aculo.usPrototype & script.aculo.us

SummarySummary

Separation of Concerns makes more Separation of Concerns makes more functional, easier to maintain websites.functional, easier to maintain websites.

Prototype makes DOM programming Prototype makes DOM programming much easier, less stressful, faster and much easier, less stressful, faster and more fun.more fun.

VFP works well on the web.VFP works well on the web.

Thank you!Thank you!

Remember to fill out your sessionRemember to fill out your session

evaluation. evaluation.

Session slides, white paper, and code Session slides, white paper, and code samples will be updated.samples will be updated.