June 22, 2002The Winning Way!1 The Winning Way Seattle Orlando

June 22, 2002 The Winning Way! 1

The Winning Way Seattle

Orlando


Topics

• Team roles and responsibilities

• Application requirements

• Our approach– What to do when

– Who does what

– Productivity tips

– Our solution architecture


Application Requirements

• Maintain a database

• Use forms

• Use Cascading Style Sheets

• Display data from your database


Our Overall Strategy

• Have consistency across the application

• Use standard components/design we have provided in class

• Use the same architecture for each page

• KISS - Keep It Simple, Stupid!


Team Roles

• Designer• Draw web site architecture

• Draw web page architecture

• Review architecture with team

• Review sit/pages for architecture compliance

• Database Administrator• Using Access, define databases, tables, and fields

• Place database in project db directory

• Create 4-5 test records

• Validate database maintenance operations

• Developers (2)• Review web site and web page architectures

• Implement ASP

• Solicit/integrate components

• Team Leader• Guide review of problem statement

• Insure team understands problem statment

• Manage development schedule

• Validate implementation

• Serve as team spokesperson, "emcee"


Perform Final Validation

Our Project Development Approach- Getting the Job Done at Nationals -

Build and TestStyle Sheets

Perform Initial Validation

CompleteWeb Pages

(ASP Pages)

Build and TestFunctions/Subroutines

Build & TestSkeleton

Pages

DesignWeb Site

Design & CodeDatabase

Read/Analyze

9:00 AM 5:00 PM

Total Work To Be Done


Development Time Table

Task Leader/Performer Duration Stop

Read, analyze, discuss Team Leader 30 Min 09:30 AM

Design database Database Designer

30 Min 10:00 AM

Design web site Designer 30 Min 10:30 AM

Build & test skeleton pages

Developer(s) 30 Min 11:00 AM

Build & test subroutines

Developer(s) 2 Hours 01:00 PM

Complete web pages Developer(s) 2 Hours 03:00 PM

Perform initial validation

Team Leader 30 Min 03:30 PM

Build and test CSS CSS Expert 30 Min 04:00 PM

Perform final validation Team Leader 1 Hour 05:00 PM


Things That Will Eat Your Lunch

• Data validation

• Password validation

• Error checking

• Style

• None of these have anything to do with content

• Get your application working before dealing with these


Three Important Tips to Employ- Improving Your Productivity -

• Do NOT use default pages

• Allow directory browsing

• Use the DOS edit to find line number


Web Site and Web Page Architecture


Generic Web Site Architecture- Web Page Interaction -

Home Page Database TableManagement

Page

Add/Revise/DeleteForm

Report Page

default.asp maintain_supplier.aspsupplier.asp

supplier_report.asp


Database Management Architecture- Data Flow -

Add/Revise/DeleteForm

Report Page

Database TableManagement

Page

supplier_report.asp

maintain_supplier.asp

supplier.asp

Blank form request

report request

• Show for delete request• Show for revise request

Add/Revise/Delete Request

Supplier Table(gb_supplier)

default.asp

Database TableManagement

Page

Report Data

Form Data


Your ASP Page

Sending Information to Your ASP Page

Form

Form Data request.form("fieldname")

request.querystring("fieldname")

Form

Data in URL

Web Page

Data in URL


Sending Variable Data Via the URL

With address or anchor tag:

<A HREF="mypgm.asp">GoHere</A>

With forms using "POST"

<FORM NAME=formname METHOD="POST" ACTION="mypgm.asp">

With forms using "GET"

<FORM NAME=formname METHOD="GET" ACTION="mypgm.asp"><INPUT TYPE=TEXT NAME=fld1 VALUE="value1" SIZE=9><INPUT TYPE=TEXT NAME=fld2 VALUE="value2" SIZE=9>

In all these cases:

Resulting URL is: mypgm.asp?fld1=value1&fld2=value2

Retrieve fields using: request.querystring("fieldname")

<FORM NAME=formname METHOD="POST" ACTION="mypgm.asp?fld1=value1&fld2=value2">

<A HREF="mypgm.asp ">GoHere</A>? fld1=value1&<A HREF="mypgm.asp?fld1=value1&fld2=value2”>GoHere</A>


Final static HTML

The guts of the page

Initial static HTML

Standard ASP Page Pattern

<% Option Explicit %>

<HTML><HEAD><LINK ... ></HEAD><BODY>

</BODY>

</HTML>

<%Call GBHead()

... Page-unique material ...

Call GBFoot()%>

Page-unique functions and subroutines

Include Files


Standard ASP Page for BDPA Northwest- No Database Requirements -



Initial static HTML


</BODY>

</HTML>

<%Call GBHead()

... Page-unique material ...

Call GBFoot()%>

Page-unique functions and subroutines

Include Files

Final static HTML

head_n_foot.inc

const.inc

css.htm

Hyperlink

mytable.asp


Standard ASP Page- With Database Requirements -



Initial static HTML


</BODY>

</HTML>

<%Call GBHead()

Call GBFoot()%>

Page Unique Subroutines

Include Files

Final static HTML

css.htm

head_n_foot.inc

const.incadovbs.inc

db_procs.inc

Dependent on page requirements


Form Page Standard Layout

STANDARD HEADER

STANDARD FOOTER

• Form Explanatory Text• Form title• Brief instructions• Response area if "echoing" results of prior action

• Form Data• All visible and hidden fields• Action buttons

DeleteReviseAdd Reset


Report Page Standard Layout

STANDARD HEADER

STANDARD FOOTER

• Report request form• Show starting and ending range

Run Report

• Report Title• Report Column Headings• Report Data and Action Requests Use <TABLE> tags

Column1 Column2 Column3 ... Actionaaa 111 blah Revise Deletebbb 444 foo Revise Deleteccc 396 bar Revise Delete... ... ... Revise Deleteetc

For FieldA >= ____ and FieldA <= ____


The Dictionary Object

• A "container" containing a set of key/value pairs

• Create as a scripting object set form_fields = CreateObject(Scripting.Dictionary)

• Add to it via "add" method form_fields.add fieldname, request.form(fieldname)

• Retrieve via "For" loop For each fieldname in form_fields

oInput_rs(fieldname) = form_fields(fieldname)

Next


Database Procedures- OpenDB and AddRec -

• OpenDB(filename)• Function called with database's filename• Calls the error subroutine• Return value is a DB Connection

• Addrec(oInput_rs, oConnection, form_fields)• Adds a single record• Field values for fields comes from form_fields

oConnection

valu1 valu2 valu3 valu4oInput_rs

Addrec

form_fields

fld1

fld2

fld3

fld4

valu1

valu2

valu3

valu4

Uses

Creates


Database Procedures- ReviseRec and DeleteRec-

• Revrec(oInput_rs, oConnection, form_fields)• Revises a single record• Field values for fields comes from form_fields

oConnection

valu1 valu2 valu3 valu4oInput_rs

Addrec

form_fields

fld1

fld2

fld3

fld4

valu1

valu2

valu3

valu4

Uses

Creates

• DeleteRec(oConnection, tablename, fieldname, id)• Deletes one or more records• Deletes all records with a matching id• "id" is a value• 'fieldname" is the name of a field (doesn't have to be a key field)


maintain_<tablename>.asp-Psuedo code -

If user requested it,

Send a blank form back to the user

else, if requested via the report page,

create a form for revising or deleting a record

else, if this is an add request,

create record set

get data from the form

add record to the record set

echo back to the user what you added

else if delete request

get record id from the form

get record from database and put in record set

echo to the user, data from the about-to-be-deleted record set

delete the record

else if revise request

get data from form

get record from database and put in record set

revise record

echo back to the user, the record you revised

end if


EXTRA SLIDES


Team Exercise

• Find a partner you don't know or didn't introduce earlier

• Answer the questions:– Who or what is your:

• Hero• Favorite author• Favorite movie star• Favorite singer or musician• Most embarrassing moment


So Where's the Beef?

• What will make our web sites special?

– They will work!

– Tune in next week for "Advanced Topics"

• What will differentiate Olympia from Seattle?

– Architecture is a (common) framework

– Fleshing out web page to meet specific requirements

– Style

Documents

June 22, 2002The Winning Way!1 The Winning Way Seattle Orlando