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

2 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 3 Web client 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. 4 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) :80/modules/2009/CSC protocol host address port (optional) resource CSC8304 – Computing Environments for Bioinformatics - Lecture 10

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

Sample HTTP Session GET / HTTP/1.1 HOST: HTTP/ OK Date: Tue, 1 Sep :00:42 GMT Server: Apache X-Powered-By: PHP/5.1.6 Content-Length: 5344 Connection: close Content-Type: text/html; charset=UTF-8 The School of Computing Science, Newcastle University. 7 request response 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: 8 200OK 302Found; Resource in different URI 401Authorization required 403Forbidden 404Not Found CSC8304 – Computing Environments for Bioinformatics - Lecture 10

Gateways Interface between resource and a web server 9 Web Server DB Gateway http 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 10CSC8304 – Computing Environments for Bioinformatics - Lecture 10

CGI Diagram 11 Web Server Script Document HTTP request HTTP response spawn process 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 1012

13 HTML Example Some Document Some Topics This is an HTML document This is another paragraph CSC8304 – Computing Environments for Bioinformatics - Lecture 10

14 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 1015

16 Using Forms HTML forms are used to collect user input Data sent via HTTP request Server launches CGI script to process data Enter your query: 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. 17 First name: Last name: 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 one of a limited number of choices. How it looks in a browser: 18 Male Female 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: 19 I have a bike: I have a car: I have an airplane: 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: 20 You can add any text in this space that can then be edited by the user. (or just leave it empty) CSC8304 – Computing Environments for Bioinformatics - Lecture 10

Submit Button Submits the form for processing by the CGI script specified in the form tag 21CSC8304 – 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 = param(“fieldname”); All printed output is sent to the user’s web browser. 22CSC8304 – Computing Environments for Bioinformatics - Lecture 10

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

24 Part 1: HTML Form Experiment recorder Record an experiment Experiment complete? Yes No Initial species concentrations: Name Concentration Observations: CSC8304 – Computing Environments for Bioinformatics - Lecture 10

Part 2: CGI Script (Perl) 25 #!/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 Form Result Results are: 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 26 if ($complete eq "yes") { print "The experiment was complete"; } else { print "The experiment did not finish"; } print " \n"; foreach my $key (keys %species_conc) { print "$key at concentration ". $species_conc{$key}. " \n"; } print " \n"; print "Observations: $observations"; print <<END; END CSC8304 – Computing Environments for Bioinformatics - Lecture 10

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