CSE 102 Introduction to Web Design and Programming Form Processing with CGI
Sparky & CGI First, everyone needs to setup their Sparky account for CGI Instructions at: http://www.sinc.sunysb.edu/helpdesk/weblevels.shtml#adv add a new directory called “cgi-bin” to your www directory in all HTML forms, you will reference your CGI programs using the URL: http://www.sinc.sunysb.edu/cgi-bin/cgiwrap/aesmaili/script.cgi instead of aesmaili use your Sparky login name instead of script.cgi use the name of the cgi script you wish to use For using perl (a scripting programming language) inside CGI programs, you must reference #!/usr/local/bin/perl
Hello.html <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Web Page with Forms</title> <link rel="stylesheet" type="text/css" href="./css/form.css" /> </head> <body> <p style="font-weight: bold; font-size: larger"> Complete this form:</p> <form method="post" action="http://www.sinc.sunysb.edu/cgi-bin/cgiwrap/????/hello.cgi"> <table width="400"> <tr> <td class="fla"><label for="name">Full Name:</label></td> <td><input id="name" name="name" size="35" /></td> </tr> <tr> <td class="fla"><label for="email">Email:</label></td> <td><input id="email" name="email" size="35" /></td> </tr> <tr> <td></td> <td><input type="submit" value="Send" /></td> </tr> </table> </form> </body> </html>
form.css td.fla { background-color: #d2dbff } form label, form option { font-family: Arial, Helvetica, sans-serif } form input, form select { background-color: #eef }
hello.cgi <?xml version="1.0" encoding="UTF-8" ?> #!/usr/local/bin/perl ## hello.cgi--a toy CGI program use CGI qw(:standard); ## cgi perl module var $name = param('name'); var $email = param('email'); print "Content-type: text/html\r\n\r\n"; print <<END; <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head><title>Hello</title></head> <body> <h3>Hello $name,</h3> <p>The email address you sent is</p> <p>$email</p> </body> </html> END hello.cgi
For the hello.cgi script Make sure it’s file permission is set to 755 same for cgi-bin directory Change the text color and background color for the page returned by the script
JoinClub.html <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Join club.com</title> <link rel="stylesheet" href="formtable.css" type="text/css" title="form" /> </head> <body> <h2>Join <tt>club.com</tt></h2> <form method="post" action="http://www.sinc.sunysb.edu/cgi-bin/cgiwrap/????/join.cgi" enctype="application/x-www-form-urlencoded"> <p style="font-weight: bold; font-size: larger">Join club.com</p> <table width="400"> <tr> <td class="fla" rowspan="1" colspan="1"> <label for="n">Full Name:</label></td> <td rowspan="1" colspan="1"> <input id="n" name="name" size="35" type="text" /></td> </tr> <label for="e">Email:</label></td> <input id="e" name="email" size="35" type="text" /></td> <tr> <td rowspan="1" colspan="1" /> <input type="submit" value="Join Now" /></td> </table> </form> </body> </html> JoinClub.html
join.cgi #!/usr/local/bin/perl # join.cgi--Perl script for # sending email to the manager use CGI qw(:standard); ## cgi perl module var $err_msg = "", $club="ic.sunysb.edu"; var $subject = "-s 'New Member club.com'"; var $cmd="/bin/mail $subject ???\@$club"; var $email = param('email'); ## form data var $name = param('name'); #var $cmd="/bin/mail $subject $email"; var $xhtml_front = '<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">'; if ( ! $name ) ## $name is empty { $err_msg .= "<p>Name must be specified.</p>"; } if ( ! $email ) ## $email is empty { $err_msg .= "<p>Email must be specified.</p>"; if ( $err_msg ) { &error(); ## function call exit; ## terminate program ## mail notice to manager open(MAIL, "| $cmd"); print MAIL "Name: $name\n"; print MAIL "Email: $email\n"; print MAIL "to join $club"; close(MAIL); ## Send response to standard output print "Content-type: text/html\r\n\r\n"; print <<END; $xhtml_front <head><title>Thanks for Joining</title></head> <body style="background-color: white"> <h3>Thank you $name.</h3> <p>Welcome to club.com. Your membership will be processed shortly.</p> <p>We will email you at <code>$email</code> about your new membership at $club.</p> </body></html> END ####################################### sub error() { print "Content-type: text/html\r\n\r\n"; print "$xhtml_front\r\n"; print '<head><title>Error</title></head>'; print '<body style="background-color: white">'; print '<h3>Data Missing</h3>'; print "<p>$err_msg Please go BACK, make corrections, "; print 'and submit the form again.</p> </body></html>'; join.cgi
join.cgi (another way) #!/usr/local/bin/perl -- # join.cgi--Perl script for # sending email to the member use CGI qw(:standard); ## cgi perl module var $err_msg = "", $club="ic.sunysb.edu"; var $subject = "New Member club.com"; var $email = param('email'); ## form data var $myEmail = "YOUR_SPARKY_USERNAME\@ic.sunysb.edu"; var $cmd="/bin/mail $myEmail"; var $name = param('name'); var $xhtml_front ='<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">'; if ( ! $name ) ## $name is empty { $err_msg .= "<p>Name must be specified.</p>"; } if ( ! $email ) ## $email is empty { $err_msg .= "<p>Email must be specified.</p>"; if ( $err_msg ) { &error(); ## function call exit; ## terminate program ## mail notice to manager open(MAIL, "| $cmd, $email"); print MAIL "To: $email\n"; ## should be same as address above print MAIL "From: Name of sender\@from.com\n"; print MAIL "Sender: The Sender\@sender.com\n"; print MAIL "Subject: $subject\n"; print MAIL "\nName: $name\n"; print MAIL "Email: $email\n"; print MAIL "to join $club *****\n\n"; print MAIL "Browser: $ENV{'HTTP_USER_AGENT'}\n\n"; print MAIL "IP Address: $ENV{'REMOTE_ADDR'}\n\n"; print MAIL "Host: $ENV{'REMOTE_HOST'}\n\n"; close(MAIL); ## Send response to standard output print "Content-type: text/html\r\n\r\n"; print <<END; $xhtml_front <head><title>Thanks for Joining</title></head> <body style="background-color: white"> <h3>Thank you $name.</h3> <p>Welcome to club.com. Your membership will be processed shortly.</p> <p>We will email you at <code>$email</code> about your new membership at $club.</p> </body></html> END ####################################### sub error() { print "Content-type: text/html\r\n\r\n"; print "$xhtml_front\r\n"; print '<head><title>Error</title></head>'; print '<body style="background-color: white">'; print '<h3>Data Missing</h3>'; print "<p>$err_msg Please go BACK, make corrections, "; print 'and submit the form again.</p> </body></html>'; join.cgi (another way)