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