1 / 27

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

biancac
Download Presentation

HTML and CGI Scripting

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

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

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

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

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

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

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

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

  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

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

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

  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 • <!-- This is a comment --> • </body> • </html> CSC8304 – Computing Environments for Bioinformatics - Lecture 10

  14. HTML Structure CSC8304 – Computing Environments for Bioinformatics - Lecture 10

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

  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> CSC8304 – Computing Environments for Bioinformatics - Lecture 10

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

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

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

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

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

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

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

  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> CSC8304 – Computing Environments for Bioinformatics - Lecture 10

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

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

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

More Related