Post on 18-Jan-2018
description
January 27, 2001 ASP Basics 1
Active Server Pages (ASP)Basics
• The client/server model• Objects• Forms• Active Server Pages• VBScript• Lab and Homework
January 27, 2001 ASP Basics 2
Client Server Architecture
CLIENT SERVER
Cook
4) Gets order from waiter5) Gets recipe6) Gets ingredients from refrigerator7) Prepares food8) Sends food to waiter
Order
Waiter2) Receives order3) Sends order to cook
9) Gets food from cook10) Sets food on table
Customer1) Orders food
11) Eats food
Food
January 27, 2001 ASP Basics 3
Client Server Architecture
Web ServerRequest
Response
User1) Enters a form 4) Gets request from client
5) Retrieves ASP page6) Gets data from database7) Creates HTML8) Sends HTML to client
11) Reads page
Brinkster.com2) Receives user input3) Sends HTTP message to server
9) Gets HTML from server10) Displays page on screen
Web Browser
Internet Explorer
CLIENTSERVER
January 27, 2001 ASP Basics 4
A Web-Based Application
ASP Pages
Web Server(Brinkster.com)
Web page request
Response (HTML)Web Browser
(Internet Explorer)
Project User
Web Page
Project DatabaseQueries/Updates
Data
January 27, 2001 ASP Basics 5
myform.html
• Uses <FORM> tag• Uses all types of input
• Links to myform.html
myecho.asp
• ACTION="myecho.asp"
• Gets form data• Redisplays data
Your First ASP Application
default.asp
• Your home page• Has simple greeting
• Links to myform.html
January 27, 2001 ASP Basics 6
First - A Word About Objects• An object is a named thing
• Has properties (attributes) that describe the object– Property is like a variable which is assigned a value– Height = 6 feet, Weight = 200 pounds
• Has methods – Behavior or operation - what the object do– Functions performed by the object
• Has collections– A collection of like things that are retrievable by name
• ASP objects we will be using include:– request -- the object received from the client– response -- the object sent to the client
• Uses “dot notation”– request.form -- the collection of fields submitted from a form– response.write -- a method which writes HTML
January 27, 2001 ASP Basics 7
An Object
Methods
PropertiesCollections
Name:__________Type:__________
Type: HumanName: Pat
pat.haircolor
pat.eat
pat.genes
January 27, 2001 ASP Basics 8
<FORM METHOD="POST" ACTION="myaspfile.asp">
</FORM>
The Form Tag
<INPUT …>
<SELECT …>
</SELECT>
<TEXTAREA …>
</TEXTAREA>
• Identifies the ASP file which will process it• Used to delineate form data
Type of input fields
• You can intersperse HTML between form tags
January 27, 2001 ASP Basics 9
The <INPUT …> Tag
<INPUT TYPE="type" NAME="fieldname" VALUE="fieldvalue" … >
• Announces: "Here comes some input data"
• Describes the type of data being sent• TEXT• PASSWORD• HIDDEN• FILE• CHECKBOX
• RADIO• RESET• SUBMIT• IMAGE• BUTTON
• Identifies the fieldname and value
• TEXT attributes: SIZE="n" MAXLENGTH="n"
• Some types have special attributes
• IMAGE attribute: SRC="imagefilename"
• RADIO and CHECKBOX: CHECKED
January 27, 2001 ASP Basics 10
<SELECT …> and <TEXTAREA …> Tags
• SELECT tag provides a list of options to select from
<SELECT NAME="shirtsize" MULTIPLE SIZE=3>
</SELECT>
<OPTION VALUE="s">Small
<OPTION VALUE="l">Large<OPTION VALUE="m">Medium
• Example:
• TEXTAREA tag provides multiple line text input
<TEXTAREA NAME="mytextarea" COLS=40 ROWS=6></TEXTAREA>
• Example:
January 27, 2001 ASP Basics 11
Example Form Using INPUT, SELECT, and TEXTAREA Tags
January 27, 2001 ASP Basics 12
myform.html (First Part)<HTML><HEAD><Title>FORM Tag Example</TITLE></HEAD><BODY><FORM>
<TABLE BORDER=1 BORDERCOLOR=blue CELLPADDING=4 CELLSPACING=4><TR> <TD COLSPAN=3 ALIGN=CENTER><B><FONT SIZE=+2>Examples of INPUT TYPES</FONT></TR>
<TR> <TD>SUBMIT: <INPUT TYPE=SUBMIT NAME=field1 VALUE="My Submit"> <TD VALIGN=CENTER>IMAGE: <INPUT TYPE=IMAGE NAME=field2 SRC="pat1.jpg" ALIGN=ABSMIDDLE> <TD>BUTTON: <INPUT TYPE=BUTTON NAME=field3 VALUE="My Button"></TR>
<TR> <TD>RESET: <INPUT TYPE=RESET NAME=field4 VALUE="My Reset" ALIGN=ABSMIDDLE> <TD COLSPAN=2> </TR>
<TR> <TD>TEXT: <INPUT TYPE=TEXT NAME=field5 VALUE="My Default" SIZE=11> <TD>PASSWORD: <INPUT TYPE=PASSWORD NAME=field6 VALUE="nonenone" SIZE=8> <TD>HIDDEN: <INPUT TYPE=HIDDEN NAME=field7 VALUE="Boo!"></TR>
January 27, 2001 ASP Basics 13
myform.html (Second Part)<TR><TD COLSPAN=3>FILE: <INPUT TYPE=FILE NAME=field8 VALUE="myfilename"></TR>
<TR> <TD>RADIO: <INPUT TYPE=RADIO NAME=field9 VALUE="r">Red <INPUT TYPE=RADIO NAME=field9 VALUE="b">Blue <INPUT TYPE=RADIO NAME=field9 VALUE="g">Green <TD COLSPAN=2>CHECKBOX: <INPUT TYPE= CHECKBOX NAME=field10 VALUE="rap">Rap <INPUT TYPE= CHECKBOX NAME=field10 VALUE="rck">Rock & Roll <INPUT TYPE= CHECKBOX NAME=field10 VALUE="rnb">Rhythm & Blues</TR>
<TR> <TD COLSPAN=3 ALIGN=CENTER> </TR>
January 27, 2001 ASP Basics 14
myform.html (Third Part)
<TR> <TD COLSPAN=3 ALIGN=CENTER><P><B><FONT SIZE=+2>Examples of SELECT and TEXTAREA</FONT></TR>
<TR> <TD VALIGN=TOP>SELECT:<BR> <SELECT NAME=field11> <OPTION VALUE="s">Small <OPTION VALUE="m">Medium <OPTION VALUE="l">Large </SELECT> <TD COLSPAN=2>TEXTAREA:<BR><TEXTAREA NAME=mytextarea COLS=40 ROWS=6></TEXTAREA></TR>
</TABLE></FORM></BODY></HTML>
January 27, 2001 ASP Basics 15
Active Server Pages (ASP)• Active server page is dynamic
• Like the cook -- depending on the order and the recipe, the ASP prepares food (HTML)
• ASP contains program instructions (programming language)
• We will use Visual Basic Script (VBscript)
• Vbscript must be delimited:<% your script goes here %> <SCRIPT>your script goes here</SCRIPT>
January 27, 2001 ASP Basics 16
Example ASP Page<HTML><HEAD><TITLE>My first ASP Page</TITLE></HEAD><BODY><H1>My Page Heading</H1>Hello World!<P><%str = date( )response.write("Today's date is " & str)%></BODY></HTML>
January 27, 2001 ASP Basics 17
Visual Basic Script (VBScript)• Programming language
• Used in ASP pages
• Can also be used on client side
• We'll learn about:– Variable declaration– Variable types– Procedures– Built-in functions– Conditional flow (if statements)– Input/Output
January 27, 2001 ASP Basics 18
Variable Declaration
• A variable is simply a name for something• A variable is assigned, a value• You must define or declare a variable• Declaration by use:
<% str = "Hello World" %>
• Declare explicitly:<% Option Explicit %><% dim str str = "Hello World" %>
January 27, 2001 ASP Basics 19
Variable Types• String variables
<% dim strstr = "Hello World" %>
• Number variables<% dim temp, counter temp = 98.6 counter = 3%>
• Array variables<% dim names(20), pets names(1) = John pets = array("Fluffy, "Millie, _ "Thomas")%>
January 27, 2001 ASP Basics 20
sub my_subroutine (myinput1, myinput2, myoutput1) statements go hereend sub
function my_function (myinput1, myinput2) my_function = myinput1 + myinput2end function
Subroutine• Set of statements which perform a task• You define your own subroutines• Accept and optionally operate on parameters
Function• Set of statements which perform a task• Many functions provided by VBScript• Accept and optionally operate on parameters• Returns a value
Procedures
January 27, 2001 ASP Basics 21
Built-in Functions• Math functions
myinteger = int(a*b)myinteger = round(a*b)
• Date functionsmydate = date( )mytime = time( )my_date_and_time = now ( )
• String manulation functionsfound_starting_here = instr(mystring, lookfor)lower_case_string = lcase(mystring)upper_case_string = ucase(mystring)leftside = left(mystring, number_of_chars)middle_string = mid(mystring, start_here, number_of_char)
January 27, 2001 ASP Basics 22
Using Procedures
• Using a subroutinecall my_subroutine (3, 5, answer)response.write(answer)
• Using a functionif my_function(nmbr1, numbr2) > 5 then response.write("Too big")else response.write("Just right")end if
January 27, 2001 ASP Basics 23
Conditional FlowIf condition then
statement 1statement 2
end if
if condition thenstatement
else statement
end if
if condition thenstatement
elseif condition then statement
elsestatement
end if
If request.form("age") < 18 then response.write("You are a minor") response.write("<HR>")end if
Example
if request.form("age") < 18 thenresponse.write("You are a minor")
else response.write("You are not a minor")
end if
Example
if request.form("age") < 18 thenresponse.write("You are a minor")
elseif request.form("age") > 55 then response.write("You are a senior citizen")
elseresponse.write("You don't count!")end if
Example
January 27, 2001 ASP Basics 24
Input and Output
• Get input from your formmy_var = request.form("fieldname")
• Write HTMLresponse.write(mystring)
January 27, 2001 ASP Basics 25
myecho.asp (First Part)<HTML><HEAD><TITLE>Echo Form Input</TITLE></HEAD><BODY><H1>Echo Form Data</H1>This page echos back information submitted via the form defined on the page, myform.html.<HR><% On Error Resume Next 'Turn on error handling str = request.form("field1") response.write("<P>") response.write("Submit key field value is: " & str)
response.write("<BR>") str1 = request.form("field2.x") str2 = request.form("field2.y") response.write("Image field value for X is: " & str1 & "and for Y is: " & str2) if str1 then response.write("<BR>You clicked on Pat!!") end if
str = request.form("field5") response.write("<P>") response.write("You entered this text data: <B>" & str & "</B>" )
January 27, 2001 ASP Basics 26
myecho.asp (Second Part)str = request.form("field6") response.write("<BR>") response.write("My, my, here is your password for all to see: " & str)
str = request.form("field7") response.write("<BR>") response.write("Here is my hidden field: " & str)
str = request.form("field8") response.write("<BR>") response.write("Here is my file name: " & str)
str1 = request.form("field9") response.write("<BR>") response.write("Here is the value returned from the radio input " & str1)
str1 = request.form("field10a") response.write("<P>") response.write("Here is the value returned from checkbox for rap: " & str1)
str1 = request.form("field10b") response.write("<BR>") response.write("Here is the value returned from checkbox for rock and roll: " & str1) str1 = request.form("field10c") response.write("<BR>") response.write("Here is the value returned from checkbox for rhythm & blues: " & str1)
January 27, 2001 ASP Basics 27
myecho.asp (Third Part)str = request.form("field11") response.write("<BR>") response.write("Here is SELECT input: " & str)
str = request.form("mytextarea") response.write("<BR>") response.write("Here is textarea input: " & str)
%>
<P>Press <A HREF="myform.html">here</A> to submit more data.
<P>Press <A HREF="/millieneorr/default.asp">here</A> to start over.
</BODY>
January 27, 2001 ASP Basics 28
Where Can I Get Help?
• Forms – http://www.mikodocs.com/
• ASP– http://www.web-savant.com/users/kathi/asp/default.htm– http://www.w3scripts.com/asp/
• VBScript:– http://msdn.microsoft.com/scripting/default.htm
• CSS– http://www.w3schools.com/
January 27, 2001 ASP Basics 29
Your Lab Files
Legend: Directory
File
Rootmyecho.asp
myform.htmlhscc_labs
default.asp
January 27, 2001 ASP Basics 30
Your Homework Assignment
• Expand your home page (default.asp)
• Update myform.html to use all form tags
• INPUT, SELECT, TEXTAREA• All types for INPUT
– TEXT RADIO– PASSWORD RESET– HIDDEN SUBMIT– FILE IMAGE– CHECKBOX BUTTON
• Beautify myform.html
• Expand myecho.asp to beautify its output