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

January 27, 2001ASP Basics2 Client Server Architecture CLIENTSERVER Cook 4) Gets order from waiter 5) Gets recipe 6) Gets ingredients from refrigerator 7) Prepares food 8) Sends food to waiter Order Waiter 2) Receives order 3) Sends order to cook 9) Gets food from cook 10) Sets food on table Customer 1) Orders food 11) Eats food Food

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

January 27, 2001ASP Basics4 A Web-Based Application ASP Pages Web Server (Brinkster.com) Web page request Response (HTML) Web Browser (Internet Explorer) Project User Web Page Project Database Queries/Updates Data

January 27, 2001ASP Basics5 myform.html Uses 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, 2001ASP Basics6 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, 2001ASP Basics7 An Object Methods Properties Collections Name:__________ Type:__________ Type: Human Name: Pat pat.haircolor pat.eat pat.genes

January 27, 2001ASP Basics8 The Form Tag 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, 2001ASP Basics9 The Tag 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, 2001ASP Basics10 and Tags SELECT tag provides a list of options to select from Small Large Medium Example: TEXTAREA tag provides multiple line text input Example:

January 27, 2001ASP Basics11 Example Form Using INPUT, SELECT, and TEXTAREA Tags

January 27, 2001ASP Basics12 myform.html (First Part) FORM Tag Example Examples of INPUT TYPES SUBMIT: IMAGE: BUTTON: RESET: TEXT: PASSWORD: HIDDEN:

January 27, 2001ASP Basics13 myform.html (Second Part) FILE: RADIO: Red Blue Green CHECKBOX: Rap Rock & Roll Rhythm & Blues

January 27, 2001ASP Basics14 myform.html (Third Part) Examples of SELECT and TEXTAREA SELECT: Small Medium Large TEXTAREA:

January 27, 2001ASP Basics15 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 %> your script goes here

January 27, 2001ASP Basics16 Example ASP Page My first ASP Page My Page Heading Hello World! <% str = date( ) response.write("Today's date is " & str) %>

January 27, 2001ASP Basics17 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, 2001ASP Basics18 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: Declare explicitly: <% dim str str = "Hello World" %>

January 27, 2001ASP Basics19 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") %>

January 27, 2001ASP Basics20 sub my_subroutine (myinput1, myinput2, myoutput1) statements go here end sub function my_function (myinput1, myinput2) my_function = myinput1 + myinput2 end 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, 2001ASP Basics21 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)

January 27, 2001ASP Basics22 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

January 27, 2001ASP Basics23 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 If request.form("age") < 18 then response.write("You are a minor") response.write(" ") end if Example 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

January 27, 2001ASP Basics24 Input and Output Get input from your form my_var = request.form("fieldname") Write HTML response.write(mystring)

January 27, 2001ASP Basics25 myecho.asp (First Part) Echo Form Input Echo Form Data This page echos back information submitted via the form defined on the page, myform.html. <% On Error Resume Next 'Turn on error handling str = request.form("field1") response.write(" ") response.write("Submit key field value is: " & str) response.write(" ") 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(" You clicked on Pat!!") end if str = request.form("field5") response.write(" ") response.write("You entered this text data: " & str & " " )

January 27, 2001ASP Basics26 myecho.asp (Second Part) str = request.form("field6") response.write(" ") response.write("My, my, here is your password for all to see: " & str) str = request.form("field7") response.write(" ") response.write("Here is my hidden field: " & str) str = request.form("field8") response.write(" ") response.write("Here is my file name: " & str) str1 = request.form("field9") response.write(" ") response.write("Here is the value returned from the radio input " & str1) str1 = request.form("field10a") response.write(" ") response.write("Here is the value returned from checkbox for rap: " & str1) str1 = request.form("field10b") response.write(" ") response.write("Here is the value returned from checkbox for rock and roll: " & str1) str1 = request.form("field10c") response.write(" ") response.write("Here is the value returned from checkbox for rhythm & blues: " & str1)

January 27, 2001ASP Basics27 myecho.asp (Third Part) str = request.form("field11") response.write(" ") response.write("Here is SELECT input: " & str) str = request.form("mytextarea") response.write(" ") response.write("Here is textarea input: " & str) %> Press here to submit more data. Press here to start over.

January 27, 2001ASP Basics28 Where Can I Get Help? Forms – ASP – – VBScript: – CSS –

January 27, 2001ASP Basics29 Your Lab Files Legend:Directory File Root myecho.asp myform.htmlhscc_labs default.asp

January 27, 2001ASP Basics30 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 B UTTON Beautify myform.html Expand myecho.asp to beautify its output