Standard Web Page Processing

1
Standard Web Page Processing
www.someeserver.com/index.html
1. Browser sends request for page
Request
2. Web server finds the page in the web root
directory
wwwroot index.html page2.html page3.html otherpag
e.html
Client Browser
Web Server
Response
4. Browser receives HTML document and follows the
instructions (tags) to format the document and
display
3. HTML document sent to browser in response
 
2
Standard Web Page Construction
HTML Document is a combination of pure text and
tags. The tags tell the browser how to format
the text
Standard HTML Documents are STATIC the server
sends the exact same page to every browser every
time that page is requested
This is not so great for eCommerce application
which require dynamic interactions between the
server and the client browser.
3
BASIC HTML TAGS
ltHTMLgt ltHEADgt ltTITLEgt A Simple HTML Example
lt/TITLEgt lt/HEADgt ltBODYgt ltH1gtHTML is Easy to
Learnlt/H1gt ltPgt This is the first paragraph.
While it is short, it is still a paragraph.
lt/Pgt lt/BODYgt lt/HTMLgt
A Simple HTML Example
HTML is Easy to Learn This is the first
paragraph. While it is short, it is still a
paragraph.
NOTE HOW MOST TAGS COME IN PAIRS ltXXgt ..
lt/XXgt CASE DOES NOT MATTER IN THE TAGS.
4
HTML TAGS
ltH1gt . lt/H1gt
INDICATES A HEADING - LEVELS CAN BE 1 TO 6 - EACH
TYPE GIVES YOU A DIFFERENT SIZE AND EMPHASIS
WITH 1 BEING THE BIGGEST. EXACTLY HOW IT WILL
BE DISPLAYED DEPENDS ON HOW THE RECEIVING BROWSER
IS SET UP TO DISPLAY HEADINGS. HEADINGS ARE
DISPLAYED ON A SEPARATE LINE WITH SPACE ABOVE AND
BELOW.
LINES - HORIZONTAL RULE TAG
ltHR ALIGNCENTER SIZE4gt
LINE OCCUPIES THE ENTIRE WIDTH OF THE BROWSER
WINDOW. SIZE CONTROLS THE THICKNESS OF THE LINE
5
ALIGNING INFORMATION
ltPgt . lt/Pgt
TEXT WITHIN THESE TAGS IS WRAPPED WITHIN THE SIZE
OF THE BROWSER WINDOW. ALL EXTRA BLANKS ARE
IGNORED. TEXT ON SEPARATE LINES IF MERGED WITHOUT
ANY LINE BREAKS. THE ltPgt CAUSES THE BROWSER TO
SKIP TO A NEW LINE
OPTIONS - ltP ALIGNLEFTgt ltP ALIGNCENTERgt ltP
ALIGNRIGHTgt
ltCENTERgt . lt/CENTERgt
CENTERS THE INFORMATION BETWEEN THE ltCENTERgt AND
lt/CENTERgt TAGS. THE ITEMS ARE KEPT IN THE CENTER
OF THE BROWSER WINDOW EVEN AS THE USER CHANGES
THE SIZE OF THE WINDOW
6
LISTS
UNORDERED LISTS
ORDERED LISTS
ltULgt ltLIgt First Item ltLIgt Second Item ltLIgt Third
Item lt/ULgt
ltOLgt ltLIgt First Item ltLIgt Second Item ltLIgt Third
Item lt/OLgt

• First Item
• Second Item
• Third Item

1. First Item 2. Second Item 3. Third Item
LINE BREAKS - FORCES BROWSER TO GO TO THE NEXT
LINE NOTE - THERE IS NO lt/BRgt
Some Name Street Address City, State, Zip
Some Name ltBRgt Street Address ltBRgt City, State,
Zip ltBRgt
7
CHARACTER FORMATTING
ltBgt lt/Bgt ltIgt lt/Igt ltUgt lt/Ugt
BOLD ITALIC UNDERLINE
ltFONT SIZE2 FACEArial COLORFFFFFFgt Text
to be formatted lt/FONTgt
SIZE CAN BE AN ACTUAL NUMBER (POINT SIZE) OR CAN
BE A RELATIVE NUMBER OR - FROM THE BROWSERS
DEFAULT SIZE. THUS 2 MEANS TWO POINTS BIGGER
THAN THE DEFAULT TEXT SIZE.
IMAGES - THE IMG SRC TAG
ltIMG SRCsomefile.gifgt
8
LINKS
EXTERNAL LINK - DIFFERENT HTTP SERVER
ltA HREFhttp//www.cob.ohiou.edugt The College
of businesslt/Agt
The College of Business
More is available at ltA HREFhttp//www.cob.ohiou
.edugt The College of Businesslt/Agt web site
More is available at The College of Business web
site.
LINKS TO PAGES IN SAME DIRECTORY
ltA HREFotherpage.htmlgtLink to another pagelt/Agt
Link to another page
MAILTO LINK
ltA HREF mailtosomebody_at_oak.cats.ohiou.edugt som
ebody_at_oak.cats.ohiou.edult/Agt
somebody_at_oak.cats.ohiou.edu
9
TABLES
ltTABLE BORDER1gt ltTRgt ltTHgt C1 Heading lt/THgt ltTHgt
C2 Heading lt/THgt lt/TRgt ltTRgt ltTDgt Row1 Col1
lt/TDgt ltTDgt Row1 Col2 lt/TDgt lt/TRgt ltTRgt ltTDgt Row2
Col1 lt/TDgt ltTDgt Row2 Col2 lt/TDgt lt/TRgt lt/TABLEgt
C1 Heading C2 Heading Row1 Col1
Row1 Col2 Row2 Col1 Row2 Col2
ANYTHING CAN BE PUT INTO A TABLE CELL -
PARAGRAPHS, LISTS, IMAGES, LINKS, ETC TABLES ARE
THE WAY TO PLACE THINGS SIDE-BY-SIDE ON A WEB
PAGE.
10
ANOTHER TABLE EXAMPLE
ltTABLE BORDER1gt ltTRgt ltTD VALIGNTOPgtRow1
Col1lt/TDgt ltTD ALIGNCENTERgt ltIMG
SRCsomefile.gifgtlt/TDgt lt/TRgt ltTRgt ltTD
ALIGNLEFTgt ltULgtltLIgtFirstltLIgtSecondltLIgtThirdlt/ULgtlt
/TDgt ltTD VALIGNCENTERgtRow2 Col2lt/TDgt lt/TRgt lt/TABL
Egt
Row1 Col1 First Second Row2
Col2 Third
11
FORMS
The primary mechanism for creating dynamic,
interactive web pages is the ability to create
forms on a web page to obtain input from the user.
ltFORM METHODPOST ACTION"echo.asp"gt Text and
tags to build the form go here lt/FORMgt
The primary mechanism for creating dynamic,
interactive web pages is the ability to create
forms on a web page to obtain input from the
user. This form is sent to a program called
echo.asp and it is assumed that this file will be
in the same directory that contains the form html
document
12
A VERY BASIC FORM
ltHTMLgt ltHEADgtltTITLEgtForm Samplelt/TITLEgtlt/HEADgt ltBO
DYgt ltFORM METHODPOST ACTION"echo.asp"gt
ltPgtYour Name ltINPUT TYPETEXT
NAME"name"gt ltPgtltINPUT TYPESUBMIT VALUE"Submit
Form"gt ltINPUT TYPERESET VALUE"Reset Form"gt
lt/FORMgt lt/BODYgt lt/HTMLgt
test name
This is what will be sent to the server in the
Request object as part of the Form Collection
when the user clicks the Submit Form
button nametestname This field and
corresponding value can then be retrieved from
the Request object by the echo.asp program
referred to by the form
13
Form Processing
The Request object includess the form collection
which contains the data from the form
3. User fills in form and clicks on the Submit
button. Form data is sent to the server with the
Request
Request Object
4. Form indicates that echo.asp should process
the incoming request
nametestname
test name
wwwroot form.html echo.asp
2. Browser displays form to user.
Client Browser
Web Server
Response Object
Note how the original form.html is in the same
directory as echo.asp
ltHTMLgt ltHEADgtltTITLEgtForm Samplelt/TITLEgtlt/HEADgt ltBO
DYgt ltFORM METHODPOST ACTION"echo.asp"gt ltPgtYour
Name ltINPUT TYPETEXT NAME"name"gt ltPgtltINPUT
TYPESUBMIT VALUE"Submit Form"gt ltINPUT
TYPERESET VALUE"Reset Form"gt lt/FORMgt lt/BODYgt lt
/HTMLgt
1. HTML document with form is sent to browser in
response
 
14
FORM TAGS
Hidden field not displayed
ltINPUT TYPEHIDDEN NAME"hname" VALUE"hvalue" gt
ltINPUT TYPETEXT SIZE50 MAXLENGTH50
NAME"name"gt ltINPUT TYPEPASSWORD
NAME"password"gt ltTEXTAREA NAME"describe"
ROWS5 COLS35gtlt/TEXTAREAgt ltINPUT TYPESUBMIT
VALUE"Submit Form"gt ltINPUT TYPERESET
VALUE"Reset Form"gt ltSELECT NAME"food"gt
ltOPTION gt Italian ltOPTIONgt Chinese
lt/SELECTgt ltINPUT TYPERADIO NAME"sex"
VALUE"male"gtmale ltINPUT TYPERADIO NAME"sex"
VALUE"female"gtfemale ltINPUT TYPECHECKBOX
NAMEVB VALUE"Yes"gtVisual BasicltBRgt ltINPUT
TYPECHECKBOX NAMEJava VALUE"Yes"gtJavaltBRgt ltINPU
T TYPECHECKBOX NAMEHTML VALUE"Yes"gtHTMLltBRgt
Note how every tag has a NAME. VALUE is used to
create a default value or when you have fields
(radio buttons and check boxes) where a user does
not make an entry.
Name must be the same on all options
15
A MORE COMPLEX FORM
ltFORM METHODPOST ACTION"echo.asp"gt ltINPUT
TYPEHIDDEN NAME"author" VALUE"none" gt ltPgtYour
Name ltINPUT TYPETEXT SIZE50 MAXLENGTH50
NAME"name"gt ltPgtPasswordltINPUT TYPEPASSWORD
NAME"password"gt ltPgtFood you like (you may
select more than one) ltSELECT NAME"food"gt
ltOPTION gt Italian ltOPTIONgt Chinese ltOPTIONgt
French ltOPTIONgt German lt/SELECTgt ltPgtWhy do you
like the foods you've selected? ltPgtltTEXTAREA
NAME"describe" ROWS5 COLS35gtlt/TEXTAREAgtltBRgt ltP
gtPlease indicate your gender ltINPUT TYPERADIO
NAME"sex" VALUE"male"gtmale ltINPUT TYPERADIO
NAME"sex" VALUE"female"gtfemale ltPgtPlease
indicate programming tools that you
useltBRgt ltINPUT TYPECHECKBOX NAMEVB
VALUE"Yes"gtVisual BasicltBRgt ltINPUT TYPECHECKBOX
NAMEJava VALUE"Yes"gtJavaltBRgt ltINPUT
TYPECHECKBOX NAMEHTML VALUE"Yes"gtHTMLltBRgt ltPgtlt
INPUT TYPESUBMIT VALUE"Submit Form"gt
ltINPUT TYPERESET VALUE"Reset Form"gt lt/FORMgt
16
THE FORM COLLECTION
ltFORM METHODPOST ACTION"echo.asp"gt ltINPUT
TYPEHIDDEN NAME"author" VALUE"none" gt ltPgtYour
Name ltINPUT TYPETEXT SIZE50 MAXLENGTH50
NAME"name"gt ltPgtPasswordltINPUT TYPEPASSWORD
NAME"password"gt ltPgtFood you like (you may
select more than one) ltSELECT NAME"food"gt
ltOPTION gt Italian ltOPTIONgt Chinese ltOPTIONgt
French ltOPTIONgt German lt/SELECTgt ltPgtWhy do you
like the foods you've selected? ltPgtltTEXTAREA
NAME"describe" ROWS5 COLS35gtlt/TEXTAREAgtltBRgt ltP
gtPlease indicate your gender ltINPUT TYPERADIO
NAME"sex" VALUE"male"gtmale ltINPUT TYPERADIO
NAME"sex" VALUE"female"gtfemale ltPgtPlease
indicate programming tools that you
useltBRgt ltINPUT TYPECHECKBOX NAMEVB
VALUE"Yes"gtVisual BasicltBRgt ltINPUT TYPECHECKBOX
NAMEJava VALUE"Yes"gtJavaltBRgt ltINPUT
TYPECHECKBOX NAMEHTML VALUE"Yes"gtHTMLltBRgt ltPgtlt
INPUT TYPESUBMIT VALUE"Submit Form"gt
ltINPUT TYPERESET VALUE"Reset Form"gt lt/FORMgt
Red variable name, Blue contents of variables
Response Object Form Collection
authornonenameJoeSmithpasswordxxxxxxxxfood
ChinesedescribeBecausesexmaleVBYesJavaYes
Note that separates fields and represents a
blank space
17
REQUEST AND RESPONSE
Echo.asp
Request Object
lt Option Explicit Dim strName strNameRequest.F
orm("name") gt ltHTMLgt ltBODYgt ltH1gtResultslt/H1gt
lt Response.Write "Name" strName
gt lt/BODYgt lt/HTMLgt
The request object contain information sent from
the browser to the server. This includes the
form collection
Response Object
The response object is a web page that is built
by the asp program using a combination of HTML
and VBScript that is ultimately sent to the
browser
18
ASP ELEMENTS
ASP is a mixture of HTML and VBScript. Each
piece of VBScript must be enclosed between lt and
gt to tell the web server that it is to be
processed rather than sent to the browser as part
of the response web page. VBScript does not use
different types of variables all are variants.
To help you keep your variables self-documenting,
use the normal VB prefixes str string int intege
r lng long bln boolean sng single dbl double Use
Option Explicit to have ASP track your variable
names to catch misspellings Dim is used to
declare a variable just like in VB (but with no
data type indicated)
19
REQUEST.FORM
Note how you can go back and forth between HTML
and VBScript in the ASP program The VBScript
segment where Option Explicit appears must be
above the ltHTMLgt tag
lt Option Explicit Dim strName strNameRequest.F
orm("name") gt ltHTMLgt ltBODYgt ltH1gtResultslt/H1gt
lt Response.Write "Name" strName
gt lt/BODYgt lt/HTMLgt
To access a field in the Form Collection, use the
Form property of the Request Object Request.Form(
"fieldname") fieldname must match exactly with
the name of the field as it was created on the
form (including capitalization)
ltPgtYour Name ltINPUT TYPETEXT SIZE50
MAXLENGTH50 NAME"name"gt
authornonenameJoeSmithpasswordxxxxxxxxfood
ChinesedescribeBecausesexmaleVBYesJavaYes
20
RESPONSE OBJECT
lt Option Explicit Dim strName strNameRequest.For
m("name") gt ltHTMLgt ltBODYgt ltH1gtResultslt/H1gt lt
Response.Write "Name" strName
gt lt/BODYgt lt/HTMLgt
authornonenameJoeSmithpasswordxxxxxxxxfood
ChinesedescribeBecausesexmaleVBYesJavaYes
strName
Joe Smith
The Write method of the Response object can be
used to put content into the Response object from
within the VBScript
Response Object
ltHTMLgt ltBODYgt ltH1gtResultslt/H1gt NameTest
Name lt/BODYgt lt/HTMLgt
The Response Object is basically a buffer where
the source of a web page is built and sent on to
the browser. Any HTML in the ASP program simply
goes right into the response. The VBScript is
processed and does not go into the Response
object.
21
RESPONSE OBJECT BUFFERING
Tells ASP to buffer the contents of Response
Object. Without this, each line written to the
Response Object is immediately sent to the browser
Like Option Explicit, the buffer must be set
before the ltHTMLgt tag
lt Response.buffertrue gt ltHTMLgt ltBODYgt ltCENTERgt
ltH1gtForm field displaylt/H1gtlt/CENTERgt lt if
IsEmpty(Request("author")) then response.clear
response.write "Error" response.end end if
gt ltPgtltIgtThat's all. lt/HTMLgt
Response Object Buffer
ltHTMLgt ltBODYgt ltCENTERgtltH1gtForm field
displaylt/H1gtlt/CENTERgt
If the author field is not present,
response.clear deletes everything currently in
the buffer which creates a new blank Response
Object
Error
Response.end sends the buffer to the client and
the rest of the html is ignored since the
Response object is already sent
ltHTMLgt ltBODYgt ltCENTERgtltH1gtForm field
displaylt/H1gtlt/CENTERgt ltPgtltIgtThat's all. lt/HTMLgt
If the author field is present in the form
collection, the buffer is never cleared and the
page will look like this. When ASP reaches the
end, the buffer is sent with an implied
response.end
22
ANOTHER VERSION OF ECHO.ASP
lt Response.buffertrue gt ltHTMLgt ltBODYgt ltCENTERgt
ltH1gtForm field displaylt/H1gtlt/CENTERgt This simple
Active Server Pages script displays any form
fields found in the Request objectltPgt lt if
IsEmpty(Request("author")) then response.clear
response.write "This Active Server Page only
works when called " response.write "by a web
page containing a form field called 'author'"
response.write "ltBRgtltBRgtPlease use the 'BACK'
button " response.write "to return to your
previous page." response.end end if for
each field In Request.Form response.write
field " " Request.form(field) "ltbrgt"
next gt ltPgtltIgtThat's all. Please check to asure
that all the fields you thought were submitted
are, in fact, listed. lt/Igt lt/HTMLgt
This version checks the Form Collection for a
field called "author". On our form we will
create a hidden field with this name (see Slide
15). Echo.asp will check to make sure this field
is present on the form. If not, the buffer is
cleared and an error message is displayed. The
hidden field acts as a security feature to
prevent other web pages from using echo.asp if
they don't include an author field
23
LOOPING THROUGH THE FORM COLLECTION
for each field In Request.Form response.write
field " " Request.form(field) "ltbrgt"
next
Response Object Form Collection
authornonenameJoeSmithpasswordxxxxxxxxfood
ChinesedescribeBecausesexmaleVBYesJavaYes
Each variable/value pair in the form collection
(separated by ) is called a field This loop
goes through all the fields in the form
collection and stops when there are no more
fields left Each time through the loop we put a
line into the Response buffer that displays the
name of the field, an equal sign, the contents
of the field and a ltbrgt tag to move to the next
line Note how this loop does not even know how
many fields will come to it from the requesting
form via the form collection.
24
THE RESULTS
Note how the loop goes through each field and the
ltbrgt tag puts each field on a separate line.
Note how the author field appears in the output
but it does not appear on the form since it was
set up as a hidden field on the form. The hidden
field is still sent to the ASP program as part of
the form collection
25
WITHOUT THE AUTHOR FIELD
lt Response.buffertrue gt ltHTMLgt ltBODYgt ltCENTERgt
ltH1gtForm field displaylt/H1gtlt/CENTERgt This simple
Active Server Pages script displays any form
fields found in the Request objectltPgt lt if
IsEmpty(Request("author")) then response.clear
response.write "This Active Server Page only
works when called " response.write "by a web
page containing a form field called 'author'"
response.write "ltBRgtltBRgtPlease use the 'BACK'
button " response.write "to return to your
previous page." response.end end if for
each field In Request.Form response.write
field " " Request.form(field) "ltbrgt"
next gt ltPgtltIgtThat's all. Please check to asure
that all the fields you thought were submitted
are, in fact, listed. lt/Igt lt/HTMLgt
Here is what you get if your form did not contain
a field called author
26
YOUR CLASS ASP ACCOUNT
You will be assigned an account on the COBCLASS
web server where you can create your own web
pages and ASP programs. Once you receive your
account number (often posted with the grade
sheet) and your password, go to the following URL
and follow the instructions to enter your name on
your account and change your password http//cob
class.cob.ohiou.edu You will need to use FTP to
transfer all your html and asp files into your
account. Instructions for using FTP appear with
the instructions above for setting up your
account. Use your username and password to
access your account in FTP Do a CHDIR and go to
the /sys directory Then double-click the
directory that matches your username (eg
SYS150) In your account, all web pages and asp
files need to go into the public_html directory
custform.html echo.asp
Then to reach one of your html documents (eg.
custform.html) in your account the URL would
be cobclass.cob.ohiou.edu/sys/sys/public_html
/custform.html Where sys would be your
account (eg sys150)
27
Visual InterDev
The MIS labs contain Microsoft Visual InterDev
which is useful in creating html and asp
documents. The editor understands both HTML and
ASP and can help you eliminate syntax
errors. Use the File, Open File option to edit
your files as opposed to Open Project. Note how
the tags in the HTML source to the right are
color coded. The HTML menu lets you insert
tags as well. The Design and Quick View tabs at
the bottom can be used to see how the page is
going to look in the browser (see next page)
28
Visual InterDev
Here is what the Design view will give you
29
Visual InterDev
When editing asp, the editor recognizes the
objects in asp like response and request and will
automatically bring up lists of available
properties as occurs in visual basic. Note how
asp elements such as the lt and gt script tags
are color-coded to help you see if they are all
there ASP program elements like if, then, end
if are also color coded to help you read the
code. You cannot see if your ASP functions in
Visual InterDev. You can only test it by FTPing
it to the server and trying it out
30
Assignment 9
To begin the design of a prototype for the Xtreme
Xcitement system, we are going to develop some
forms and ASP programs for the customer
registration part of the system. Ultimately we
want to design a prototype that will interact
with customer information in a table in an Oracle
database. From the scenario of the XX system
in Assignment 8, we found out that the customer
entity needed to contain customer information
including their name, address (street, city,
state, zip), phone and email. For tracking
purposes we assign them a customer code. Design
a form that contains the following
fields author hidden name type code text street t
ext city text state select zip text phone text ema
il text The class web site has a file called
States.txt containing the code for a SELECT box
with all 50 states for you to include in your web
page. Create the Echo.asp program and put it and
the form in the public_html directory of your
class ASP account. Turn in a copy of your form
html source, the source of your ASP program, a
printout from a browser of your form and of the
results displayed by your echo.asp. The
instructor will also be checking your program
online.
Make the form post its information to echo.asp
and include a submit and a reset button Your
form should be in a file called custform.html and
your asp program should be called echo.asp