lunch’n learn sponsored by oit academic services princeton/as/lunchnlearn.html
DESCRIPTION
Lunch’n Learn Sponsored by OIT Academic Services http://www.princeton.edu/as/lunchnlearn.html. DBToolBox http://www.princeton.edu/dbtoolbox Anatomy of a Data-driven Web Application http://www.princeton.edu/usite/LnLDemo - PowerPoint PPT PresentationTRANSCRIPT
Lunch’n LearnSponsored by OIT Academic Services
http://www.princeton.edu/as/lunchnlearn.html
DBToolBoxhttp://www.princeton.edu/dbtoolbox
Anatomy of a Data-drivenWeb Applicationhttp://www.princeton.edu/usite/LnLDemo
May 14, 2003
George FlemingOIT Web Serviceshttp://www.princeton.edu/~flemingemail: [email protected]
DBToolBox – Anatomy of a Data-driven Web Application
• Review the Creation of a Demonstration Online Registration Sitehttp://
www.princeton.edu/usite/LnLDemo
DBToolBox – Anatomy of a Data-driven Web Application
• Create Web-accessibleRegistration Web FormSet field size and field
length for each form field<input type="text" name="FirstName" value="" size=50 maxlength=50>
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
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
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
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
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
DBToolBox – Anatomy of a Data-driven Web Application
DBToolBox Connections(click on properties to view configurations)
• LnLRegistrationForm
• LnLRegistrationInsert
• LnLRegistrationInsertError
• LnLRegistrationEditForm
• LnLRegistrationUpdate
• LnLRegistrationCheck
DBToolBox – Anatomy of a Data-driven Web Application
DBToolBox ConnectionsLnLRegistrationForm• Enforces OIT NetID
authentication• Presents HTML for
Registration Form• Prepopulates field values
using DBToolBox special parameters
• Javascript for form field validation
DBToolBox – Anatomy of a Data-driven Web Application
DBToolBox ConnectionsLnLRegistrationForm• Enforces OIT NetID
authentication• All interaction is driven
by NetID• All other connections
should set security in the same way
DBToolBox – Anatomy of a Data-driven Web Application
DBToolBox Connections
LnLRegistrationInsertDatabase Property Sheet
• Accepts submission from LnLRegistrationForm
• Enter database to receive data
DBToolBox – Anatomy of a Data-driven Web Application
DBToolBox Connections
LnLRegistrationInsertQuery Edit Property 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
DBToolBox – Anatomy of a Data-driven Web Application
DBToolBox ConnectionsLnLRegistrationInsert
Format 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
DBToolBox – Anatomy of a Data-driven Web Application
DBToolBox ConnectionsLnLRegistrationInsertError
Reports error condition to customer– Database locked by
administrator
– Unpredictable SQL error
DBToolBox – Anatomy of a Data-driven Web Application
DBToolBox ConnectionsLnLRegistrationInsertError
Format Property Sheet
• Reports service outage to customer
• E-mails SQL error code and message to application administrator so that administrator can solve problem
DBToolBox – Anatomy of a Data-driven Web Application
DBToolBox ConnectionsLnLRegistrationInsert
Query Edit Property Sheet
• Connect LnLRegistrationInsertError for “Error Processing”
• Set default values for data received from form submission
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
DBToolBox – Anatomy of a Data-driven Web Application
DBToolBox Connections
LnLRegistrationEditFormQuery Edit Property Sheet
• Retreives data for customer logged in using WHERE [NetID] = ‘{=netid}’
• If none available, link to LnLRegistration form
• If error, link to LnLRegistrationInsertError
DBToolBox – Anatomy of a Data-driven Web Application
DBToolBox ConnectionsLnLRegistrationEditFor
mFormat Property Sheet
• Uses “direct data formatting” to plug data values for customer into the form
• Submissions go to LnLRegistrationUpdate
DBToolBox – Anatomy of a Data-driven Web Application
DBToolBox Connections
LnLRegistrationUpdateQuery Edit Property Sheet
• Templated from LnLRegistrationInsert
• Query configured to update customers record upon receipt of edit form submission
DBToolBox – Anatomy of a Data-driven Web Application
DBToolBox ConnectionsLnLRegistrationCheck
Front End for RegistrationQuery Edit Property 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
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
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
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
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”)
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
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
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
DBToolBox – Anatomy of a Data-driven Web Application
Thank You for Attending!http://www.princeton.edu/dbtoolbox– Administrator:
George Fleming• [email protected]
• 258-5065
• Web Services Group, OIT