30
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, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

Embed Size (px)

DESCRIPTION

January 27, 2001ASP Basics3 Client Server Architecture Web Server Request Response User 1) Enters a form 4) Gets request from client 5) Retrieves ASP page 6) Gets data from database 7) Creates HTML 8) Sends HTML to client 11) Reads page Brinkster.com 2) Receives user input 3) Sends HTTP message to server 9) Gets HTML from server 10) Displays page on screen Web Browser Internet Explorer CLIENT SERVER

Citation preview

Page 1: January 27, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

January 27, 2001 ASP Basics 1

Active Server Pages (ASP)Basics

• The client/server model• Objects• Forms• Active Server Pages• VBScript• Lab and Homework

Page 2: January 27, 2001ASP Basics1 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

Page 3: January 27, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

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

Page 4: January 27, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

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

Page 5: January 27, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

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

Page 6: January 27, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

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

Page 7: January 27, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

January 27, 2001 ASP Basics 7

An Object

Methods

PropertiesCollections

Name:__________Type:__________

Type: HumanName: Pat

pat.haircolor

pat.eat

pat.genes

Page 8: January 27, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

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

Page 9: January 27, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

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

Page 10: January 27, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

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:

Page 11: January 27, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

January 27, 2001 ASP Basics 11

Example Form Using INPUT, SELECT, and TEXTAREA Tags

Page 12: January 27, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

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>&nbsp;</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>

Page 13: January 27, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

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>&nbsp;</TR>

Page 14: January 27, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

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>

Page 15: January 27, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

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>

Page 16: January 27, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

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>

Page 17: January 27, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

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

Page 18: January 27, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

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" %>

Page 19: January 27, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

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")%>

Page 20: January 27, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

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

Page 21: January 27, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

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)

Page 22: January 27, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

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

Page 23: January 27, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

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

Page 24: January 27, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

January 27, 2001 ASP Basics 24

Input and Output

• Get input from your formmy_var = request.form("fieldname")

• Write HTMLresponse.write(mystring)

Page 25: January 27, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

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>" )

Page 26: January 27, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

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)

Page 27: January 27, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

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>

Page 28: January 27, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

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/

Page 29: January 27, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

January 27, 2001 ASP Basics 29

Your Lab Files

Legend: Directory

File

Rootmyecho.asp

myform.htmlhscc_labs

default.asp

Page 30: January 27, 2001ASP Basics1 Active Server Pages (ASP) Basics The client/server model Objects Forms Active Server Pages VBScript Lab and Homework

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