Python CGI Python CGI programmingprogramming

CGI ProgrammingCGI Programming The Common Gateway Interface, or CGI, is a set of The Common Gateway Interface, or CGI, is a set of

standards that define how information is exchanged standards that define how information is exchanged between the web server and a custom script or between the web server and a custom script or program.program.

To understand the concept of CGI, lets see what To understand the concept of CGI, lets see what happens when we click a hyper link to browse a happens when we click a hyper link to browse a particular web page or URL.particular web page or URL. Your browser contacts the HTTP web server and Your browser contacts the HTTP web server and

asks for the URL ie. filename.asks for the URL ie. filename. Web Server will parse the URL and will look for the Web Server will parse the URL and will look for the

filename, if it finds that file it sends to the browser filename, if it finds that file it sends to the browser otherwise sends an error message indicating that otherwise sends an error message indicating that file could not be found .file could not be found .

Web browser takes response from web server and Web browser takes response from web server and displays either the received file or error messagedisplays either the received file or error message..

22

However, it is possible to set up the HTTP However, it is possible to set up the HTTP server so that whenever a file in a certain server so that whenever a file in a certain directory is requested that file is not sent back; directory is requested that file is not sent back; instead it is executed as a program, and instead it is executed as a program, and whatever that program outputs is sent back for whatever that program outputs is sent back for your browser to display. This function is called your browser to display. This function is called the Common Gateway Interface or CGI.the Common Gateway Interface or CGI.

When we run a Python program as a CGI script, When we run a Python program as a CGI script, the output goes out directly and the file must be the output goes out directly and the file must be executable (+x).executable (+x).

The first line we have to print are the HTTP The first line we have to print are the HTTP headers – this tells the browser to read it as headers – this tells the browser to read it as either text, or render it as HTML.either text, or render it as HTML.

Any line after that comprises the actual HTML or Any line after that comprises the actual HTML or text itselftext itself

CGI Architecture diagramCGI Architecture diagram

What is an HTML File?What is an HTML File?

HTML stands for HTML stands for HHyper yper TText ext MMarkup arkup LLanguage anguage An HTML file is a text file containing small An HTML file is a text file containing small

markup tagsmarkup tags The markup tags tell the Web browser The markup tags tell the Web browser how to how to

displaydisplay the page the page An HTML file must have an An HTML file must have an htmhtm or or htmlhtml file file

extension extension An HTML file can be created using a An HTML file can be created using a simple simple

text editortext editor

HTML ElementsHTML Elements HTML documents are text files made up of HTML elements.HTML documents are text files made up of HTML elements. HTML elements are defined using HTML tags.HTML elements are defined using HTML tags.

HTML TagsHTML Tags

HTML tags are used to mark-up HTML HTML tags are used to mark-up HTML elementselements HTML tags are surrounded by the HTML tags are surrounded by the two characters < and >two characters < and > The surrounding characters are called The surrounding characters are called angle bracketsangle brackets HTML tags normally HTML tags normally come in pairscome in pairs like <b> and </b> like <b> and </b> The first tag in a pair is the The first tag in a pair is the start tag,start tag, the second tag is the the second tag is the end end

tagtag The text between the start and end tags is the The text between the start and end tags is the element contentelement content HTML tags are HTML tags are not case sensitive,not case sensitive, <b> means the same as <b> means the same as

<B> <B>

Structure of an HTML documentStructure of an HTML document HTML documents are enclosed with in <HTML> HTML documents are enclosed with in <HTML>

</HTML> tags</HTML> tags Document HeaderDocument Header

• Information placed in the header are essential to the inner Information placed in the header are essential to the inner working of the document but has nothing to do with the working of the document but has nothing to do with the content of documentcontent of document

• Header is enclosed between <HEAD> and </HEAD>Header is enclosed between <HEAD> and </HEAD>

• Typically the document title is placed with in the header Typically the document title is placed with in the header <TITLE>document title</TITLE><TITLE>document title</TITLE>

Document BodyDocument Body• Placed between <BODY> and </BODY>Placed between <BODY> and </BODY>

• The purpose of the <body> tag is to define the HTML The purpose of the <body> tag is to define the HTML element that contains the body of the HTML document.element that contains the body of the HTML document.

• Page defaults like Background color, Background, Text Page defaults like Background color, Background, Text Color, Font Size, Font Weight etc can be specified as Color, Font Size, Font Weight etc can be specified as attributesattributes

• <BODY BACKGROUND=“x.gif” TEXT=“Red”>this is my <BODY BACKGROUND=“x.gif” TEXT=“Red”>this is my document body</BODY>document body</BODY>

First Web PageFirst Web PageDocument Header

Document body

Text Formatting – paragraphs and line breaksText Formatting – paragraphs and line breaks

<P> for inserting a new paragraph<P> for inserting a new paragraph

<P>this is a new paragraph<P>this is a new paragraph <BR> for line break<BR> for line break

Line breaks create forced hard returns in your document. Line breaks create forced hard returns in your document. There is a hard return below this textThere is a hard return below this text

<br /><br />There is a hard return above this text There is a hard return above this text

Note:Note: Use the <br> tag to insert line breaks, not to create Use the <br> tag to insert line breaks, not to create paragraphs.paragraphs.

Preserving White Space <pre> </pre>Preserving White Space <pre> </pre>DemoExample <p><pre> MaryExample <p><pre> Mary had ahad a littlelittle lamb </pre></p>lamb </pre></p>

LinkingLinking

HyperlinkHyperlink References other sources such as References other sources such as

XHTML documents and imagesXHTML documents and images Both text and images can act as Both text and images can act as

hyperlinkshyperlinks Created using the Created using the aa (anchor) element (anchor) element

• Attribute Attribute hrefhref Specifies the location of a linked resourceSpecifies the location of a linked resource

• Link to e-mail addresses using Link to e-mail addresses using mailto:mailto: URL URL

Linking the documentsLinking the documents

HTML allows linking of one HTML document to HTML allows linking of one HTML document to other as well as imagesother as well as images

Use ALINK, VLINK attributes (deprecated) of Use ALINK, VLINK attributes (deprecated) of BODY tag to control the color of the hyperlink that BODY tag to control the color of the hyperlink that is displayedis displayed

Links are created in a web page through <A> tag Links are created in a web page through <A> tag (anchor tag)(anchor tag)

Syntax - <a href="url">Text to be displayed</a>Syntax - <a href="url">Text to be displayed</a> Eg: <A HREF=Eg: <A HREF=http://www.google.com>This is a com>This is a

search engine</A>search engine</A>

First CGI ProgramFirst CGI Program

This line The line Content-type:text/html\r\n\r\n is part of HTTP header is sent back to the browser and specify the content type to be displayed on the browser screen.

xampp an introductionxampp an introduction XAMPP is a free and open source cross-platform web server package, XAMPP is a free and open source cross-platform web server package,

consisting mainly of the Apache HTTP Server, MySQL database, PHP consisting mainly of the Apache HTTP Server, MySQL database, PHP Perl programming languages.Perl programming languages.

XAMPP is available for Microsoft Windows, Linux, Solaris, and Mac XAMPP is available for Microsoft Windows, Linux, Solaris, and Mac OS X, and is mainly used for web development projects.OS X, and is mainly used for web development projects.

Download Xampp software and install in /opt folderDownload Xampp software and install in /opt folder http://www.apachefriends.org/en/xampp-linux.html Starting of xampp software (You require a root permission)Starting of xampp software (You require a root permission) Open a terminalOpen a terminal#cd /opt/lampp/#cd /opt/lampp/~/opt/lampp #~/opt/lampp #./lampp start./lampp start

•The xampp server will start, minimize the window•Check for server running

Open any browser and type Open any browser and type http://localhosthttp://localhostYou will get xampp welcome screen asYou will get xampp welcome screen as

Once the server is started you can deploy your html and cgi files

How to execute cgi python filesHow to execute cgi python files Type your first cgi program hello.py and keep it in the folder

/opt/lampp/cgi-bin Change mode of file using chmod 755 hello.py UNIX

command to make file executable. This hello.py script is a simple Python script which is writing

its output on STDOUT file ie. Screen. Open the browser and type http://localhost/cgi-bin/hello.py You will get the following output on browser

GET and POST MethodsGET and POST Methods Most frequently browser uses two methods two pass this Most frequently browser uses two methods two pass this

information to web server. These methods are GET method information to web server. These methods are GET method and POST methodand POST method

The GET method sends the encoded user information The GET method sends the encoded user information appended to the page request. The page and the encoded appended to the page request. The page and the encoded information are separated by the ? character as follows:information are separated by the ? character as follows:

The GET method is the default method to pass information The GET method is the default method to pass information from browser to web server and it produces a long string that from browser to web server and it produces a long string that appears in your browser's Location:box. appears in your browser's Location:box. Never use GET Never use GET method if you have password or other sensitive information to method if you have password or other sensitive information to pass to the server. pass to the server. The GET method has size limitation: only The GET method has size limitation: only 1024 characters can be sent in a request string. The GET 1024 characters can be sent in a request string. The GET method sends information using QUERY_STRING header and method sends information using QUERY_STRING header and will be accessible in your CGI Program through will be accessible in your CGI Program through QUERY_STRING environment variable.QUERY_STRING environment variable.

Passing Information using POST methodPassing Information using POST method

A generally more reliable method of A generally more reliable method of passing information to a CGI program is passing information to a CGI program is the POST method. This packages the the POST method. This packages the information in exactly the same way as information in exactly the same way as GET methods, but instead of sending it as GET methods, but instead of sending it as a text string after a ? in the URL it sends it a text string after a ? in the URL it sends it as a separate message. This message as a separate message. This message comes into the CGI script in the form of comes into the CGI script in the form of the standard input.the standard input.

The GET method sends the encoded user The GET method sends the encoded user information appended to the page request. The page information appended to the page request. The page and the encoded information are separated by the ? and the encoded information are separated by the ? character as follows:character as follows:

hello.py: hello.py: save this file in /opt/lampp/htdocssave this file in /opt/lampp/htdocs

Simple FORM Example: GET Method

“post”

hello_get.py (hello_get.py (save this file /opt/lampp/cgi-binsave this file /opt/lampp/cgi-bin))

Passing Checkbox Data to CGI ProgramPassing Checkbox Data to CGI Program Checkboxes are used when more than one option is required to be selectedCheckboxes are used when more than one option is required to be selected

Passing Radio Button Data to CGI ProgramPassing Radio Button Data to CGI Program

Radio Buttons are used when only one option is required to be selected.

Passing Text Area Data to CGI ProgramPassing Text Area Data to CGI Program TEXTAREA element is used when multiline text has to be passed to the CGI TEXTAREA element is used when multiline text has to be passed to the CGI

Program.Program.

Passing Drop Down Box Data to CGI ProgramPassing Drop Down Box Data to CGI Program Drop Down Box is used when we have many options available but only Drop Down Box is used when we have many options available but only

one or two will be selected.one or two will be selected.

Using Cookies in CGIUsing Cookies in CGI Cookie  is a small piece of data sent from a website and stored in a Cookie  is a small piece of data sent from a website and stored in a

user's web browser while a user is browsing a website. Cookies use user's web browser while a user is browsing a website. Cookies use a plain text formata plain text format

HTTP protocol is a stateless protocol. But for a commercial website HTTP protocol is a stateless protocol. But for a commercial website it is required to maintain session information among different pages. it is required to maintain session information among different pages. For example one user registration ends after completing many For example one user registration ends after completing many pages. But how to maintain user's session information across all the pages. But how to maintain user's session information across all the web pages.web pages.

How it works?How it works? Your server sends some data to the visitor's browser in the form of a Your server sends some data to the visitor's browser in the form of a

cookie. The browser may accept the cookie. If it does, it is stored as cookie. The browser may accept the cookie. If it does, it is stored as a plain text record on the visitor's hard drive. Now, when the visitor a plain text record on the visitor's hard drive. Now, when the visitor arrives at another page on your site, the cookie is available for arrives at another page on your site, the cookie is available for retrieval. Once retrieved, your server knows/remembers what was retrieval. Once retrieved, your server knows/remembers what was stored.stored.

Setting a cookieSetting a cookie This is very easy to send cookies to browser. This is very easy to send cookies to browser.

These cookies will be sent along with HTTP These cookies will be sent along with HTTP Header before to Content type filed. Assuming you Header before to Content type filed. Assuming you want to set UserID and Password as cookies. So want to set UserID and Password as cookies. So cookies setting will be done as followscookies setting will be done as follows

Retrieving a cookieRetrieving a cookie

ExerciseExercise Create a student registration form using all html tags and Create a student registration form using all html tags and

display the information using python CGI programdisplay the information using python CGI program Program to accept the User Name and display a greeting Program to accept the User Name and display a greeting

message.message. Program to accept the User Name, Gender and Age and Program to accept the User Name, Gender and Age and

display a greeting message that is age appropriate. display a greeting message that is age appropriate.

Eg: 60 year old Gentleman named Francis, display Eg: 60 year old Gentleman named Francis, display “Namaste Uncle Francis” “Namaste Uncle Francis”

60 year old Lady named Benazir, display “Namaste Aunty 60 year old Lady named Benazir, display “Namaste Aunty Benazir”Benazir”

18 year old guy named Mahesh, display “Hi! Mahesh. How 18 year old guy named Mahesh, display “Hi! Mahesh. How are you dude? “ are you dude? “