html and cgi scripting
Download
Skip this Video
Download Presentation
HTML and CGI Scripting

Loading in 2 Seconds...

play fullscreen
1 / 27

HTML and CGI Scripting - PowerPoint PPT Presentation


  • 142 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' HTML and CGI Scripting' - lei


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
html and cgi scripting
HTML and CGI Scripting

CSC8304 – Computing Environments for Bioinformatics - Lecture 10

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

slide4
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
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 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
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 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
Gateways
  • Interface between resource and a web server

http

Web Server

Gateway

DB

CSC8304 – Computing Environments for Bioinformatics - Lecture 10

slide10
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
CGI Diagram

HTTP request

Web Server

HTTP response

spawn process

Script

Document

CSC8304 – Computing Environments for Bioinformatics - Lecture 10

slide12
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

slide13

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
  • <!-- This is a comment -->
  • </body>
  • </html>

CSC8304 – Computing Environments for Bioinformatics - Lecture 10

slide14

HTML Structure

CSC8304 – Computing Environments for Bioinformatics - Lecture 10

what html is not
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

slide16

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
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
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
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
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
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
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
CGI Script: Example

CSC8304 – Computing Environments for Bioinformatics - Lecture 10

slide24

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
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
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
Summary
  • Network protocols
  • HTML and input types
  • CGI
  • Using Perl for CGI scripts

CSC8304 – Computing Environments for Bioinformatics - Lecture 10

ad