Lunch’n Learn Sponsored by OIT Academic Services princeton/as/lunchnlearn.html

1. Lunch’n LearnSponsored by OIT Academic Serviceshttp://www.princeton.edu/as/lunchnlearn.html DBToolBoxhttp://www.princeton.edu/dbtoolbox Anatomy of a Data-drivenWeb Applicationhttp://www.princeton.edu/usite/LnLDemo May 14, 2003George FlemingOIT Web Serviceshttp://www.princeton.edu/~flemingemail: fleming@princeton.edu

2. DBToolBox – Anatomy of a Data-driven Web Application • Review the Creation of a Demonstration Online Registration Site http://www.princeton.edu/usite/LnLDemo

3. DBToolBox – Anatomy of a Data-driven Web Application • Create Web-accessibleRegistration Web Form Set field size and field length for each form field<input type="text" name="FirstName" value="" size=50 maxlength=50>

4. DBToolBox – Anatomy of a Data-driven Web Application • Open DBToolBox Development Sitehttp://www.princeton.edu/dbtoolbox • Click on Create New Database and logon using your OIT NetID

5. DBToolBox – Anatomy of a Data-driven Web Application Prepare Database Permissions • Right click on \\ntfileshare\shares folder to contain database • Select Properties • Assign “DBToolBox” full control • Assign permissions to colleagues as needed

6. DBToolBox – Anatomy of a Data-driven Web Application Create Database • Use DBToolBox Create New Database Feature • Access database created on \\ntfileshare\shares • Registration form must be Web Accessible (place in folder on \\web\sites) • Create “Registration” table in database using Web form as reference

7. DBToolBox – Anatomy of a Data-driven Web Application Open newly created database and complete Registration table design • Add “NetID” field • Set field size = 8 • Set indexed yes (no duplicates) • Close out of design mode

8. DBToolBox – Anatomy of a Data-driven Web Application Registration: What to accomplish • Check if customer in database • If customer NOT in database • Present Registration form • Pre-populate with information from LDAP directory • Accept new customer data into database • Send confirmation e-mail to customer • If customer in database • Present Modification form • Pre-populate with information from database • Accept revisions into database • Send confirmation e-mail to customer

9. DBToolBox – Anatomy of a Data-driven Web Application DBToolBox Connections(click on properties to view configurations) • LnLRegistrationForm • LnLRegistrationInsert • LnLRegistrationInsertError • LnLRegistrationEditForm • LnLRegistrationUpdate • LnLRegistrationCheck

10. DBToolBox – Anatomy of a Data-driven Web Application DBToolBox Connections LnLRegistrationForm • Enforces OIT NetID authentication • Presents HTML for Registration Form • Prepopulates field values using DBToolBox special parameters • Javascript for form field validation

11. DBToolBox – Anatomy of a Data-driven Web Application DBToolBox Connections LnLRegistrationForm • Enforces OIT NetID authentication • All interaction is driven by NetID • All other connections should set security in the same way

12. DBToolBox – Anatomy of a Data-driven Web Application DBToolBox Connections LnLRegistrationInsertDatabaseProperty Sheet • Accepts submission from LnLRegistrationForm • Enter database to receive data

13. DBToolBox – Anatomy of a Data-driven Web Application DBToolBox Connections LnLRegistrationInsertQuery EditProperty Sheet • Accepts submission from LnLRegistrationForm • Substitutes parameters from Web form into Query • Query modified to plug-in {=netid} value on-the-fly (not from form) • Query executed

14. DBToolBox – Anatomy of a Data-driven Web Application DBToolBox Connections LnLRegistrationInsertFormat Property Sheet • Acknowledges successful submission • Sends e-mail to customer to confirm submission • Embeds links in message for customer to easily open connection to review and revise data

15. DBToolBox – Anatomy of a Data-driven Web Application DBToolBox Connections LnLRegistrationInsertError Reports error condition to customer • Database locked by administrator • Unpredictable SQL error

16. DBToolBox – Anatomy of a Data-driven Web Application DBToolBox Connections LnLRegistrationInsertErrorFormat Property Sheet • Reports service outage to customer • E-mails SQL error code and message to application administrator so that administrator can solve problem

17. DBToolBox – Anatomy of a Data-driven Web Application DBToolBox Connections LnLRegistrationInsertQuery Edit Property Sheet • Connect LnLRegistrationInsertError for “Error Processing” • Set default values for data received from form submission

18. DBToolBox – Anatomy of a Data-driven Web Application Creating Connections Using Templates • Use “Create New Connection” to build new connections • Use any existing connection as a template to save time in connection configuration

19. DBToolBox – Anatomy of a Data-driven Web Application DBToolBox Connections LnLRegistrationEditFormQuery EditProperty Sheet • Retreives data for customer logged in using WHERE [NetID] = ‘{=netid}’ • If none available, link to LnLRegistration form • If error, link to LnLRegistrationInsertError

20. DBToolBox – Anatomy of a Data-driven Web Application DBToolBox Connections LnLRegistrationEditFormFormatProperty Sheet • Uses “direct data formatting” to plug data values for customer into the form • Submissions go to LnLRegistrationUpdate

21. DBToolBox – Anatomy of a Data-driven Web Application DBToolBox Connections LnLRegistrationUpdateQuery EditProperty Sheet • Templated from LnLRegistrationInsert • Query configured to update customers record upon receipt of edit form submission

22. DBToolBox – Anatomy of a Data-driven Web Application DBToolBox Connections LnLRegistrationCheckFront End for Registration Query EditProperty Sheet • Selects record based on Customer NetID • If found, links to customer data edit form, LnLRegistrationEditForm • Otherwise proceeds and links to new registration form, LnLRegistrationForm

23. DBToolBox – Anatomy of a Data-driven Web Application Wrapping your application up using a site wrapper • Use “Create New Site” to enter information to create your site • Note what URL is to get to your site on first line • Specify URL to your site’s home page on 2nd line • Optionally specify URL to site logo on 3rd line

24. DBToolBox – Anatomy of a Data-driven Web Application Publishing connections to a site wrapper • Click on Publish button adjacent to connection to publish • Publish LnLRegistrationCheck

25. DBToolBox – Anatomy of a Data-driven Web Application Pulishing a connection to a site wrapper • Select a site to publish to on line 3 • Submit to publish

26. DBToolBox – Anatomy of a Data-driven Web Application Pulishing a connection to a site wrapper • Enter the label to appear on the site navigation bar • Select the frame in which the connection should run when the label is clicked on in the site navigation panel (almost always “contents”)

27. DBToolBox – Anatomy of a Data-driven Web Application Site Wrapper • Use “Manage Sites” to add additional links to site navigation panel • Click on site “Properties” button to edit • Add labels and URLs as needed to external pages • Use “Move to Top” to change order of labels in navigation panel

28. DBToolBox – Anatomy of a Data-driven Web Application • Open Site & Testhttp://www.princeton.edu/usite/LnLDemo • Click on “Register” to register • Click on “Register” again to review and edit your registration information

29. DBToolBox – Anatomy of a Data-driven Web Application DBToolBox Helphttp://www.princeton.edu/dbtoolbox • Click on Help Button for online help • Go to Discussion Board to review threads • Refer to sample projects to see the anatomy of other applications

30. DBToolBox – Anatomy of a Data-driven Web Application Thank You for Attending!http://www.princeton.edu/dbtoolbox • Administrator: George Fleming • Fleming@princeton.edu • 258-5065 • Web Services Group, OIT