HTML and CGI Scripting

HTML and CGI Scripting CSC8304 – Computing Environments for Bioinformatics - Lecture 10

Objectives • To introduce the Perl programming language • Web protocols (HTML), web-perl interfaces (Perl) • Recommended Books: • SAMS – Teach yourself Perl in 24 hours – Clinton Pierce • Beginning Perl for Bioinformatics – James Tisdall • The Best way to learn Perl is to read the books, numerous tutorials and to Practice. • These notes are not a comprehensive tutorial – reading extra material is essential CSC8304 – Computing Environments for Bioinformatics - Lecture 10

Network Application • Client application and server application communicate via a network protocol • A protocol is a set of rules on how the client and server communicate Webclient Web server HTTP CSC8304 – Computing Environments for Bioinformatics - Lecture 10

HTTP • The HyperText Transfer Protocol, an Internet standard. • Latest version is 1.1. (RFC2068, Jan 1997) • Web browser clients (e.g. Firefox, Internet Explorer) communicate with web servers (e.g. Apache) using this protocol. HTTP request: Get file at this location … HTTP response: Here is the file … CSC8304 – Computing Environments for Bioinformatics - Lecture 10

Resources • Web servers host web resources, including HTML files, PDF files, GIF files, MPEG movies, etc. • Each web object has an associated MIME type • HTML document has type text/html • JPEG image has type image/jpeg • Web resource is accessed using a Uniform Resource Locator (URL) • http://www.cs.ncl.ac.uk :80/modules/2009/CSC8304 protocol resource host address port (optional) CSC8304 – Computing Environments for Bioinformatics - Lecture 10

HTTP Transactions • HTTP request to web server GET /images/flion.jpg HTTP/1.1 Host: www.cs.ncl.ac.uk • HTTP response to web client HTTP/1.1 200 OK Content-type: image/jpeg Content-length: 39275 CSC8304 – Computing Environments for Bioinformatics - Lecture 10

Sample HTTP Session request response GET / HTTP/1.1 HOST: www.cs.ncl.ac.uk HTTP/1.1 200 OK Date: Tue, 1 Sep 2009 08:00:42 GMT Server: Apache X-Powered-By: PHP/5.1.6 Content-Length: 5344 Connection: close Content-Type: text/html; charset=UTF-8 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>The School of Computing Science, Newcastle University</title> </head> <body> . . </body> </html> CSC8304 – Computing Environments for Bioinformatics - Lecture 10

Status Codes • Status code in the HTTP response indicates if a request is successful • Some typical status codes: CSC8304 – Computing Environments for Bioinformatics - Lecture 10

Gateways • Interface between resource and a web server http Web Server Gateway DB CSC8304 – Computing Environments for Bioinformatics - Lecture 10

CGI • Common Gateway Interface is a standard interface for running helper applications to generate dynamic contents • Specify the encoding of data passed to programs • Allow HTML documents to be created on the fly • Transparent to clients • Client sends regular HTTP request • Web server receives HTTP request, runs CGI program, and sends contents back in HTTP responses • CGI programs can be written in any language CSC8304 – Computing Environments for Bioinformatics - Lecture 10

CGI Diagram HTTP request Web Server HTTP response spawn process Script Document CSC8304 – Computing Environments for Bioinformatics - Lecture 10

HTML • File format that describes a webpage • Can be written by hand, or generated by a program • A good way to generate a HTML file is by writing a Perl script CSC8304 – Computing Environments for Bioinformatics - Lecture 10

HTML Example • <!DOCTYPE html> • <html> • <head> • <title>Some Document</title> • </head> • <body> • <h2>Some Topics</h2> • This is an HTML document • <p> • This is another paragraph •  • </body> • </html> CSC8304 – Computing Environments for Bioinformatics - Lecture 10

HTML Structure CSC8304 – Computing Environments for Bioinformatics - Lecture 10

What HTML is not • Modern HTML is a descriptive language • Tells what a element is, not how it’s displayed • Layout, colour, font, style is given via Cascading Style Sheets (CSS) • Dynamic webpages (e.g. changing with user input, updated in real-time, etc) are done using Javascript programs. CSC8304 – Computing Environments for Bioinformatics - Lecture 10

Using Forms • HTML forms are used to collect user input • Data sent via HTTP request • Server launches CGI script to process data <form method=post action=http://www.ncl.ac.uk/cgi-bin/search.cgi> Enter your query: <input type=text name=Search> <input type=submit> </form> CSC8304 – Computing Environments for Bioinformatics - Lecture 10

Input types: text • Text Fields • used when you want the user to type letters, numbers, etc. in a form. • <form>First name:<input type="text" name="firstname" /><br />Last name:<input type="text" name="lastname" /></form> • How it looks in a browser: CSC8304 – Computing Environments for Bioinformatics - Lecture 10

Input types: radio • Radio Buttons • used when you want the user to select oneof a limited number of choices. • How it looks in a browser: • <form> • <input type="radio" name="sex" value="male" /> Male • <br /> • <input type="radio" name="sex" value="female" /> Female • </form> CSC8304 – Computing Environments for Bioinformatics - Lecture 10

Input Types: checkbox • Checkboxes • used when you want the user to select one or more options of a limited number of choices. • How it looks in a browser: • <form>I have a bike:<input type="checkbox" name="vehicle" value="Bike" /><br />I have a car:<input type="checkbox" name="vehicle" value="Car" /><br />I have an airplane:<input type="checkbox" name="vehicle" value="Airplane" /></form> CSC8304 – Computing Environments for Bioinformatics - Lecture 10

Input Types: textarea • Text area • defines a multi-line text input field, the size of a textarea can be specified by the cols and rows attributes. • How it looks in a browser: • <textarea rows=“5" cols=“40">You can add any text in this space that can then be edited by the user. (or just leave it empty)</textarea> CSC8304 – Computing Environments for Bioinformatics - Lecture 10

Submit Button • Submits the form for processing by the CGI script specified in the form tag <input type=submit value=“Submit Order”> CSC8304 – Computing Environments for Bioinformatics - Lecture 10

Parsing Form Input • Easily done using Perl’s CGI.pm module use CGI qw(:standard); • Fields can be queried by the following: For single values: $value = param(“fieldname”); For multiple values (checkboxes): @values = param(“fieldname”); • All printed output is sent to the user’s web browser. CSC8304 – Computing Environments for Bioinformatics - Lecture 10

CGI Script: Example CSC8304 – Computing Environments for Bioinformatics - Lecture 10

Part 1: HTML Form <!DOCTYPE html> <html> <head> <title>Experiment recorder</html> </head> <body> <h1>Record an experiment</h1> <form method=post action="record.cgi"> Experiment complete? <input type=radio name=complete value=yes checked> Yes <input type=radio name=complete value=no> No <hr> Initial species concentrations: <table> <tr><th>Name</th><th>Concentration</th></tr> <tr> <td><input type=text name=species1 value=Example1></td> <td><input type=text name=conc1 size=5 value=42 ></td> </tr> <tr> <td><input type=text name=species2></td> <td><input type=text name=conc2 size=5></td> </tr> </table> <p> Observations: <textarea name="obs" cols=40 rows=6></textarea> <hr> <input type=submit value="Save"> <input type=reset value="Clear"> </form> </body> </html> CSC8304 – Computing Environments for Bioinformatics - Lecture 10

Part 2: CGI Script (Perl) #!/usr/bin/perl -w use strict; use CGI qw(:standard); # Prints everything until the line with an END print <<END; Content-Type: text/html; charset=iso-8859-1 <!DOCTYPE html> <html> <head> <title>Form Result</title> </head> <body> <h1>Results are:</h1> END my $complete = param('complete'); my %species_conc; $species_conc{param('species1')} = param('conc1'); $species_conc{param('species2')} = param('conc2'); my $observations = param('obs'); CSC8304 – Computing Environments for Bioinformatics - Lecture 10

Part 2: CGI Script (Perl) continued if ($complete eq "yes") { print "The experiment was complete"; } else { print "The experiment did not finish"; } print "<p>\n"; foreach my $key (keys %species_conc) { print "$key at concentration ". $species_conc{$key} . "<br>\n"; } print "<p>\n"; print "Observations: $observations"; print <<END; </body> </html> END CSC8304 – Computing Environments for Bioinformatics - Lecture 10

Summary • Network protocols • HTML and input types • CGI • Using Perl for CGI scripts CSC8304 – Computing Environments for Bioinformatics - Lecture 10

HTML and CGI Scripting