Web Technologies and Course Content Applications Introduction - PowerPoint PPT Presentation

Web Technologies and Course Content Applications • Introduction • Databases & WWW • Internet and WWW • SGML / XML Winter 2001 • Protocols • Managing servers • HTML and beyond • Search Engines CMPUT 499: Animation and WWW • Animation & WWW • Web Mining • Java Script • CORBA Dr. Osmar R. Zaïane • Dynamic Pages • Security Issues • Perl • Selected Topics • Java Applets • Projects University of Alberta  Dr. Osmar R. Zaïane, 2001  Dr. Osmar R. Zaïane, 2001 Web Technologies and Applications University of Alberta 1 Web Technologies and Applications University of Alberta 2 2 Objectives of Lecture 5 Animation Animation and WWW Animation and WWW • The part of lecture on animation with • Learn about old and new techniques that HTML and Web was presented using allow animation in web pages. pseudo-slides on a web browser. • See some more concepts related to web • See the course web site to find the slides on technologies, server-side and client-side. animation with Java, JavaScript, DHTML, • Learn about another aspect of HTML: Gif89, client pull, server push, etc. building forms to input data. • Introduce the concept of CGI.  Dr. Osmar R. Zaïane, 2001  Dr. Osmar R. Zaïane, 2001 3 4 Web Technologies and Applications University of Alberta Web Technologies and Applications University of Alberta

Using HTML Forms Outline of Lecture 5 • A Web HTML page can gather input and send it to • Introduction a program on the server for processing. • Poor Man’s Animation • The program that receives the input for processing • Animation with Java is called a CGI (or Common Gateway Interface). • Animation with JavaScript • A CGI program has a URL like any Web • Sound accessible file. • Animation with DHTML • A Form has a link to the corresponding CGI. • HTML Forms • CGI programming Form in browser Server CGI  Dr. Osmar R. Zaïane, 2001  Dr. Osmar R. Zaïane, 2001 Web Technologies and Applications University of Alberta 5 Web Technologies and Applications University of Alberta 6 HTML Forms Structure Form Input Elements Textfields <FORM ACTION=“ URL_CGI ” METHOD=“…” …> <INPUT TYPE=“TEXT” NAME=“ var1” VALUE=“Hello” SIZE=“20”> MAXLENGTH would specify the maximum input length Page title Page title … Hello Text areas </FORM> <TEXTAREA NAME=“ var2” COLS=“20” ROWS=“3” > This is a text zone This is a text zone ACTION specifies the URL of a CGI program or </TEXTAREA> e-mail address (mailto:e-mail@address.there) WRAP can either be OFF, HARD or SOFT and specifies how the word wrap is done at the end of line ***** METHOD specifies how the data is transmitted to the server “GET” : the data is sent appended to the URL Pasword fields “POST”: the data is sent after the HTTP header <INPUT TYPE=“PASSWORD” NAME=“ var3” > SIZE ENCTYPE specifies the way in which the data in encoded VALUE MAXLENGTH You cannot have nested forms. (No forms in forms allowed)  Dr. Osmar R. Zaïane, 2001  Dr. Osmar R. Zaïane, 2001 7 8 Web Technologies and Applications University of Alberta Web Technologies and Applications University of Alberta

Form Input Elements Form Input Elements Radio buttons (shared names) Combo boxes and List boxes <INPUT TYPE=“RADIO” NAME=“ var4” VALUE=“ yes ” CHECKED> <SELECT NAME=“ var9” > <INPUT TYPE=“RADIO” NAME=“ var4 ” VALUE=“ no ”> Page title Page title <OPTION VALUE=“ A ”> option 1 </OPTION> option1 <OPTION VALUE=“ B ”> option 2 </OPTION> Checkboxes </SELECT> <INPUT TYPE=“CHECKLIST” name=“ var5” CHECKED> Element 1 <INPUT TYPE=“CHECKLIST” name=“ var6” > Element 2 <SELECT NAME=“ var10 ” SIZE=“ 3 ” MULTIPLE> Element 3 <OPTION> Element 1 </OPTION> Hidden variables <OPTION SELECTED> Element 2 </OPTION> <INPUT TYPE=“HIDDEN” NAME=“ var7” VALUE= 23 > <OPTION> Element 3 </OPTION> <OPTION> Element 4 </OPTION> Image maps (server-side) </SELECT> <INPUT TYPE=“ IMAGE ” NAME=“var8” SRC=“image.gif” ALIGN=“ RIGHT ”> Clicking on the image would submit the form along with two variables: name.x and name.y (in this case var8.x and var8.y)  Dr. Osmar R. Zaïane, 2001  Dr. Osmar R. Zaïane, 2001 Web Technologies and Applications University of Alberta 9 Web Technologies and Applications University of Alberta 10 Example of a Form Form Input Elements Attached file <INPUT TYPE=“FILE” NAME=“ var11” VALUE=“myfile.txt” > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> SIZE, MAXLENGTH used as for textfields <HTML><HEAD><TITLE> Example of a form </TITLE></HEAD> Page title ACCEPT restricts the files to certain MIME types <BODY BGCOLOR=“#00FF00”> <H1> Satisfaction Report</H1> Browse… myfile.txt < FORM ACTION =“mailto:me@university.ca” METHOD=POST> JavaScript button <INPUT TYPE=“BUTTON” NAME=“ var12” Name: <INPUT TYPE=text name=“ name ”><BR> VALUE=“Your Cart”> <DL><DT> Are you Your Cart no submission but can be attached to a JavaScript <DD><INPUT TYPE=radio name=“ satisf ” Value=“ 1 ”> Very Satisfied <DD><INPUT TYPE=radio name=“ satisf ” Value=“ 2 ”> Satisfied Send <DD><INPUT TYPE=radio name=“ satisf ” Value=“ 3 ”> Not Satisfied Submit button <INPUT TYPE=“SUBMIT” VALUE=“ Send ”> </DL> Clear all values submits the form (pairs of variable-value) <INPUT TYPE=submit> </FORM> Reset button </BODY> <INPUT TYPE=“RESET” VALUE=“Clear all values”> </HTML> Resets all variables in the form to their original values  Dr. Osmar R. Zaïane, 2001  Dr. Osmar R. Zaïane, 2001 11 12 Web Technologies and Applications University of Alberta Web Technologies and Applications University of Alberta

Common Gateway Interface Outline of Lecture 5 • Introduction Form in browser Server • Poor Man’s Animation CGI • Animation with Java data data • Animation with JavaScript • Sound HTML 1- User enters data in form • Animation with DHTML 2- User presses submit button • HTML Forms 3- data sent to web server with URL of CGI • CGI programming 4- Server starts a CGI and passes data 5- CGI processes data and generates HTML page  Dr. Osmar R. Zaïane, 2001  Dr. Osmar R. Zaïane, 2001 Web Technologies and Applications University of Alberta 13 Web Technologies and Applications University of Alberta 14 The CGI Interaction Process CGI Programming • There are 4 basic steps in a CGI program: 1. Read the data (input parameters) • Any programming language that allows 2. Process the data reading Standard Input and writing to the 3. Output an HTTP response header Standard Output can be used for CGI 4. Generate a document programming. • The CGI should send a blank line to separate • Perl is commonly used for CGI, but also the HTTP header from the generated C/C ++ , Python, Unix shell script, document. AppleScript, Visual Basic, Java, etc. • Reading the data is different depending upon the method used to send the data ( GET , POST )  Dr. Osmar R. Zaïane, 2001  Dr. Osmar R. Zaïane, 2001 15 16 Web Technologies and Applications University of Alberta Web Technologies and Applications University of Alberta

Java and QUERY_STRING Reading the GET Data • QUERY_STRING=“ var1=abc&var2=123” • With the GET method, data is sent with the CGI URL: myprogram.cgi?var1=abc&var2=123 • Java has no method to directly read environment variables (the concept doesn’t exist with all OS). • Data is appended to the URL with “?” • We need to use and intermediary script to pass • Variable-value pairs are separated by “&” the variable along to Java • A Variable and a Value are separated by “=” Example with Unix shell script • When a web server receives a GET with a CGI #!/bin/sh URL it puts the data in an environment variable /usr/local/JDK/bin/java myJavaCgi “$QUERY_STRING” QUERY_STRING before calling the CGI program.  Dr. Osmar R. Zaïane, 2001  Dr. Osmar R. Zaïane, 2001 Web Technologies and Applications University of Alberta 17 Web Technologies and Applications University of Alberta 18 Reading the POST Data Pros and Cons of Get and Post • Since data is appended to the URL with GET, • No data is attached to the CGI URL the size of data is limited by the browser’s • The data is sent like a document after an URL maximum size (truncated). HTTP request header (in a single line). • There is no size limit for data sent with POST. • The header would contain information • We can activate a CGI without using an about the data such as Content-Length , etc HTML form if we use GET: • The data is available to the program as http://server/path/cgiprogram.cgi?parameters standard input. • POST can be used to send private information.  Dr. Osmar R. Zaïane, 2001  Dr. Osmar R. Zaïane, 2001 19 20 Web Technologies and Applications University of Alberta Web Technologies and Applications University of Alberta