HTML and CGI Scripting

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


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

Webclient

Web server

HTTP


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 …


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

5

protocol hostaddress

port (optional) resource


HTTP Transactions

HTTP request to web serverGET /images/flion.jpg HTTP/1.1Host: www.cs.ncl.ac.uk

HTTP response to web clientHTTP/1.1 200 OKContent-type: image/jpegContent-length: 39275

6CSC8304 – Computing Environments for Bioinformatics - Lecture 10

Sample HTTP SessionGET / HTTP/1.1HOST: www.cs.ncl.ac.uk

HTTP/1.1 200 OKDate: 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>

7

request

response


Status Codes

Status code in the HTTP response indicates if a request is successful

Some typical status codes:

8

200 OK

302 Found; Resource in different URI

401 Authorization required

403 Forbidden

404 Not Found


Gateways

Interface between resource and a web server

9

Web Server DBGatewayhttp


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


CGI Diagram

11

Web Server

ScriptDocument

HTTP request

HTTP responsespawn process


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 12

13

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>


14

HTML Structure


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 15

16

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>


Input types: text Text Fields

• used when you want the user to type letters, numbers, etc. in a form.

17

<form>First name:<input type="text" name="firstname" /><br />Last name:<input type="text" name="lastname" /></form>

• How it looks in a browser:


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

<form><input type="radio" name="sex" value="male" /> Male<br /><input type="radio" name="sex" value="female" /> Female</form>


Input Types: checkbox Checkboxes

• used when you want the user to select one or more options of a limited number of choices.


19

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


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.


20

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


Submit Button

Submits the form for processing by the CGI script specified in the form tag

<input type=submit value=“Submit Order”>


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.


CGI Script: Example


24

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>


Part 2: CGI Script (Perl)

25

#!/usr/bin/perl -wuse strict;use CGI qw(:standard);

# Prints everything until the line with an ENDprint <<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');


Part 2: CGI Script (Perl) continued

26

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


27

Summary

Network protocols HTML and input types CGI Using Perl for CGI scripts

Date post:	01-Feb-2016
Category:	Documents
Upload:	lei
View:	58 times
Download:	0 times

HTML and CGI Scripting

Documents