Post on 17-May-2015
description
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.