HTML Search Forms and CGI

1
HTML Search Forms and CGI
2
HTML (Hyper Text Markup Language) Forms
3
HTML is a tool that provides for

• Describing and representing the structure and
  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

4
There are many uses of forms on Web

• As surveys.
• Online order forms.
• Feedback.
• As a means to search a database.
• Or other functions for which user input is
  required.

5
Forms can be created with the following
features

• Selectable lists.
• Radio buttons.
• Checkboxes.
• Text Fields.
• Submit and Reset buttons.

6
General form of FORM tag

• ltFORM  ACTION"URL" METHOD"GET" gt  ... Form
  Element tags ... lt/FORMgt.
• ltFORM
• ACTION http//www.ncsi.iisc.ernet.in/ncsi/test.pl
  
• MTHOD "POST"gt  ... lt/FORMgt.
• ACTION attribute tells the URL where the
  information in the form is to be sent.
• Default method is GET (Takes the information
  entered into the form, and adds this information
  to the URL specified by the ACTION attribute.
• POST method sends the information from the form
  as an encoded stream of data to the web
  (Difference with GET method)

7
Quick reference to FormElement Tag
8
(No Transcript)
9
(No Transcript)
10
ltHTMLgt ltBODYgt ltH1 ALIGNCENTERgtltFONT
SIZE2gtUSER INFORMATION FORMlt/FONTgtlt/H1gt ltFORM
ACTION"/Scripts/simple.pl" METHOD"post" gt User
NameltINPUT TYPE"text" NAME "uname" SIZE30gt
ltBRgt Service TypeltSELECT NAME"service"gtltOPTION
gtCASltOPTIONgtCDRS ltOPTIONgtCOPSATltOPTIONgtDDSltOPTION
gtFDSSltOPTIONgtISS ltOPTIONgtOSSltOPTIONgtSASltOPTIONgtDA
lt/SELECTgt ltBRgt ltH4gtltNOBRgtSUBJECT AREAlt/H4gt
ltINPUT TYPE"checkbox" NAME"agriculture"
gtAgriculture ltINPUT TYPE"checkbox"
NAME"biology" gtBiology ltINPUT TYPE"checkbox"
NAME"biomedicine" gtBiomedicine ltINPUT
TYPE"checkbox" NAME"chemistry" gtChemistry
11
ltBRgt ltBRgt ltINPUT TYPE"radio"
NAME"database"gtAGRIS ltINPUT TYPE"radio"
NAME"database"gtAHEAD ltINPUT TYPE"radio"
NAME"database"gtBIOSIS ltINPUT TYPE"radio"
NAME"database"gtCAB ltBRgt ltBRgt Date
EnteredltINPUT TYPE"text" NAME "entrydate"
SIZE10"gt(dd/mm/yyyy) ltBRgt ltBRgt ltCENTERgt
ltINPUT TYPE "submit" VALUE"Submit Form"gt
ltINPUT TYPE "reset" VALUE"Clear Form"gt
ltCENTERgt lt/FORMgt lt/BODYgt lt/HTMLgt
12
CGI (Common Gateway Interface) Concepts
13

• CGI, permits interactivity between a client and
  a host operating system through a World Wide Web
  via the Hyper Text Transfer Protocol (HTTP).

14
Writing CGI programs involves

• Obtaining input from a user or from a data file.
• Storing that input in program variables.
•  Manipulating those variables to achieve some
  desired purpose, and
• Sending the results to a file or video display.

15

• Data are obtained in ENVIRONMENT variables.
• The ENVIRONMENT variables are shown below in the
  table

16
(No Transcript)
17
(No Transcript)
18
CGI Interaction through HTML Forms
19
Web Browser and Web Server interaction

• Suppose you embed the following hypertext link in
  an HTML document
•     ltA HREF"TEST.HTML"gtTEST.HTMLlt/Agt If you
  were to click on this link, the browser would
  issue the following request to the Web server
•   GET /TEST.HTML HTTP/1.0 Accept text/plain
  Accept text/html
•     Two blank lines

20
Web Browser and Web Server interaction Cont...

• Each of these lines is referred to as a Header.
• No complete path of the file, so the Web Server
  would look TEST.HTML in servers Web-document
  root directory.
• Browser can accept plain text or HTML-formatted
  text files.

21

• Server Response
• HTTP /1.0 200 OK Date Monday, 24-May-96
  110905 GMT Server NCSA/1.3 MIME-version 1.0
  Content-type text/html Content-length 231
  ltHTMLgt ltHEADgt ltTITLEgtTest Pagelt/TITLEgt lt/HEADgt
  ltH1gtThis is the sample documentlt/H1gt  This is a
  test HTML page.  lt/HTMLgt
• Web browser then reads and displays the HTML
  portion of the file.

22
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 html
  form, browser generates a HTTP request 
• GET /Scrits/Workshop/simple2.pl?u11/11/99nameRan
  iserviceCASentrydate 262F112F1999 HTTP/1.0
  and sends to the web browser.

23
GET Method Cont

• The continuous string of text that follows the
  question mark represents the query string.
• In response to this request from the browser, the
  server executes the script simple2.pl and places
  the string
• unameRaniserviceCASentrydate
  262F112F1999,  in the QUERY_STRING environment
  variable and HTTP/1.0 in SERVER_PROTOCOL
• CGI program reads these environment variables,
  process, and passes some results to Web Server

24
POST Method

• Data from the form is encoded as string of data
  divided in NAME/VALUE pair and separated by .
• In case of POST methods with the same html form
  it will generate the request

25
POST Method Cont

•  POST /Scripts/simple2.pl
•  HTTP/1.0
•  Accept text/html
•  Accept text/plain
•  User-Agent
•  Content-type application/ x-www-urlencoded
•  Content-length 28
•  unameRaniserviceCASentrydate
• 262F112F1999

26
POST Method Cont

• With the post method, the server passes the
  information contained in the submitted form as
  standard input     (STDIN) to the CGI program.
• CONTENT_LENGTH contains information about how
  much amount of data being transferred from html
  form.

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"

28
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

29
Web access to RDBMS using ODBC (Open Database
Connectivity)

• ODBC is a standardized API (Application
  Programming Interface)
• ODBC provides a robust set of functions for
  access to a database.
• ODBC is a function set that provides an interface
  that is portable to multiple platforms and RDBMSs
• Web access to RDBMS is basically for Structured
  Database

30
Software Requirements (Windows platform only)

• Windows95/98, Windows NT with Web Browser
• RDBMS
• ODBC Driver for that RDBMS
• Web Server
• CGI Program
• Client Server Architecture

31
(No Transcript)
32
Web access to FoxPro Database

• Basic steps
• Create FoxPro Database
• Create data source using ODBC administrator
• Double click Start/Control Panel/ODBC Data
  Sources (32bit)
• Click System DSN tab then Add button

33
(No Transcript)
34

• Choose the ODBC Driver and press Finish button

35
Give new Data Source Name, Description and path
of the Database then press OK
36
To Configure Connection press File DSN tab, Add,
choose Driver and give same data source as System
DSN
37
Give the path of the database
38
Web access to FoxPro Database Cont

• If no error then done
• Create HTML file with forms where ACTION
  attribute points a CGI program.
• Put HTML file in document root directory of the
  web server
• Write CGI program
• Put CGI program in script alias directory
  (CGI-BIN usually)

39
For Demo

• Microsoft Personal Web Server is used
• C\WEBSHARE\WWWROOT is the (default) document
  root directory
• C\WEBSHARE\SCRIPTS is the (default) directory
  where executables (CGI programs) reside
• Active Perl is used for writing CGI program

40
For Demo Cont

• It is installed in
• C\PERL\BIN - executables
• C\PERL\LIB and C\PERL\SITE\LIB - library files
• ODBC.pm (perl module) and ODBC.PLL files are
  needed for writing CGI program using ODBC
• These files are in C\PERL\LIB or
  C\PERL\SITE\LIB directory
• Microsoft Visual FoxPro is used for creating
  database

41
For Demo

• Table book with the following fields have been
  created
• Title char (200)
• Author char (50)
• Pub_year char (4)
• Publisher char (20)
• Acc_no char (10)
• Language char (10) with Acc_no as a primary key

42
Demo Follows