Web forms and CGI scripts Dr. Andrew C.R. Martin

Slides:



Advertisements
Similar presentations
HTML Forms. collect information for passing to server- side processes built up from standard widgets –text-input, radio buttons, check boxes, option lists,
Advertisements

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
Tutorial 6 Creating a Web Form
Supplement Creating Forms. Objectives Show how forms are used How to create the Form element HTML elements used for creating input fields.
CGI Programming Part 2. Input Tags Many different ways of getting data from the user. The tag is used most often. has a type attribute –Specifies the.
JavaScript Forms Form Validation Cookies CGI Programs.
Creating Web Page Forms. Objectives Describe how Web forms can interact with a server-based program Insert a form into a Web page Create and format a.
Tutorial 6 Working with Web Forms
Forms Review. 2 Using Forms tag  Contains the form elements on a web page  Container tag tag  Configures a variety of form elements including text.
World Wide Web1 Applications World Wide Web. 2 Introduction What is hypertext model? Use of hypertext in World Wide Web (WWW) – HTML. WWW client-server.
USER INTERACTIONS: FORMS
Tutorial 6 Working with Web Forms. XP Objectives Explore how Web forms interact with Web servers Create form elements Create field sets and legends Create.
Using Entities & Creating Forms Jill R. Sommer Institute for Applied Linguistics Kent State University.
CGI Programming: Part 1. What is CGI? CGI = Common Gateway Interface Provides a standardized way for web browsers to: –Call programs on a server. –Pass.
Creating Web Page Forms
Tutorial 6 Forms Section A - Working with Forms in JavaScript.
ECA 228 Internet/Intranet Design I Forms. ECA 228 Internet/Intranet Design I Forms forms are a way for a user to communicate with you – text fields –
Web Development & Design Foundations with XHTML Chapter 9 Key Concepts.
Form Handling, Validation and Functions. Form Handling Forms are a graphical user interfaces (GUIs) that enables the interaction between users and servers.
CST JavaScript Validating Form Data with JavaScript.
Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.
Chapter 9 Collecting Data with Forms. A form on a web page consists of form objects such as text boxes or radio buttons into which users type information.
1 Web Developer & Design Foundations with XHTML Chapter 6 Key Concepts.
JAVASCRIPT HOW TO PROGRAM -2 DR. JOHN P. ABRAHAM UTPA.
XP Tutorial 6New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Creating Web Page Forms Designing a Product Registration Form Tutorial.
XP Tutorial 6New Perspectives on HTML and XHTML, Comprehensive 1 Creating Web Page Forms Designing a Product Registration Form Tutorial 6.
CO1552 Web Application Development HTML Forms. Websites can be made more interactive by providing facilities for users to provide data To get user entered.
1 Creating Web Forms in HTML Web forms collect information from customers Web forms include different control elements including: –Input boxes –Selection.
Forms and Form Controls Chapter What is a Form?
Web111a_chapt06.ppt HTML: Section 6 Forms HTML tags: define data input and/or output Define the Input and/or Output on the web page Do not process the.
1 Forms A form is the usual way that information is gotten from a browser to a server –HTML has tags to create a collection of objects that implement this.
Chapter 5 Java Script And Forms JavaScript, Third Edition.
Chapter 6: Forms JavaScript - Introductory. Previewing the Product Registration Form.
XHTML Introductory1 Forms Chapter 7. XHTML Introductory2 Objectives In this chapter, you will: Study elements Learn about input fields Use the element.
Robinson_CIS_285_2005 HTML FORMS CIS 285 Winter_2005 Instructor: Mary Robinson.
Introduction to Programming the WWW I CMSC Summer 2004 Lecture 6.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 7: Web Forms.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 7: Web Forms © 2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page Design.
Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The.
Chapter 8 Collecting Data with Forms. Chapter 8 Lessons Introduction 1.Plan and create a form 2.Edit and format a form 3.Work with form objects 4.Test.
Website Development with PHP and MySQL Saving Data.
LOGO FORMs in HTML CHAPTER 5 Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC229 Client-Side.
1 HTML Forms
1 © Netskills Quality Internet Training, University of Newcastle HTML Forms © Netskills, Quality Internet Training, University of Newcastle Netskills is.
Week 9 - Form Basics Key Concepts 1. 1.Describe common uses of forms on web pages 2.Create forms on web pages using the form, input, textarea, and select.
ITCS373: Internet Technology Lecture 5: More HTML.
XHTML & Forms. PHP and the WWW PHP and HTML forms – Forms are the main way users can interact with your PHP scrip Typical usage of the form tag in HTML.
Tutorial 6 Working with Web Forms. XP Objectives Explore how Web forms interact with Web servers Create form elements Create field sets and legends Create.
Tutorial 6 Working with Web Forms. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Explore how Web forms interact with.
Week 12 Working with Forms Objectives Understand how forms work Understand form syntax Create input objects Build forms within tables Build and.
1 HTML Forms
1 HTML Forms
WWW: an Internet application Bill Chu. © Bei-Tseng Chu Aug 2000 WWW Web and HTTP WWW web is an interconnected information servers each server maintains.
HTLM Forms CS3505. Form Handling in Browser html User Files out form WEbBROWSErWEbBROWSEr User read response submit Get URL?input html Get file html script.
Copyright © Texas Education Agency, All rights reserved.1 Web Technologies Website Forms / Data Acquisition.
Module: Software Engineering of Web Applications Chapter 2: Technologies 1.
1 HTML forms (cont.)
©SoftMooreSlide 1 Introduction to HTML: Forms ©SoftMooreSlide 2 Forms Forms provide a simple mechanism for collecting user data and submitting it to.
Tutorial 6 Working with Web Forms. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Explore how Web forms interact with.
HTML Forms.
Week 10: HTML Forms HNDIT11062 – Web Development.
Basic Webpage Design HTML Forms. Objectives Learn how to use HTML to create a form. Explain the concept of forms Know the difference of GET and POST Discuss.
HTML Forms. A form is simply an area that can contain form fields. Form fields are objects that allow the visitor to enter information - for example text.
Creating Forms on a Web Page. 2 Introduction  Forms allow Web developers to collect visitor feedback  Forms create an environment that invites people.
1 HTML forms (cont.)
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
HTML III (Forms) Robin Burke ECT 270. Outline Where we are in this class Web applications HTML Forms Break Forms lab.
Ashima Wadhwa Java Script And Forms. Introduction Forms: –One of the most common Web page elements used with JavaScript –Typical forms you may encounter.
2440: 141 Web Site Administration Web Forms Instructor: Joseph Nattey.
Presentation transcript:

Web forms and CGI scripts Dr. Andrew C.R. Martin

Aims and objectives Understand how the web works Be able to create forms on HTML pages Understand how CGI scripts can create pages and obtain data from forms Be able to write a CGI script to process data from a form

Internet and Web Internet The Web The Web is just one application of the Internet

The Internet FTP News The Web Remote access RPC The Internet

Names and addresses Each computer has a unique IP address e.g Numbers are difficult to remember! Hierarchical domain name scheme e.g. Names are mapped to numbers using Domain Name Service (DNS)

How does the web work? The World Wide Web was developed to share text via hyperlinks between documents on the same or different servers.

How does the web work? Enter a URL Send domain name to DNS server Obtain IP address Connect to web server Send request for page to web serverWeb server sends page to client Client scans document for embedded images, etc Repeat connection and request for each embedded item Close connection to web server

How does the web work? 'Forms' allow information to be sent to the web server for processing. The web server collects the information and dispatches it to a CGI script for processing. The program outputs information to create a new web page which is returned to the web server and thence to your web browser.

CGI Script How does the web work? Send request for page to web server Pages External Programs RDBMS Web browser Web server CGI can extract parameters sent with the page request

What is CGI? Common Gateway Interface the standard method for a web server to interact with external programs Can be implemented in any language Perl scripts written to interact with a web server are often called CGI scripts The script's standard output is returned by the web server to your web browser

What is CGI? CGI.pm is a Perl module to make it easy to interact with the web server The majority of forms-based web pages use CGI.pm written by a Bioinformatician, Lincoln Stein

Creating a form A simple form: Enter your sequences in FASTA format: To submit your query, press here: To clear the form and start again, press here: How data are sent to the server The CGI script to be run on the server Buttons and text boxes

CGI Scripts Note the location of the script the CGI script will reside on the same machine as the web page can also use a full URL

Post and get get Used where small amounts of data are to be sent Data are sent as part of the URL

Post and get post Used where larger amounts of data are to be sent Data sent separately from URL

Form elements Submit and reset Submit: submit form reset: clear form Text rendered on buttons

Form elements A (large) box for text entry rows= and cols= attributes specify size of box name= gives a name for the CGI script to use for the data Must have a Any text in between will appear as default text in the box

Form elements Checkbox Creates a tick box If the checkbox is clicked, the name/value pair is sent to the server checked=1 pre-ticks a box

Form elements Radio buttons Radio buttons are grouped by name One name/value pair sent to server checked=1 pre-ticks a box

Form elements Text boxes Creates a one-line text box All attributes other than name= are optional <input type=text name=foo value=bar size=x maxlength=y/>

Form elements Pull-down menus size=n gives scrolling list multiple=1 allows multiple selections bar1 bar2

Form elements Various other form elements available All support several other attributes.

Creating CGI scripts HTML tag specifies the script that should be run in the action= attribute CGI scripts live in a specific directory. Typically /var/www/cgi-bin /home/httpd/cgi-bin Web server can be configured to allow CGI scripts in the same directory as HTML pages or elsewhere

Creating CGI scripts Must extract data sent with GET or POST methods This involves quite complex unpacking and decoding All handled (in Perl) by CGI.pm

CGI.pm Very powerful and flexible Very easy to use Also provides methods to write pages Not particularly worthwhile!

OO Syntax CGI module (like many Perl modules) uses object orientated syntax Create a new CGI object The object's methods are then accessed using the arrow (->) syntax. $cgi = new CGI; print $cgi->header();

A simple CGI script #!/usr/bin/perl use CGI; $cgi = new CGI; print $cgi->header(); print <<__EOF; Hello World! Hello World! __EOF Access CGI.pm Create a CGI object Print HTML Print HTTP header

A simple CGI script CGI module used only to create an HTTP header standard header sent to the web browser so it knows the type of data which follows The most useful method provided by the CGI module is the ->param() method – this is used to obtain data from a web page.

Another CGI script #!/usr/bin/perl use CGI; $cgi = new CGI; $val = $cgi->param('id'); print $cgi->header(); print <<__EOF; Print ID Parameter __EOF print ID parameter was: $val \n; print \n;

Names and values Normally only one value for each form element You use a different name= attribute for each item Checkboxes and selection lists can return multiple name/value pairs for the same name.

Obtaining multiple values #!/usr/bin/perl use CGI; $cgi = new = $cgi->param('id'); print $cgi->header(); print <<__EOF; Print ID Parameter __EOF print ID had parameters: \n \n; print $val \n foreach $val print \n \n;

Accessing external programs Often need to access another program (e.g. BLAST) from your CGI script Run a program from a Perl script: Note: Example 1: Must use double inverted commas to interpolate variables Example 2: Alternatively use back-ticks system(/usr/local/bin/myprog $param); $result = `/usr/local/bin/myprog $param`;

Accessing external programs CGI scripts and the programs they spawn run as the 'nobody' user. Search path and environment variables may well not be what you expect!

Accessing external programs Set any environment variables you need in your CGI script: Use the full path to any external programs (possible exception of standard Unix-like commands) $ENV{'varname'}='value';

Temporary files Often need to create temporary working files Must ensure that the filename is unique More than one person could hit your web server at the same time! Use the process ID to ensure unique filename $filename = /tmp/cgifile_$$;

Temporary files May need to create a temporary file to return to the user Most web servers provide a directory in which such files can be written

Summary Forms are used to send data to the web server GET and POST methods for transferring data CGI scripts can simply serve web pages no data obtained from a form CGI scripts can obtain data from a page and run external programs