Introduction to Programming the WWW I CMSC 10100-1 Winter 2003.

Slides:



Advertisements
Similar presentations
Web forms and CGI scripts Dr. Andrew C.R. Martin
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?
CGI & HTML forms CGI Common Gateway Interface  A web server is only a pipe between user-agents  and content – it does not generate content.
Tutorial 6 Creating a Web Form
The Web Warrior Guide to Web Design Technologies
JavaScript Forms Form Validation Cookies. What JavaScript can do  Control document appearance and content  Control the browser  Interact with user.
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.
XP 1 Creating Web Page Forms Designing a Product Registration Form Tutorial 6.
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.
XP Tutorial 6: Creating Web Page Forms. XP An Example of a Form.
Python and Web Programming
Guide To UNIX Using Linux Third Edition
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.
Session 2 Tables and forms in HTML Adapted by Sophie Peter from original document by Charlie Foulkes.
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.
 2004 Prentice Hall, Inc. All rights reserved. Chapter 25 – Perl and CGI (Common Gateway Interface) Outline 25.1 Introduction 25.2 Perl 25.3 String Processing.
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.
1 Web Developer & Design Foundations with XHTML Chapter 6 Key Concepts.
PHP Tutorials 02 Olarik Surinta Management Information System Faculty of Informatics.
Reading Data in Web Pages tMyn1 Reading Data in Web Pages A very common application of PHP is to have an HTML form gather information from a website's.
4-Sep-15 HTML Forms Mrs. Goins Web Design Class. Parts of a Web Form A Form is an area that can contain Form Control/Elements. Each piece of information.
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.
1 Creating Web Forms in HTML Web forms collect information from customers Web forms include different control elements including: –Input boxes –Selection.
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.
HTML II. Factors to consider in designing a website. Organizing your files. HTML Tables. Unordered Lists. Ordered Lists. HTML Forms. Learning Objectives.
Robinson_CIS_285_2005 HTML FORMS CIS 285 Winter_2005 Instructor: Mary Robinson.
2 1 Sending Data Using a Hyperlink CGI/Perl Programming By Diane Zak.
Introduction to Programming the WWW I CMSC Summer 2004 Lecture 6.
JavaScript, Fourth Edition Chapter 5 Validating Form Data with JavaScript.
Website Development with PHP and MySQL Saving Data.
1 © Netskills Quality Internet Training, University of Newcastle HTML Forms © Netskills, Quality Internet Training, University of Newcastle Netskills is.
11 1 Cookies CGI/Perl Programming By Diane Zak Objectives In this chapter, you will: Learn the difference between temporary and persistent cookies.
CSC 2720 Building Web Applications Server-side Scripting with PHP.
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.
3 1 Sending Data Using an Online Form CGI/Perl Programming By Diane Zak.
7 1 User-Defined Functions CGI/Perl Programming By Diane Zak.
1 HTML Forms
5 1 Data Files CGI/Perl Programming By Diane Zak.
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.
Starting BBEdit or Notepad and Opening the HTML File Start BBEdit or Notepad Select Open from the File Menu Open survey1.htm from the Public Folder.
©SoftMooreSlide 1 Introduction to HTML: Forms ©SoftMooreSlide 2 Forms Forms provide a simple mechanism for collecting user data and submitting it to.
 2001 Prentice Hall, Inc. All rights reserved. Chapter 7 - Introduction to Common Gateway Interface (CGI) Outline 7.1Introduction 7.2A Simple HTTP Transaction.
8 Chapter Eight Server-side Scripts. 8 Chapter Objectives Create dynamic Web pages that retrieve and display database data using Active Server Pages Process.
Tutorial 6 Working with Web Forms. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Explore how Web forms interact with.
Creating Web Page Forms COE 201- Computer Proficiency.
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.
Introduction to Programming the WWW I CMSC Winter 2003 Lecture 17.
Tutorial 6 Creating a Web Form
Lesson 5 Introduction to HTML Forms. Lesson 5 Forms A form is an area that can contain form elements. Form elements are elements that allow the user to.
Lesson 11. CGI CGI is the interface between a Web page or browser and a Web server that is running a certain program/script. The CGI (Common Gateway Interface)
Ashima Wadhwa Java Script And Forms. Introduction Forms: –One of the most common Web page elements used with JavaScript –Typical forms you may encounter.
XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Creating Web Page Forms Designing a Product Registration Form Tutorial 6.
2440: 141 Web Site Administration Web Forms Instructor: Joseph Nattey.
Chapter 7 - Introduction to Common Gateway Interface (CGI)
Chapter 5 Validating Form Data with JavaScript
How to Write Web Forms By Mimi Opkins.
Creating Forms on a Web Page
Presentation transcript:

Introduction to Programming the WWW I CMSC Winter 2003

A Crash Course in Perl Variables: –scalar, array, hash HTML forms CGI Files -- reading and writing

Variables All variables in Perl are prefixed with a special character: –$ for scalar values: $x for list –% for hash values: %hash Both numbers and strings can be scalars Arrays are very similar to Javascript Hashes are “associative arrays”

Scalar variables For numerical values, we can add, subtract, multiply, divide, assign as in Javascript: $x = 42; $y = 63; $z = $x + $y - 32;

String variables $foo=“Hello world”; $bar=“I’m joining the circus”; String concatentation: $foo. $bar String repitition: $foo x 3

Printing scalar data Double quotes vs. single quotes: print “$foo”; #prints Hello World print ‘$foo’; #prints $foo print “\$foo”; #prints $foo Can print result of operations: print “Hello “. “World”; print $foo x 3;

List variables Creating a = (42,64,”foo”); Accessing elements of a list: $mylist[0] = 33; How long is a list? $length = $#mylist + 1; print “$length\n”;

Adding and removing To add or remove from beginning: $class = To add or remove from end $class =

Doing stuff to each = (“Math”,”English”,”CS”); for (my $i=0;$i<=$#classes;$i++) { $classes[$i] = “Honors “. $classes[$i]; } foreach $class { print $class. “\n”; }

Split and join If you have a line of text like: $foo = “Herbert::Smith:: ”; You can split it into three parts by ($last,$first,$num) = split /::/,$foo; Or store the results in an = split /::/,$foo; You can reverse the process $packed = join

Hash Variables A list of name/value pairs (dictionary) %grades = (“Bob”=>42,”Jane”=>45,”Jim”=>90); Lookup/edit in the list by key: print $grades{“Bob”}. “\n”; $grades{“Jane”} = 48;

Other techniques Adding an entry: $grades{“Jill”} = 75; Deleting an entry delete $grades{“Jill”}; Does an entry exist? if exists($grades{“Jill”}) { print “Jill is in the class.\n”; }

Getting keys/values Getting the list of all = keys(%grades); Getting the list of all = values(%grades);

What’s the average grade? $num_students = $#students + 1; $total_points = 0; foreach $grade { $total_points += $grade; } $avg = $total_points / $num_students; print “The class mean is $avg\n”;

HTML Forms All widgets are contained in the tag. …

Widgets Buttons: submit, reset, action Text: input, text areas, passwords Selectors: check, radio, lists Hidden fields Each widget (or group) is transmitted as a name/value pair to the server.

Buttons Basic syntax submit, reset, or button specified by type text appearing on the button given by value can have multiple submit buttons by naming each one

Getting text Allows user to enter a line of text up to maxlength Set type to password to use asterisks –not secure

Text areas Allows free-form entry spanning multiple lines Comments, input on NSF, conference registration sites

Radio buttons A group of several buttons, of which at most one may be checked a b All have same name Can specify a default value by setting one to be checked

Check boxes Group with same name, several can be checked a b Multiple values sent as a list

Selection lists AL AK AR … gives one value can set one option to be selected can also allow multiple items

Hidden fields In multi-form applications, passes information from one page to the next

Common Gateway Interface A standard for interfacing external applications with information servers Not a particular language, but a rule for passing information Many languages provide a module/library for handling this automagically.

The Perl/CGI module use CGI ‘:standard’; gives access to lots of functions, pre- defined strings also gives parameter-passing tools

Example of code generation #!/usr/local/bin/perl use CGI ‘:standard’; print header; print start_html({-title=>’Hello’, bgcolor=>“pink”}); print p(“Hello world”); print end_html;

Getting data from forms Set the action of a form to some perl script Write the Perl script use the param() function to get the value of the form items Example: piping survey

Testing scripts Command-line mode: perl myprog.pl name=value Passing arguments via URL: /myprog.pl?name=value

Environment variables When Perl is started from a browser, a special hash list is created describing how it was invoked. This is called the environmental hash list and is called %ENV Referring Web site, what browser, language, method, remote address, remote host

Environment variables HTTP_REFERRER, REQUEST_USER_AGENT, HTTP_ACCEPT_LANGUAGE, REQUEST_METHOD, REMOTE_ADDRESS, REMOTE_HOST Can configure response to browser or disallow/ allow certain domains

What next? Scripts to write the forms Scripts to validate the form and spit it back if the user didn’t enter everything correctly Example: newform.pl

Files Files are opened via the open command: open(FILE,’filename’); First argument is the “handle” –Similar to FILE* in C Second argument is a string -- the name of the file (perhaps including path)

Options for opening files Read (default): open(HANDLE,’<filename’); Write: open(HANDLE,’>filename’); Append open(HANDLE,’>>filename’); Uses redirection operators from Unix

What about errors? Errors can occur if a file that doesn’t exist is opened for reading, etc open(HANDLE,’<filename’) || die “Can’t open file $!”; sends error message to STDERR The variable $! contains the latest error message returned by a system call open returns 0 or 1

Reading from files (and STDIN) Use the syntax to get either a line or the whole file $aline = = ; By not specifying a location, the line of input appears in $_.

Example To read in a whole file and print it back to the screen, we use the code open(FILE,’filename’) || die $!; while( ) { print $_; } close FILE; An EOF is interpreted as false in the loop

Even more arcane open(FILE,’filename’) || die $!; while( ) { print; } close FILE; The default argument of print (and some other functions) is $_.

More implicit variables Records in a file (normally lines) are separated by $/ –changing this from “\n” to “” reads in paragraph mode, to “undef();” reads in the whole file Output field separator: $, –print “one”, “two” equivalent to –print “one”. $,. “two Output record separator: $\ –Typically blank –Changing it changes the terminal value of print statements

Example Read and print addresses Read, sort, and print addresses Read and print links to addresses

Editing a file Open file for reading Read everything into memory Close the file Make the changes (in memory) Open the file for writing Write the file Close the file