Making Websites Interactive

1
Making Websites Interactive

• Bryant College EDC
• Web Developer Certificate Program
• Spring, 2001

2
Objectives

• Creating good forms
• Understand how to implement JavaScript
• Client Side field validation
• Understand Server Side Processing
• Implement PERL to process form data
• Create Interactive Web Pages and E-Mail
• Capturing and Storing Customer Data

3
Overview

• Part 1 Interactivity Basics
• - Introduction
• - Definitions
• Part 2 Forms Processing
• - Form Tag
• - Form Elements
• - Aligning Forms
• - Executing Pre-Defined Scripts

4
Overview

• Part 3 JavaScript
• - Definition
• - Java vs JavaScript
• - Document Object Model
• - Events and Event Handlers
• - Functions and Methods
• - Examples
• - Debugging

5
Overview

• Part 4 CGI/PERL
• - Define CGI and PERL
• - PERL Variables and Expressions
• - Environment Variables
• - Getting Data
• - Creating E-Mails
• - Creating HTML Pages
• - Reading and Writing Files

6
The Basics

• Interactivity needed to attract customers
• Makes the site engaging and fun
• Helps to validate the expense
• Cheap Marketing tool
• Types of Interactivity
• Forms
• E-Mails
• Image Rollovers
• Friendly Web Pages

7
The Basics

• Definitions
• Client vs Server Side Processing
• Forms Processing
• Scripting Languages
• CGI/PERL

8
Forms Processing

• ltFORMgt tag
• Starts a FORM
• Must have an lt/FORMgt tag
• Contains a few attributes
• Can have multiple on a page
• Cannot be embedded
• Format is
• ltFORM ACTIONmailtotraining_at_ecentricsites.com
  
• ENCTYPEapplication/x-www-form-urlencoded
• METHODPOST
• NAMEmailform
• gt

9
Form Elements

• Three types of form elements ltINPUTgt, ltSELECTgt,
  and ltTEXTAREAgt
• ltINPUT TYPEtext NAMEfirstname SIZE20
  Maxlength30gt
• Creates the TEXT input box for the users name in
  our form
• NAME defines the name of the data for the field
• Use only letters, numbers, and underscores
• TYPE defines the various types of input fields
  recognized by HTML

10
Form Elements

• ltINPUT TYPEtext NAMEfirstname SIZE20
  Maxlength30gt
• SIZE specifies how big the form field should be
  displayed
• The user could still type more than 20 characters
  in the above field, the browser just scrolls the
  text in the window
• We can limit the length using MAXLENGTHnum

11
Form Elements

• ltINPUT TYPEcheckbox NAMEhobby VALUE0
  CHECKEDgtSkiing
• ltINPUT TYPEcheckbox NAMEhobby
  VALUE1gtSky Diving
• Creates CHECKBOX input fields for the user
• VALUE is used to assign a value to the checkbox
  when it is CHECKED
• Data following ltINPUTgt tag is displayed next to
  checkbox
• The CHECKED attribute will pre-check the box.
• More than 1 Check Box can be selected

12
Form Elements

• ltINPUT TYPEradio NAMEsex VALUEMgtMale
• ltINPUT TYPEradio NAMEsex VALUEFgtFemale
• Creates RADIO input fields for the user
• VALUE is used to assign a value to the radio
  button when it is CHECKED
• Data following ltINPUTgt tag is displayed next to
  radio button
• The CHECKED attribute will pre-select a radio
  button.
• Only ONE radio button can be selected

13
Form Elements

• ltSELECT NAMEcreditcard SIZE1gt
• ltOPTION VALUEVgtVisa
• ltOPTION VALUEA SELECTEDgtAmex
• lt/SELECTgt
• SELECT specifies that you have a drop down box
  and SIZE indicates how many drop down items to
  show at one time
• OPTION specifies an item in the drop down box.
  VALUE indicates what the selection is assigned
  when the user selects it.
• SELECTED will pre-select the item from the drop
  down box
• MULTIPLE as an attribute for the SELECT tag
  allows multiple selections to be valid.

14
Form Elements

• ltTEXTAREA NAMEcomments ROWS3 COLS30gtInsert
  Comments Here lt/TEXTAREAgt
• TEXTAREA specifies that you have a large amount
  of text to capture
• ROWS and COLS indicate how big of a text area to
  DISPLAY.
• ltTEXTAREAgt needs a lt/TEXTAREAgt tag
• Data between the ltTEXTAREAgt and lt/TEXTAREAgt tags
  will be put into the text area box.

15
Form Elements

• ltINPUT TYPESUBMIT VALUETest this formgt
• Each form must have exactly one field of type
  submit
• This creates the button the user pushes when
  theyre done
• You can put whatever words you want in the submit
  button, using the VALUE keyword
• The default will be Submit
• When this button is clicked, the browser collects
  all the values of each of the input fields and
  sends them to the web server identified in the
  ACTION keyword

16
Form Elements

• ltINPUT TYPERESET VALUEReset this formgt
• This creates a button the user can push to reset
  all form fields to their initial state
• You can put whatever words you want in the submit
  button, using the VALUE keyword
• The default will be Reset
• When this button is clicked, the browser resets
  all inout fields to their initial state, Items
  marked as SELECTED or CHECKED will be set ON

17
Aligning Forms

• Important to Align your Form for Visual
  Presentation
• When user resizes window, form could become
  distorted
• Form can look different across browsers and may
  be rendered different
• Tables can be used to align fields properly
• Form will keep its visual look and feel across
  browsers and during resizing

18
Executing Server Scripts

• Many pre-defined scripts on the internet
• Can interface with them directly
• Can copy them and make small changes and use them
  (with owners permission)
• Why reinvent the wheel
• Good site for scripts is
• http//cgi.resourceindex.com/Programs_and_Script
  s/PERL/

19
JavaScript Scripting Language

• Developed by Netscape
• Recognized across browsers
• Browsers execute JavaScript statements when
  processing an HTML page for display
• Can create mouse rollover events
• Add conditional behavior to a web page
• Interpret Form data
• Pop up Message boxes and Dialog boxes

20
JavaScript vs Java

• Not Related
• JavaScript is interpreted and Java is compiled
• JavaScript is run on the client, Java applets
  reside on the server and are copied to the client
  for execution
• JavaScript does not have classes, inheritance,
  and strong variable typing

21
Document Object Model

• Way for Scripting languages to reference objects
  on a web page
• Reference objects on a page using the DOM model
  standard of
• objectName.propertyName
• objectName can be standard object like window,
  or a sub object within the window like a form
• Example
• window.document.formname.buttonname

22
Document Object Model
23
Document Object Model

• Examples
• window.document.formname.textbox.value
• window.document.bgColor 333333
• document.write(You just came from
  history.previous)

24
Placement of JavaScript

• JavaScript is embedded into an HTML document
• Can be embedded in one of four ways
• As statements and functions within the ltSCRIPTgt
  tag
• Specified as a file to be included with the HTML
  source
• As a JavaScript expression as the value for an
  HTML attribute
• As event handlers within certain HTML tags

25
The ltSCRIPTgt Tag

• Can be declared anywhere within the HTML code via
  the ltSCRIPTgt and lt/SCRIPTgt tags
• Example
• ltSCRIPT LANGUAGEJavaScript
• TYPEtext/javascriptgt
• lt--
• Javascript Code
• --gt
• lt/SCRIPTgt
• Comment lines hide code from older browsers
• LANGUAGE attribute tells browser its JavaScript

26
JavaScript Source File

• SRC attribute of ltSCRIPTgt tag allows you to
  specify a file to be embedded
• Example
• ltSCRIPT SRCcommon.jsgt
• Javascript Code
• lt/SCRIPTgt
• Any statements specified within the script tag
  are ignored if the file is found
• External JavaScript file should have a .js suffix
• Only JavaScript statements within the JavaScript
  file

27
JavaScript Expressions

• Used as a Value for an HTML attribute
• Example
• ltHR WIDTHbarwidth ALIGNLEFTgt
• Start with an
• Ends with a
• Variable must already have been defined within
  previous JavaScript code
• Netscape only

28
Event Handlers

• Can be added as an event handler to an HTML tag
• Example
• ltINPUT TYPEbutton ValueClick Me
• onClickalert(I\ve been clicked)gt
• onClick is the event handler
• Put JavaScript instructions in quotes
• Alert is a pre-defined JavaScript function

29
Events and Event Handlers

• Events are defined actions on objects
• Events Handlers are defined JavaScript functions
  that do something when the event happens
• Three major events on which you can add event
  handlers
• Form related events
• Links
• Loading and Unloading windows

30
Form Related Events

• onClick, onBlur, onChange, onFocus, onSelect
• Add event as an attribute to the object HTML tag.
• ltINPUT TYPEbutton valueClick Me
• onClickdosomething()gt

31
onBlur Event

• Occurs whenever a form object loses focus.
• Works with Input element Type text
• Works with the Textarea element
• Works with the Select element
• Example
• ltINPUT TYPEtext Nametext1
  onBluralert(You have just left the text1 form
  field)gt

32
onChange Event

• Occurs whenever a form object loses focus AND its
  value has changed.
• Works with Input element type text
• Works with the Textarea element
• Works with the Select element
• Example
• ltINPUT TYPEtext Nametext1
  onChangealert(You have just modified form
  element text1)gt

33
onClick Event

• Occurs whenever a form object is clicked with a
  mouse.
• Works with Input element types button,
  checkbox, radio, reset, and submit
• Example
• ltINPUT TYPEbutton Namebutton1
  onClickalert(Button1 has been clicked)gt

34
onFocus Event

• Occurs whenever a form object receives focus
• Works with Input element type text
• Works with the Textarea element
• Works with the Select element
• Example
• ltINPUT TYPEtext NameHocusPocus
  onFocusalert(HocusPocus has Focus)gt

35
onSelect Event

• Occurs if the text has been highlighted via a
  dragging of the mouse or tabbing into non-empty
  fields
• Works with Input element type text
• Works with the Textarea element
• Works with the Select element
• Example
• ltINPUT TYPEtextarea Nametextarea1
  onSelectalert(Text has been selected)gt

36
Events on Links

• onClick, onMouseover, onMouseout
• Add event(s) as an attribute to the ltA HREFgt
  object HTML tag.
• ltA HREFhttp//www.somecompany.com
  onMouseoverwindow.statusSpecializes in Custom
  software codereturn truegtGo to Somecompanylt/Agt

37
Events on (Un)Loading Windows

• onLoad and onUnload events
• Use as an attribute to the ltBODYgt tag.
• Can also be used with the ltIMAGEgt tag
• ltBODY onLoadalert(Welcome to my Lair)
  onUnloadalert(You\ll be back)gt

38
Functions and Methods

• A Function is a set of JavaScript statements that
  perform a task
• A Method is basically a pre-defined function
  associated with an object.
• ALERT() is a method
• DoSomething() is a function that you create
• WRITE is a method for the document object

39
Functions

• Should be placed in the ltHEADgt portion of the
  document
• JavaScript statements within a function are not
  executed until the function is called
• Format is
• function displaymessage()
• alert(Another annoying popup)
• Can pass parameters within the ()

40
Methods

• Associated with an object
• window.open(http//www.yahoo.com, window1,
  scrollbarsyes, statusyes, width300,
  height300)
• history.back()
• prompt(Enter your name, )

41
Image Rollovers

• Easy to implement
• Uses Event Handlers and Document Object
  Referencing
• Can make a function which handles all image
  swapping

42
Verifying Form Data

• Save time
• No need to go to server
• Can do this with a JavaScript Function
• ltFORM ACTIONserverstuff.cgi
• NAMEmyform
• onSubmitreturn VerifyForm(document.myform)
• gt

43
Debugging JavaScript

• Most time spent debugging
• Stay calm
• Use Alert boxes
• Check for syntax
• Check for missing brackets or typos
• Code little pieces at a time and test
• Comment your code
• JavaScript is CaSe SeNsItIvE

44
The Common Gateway Interface

• CGI
• Protocol not a Language
• CGI scripts are programs that follow the CGI
  protocol
• Interactive web sites take advantage of CGI to
  process data on the server
• Use CGI to create e-mail, search databases, log
  activity or even put a counter on a page
• PERL is the most common programming language that
  is used for CGI

45
PERL

• Practical Extraction and Report Language
• Originally written for scanning text files,
  extracting information and printing reports
• Expression syntax resembles C
• Interpreted language and highly portable across
  systems
• WEB programming choice
• Many available scripts

46
PERL for the Web

• A few things are needed for PERL to work properly
• Shebang Line
• !/usr/bin/perl
• HTML header
• print Content-type text/html\n\n
• Two \n are required
• Save file as .pl
• Upload File to server as ASCII
• Place in cgi-bin directory and CHMOD to 755

47
Variables and Expressions

• Numbers and Strings
• Constants and Variables
• Scalars
• myvar Jim
• Arrays
• _at_myarray (Jim, Harry, Sally)
• Hashes
• myhash (Jim, Schmidt, Harry,
• Carrey, Sally, Jones)

48
Operators and Functions

• , -, , and /
• average totalamount / 10
• If (average 10) code
• If (average ! 10) code
• else code
• Functions perform an action
• print (My first PERL script)

49
Functions

• Pre-defined functions and functions you create
• Functions can changed operands or return a result
  value
• Shift(_at_names) would modify the _at_names array by
  shifting all values down 1 and returning the
  first item in the array
• Sort (_at_array) will sort the array in ASCII order
• Subroutine is a function you create
• sub dosomething
• some code
• return 1

50
Environment Variables

• Supplied by Server every time you request a page
• Stored in a special hash variable called ENV
• Can be used to determine if the Get or Post
  method was used
• Other variables show the IP address of sender,
  what browser they are using, and the Current Date

51
GET vs POST

• GET appends data onto the URL
• POST places data into the STDIN
• Data is in the form name/value separated by an
  for all the fields of the form being
  submitted
• REQUEST_METHOD will contain GET or POST
• QUERY_STRING will contain the data for the GET
  method
• CONTENT_LENGTH will contain the data found in
  STDIN for the POST

52
ParseForm Routine

• Generic Subroutine to get all the form data and
  place into a hash called formdata
• Works for GET or POST
• Can be included into the PERL source code with
  the require statement
• Form elements can be accessed using the format
  formdatakey

53
Creating E-Mail

• Use formdata to create an E-Mail
• Open up a pipe to the mail program
• open(MAIL,/usr/lib/sendmail -t)
• Use print function to send data to the mail
  program
• print MAIL To formdatarecipient\n
• Need two \n at end of mail header before data
  section starts
• When done use close(MAIL) to close pipe and
  send the mail

54
Creating E-Mail

• When performing an open always add an Error
  Handler
• open(MAIL,/usr/lib/sendmail -t)
• ErrorMessage
• Can use a label to perform piping
• print MAIL ltlt_EOT
• ..stuff ..
• _EOT
• close(MAIL)

55
Formatting E-Mail

• Can access form field by name
• firstname formdatafirstname
• Can print all fields with a loop
• foreach key (keys(formdata))
• print MAIL key formdatakey\n
• Can format the values
• amount formdataamount
• formatamt sprintf(\.2f, amount)
• print MAIL amount formatamt

56
Creating HTML

• MIME content header
• Format HTML with the print function
• Use a backslash \ before special characters so
  PERL doesnt try to interpret them.
• Add a newline character (\n) where you would like
  a return in the HTML
• Route to an existing HTML page using the Location
  header
• print Location /webpages/thankyou.html\n\n

57
Working with Files

• We can read and write to files on our server
• Use the open command
• open (MYFILE , gt../files/myfile.txt)
• Error)
• A filehandle is created
• To write data to the file use the print function
• print MYFILE data
• Can read one record at a time or the whole file
• record ltMYFILEgt
• _at_wholefile ltMYFILEgt

58
Working with Files

• File can be used as a database. Simply add
  delimiter characters when writing the data out
• When the data is read back in, use the split
  function to split on your separator character to
  build an array and/or hash.
• Good idea to lock a file if you are going to be
  writing to it. Use the flock(MYFILE,2) function