Scribd
Upload
54 views36 pages

2002 Prentice Hall. All Rights Reserved

The document provides an overview of the Common Gateway Interface (CGI) which allows web servers to interface with external applications. It discusses CGI scripting, how clients and web servers interact through HTTP requests and responses, and includes examples of simple CGI scripts in Python to display the current date/time and environment variables. The document is divided into sections covering the client-server architecture, accessing web servers, HTTP transactions, writing simple CGI scripts, and using forms and modules to retrieve input. Figures and code snippets are provided to illustrate key concepts.

Uploaded by

Shubham Shukla
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
54 views36 pages

2002 Prentice Hall. All Rights Reserved

The document provides an overview of the Common Gateway Interface (CGI) which allows web servers to interface with external applications. It discusses CGI scripting, how clients and web servers interact through HTTP requests and responses, and includes examples of simple CGI scripts in Python to display the current date/time and environment variables. The document is divided into sections covering the client-server architecture, accessing web servers, HTTP transactions, writing simple CGI scripts, and using forms and modules to retrieve input. Figures and code snippets are provided to illustrate key concepts.

Uploaded by

Shubham Shukla
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 36

1

Chapter 6 – Introduction to the Common


Gateway Interface (CGI)
Outline
6.1 Introduction
6.2 Client and Web Server Interaction
6.2.1 System Architecture
6.2.2 Accessing Web Servers
6.2.3 HTTP Transactions
6.3 Simple CGI Script
6.4 Sending Input to a CGI Script
6.5 Using XHTML Forms to Send Input and Using Module cgi to
Retrieve Form Data
6.6 Using cgi.FieldStorage to Read Input
6.7 Other HTTP Headers
6.8 Example: Interactive Portal
6.9 Internet and World Wide Web Resources

 2002 Prentice Hall. All rights reserved.


2

6.1 Introduction

• Common Gateway Interface (CGI)


• Web-page generation
– Dynamic : content generated each request
– Static : never changes unless document edited

 2002 Prentice Hall. All rights reserved.


3

6.2 Client and Web Server Interaction

• Extensible Hypertext Markup Language


(XHTML)
– Documents contain markup, or tags
– Requires syntactically correct documents
• Uniform Resource Locator (URL) directs browser
to resource
• Hypertext Transfer Protocol (HTTP) for
transferring requests and files over the Internet
• Domain name system (DNS) server translates
hostname into Internet Protocol (IP) address

 2002 Prentice Hall. All rights reserved.


4

6.2.1 System Architecture

• Multi-tier applications
– Information tier
• Also called data tier or bottom tier
• Maintains data for application
– Middle tier
• Implements presentation logic and enforces business rules
• Controller logic processes client requests and retrieves data
– Client tier
• Also called top tier
• Application’s user interface

 2002 Prentice Hall. All rights reserved.


5

6.2.1 System Architecture

Fig. 6.1 Three-tier application model.

 2002 Prentice Hall. All rights reserved.


6

6.2.2 Accessing Web Servers

• Request documents from local or remote Web


servers
• Ways to request a document
– Local Web server : machine name or localhost
– Remote Web server: specify server’s domain name or IP
address
• Domain name
– Represents groups of hosts on the Internet
– combines with top-level domain (TLD) to form fully
qualified hostname

 2002 Prentice Hall. All rights reserved.


7

6.2.2 HTTP Transactions

• HTTP request types


– Get : sends form content as part of URL
– Post : users cannot see sent data
• HTTP headers
– provide additional information about data sent in response to
request
– Multipurpose Internet Mail Extensions (MIME) : Internet
standard that specifies how messages should be formatted

 2002 Prentice Hall. All rights reserved.


8

6.2.2 HTTP Transactions

Fig. 6.2 Client interacting with server and Web server. Step 1: The request,
GET /books/downloads.html HTTP/1.1.

 2002 Prentice Hall. All rights reserved.


9

6.2.2 HTTP Transactions

Fig. 6.2 Client interacting with server and Web server. Step 2: The HTTP response, HTTP/1.1 200 OK.

 2002 Prentice Hall. All rights reserved.


10

6.2.2 Simple CGI Script

• Two types of scripting


– Server-side scripting (i.e., CGI scripts) manipulate server
resources
– Client-side scripting (i.e, JavaScript) accesses browser
features, manipulates browser documents, validates user
input, etc.
• Server-side scripts
– Execute on server
– Usually generate custom responses for clients
– Wider range of programmatic capabilities than client-side
scripts

 2002 Prentice Hall. All rights reserved.


11
1 #!c:\Python\python.exe Outline
2 # Fig. 6.3: fig06_03.py
3 # Displays current date and time in Web browser.
4
5 import time fig06_03.py
6
7 def printHeader( title ): Directive specifies location of server’s Python interpreter
8 print """Content-type: text/html
9
10 <?xml version = "1.0" encoding = "UTF-8"?> Print HTTP header
11 <!DOCTYPE html PUBLIC Blank line signifies end of HTTP header
12 "-//W3C//DTD XHTML 1.0 Strict//EN"
13 "DTD/xhtml1-strict.dtd">
14 <html xmlns = "http://www.w3.org/1999/xhtml"> Print XML declaration
15 <head><title>%s</title></head> Print XHTML document header
16
17 <body>""" % title
18 Returns seconds since epoch
19 printHeader( "Current date and time" )
20 print time.ctime( time.time() )
21 print "</body></html>"
Formats seconds to human-readable time

 2002 Prentice Hall.


All rights reserved.
12

6.3 Simple CGI Script

Fig. 6.4 Step 1: The GET request, GET /cgi-bin/fig06_02.py HTTP/1.1. (Part 1 of 4.)

 2002 Prentice Hall. All rights reserved.


13

6.3 Simple CGI Script

Fig. 6.4 Step 2: The Web server starts the CGI script. (Part 2 of 4.)

 2002 Prentice Hall. All rights reserved.


14

6.3 Simple CGI Script

Fig. 6.4 Step 3: The output of the script is sent to the Web server. (Part 3 of 4.)

 2002 Prentice Hall. All rights reserved.


15

6.3 Simple CGI Script

Fig. 6.4 Step 4: The HTTP response, HTTP/1.1 200 OK. (Part 4 of 4.)

 2002 Prentice Hall. All rights reserved.


16
1 #!c:\Python\python.exe Outline
2 # Fig. 6.5: fig06_05.py
3 # Program displaying CGI environment variables.
4
5 import os Module os provides access to environment variables fig06_05.py
6 import cgi
7 Module cgi provides form processing and text formatting capabilities
8 def printHeader( title ):
9 print """Content-type: text/html
10
11 <?xml version = "1.0" encoding = "UTF-8"?>
12 <!DOCTYPE html PUBLIC
13 "-//W3C//DTD XHTML 1.0 Strict//EN"
14 "DTD/xhtml1-strict.dtd">
15 <html xmlns = "http://www.w3.org/1999/xhtml">
16 <head><title>%s</title></head>
17
18 <body>""" % title
19
20 rowNumber = 0
21 backgroundColor = "white"
22 Start table with <table> tag
23 printHeader( "Environment Variables" )
24 print """<table style = "border: 0">"""
25
26 # print table of cgi variables and values
27 for item in os.environ.keys():
28 rowNumber += 1
29 os.environ acts like a dictionary of environment variables and values
30 if rowNumber % 2 == 0: # even row numbers are white
31 backgroundColor = "white"
32 else: # odd row numbers are grey
33 backgroundColor = "lightgrey"
34
 2002 Prentice Hall.
All rights reserved.
17
35 print """<tr style = "background-color: %s"> Outline
36 <td>%s</td><td>%s</td></tr>""" % ( backgroundColor,
37 cgi.escape( item ), cgi.escape( os.environ[ item ] ) )
38
39 print """</table></body></html>""" fig06_05.py
Table row for each environment variables and its value

Function cgi.escape takes a string and returns a properly formatted XHMTL string

Close table, body of XHMTL document and XHTML document

 2002 Prentice Hall.


All rights reserved.
18

6.4 Sending Input to a CGI Script

• QUERY_STRING variable contains extra


information appended to a URL in a GET request,
following a question mark (?)
• Question mark (?) serves as delimiter between
source and query string
• Name-value pairs in the query string separated by
ampersands (&)

 2002 Prentice Hall. All rights reserved.


19
1 #!c:\Python\python.exe Outline
2 # Fig. 6.6: fig06_06.py
3 # Example using QUERY_STRING.
4
5 import os fig06_06.py
6 import cgi
7
8 def printHeader( title ):
9 print """Content-type: text/html
10
11 <?xml version = "1.0" encoding = "UTF-8"?>
12 <!DOCTYPE html PUBLIC
13 "-//W3C//DTD XHTML 1.0 Strict//EN"
14 "DTD/xhtml1-strict.dtd">
15 <html xmlns = "http://www.w3.org/1999/xhtml">
16 <head><title>%s</title></head>
17
18 <body>""" % title
19
20 printHeader( "QUERY_STRING example" )
21 print "<h1>Name/Value Pairs</h1>"
22
23 query = os.environ[ "QUERY_STRING" ]
24
25 if len( query ) == 0:
26 print """<p><br />
Contains information appended to URL in GET request
27 Please add some name-value pairs to the URL above.
28 Or try
29 <a href = "fig06_06.py?name=Veronica&amp;age=23">this</a>.
30 </p>""" Parses query string and returns dictionary of its name-value pairs
31 else:
32 print """<p style = "font-style: italic">
33 The query string is '%s'.</p>""" % cgi.escape( query )
34 pairs = cgi.parse_qs( query )
35
 2002 Prentice Hall.
All rights reserved.
20
36 for key, value in pairs.items(): Outline
37 print "<p>You set '%s' to value %s</p>"" % \
38 ( key, value )
39
40 print "</body></html>" fig06_06.py

 2002 Prentice Hall.


All rights reserved.
21
Outline

fig06_06.py

 2002 Prentice Hall.


All rights reserved.
22
6.5 Using XHMTL Forms to Send Input and
Using Module cgi to Retrieve Form Data
• Web page forms provide an intuitive way for users
to input information to CGI scripts
• <form> and </form> tags surround an
XHTML form
– Attribute action specifies operation to perform when users
submit the form
– Attribute method : either get or post
• Get sends data to CGI script via QUERY_STRING
environment variable
• Post sends data to CGI script via standard input and sets
environment variable CONTENT_LENGTH to number of
characters that were posted

 2002 Prentice Hall. All rights reserved.


23
6.5 Using XHMTL Forms to Send Input and
Using Module cgi to Retrieve Form Data

Ta g na m e type a ttrib ute (fo r De sc rip tio n


<input> ta g s)
<input> button A standard push button.

checkbox Displays a checkbox that can be checked (true) or


unchecked (false).
file Displays a text field and button so the user can specify a
file to upload to a Web server. The button displays a file
dialog that allows the user to select a file.

hidden Hides data information from clients so that hidden form


data can be used only by the form handler on the server.
image The same as submit, but displays an image rather
than a button.
password Like text, but each character typed appears as an
asterisk (*) to hide the input (for security).
radio Radio buttons are similar to checkboxes, except that
only one radio button in a group of radio buttons can be
selected at a time.

reset A button that resets form fields to their default values.

 2002 Prentice Hall. All rights reserved.


24
6.5 Using XHMTL Forms to Send Input and
Using Module cgi to Retrieve Form Data

submit A push button that submits form data according to the


form’s action.
text Provides single-line text field for text input. This
attribute is the default input type.

<select> Drop-down menu or selection box. When used with the


<option> tag, <select> specifies items to
select.
<textarea> Multiline area in which text can be input or displayed.
Fig . 6.7 XHTML fo rm e le m e n ts.

 2002 Prentice Hall. All rights reserved.


25
1 #!c:\Python\python.exe Outline
2 # Fig. 6.8: fig06_08.py
3 # Demonstrates get method with an XHTML form.
4
5 import cgi fig06_08.py
6
7 def printHeader( title ):
8 print """Content-type: text/html
9
10 <?xml version = "1.0" encoding = "UTF-8"?>
11 <!DOCTYPE html PUBLIC
12 "-//W3C//DTD XHTML 1.0 Strict//EN"
13 "DTD/xhtml1-strict.dtd">
14 <html xmlns = "http://www.w3.org/1999/xhtml">
15 <head><title>%s</title></head>
16
17 <body>""" % title
18
19 printHeader( "Using 'get' with forms" )
20 print """<p>Enter one of your favorite words here:<br /></p>
21 <form method = "get" action = "fig06_08.py">
22 <p>
23 <input type = "text" name = "word" />
24 <input type = "submit" value = "Submit word" />
25 </p> Parse form data and return a dictionary
26 </form>"""
27
28 pairs = cgi.parse() Input data keyed by name attribute of input element
29
30 if pairs.has_key( "word" ):
31 print """<p>Your word is: Called in case form data includes special characters
32 <span style = "font-weight: bold">%s</span></p>""" \
33 % cgi.escape( pairs[ "word" ][ 0 ] )
34
35 print "</body></html>"
 2002 Prentice Hall.
All rights reserved.
26
Outline

fig06_08.py

 2002 Prentice Hall.


All rights reserved.
27
1 #!c:\Python\python.exe Outline
2 # Fig. 6.9: fig06_09.py
3 # Demonstrates post method with an XHTML form.
4
5 import cgi fig06_09.py
6
7 def printHeader( title ):
8 print """Content-type: text/html
9
10 <?xml version = "1.0" encoding = "UTF-8"?>
11 <!DOCTYPE html PUBLIC
12 "-//W3C//DTD XHTML 1.0 Strict//EN"
13 "DTD/xhtml1-strict.dtd">
14 <html xmlns = "http://www.w3.org/1999/xhtml">
15 <head><title>%s</title></head>
16
17 <body>""" % title
18 Post request attaches form content to the end of a HTTP request
19 printHeader( "Using 'post' with forms" )
20 print """<p>Enter one of your favorite words here:<br /></p>
21 <form method = "post" action = "fig06_09.py">
22 <p>
23 <input type = "text" name = "word" />
24 <input type = "submit" value = "Submit word" />
25 </p>
26 </form>"""
27
28 pairs = cgi.parse()
29
30 if pairs.has_key( "word" ):
31 print """<p>Your word is:
32 <span style = "font-weight: bold">%s</span></p>""" \
33 % cgi.escape( pairs[ "word" ][ 0 ] )
34
35 print "</body></html>"
 2002 Prentice Hall.
All rights reserved.
28
Outline

fig06_09.py

 2002 Prentice Hall.


All rights reserved.
29
6.5 Using cgi.FieldStorage to Read
Input
• Module cgi provides class FieldStorage to parse
forms

 2002 Prentice Hall. All rights reserved.


30
1 #!c:\Python\python.exe Outline
2 # Fig. 6.10: fig06_10.py
3 # Demonstrates use of cgi.FieldStorage an with XHTML form.
4
5 import cgi fig06_10.py
6
7 def printHeader( title ):
8 print """Content-type: text/html
9
10 <?xml version = "1.0" encoding = "UTF-8"?>
11 <!DOCTYPE html PUBLIC
12 "-//W3C//DTD XHTML 1.0 Strict//EN"
13 "DTD/xhtml1-strict.dtd">
14 <html xmlns = "http://www.w3.org/1999/xhtml">
15 <head><title>%s</title></head>
16
17 <body>""" % title
18
19 printHeader( "Using cgi.FieldStorage with forms" )
20 print """<p>Enter one of your favorite words here:<br /></p>
21 <form method = "post" action = "fig06_10.py">
22 <p>
23 <input type = "text" name = "word" />
24 <input type = "submit" value = "Submit word" />
25 </p>
26 </form>"""
cgi.FieldStorage object stores form data in a dictionary
27
28 form = cgi.FieldStorage() Form data keyed by the value of each input element’s name attribute
29
30 if form.has_key( "word" ):
31 print """<p>Your word is:
32 <span style = "font-weight: bold">%s</span></p>""" \
33 % cgi.escape( form[ "word" ].value )
34
35 print "</body></html>"
 2002 Prentice Hall.
All rights reserved.
31
Outline

fig06_10.py

 2002 Prentice Hall.


All rights reserved.
32

6.5 Other HTTP Headers

• Content-type header specifies how document


is processed
• Refresh header redirects client to new location
or refreshes current page
• Location header indicates redirection
performed on server side
• Status header tells server to output status-
header line

 2002 Prentice Hall. All rights reserved.


33
1 <?xml version = "1.0" encoding = "UTF-8"?> Outline
2 <!DOCTYPE html PUBLIC
3 "-//W3C//DTD XHTML 1.0 Strict//EN"
4 "DTD/xhtml1-strict.dtd">
5 <!-- Fig. 6.11: fig06_11.html --> fig06_11.html
6 <!-- Bug2Bug Travel log-in page. -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head><title>Enter here</title></head>
10
11 <body> CGI script called when user submits form
12 <h1>Welcome to Bug2Bug Travel</h1>
13
14 <form method = "post" action = "/cgi-bin/fig06_12.py">
15
16 <p>Please enter your name:<br />
17 <input type = "text" name = "name" /><br />
18
19 Members, please enter the password:<br />
20 <input type = "password" name = "password" /><br />
21 </p>
22
23 <p style = "font-size: em - 1; font-style: italic" >
24 Note that password is not encrypted.<br /><br />
25 <input type = "submit" />
26 </p>
27
28 </form>
29 </body>
30 </html>

 2002 Prentice Hall.


All rights reserved.
34
Outline

fig06_11.html

 2002 Prentice Hall.


All rights reserved.
35
1 #!c:\Python\python.exe Outline
2 # Fig. 6.12: fig06_12.py
3 # Handles entry to Bug2Bug Travel.
4
5 import cgi fig06_12.py
6
7 def printHeader( title ):
8 print """Content-type: text/html
9
10 <?xml version = "1.0" encoding = "UTF-8"?>
11 <!DOCTYPE html PUBLIC
12 "-//W3C//DTD XHTML 1.0 Strict//EN"
13 "DTD/xhtml1-strict.dtd">
14 <html xmlns = "http://www.w3.org/1999/xhtml">
15 <head><title>%s</title></head>
16
17 <body>""" % title
18
19 form = cgi.FieldStorage()
20
User did not enter login name
21 if not form.has_key( "name" ):
22 print "Location: /fig06_11.html\n"
23 else:
24 printHeader( "Bug2Bug Travel" )
25 print "<h1>Welcome, %s!</h1>" % form[ "name" ].value
26 print """<p>Here are our weekly specials:<br /></p>
27 <ul><li>Boston to Taiwan for $300</li></ul>"""
28
29 if not form.has_key( "password" ): User entered password
30 print """<p style = "font-style: italic">
31 Become a member today for more great deals!</p>"""
32 elif form[ "password" ].value == "Coast2Coast":
33 print """<hr />
34 <p>Current specials just for members:<br /></p>
35 <ul><li>San Diego to Hong Kong for $250</li></ul>"""
 2002 Prentice Hall.
All rights reserved.
36
Outline

fig06_12.py

 2002 Prentice Hall.


All rights reserved.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy