eXtropia: the open web technology company
Technology | Support | Tutorials | Development | About Us | Users | Contact Us
Resources
 ::   Tutorials
 ::   Presentations
Perl & CGI tutorials
 ::   Intro to Perl/CGI and HTML Forms
 ::   Intro to Windows Perl
 ::   Intro to Perl 5
 ::   Intro to Perl
 ::   Intro to Perl Taint mode
 ::   Sherlock Holmes and the Case of the Broken CGI Script
 ::   Writing COM Components in Perl

Java tutorials
 ::   Intro to Java
 ::   Cross Browser Java

Misc technical tutorials
 ::   Intro to The Web Application Development Environment
 ::   Introduction to XML
 ::   Intro to Web Design
 ::   Intro to Web Security
 ::   Databases for Web Developers
 ::   UNIX for Web Developers
 ::   Intro to Adobe Photoshop
 ::   Web Programming 101
 ::   Introduction to Microsoft DNA

Misc non-technical tutorials
 ::   Misc Technopreneurship Docs
 ::   What is a Webmaster?
 ::   What is the open source business model?
 ::   Technical writing
 ::   Small and mid-sized businesses on the Web

Offsite tutorials
 ::   ISAPI Perl Primer
 ::   Serving up web server basics
 ::   Introduction to Java (Parts 1 and 2) in Slovak

 

introduction to web programming
building a form processor  
Okay, now that we know how to read and parse incoming form data, it is time to put all the pieces together and write or first CGI program.

The most basic CGI program is the Form Processor that simply reads incoming form data and processes it. In this section, we will create a form processor to simply grab form data and echo it back to the web.

As always, first we will need an HTML form so that the user can submit some data. In this case, let's take advantage of the printing functions in perl and have a CGI script dynamically output he HTML instead of having an purely-HTML-based form. Consider the following script:

#!/usr/local/bin/perl
print "Content-type: text/html\n\n";
print qq!
  <HTML>
  <HEAD>
  <TITLE>Testing Form Input</TITLE>
  </HEAD>
  <BODY>
  <FORM METHOD = "POST" ACTION = "fp.cgi">
  <CENTER>
  <TABLE BORDER = "1">
  <TR>
  <TH>First Name</TH>
  <TD><INPUT TYPE = "text"
                NAME = "f_name"></TD>
  </TR>

  <TR>
  <TH>Last Name</TH>
  <TD><INPUT TYPE = "text"
                NAME = "l_name"></TD>
  </TR>

  <TR>
  <TH>Email</TH>
  <TD><INPUT TYPE = "text"
                NAME = "email"></TD>
  </TR>

  </TABLE>
  <P>
  <INPUT TYPE = "SUBMIT">
  </CENTER>
  </FORM>
  </BODY>
  </HTML>!;

As you can see, this script simply outputs an HTML form. On the web, the following CGI script would produce the following interface:

[Example]

As you can see, when the user hits the "Submit" button, they will send their information to fp.cgi via the POST method. Let's take a look at fp.cgi:

#!/usr/local/bin/perl
require "cgi-lib.pl";
&ReadParse(*form_data);

print "Content-type: text/html\n\n";
print qq!
  <HTML>
  <HEAD>
  <TITLE>Testing Form Input</TITLE>
  </HEAD>
  <BODY>
  <TABLE>!;

foreach $key (keys(%form_data))
  {
  print qq!
  <TR>
  <TD>$key</TD>
  <TD>$form_data{$key}</TD>
  </TR>!;
  }


print qq!
  </TABLE>
  </BODY>
  </HTML>!;

fp.cgi will simply read and parse the form data and then echo back the user's input. The following figure shows a typical response:

[Example]

Notice that the form values do not come in the order that you specified on your HTML form. This is because associative arrays store their name/value pairs using their own logic for memory savings. You have to write your own logic for sorting name/value pairs if that is important to you.

Previous | Next | Table of Contents