introduction to programming the www i cmsc 10100-1 summer 2004 lecture 6
TRANSCRIPT
Introduction to Programming the WWW I
Introduction to Programming the WWW I
CMSC 10100-1
Summer 2004
Lecture 6
2
Today’s TopicsToday’s Topics
• HTML Forms (cont’d)
• First Perl program
3
HTML FormsHTML Forms
• HTML Forms are used to select different kinds of user input, defined with <form> tag
• Form contains form elements to allow the user to enter information text fields textarea fields drop-down menus radio buttons checkboxes, etc
• A Web page can contain one or multiple forms Identified by id or name attribute
4
<form> Attributes<form> Attributes
• action attribute Gives the URL of the program(CGI) to receive and process
the form’s data• CGI is Common Gateway Interface, a protocol to handle web
data transmissions• How does CGI work? (next slide)• CGI programs usually kept in a cgi-bin/ directory• Usually triggered by clicking the submit button• action can also be a mailto: link
Syntax: action=mailto:XXX Example: formeg.html
• Example: add.html using CGI programs in action
5
How Browsers and Web Applications Work with CGI
How Browsers and Web Applications Work with CGI
Web Server receives therequest and starts up te
CGI program.
Send results back
Please Enter APhone Number
Submit Erase
Web Browser
CGI-basedcomputerprogram
Web Browser
Phone QueryResults:
That isJohn Doe'sPhone Number
Web Browser
Your PC(Internet connected)
WebServer(Internet connected)
6
<form> Tag Attributes (cont’d)
<form> Tag Attributes (cont’d)
• method attribute Sets the HTTP method by which the browser sends the form data to
the program, value can be GET or POST• HTTP protocol specification• Simple HTTP request and reply
GET method:• The form data gets appended to the request URL
POST method:• The form data is sent as part of the message body
Avoid GET method in favor of POST for security reasons• A long form content line attached to URL may crash the web server• The GET request line is plain ASCII text sent without encryption and will be
saved in server logs
• Example: add.html using CGI programs in action
7
<form> Tag Attributes (cont’d)
<form> Tag Attributes (cont’d)
• enctype attribute Specify the content type used to submit the form to
the server when the action method is POST Default value application/x-www-form-urlencoded
(need not specify) Special cases:
• Use “text/plain” if action=mailto:XXX• Use "multipart/form-data“ if the data sent is a file
• the id, name attributes Give the identification or name to a form Useful for multiple forms in a same page id is preferable
8
<input> Tag<input> Tag
• To define any one of a number of common form “controls” Text fields (including password, hidden fields) multiple-choice lists Clickable images Submission buttons
• Only type and name attribute required
• No ending tag (no </input>)
9
Text FieldsText Fields
• single line of text <input type=text name=XXX>• Set type to password to mask text like a
password• Set type to hidden to create a hidden field
size and maxlength attributes value attributes to give default text
• Example: formeg1.html
10
Multi-line Text AreaMulti-line Text Area
• The <textarea> tag
• Attributes cols rows wrap• Values: Off,virtual(default),physical
• Example: formeg1.html
11
Check BoxesCheck Boxes
• Check boxes for “check all that apply” questions <input type=checkbox name=XXX value=XXX>
Make sure name identical among a group of checkboxes
checked attribute
• When form is submitted, names and values of those checked boxes are sent
• Example: formeg1.html
12
Radio ButtonsRadio Buttons
• Similar as checkboxes, but only one in the group may be selected <input type=radio name=XXX value=XXX>
• Example: formeg1.html
13
Multiple Choice ElementsMultiple Choice Elements
• The <select> tag creates either pull-down menus or scrolling lists
• The <option> tag defines each item within a <select> tag
• <select> tag attributes size attribute
• Number of rows visible at the same time multiple attribute
• If set, allow multiple selections name attribute
• Example: formeg1.html
14
Action ButtonsAction Buttons
• Some special types of form controls Act immediately Effect can not be reversed Affect the entire content of the form
15
Action Buttons (cont’d)Action Buttons (cont’d)
• What are they? Submit buttons
• <input type=submit name=XXX value=XXX> Reset buttons
• <input type=reset name=XXX value=XXX> Regular buttons
• <input type=button name=XXX value=XXX> image buttons (will send form content as submit button)
• <input type=image name=XXX src=XXX> *File buttons (need to deal with enctyple attribute)
• <input type=file name=XXX accept=“text/*”>
• Example: formeg1-bak.html
16
HTML Forms ResourcesHTML Forms Resources
• HTML Forms tutorials http://www.webcom.com/html/tutor/forms/
start.shtml http://info.netmar.com/creating/forms.html
• HTML Forms and Input http://www.w3schools.com/html/html_forms.asp
17
The Perl Programming Language
The Perl Programming Language
• Practical Extension & Reporting Language Invented in 1987 by Larry Wall at NASA’s Jet
Propulsion Laboratory Developed as a utility programming language for the
UNIX operating system Perl is a scripting language
• Scripting language vs. System language
Gained popularity because of its ease of use, free availability via the Internet, and its powerful combination of features
18
Why Perl is PopularWhy Perl is Popular
• Perl is a free language with lots of free applications
• Perl is easier to work with than many other languages Scripting language vs. System language
• Perl provides a CGI interface module
• Perl applications are portable
19
Perl InterpreterPerl Interpreter
• A program that translates Perl program commands into commands that are understandable to a computer
• Runs your Perl programs and generates any output
• Its command name is simply perl
• It can be installed in any of several places on a Web server
• Download Perl for different platform
http://www.perl.com/pub/a/language/info/software.html#binary
Perl Builder for windows
20
Finding Location Of PerlFinding Location Of Perl
• SSH onto the CS dept Server • Enter either of the following commands:
which perl where is perl
• Access Unix manpage: man <command>
Perl InterpreterLocation
21
Program Development ProcessProgram Development Process
• Each time you develop and run a program: Create a program file and copy (or save) it into the
correct directory Change your program’s access permissions• chmod 755 <perl file> -rwxr-xr-x
Check your program’s syntax Run your program
Starting Your First Program• Start some editor and enter the following:
#!/usr/local/bin/perl
print “can u believe this is my 1st perl script?\n”;
• The first line (“pound-bang” line) A convention on Unix system that makes the script to be run as if it is an
executable program Format: “#!” + full path to the location of perl in the system
• The second line (single statement line) Each statement line ends with “;” print is a built-in function of perl \n is a special backslash interpretation denoting a new line
• Backslash interpretation only effective in double-quoted string
Program Entered in Pico
Run The Program
• Save the program file on the web server
• Enter the full path to the program file to run
• For example:/home/hai/html/hw2/first_script.pl
Program FileHome Directory
Directories On Web Server
25
To Check Your Program Syntax(on a UNIX Web Server)
To Check Your Program Syntax(on a UNIX Web Server)
• establish an SSH session
• navigate to the directory that contains the file
• enter perl –c filename, where filename is the program file whose syntax you want to. For example,
cd html/hw2
perl –c first_script.pl
• If no syntax errors then you will see:• first_script.pl syntax OK
26
Program with Syntax errorsProgram with Syntax errors
Missingquote mark
27
Running Your ProgramRunning Your Program
• At least two different ways to run your Perl programs: Directly on a Web server or PC without a
browser Using your browser over the Internet
28
Getting Ready to Run Your Program Over the InternetGetting Ready to Run Your Program Over the Internet
• To run a Perl script in a browser over the Internet, add a MIME content-type line Multipart Internet Mail Extensions (MIME) is used by HTTP to
Suggest to browser how to render the data Other MIME types
MIME line example
print “Content-type: text/plain\n\n”;
• New first_script.pl file
#!/usr/local/bin/perl print “Content-type: text/plain\n\n”;
print “can u believe this is my 1st perl script?\n”;
29
Running Your Program Over the Internet
Running Your Program Over the Internet
1. Connect to the Internet. 2. Start your browser. 3. Enter the URL or Web address to your file4. Check the program’s syntax. 5. Run the program.
For example, assume the first_script.pl script is savedin the /home/hai/html/cs101/hw2/ directory on the Web
server.Can execute by the following:
http://people.cs.uchicago.edu/~hai/hw2/first_script.pl