Html and cgi scripting
Download
1 / 27

HTML and CGI Scripting - PowerPoint PPT Presentation


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


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


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


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

  • <!-- This is a comment -->

  • </body>

  • </html>

CSC8304 – Computing Environments for Bioinformatics - Lecture 10


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


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


    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