300 likes | 407 Vues
Active Server Pages (ASP) Basics. The client/server model Objects Forms Active Server Pages VBScript Lab and Homework. CLIENT. SERVER. Waiter. Customer. 2) Receives order 3) Sends order to cook. 1) Orders food. 11) Eats food. 9) Gets food from cook
E N D
Active Server Pages (ASP)Basics • The client/server model • Objects • Forms • Active Server Pages • VBScript • Lab and Homework ASP Basics
CLIENT SERVER Waiter Customer 2) Receives order 3) Sends order to cook 1) Orders food 11) Eats food 9) Gets food from cook 10) Sets food on table Client Server Architecture Order Food Cook 4) Gets order from waiter 5) Gets recipe 6) Gets ingredients from refrigerator 7) Prepares food 8) Sends food to waiter ASP Basics
User Client Server Architecture CLIENT SERVER Web Browser Request Web Server Response Internet Explorer Brinkster.com 2) Receives user input 3) Sends HTTP message to server 4) Gets request from client 5) Retrieves ASP page 6) Gets data from database 7) Creates HTML 8) Sends HTML to client 1) Enters a form 11) Reads page 9) Gets HTML from server 10) Displays page on screen ASP Basics
Queries/Updates Project Database Web page request Web Browser Web Server (Brinkster.com) Data Response (HTML) (Internet Explorer) Web Page Project User ASP Pages A Web-Based Application ASP Basics
myform.html myecho.asp • Gets form data • Redisplays data • Uses <FORM> tag • Uses all types of input • Links to myform.html • Links to myform.html • ACTION="myecho.asp" Your First ASP Application default.asp • Your home page • Has simple greeting ASP Basics
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 First - A Word About Objects ASP Basics
Type:__________ Properties Name:__________ Type: Human Name: Pat Methods Collections An Object pat.haircolor pat.genes pat.eat ASP Basics
<FORM METHOD="POST" ACTION="myaspfile.asp"> <SELECT …> </SELECT> Type of input fields <TEXTAREA …> </TEXTAREA> </FORM> The Form Tag • Used to delineate form data • Identifies the ASP file which will process it <INPUT …> • You can intersperse HTML between form tags ASP Basics
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 • Some types have special attributes • TEXT attributes: SIZE="n" MAXLENGTH="n" • RADIO and CHECKBOX: CHECKED • IMAGE attribute: SRC="imagefilename" The <INPUT …> Tag <INPUT TYPE="type" NAME="fieldname" VALUE="fieldvalue" … > ASP Basics
<SELECT NAME="shirtsize" MULTIPLE SIZE=3> <OPTION VALUE="s">Small <OPTION VALUE="m">Medium <OPTION VALUE="l">Large </SELECT> <SELECT …> and <TEXTAREA …> Tags • SELECT tag provides a list of options to select from • Example: • TEXTAREA tag provides multiple line text input • Example: <TEXTAREA NAME="mytextarea" COLS=40 ROWS=6></TEXTAREA> ASP Basics
Example Form Using INPUT, SELECT, and TEXTAREA Tags ASP Basics
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> ASP Basics
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> ASP Basics
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> ASP Basics
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> ASP Basics
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> ASP Basics
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 ASP Basics
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" %> ASP Basics
Variable Types • String variables <% dim str str = "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") %> ASP Basics
Procedures • Subroutine • Set of statements which perform a task • You define your own subroutines • Accept and optionally operate on parameters sub my_subroutine (myinput1, myinput2, myoutput1) statements go here end sub • Function • Set of statements which perform a task • Many functions provided by VBScript • Accept and optionally operate on parameters • Returns a value function my_function (myinput1, myinput2) my_function = myinput1 + myinput2 end function ASP Basics
Built-in Functions • Math functions myinteger =int(a*b) myinteger =round(a*b) • Date functions mydate =date( ) mytime =time( ) my_date_and_time =now( ) • String manulation functions found_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) ASP Basics
Using Procedures • Using a subroutine call my_subroutine (3, 5, answer) response.write(answer) • Using a function if my_function(nmbr1, numbr2) > 5 then response.write("Too big") else response.write("Just right") end if ASP Basics
Example If request.form("age") < 18 then response.write("You are a minor") response.write("<HR>") end if • if request.form("age") < 18 then • response.write("You are a minor") • else • response.write("You are not a minor") • end if Example • if request.form("age") < 18 then • response.write("You are a minor") • elseif request.form("age") > 55 then • response.write("You are a senior citizen") • else • response.write("You don't count!") • end if Example Conditional Flow • If condition then • statement 1 • statement 2 • end if • if condition then • statement • else • statement • end if • if condition then • statement • elseif condition then • statement • else • statement • end if ASP Basics
Input and Output • Get input from your form my_var = request.form("fieldname") • Write HTML response.write(mystring) ASP Basics
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>" ) ASP Basics
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) ASP Basics
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> ASP Basics
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/ ASP Basics
Root default.asp myecho.asp hscc_labs myform.html Your Lab Files Legend: Directory File ASP Basics
Your Homework Assignment • Expand your home page (default.asp) • Update myform.html to use all form tags • INPUT, SELECT, TEXTAREA • All types for INPUT • TEXTRADIO • PASSWORDRESET • HIDDEN SUBMIT • FILE IMAGE • CHECKBOX BUTTON • Beautify myform.html • Expand myecho.asp to beautify its output ASP Basics