View
233
Download
0
Category
Preview:
Citation preview
7/30/2019 HTML Form & CGI Concepts
1/27
HTML Search Forms and CGI
7/30/2019 HTML Form & CGI Concepts
2/27
HTML is a tool that provides for
Describing and representing the structureand contents of web documents.
Linking that text to other resources. A CGI program has to somehow get from
the user any data to be processed. That's
where HTML forms come into play
2
7/30/2019 HTML Form & CGI Concepts
3/27
There are many uses of forms onWeb
As surveys. Online order forms.
Feedback. As a means to search a database.
Or other functions for which user input isrequired.
3
7/30/2019 HTML Form & CGI Concepts
4/27
Forms can be created with the followingfeatures:
Selectable lists. Radio buttons.
Checkboxes. Text Fields.
Submit and Reset buttons.
4
7/30/2019 HTML Form & CGI Concepts
5/27
General form of FORM tag
... FormElement tags ... .
... .
ACTION attribute tells the URL where the information inthe form is to be sent.
Default method is GET (Takes the information entered into
the form, and adds this information to the URL specified bythe ACTION attribute.
POST method sends the information from the form as an
encoded stream of data to the web (Difference with GETmethod)
5
7/30/2019 HTML Form & CGI Concepts
6/27
Quick reference to Form
Element Tag
6
7/30/2019 HTML Form & CGI Concepts
7/27
Creates Text
Field
Password Field
Hidden Field
Checkbox
7
7/30/2019 HTML Form & CGI Concepts
8/27
Radio Button
one
Two
:
Dropdown List
Scrolling List
7/30/2019 HTML Form & CGI Concepts
9/27
USER INFORMATION
FORM
User Name:
Service Type:CASCDRS
COPSATDDSFDSSISSOSSSASDA
SUBJECT AREA:
Agriculture
Biology
BiomedicineChemistry
9
7/30/2019 HTML Form & CGI Concepts
10/27
AGRIS
AHEADBIOSIS
CAB
Date Entered:
7/30/2019 HTML Form & CGI Concepts
11/27
CGI (Common Gateway
Interface) Concepts
11
7/30/2019 HTML Form & CGI Concepts
12/27
CGI, permits interactivity between a clientand a host operating system through a World
Wide Web via the Hyper Text Transfer
Protocol (HTTP).
12
7/30/2019 HTML Form & CGI Concepts
13/27
Writing CGI programs involves
Obtaining input from a user or from a datafile.
Storing that input in program variables. Manipulating those variables to achieve
some desired purpose, and
Sending the results to a file or video
display.
13
7/30/2019 HTML Form & CGI Concepts
14/27
Data are obtained in ENVIRONMENT
variables.The ENVIRONMENT variables are shown
below in the table
14
7/30/2019 HTML Form & CGI Concepts
15/27
ENVIRONMENTVARIABLE DESCRIPTION
SERVER_NAME The server's Host name or IP address .
SERVER_SOFTWARE The name and version of the server-software that is answering the client
requests.
SERVER_PROTOCOL The name and revision of theinformation protocol the request came
in with.
REQUEST_METHOD The method with which the informationrequest was issued.
QUERY_STRINGThe query information passed to the
program. It is appended to the URLwith a "?".
15
7/30/2019 HTML Form & CGI Concepts
16/27
CONTENT_TYPE The MIME type of the query data, such as "text/html".
CONTENT_LENGTH The length of the data in bytes, passed to the CGI program through standard input.
GATEWAY_INTERFACE The revision of the CGI that the server uses.
HTTP_USER_AGENT The browser the clients is using to issue the request.
HTTP_REFERER The URL of the document that the client points to before accessing the CGI program.
ENVIRONMENTVARIABLE DESCRIPTION
CONTENT_TYPE The MIME type of the query data, such
as "text/html".
CONTENT_LENGTH The length of the data in bytes, passedto the CGI program through standard
input.
HTTP_REFERER The URL of the document that theclient points to before accessing theCGI program.
GATEWAY_INTERFACE The revision of the CGI that the serveruses.
HTTP_USER_AGENT The browser the client is using to issue
the request.
16
7/30/2019 HTML Form & CGI Concepts
17/27
CGI Interaction through HTML Forms
17
W b B d W b S
7/30/2019 HTML Form & CGI Concepts
18/27
Web Browser and Web Server
interaction
Suppose you embed the following hypertext linkin an HTML document:
TEST.HTML
If you were to click on this link, the browserwould issue the following request to the Webserver:
GET /TEST.HTML HTTP/1.0Accept: text/plainAccept: text/html
Two blank lines
18
W b B d W b S
http://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/test.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/test.html7/30/2019 HTML Form & CGI Concepts
19/27
Web Browser and Web Server
interaction Cont...
Each of these lines is referred to as aHeader.
No complete path of the file, so the WebServer would look TEST.HTML in servers
Web-document root directory.
Browser can accept plain text or HTML-
formatted text files.
19
Server Response
7/30/2019 HTML Form & CGI Concepts
20/27
Server ResponseHTTP /1.0 200 OK
Date: Monday, 24-May-9611:09:05 GMT
Server: NCSA/1.3
MIME-version 1.0Content-type: text/html
Content-length: 231
Test Page
This is the sample document
This is a test HTML page.
Web browser then reads and displays the HTMLportion of the file.
20
7/30/2019 HTML Form & CGI Concepts
21/27
GET Method
All the form data is appended to the URL QUERY_STRING contains query information
passed to the program
When user clicks the submit button from a htmlform, browser generates a HTTP request
GET
/Scrits/Workshop/simple2.pl?u11/11/99name=Rani&service=CAS&entrydate=26%2F11%2F1999 HTTP/1.0 and sends to the
web browser.
21
http://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/simple2.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/simple2.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/simple2.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/simple2.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/simple2.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/simple2.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/simple2.html7/30/2019 HTML Form & CGI Concepts
22/27
GET Method Cont
The continuous string of text that follows thequestion mark represents the query string.
In response to this request from the browser, theserver executes the script simple2.pl and placesthe string
uname=Rani&service=CAS&entrydate=
26%2F11%2F1999, in the QUERY_STRINGenvironment variable andHTTP/1.0 inSERVER_PROTOCOL
CGI program reads these environment variables,process, and passes some results to Web Server22
7/30/2019 HTML Form & CGI Concepts
23/27
POST Method
Data from the form is encoded as string ofdata divided in NAME/VALUE pair and
separated by &.
In case of POST methods with the same
html form it will generate the request
23
http://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/simple2.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/simple2.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/simple2.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/simple2.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/simple2.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/simple2.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/simple2.html7/30/2019 HTML Form & CGI Concepts
24/27
POST Method Cont
POST /Scripts/simple2.plHTTP/1.0
Accept: text/html
Accept: text/plain
User-Agent:
Content-type: application/ x-www-urlencodedContent-length: 28
uname=Rani&service=CAS&entrydate=
26%2F11%2F1999
24
7/30/2019 HTML Form & CGI Concepts
25/27
POST Method Cont
With the post method, the server passes theinformation contained in the submitted
form as standard input (STDIN) to the
CGI program.
CONTENT_LENGTH contains
information about how much amount ofdata being transferred from html form.
25
7/30/2019 HTML Form & CGI Concepts
26/27
CGI program Using Perl (Practical Extraction
and Report Language)
Perl is an Interpreted script, instead of a compiled
program with file extension .pl.
Perl is freely available for many platform, Unix
as well as Windows. A simplest CGI program using perl that prints
Hello, World in the browser is
# This program prints Hello, World in the browser
print "Content-type: text/html \n\n";
print "Hello, World";
26
7/30/2019 HTML Form & CGI Concepts
27/27
CGI program Using Perl (Practical Extraction
and Report Language) Cont
Examples using GET and POST Method Using GET Method Source Code
Using POST Method Source Code
27
http://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/ple1.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/gets.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/ple2.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/posts.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/posts.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/ple2.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/gets.htmlhttp://../Documents%20and%20Settings/admin/Desktop/NOL-IT2353-WT/WEBSHARE/WWWROOT/Workshop/ple1.htmlRecommended