Web Programming Course

1
Web Programming Course

• Lecture 9 Web Programming 1

2
Web pages

• A Web page
• A file with an .htm or .html extension
• Contains HTML, but might also contain other code
• Stored on a server
• Static Web pages
• Contain HTML tags only
• Simply display information
• Content does not change when requested by the user

3
Web pages

• Dynamic Web pages
• Content changes depending on the users request
  and preferences
• Cannot be created using HTML alone
• Dynamic Web pages can be created using
• Client-side code
• Server-side code

4
Web Programming

• 3 major components
• Networking
• Distributed Programming, lecture 1
• Client-side
• HTML, Applets, Scripts, CSS, ActiveX,
• Server-side
• CGI, PHP, Servlets, JSP/ASP,

5
Web Programming

• Client-side code
• Declared by elements and executed in the browser
• Provide immediate feedback to the user
• Reduce the load on a server
• Reduce network traffic
• Server-side code
• Executed on the server side
• The code remains hidden from the clients
• Browser- and client-independent

6
Client-side programming

• Focuses on the stuff that is run on client
  machine, usually by the browser.
• HTML interpreted and displayed.
• Java byte code interpreted and executed.
• JavaScript interpreted and executed.

Server
Client
Hello
HTML
HTML files and programs
Web browser
7
What is HTML?

• HTML is the common language for Web publishing.
• Hyper Text Markup Language Language for
  describing the general form and layout of
  documents to be displayed by the browser.
• HTML 4.0 http//www.w3.org/TR/html4/intro/intro.h
  tml
• Can not be used to describe computations
• Initial version was invented by Tim Berners-Lee
  from the European Laboratory for Particle
  Physics.
• Originally developed for sharing scientific
  documents on the Web

8
What is HTML?

• HTML is based on the Standard Generalised Markup
  Language (SGML).
• In SGML we label a section of text by adding
  start and end tags
• e.g., Joe
• There are different markup languages based on
  SGML with different tags (allowing different
  named elements)
• e.g., XML

9
What is HTML?

• HTML documents are plain text files
• They can be created using any text editor.
• Contain text and HTML mark-up tags.
• Markup tags
• Define structure of the visual document
• Describe elements representing the style and.
• Sophisticated WYSIWYG authoring tools exist

10
Browsers

• Browsers include HTML interpreting component
• Browsers aim to display any version of HTML code,
  even if it has errors.
• Different browsers with different settings will
  display a page differently.
• Incorrect HTML may be displayed weirdly or not at
  all in some browsers.

11
Markup Tags

• An HTML element may include a name, some
  attributes and some text or hypertext, and will
  appear in an HTML document as
• text attributeargument text
• For example
• My Document srcmypic.jpg altme

12
Markup Tags

• Tags start and end with angle brackets (e.g.,
  ).
• Most of them need a start and an end tag to mark
  up a region.
• End tags have an additional /.
• My Page
• A pair of start and end tags define elements.
• head element gives information about page.
• body element contains content of page.

13
A Sample HTML Document
Nesting structure
My web page
Welcome to my
webpage!
HTML
HEAD
TITLE My web page
BODY Welcome to my webpage!
14
Tag attributes

• Some HTML tags have optional attributes
• For example
• BGCOLOR stands for background color
• src points on the source file for the image

15
Some Structural elements

• 
  line break
• paragraph
• defines the start of a table
• a row in a table
• a cell in a table (table data)
• end tag
• end tag
• list
  list item
  end tag

16
More elements

• defines a font style
• bold
• italic
• underlined
• heading 1
• heading 7
• pre-formatted
• 
  line break

17
Adding multimedia

• Images and other multimedia elements easily added
  to the page, e.g.,
• The included image is indicated using a URL.
• Use an alt attribute giving a text description of
  the file, for the user who can not access the
  image.
• Recent versions of HTML use the object element to
  incorporate any media object, rather than img.

18
Hyperlink elements

• General form
• anchor
• Link usually point to other HTML documents
• However, they can also point to images, music
  files, movies and other objects
• Anchor is the visual (clickable) part of the link
• This is the visual part of the hyperlink
• Make the anchors sensible

19
HTML Forms

• HTML forms are used to create (rather primitive)
  GUIs on Web pages
• Usually the purpose is to ask the user for
  information
• The information is then sent back to the server
• Created using the tags pair
• Form elements include buttons, checkboxes, text
  fields, radio buttons, drop-down menus, etc
• A form usually contains a Submit button to send
  the information in the form elements to the server

20
HTML Forms

• The parameters of the form starting tag define
  how to send the information
• ACTION the URL where the data will be sent.
• METHOD can be set to POST or GET
• POST The default method. User data is placed in
  the form collection of the request object to be
  passed to the server.
• GET User data is passed to the server by adding
  it to the end of the URL address. The data is
  sent as an encoded stream.

21
Forms elements
22
Forms elements
23
Form example

• A text field value"with an initial value"
• A multi-line text field name"textarea" cols"24" rows"2"Hello

24
Form example

• A submit button name"Submit" value"Submit"
• A reset button name"Submit2" value"Reset"
• A plain button name"Submit3" value"Push Me"
• Submit send the data
• Reset restore the forms initial values
• Push me another action,defined by some script

25
Form example

• A checkbox name"checkbox value"checkbox" checked
• name used to reference this form element from
  the script
• value value to be returned when element is
  checked

26
Form example

• Radio buttons
  name"radiobutton" value"myValue1"
  male
  value"myValue2" checked female
  
• If two or more radio buttons have the same name,
  they are mutually-exclusive (buttons group)
• The value of that name returns the value
  specified for the selected radio button

27
Form example

• A menu or list
  red value"green"green value"BLUE"blue
• Additional arguments
• size for list, the number of visible items
  (default is 1)
• multiple for list, may multiple items may be
  selected (default is "false")?

28
Form example

• Form can include hidden fields to be passed to
  the script name"hiddenField" valuehiddenParam"
• This is a way to pass information that the user
  will not see
• However, it is not secure
• The hidden value are transferred as plain text
• They can be seen in HTML source

29
Form Example
SIZE2USER INFORMATION FORM
ACTION"/Scripts/simple.pl" METHOD"post" User
Name

Service Type
CASCDRS COPSATDDS
FDSSISS OSSSASDA

SUBJECT AREA

Agriculture
NAME"biology" Biology
NAME"biomedicine" Biomedicine
TYPE"checkbox" NAME"chemistry" Chemistry
30


NAME"database"AGRIS
NAME"database"AHEAD
NAME"database"BIOSIS
NAME"database"CAB

Date
Entered
SIZE10"(dd/mm/yyyy)





Form Example
31
Form Example
32
Advantages of HTML

• HTML was the first accessible way that data could
  be interactively processed
• Linking Data is linked in HTML, letting one
  piece carry you to another.
• Simplicity HTML is simple, making it easy to
  learn
• Portability HTML is interpreted by the browsers,
  making it portable, especially in distributed
  environment.

33
Disadvantages of HTML

• HTML is a fixed language
• Lacks Extensibility centralized standard, can
  not be easily extended for special applications
• Lacks strong Model-View concept the underlying
  data and its visualization are not clearly
  separated
• Most Web browsers will display an HTML document
  even when they contain errors

34
XHTML

• So far we have looked at pure HTML
• noting is based on the SGML standard for markup
  languages
• SGML has now been largely replaced by XML
  (eXtensible Markup Language)
• XML is simpler and stricter than SGML
• more suitable for lightweight processing in Web
  applications
• XHTML is an eXtensible and XML-compatible version
  of HTML 4

35
XHTML format

• XHTML elements must be properly nested
• bold and italic is wrong
• XHTML documents must be well-formed
• ... ...
  
• Tag names must be in lowercase
• All XHTML elements must be closed
• If an HTML tag has no closing tag, close it like
  this
  , ,

36
Cascading Style Sheets (CSS)

• HTML should be about the content and the
  structure of a document
• not how it should be displayed.
• Ideally, we would like to keep control of the
  presentation separate

37
Cascading Style Sheets (CSS)

• Provides a powerful and flexible way to control
  the details of web documents.
• HTML is more concerned about the content, CSS is
  used to impose a particular style on the
  document.
• Named Cascading Style Sheets because they can be
  defined at 3 different levels to specify the
  style of a document.
• Inline, document level, external.

38
Cascading Style Sheets (CSS)
39
Cascading Style Sheets (CSS)

• CSS specifies how different elements should be
  displayed
• body background-color blueh1 color red
  font-family times
• CSS instructions can be in the HTML file
• body background-color
  blue h1 color red
• Or, they can be linked from another file
• hrefmystyle.css

40
Cascading Style Sheets (CSS)

• CSS can be applied to a class of elements, or to
  a single element only.
• External CSS is better if the same style will be
  applied to many pages.
• Good for consistent appearance across site.
• When there is conflict between internal and
  external CSS, internal overrides the external

41
Scripting

• Scripting languages are simple interpreted
  programming languages.
• Scripts are used on
• client side - program is run by the browser
• server side - results are sent to the browser.
• We focus on client-side scripts to add
  interactivity to Web pages.
• script is embedded in the Web page.
• Most popular scripting language is JavaScript

42
Javascript

• Page is no longer static and fixed, Javascript
  changes the contents of a page.
• Assists in completion and checking of forms.
• Provides user control with client-side of page
  appearance and content.
• Differs from Java, but some similar syntax.
• Much simpler - not fully object-oriented.
• Not compiled, but interpreted. Interpreter reads
  and executes JavaScript, not the bytecode.
• Weakly typed, types are not declared.

43
Javascript example

• Embedded in the page, between tags.
• Written as an HTML comment
• Note the script specification text/javascript
• First JavaScript Page
  
• First JavaScript Page

44
Javascript files

• If the JavaScript code is short, it can be
  included in the HTML document.
• It can be also placed in a separate .js file
• To add clarity to an HTML document.
• To share JavaScript code across multiple HTML
  documents.
• To hide the script code.
• In this case, viewer can only see the location of
  the script file but not the contents.
• Independence between the HTML and the script

45
Javascript variables

• Types of the variables are not declared
• var is used to declare variables.
• No need to end statements with a semicolon
• New line is assumed to be a new statement
• Can get input from user simple dialogues
• prompt, confirm, alert
• var nameprompt("what is your name?")
• document.writeln(" Hello " name ".")

46
Javascript user input
alert("This is an
Alert method") confirm("Are you
OK?") prompt("What is your name?") prompt("How
old are you?","20")
47
Javascript control flow

• Javascript supports loop and conditional
  constructs
• var counter
• for(counter1 counter
• document.writeln("cnt"counter"")
• var name prompt("What is your name?")
• if(name"John") document.writeln("Hello.")
• else if(name"Jean")
• document.writeln("Bonjour.")
• else document.writeln("Who are you?")

48
Javascript and OOP

• In the Web browser, certain parts of the document
  are considered as objects
• the browser window, forms, buttons, text boxes,
  etc
• Javascript facilitates accessing and modifying
  objects in a document
• Methods can be invoked on the objects
• document.writeln(hello)
• Their properties can be changed.
• document.bgColorblue

49
Javascript events

• Events are the actions occurring as a result of
  browser activities or user interactions with the
  page.
• Keyboard and mouse events
• Capturing a mouse event is simple
• Load events
• The page first appears on the screen Loads,
  leaves Unloads
• Form-related events
• onFocus() refers to placing the cursor onto a
  certain element.
• Others
• Errors, window resizing, etc

50
Javascript events

• Simple JavaScript Button
• Simple JavaScript Button
• value"Don't Click Me"
• onClick"dontClick()"

51
Javascript errors

• Runtime exceptions can occur while executing
  Javascript code.
• Errors and exception can be thrown
• For errors
• Write onerror event handler
• onerror block is associated with Window object
• For exceptions
• Handle them using try catch finally block

52
Why Cookies?

• Web servers process requests efficiently because
  they do not maintain clients unique requirements
• Every visit to a page is treated as a new
  session, even if users open a different page on
  the same server.
• However, users information might be important
  for commercial purposes.
• Cookies are used to store small amount of
  information on the users computer

53
Cookies

• Allow Web servers to store and retrieve
  information on the client side.
• Saved in form of plain text file, up to 4KB.
• Usually used to store customer details like name,
  address etc.
• Normally only site which wrote the cookie can
  read it.
• Cookies can be associated with one or more
  documents on the Web server.
• Cookies have an expiration date associated with
  them.

54
Cookies Applications

• Web page customization and personalization
• Form information storage
• Shopping carts for order information
• Store userID and password
• Track how many times the user has visited
• Maintain a past score for each player on a test
  or online games
• and many others

55
Cookies in Javascript

• To read and write cookies in Javascript,
  readCookie() and setCookie() methods should be
  overridden.
• Simple example
• function setCookie()
• document.cookie namemyusername
• function readCookie()
• var broken_cookie document.cookie.split()
• var yourname broken_cookie1
• return yourname

56
Issues with cookies

• The main issue with cookies is privacy.
• Legal issues (data protection).
• Users may need reassurance that their data will
  not be passed on.
• Sites using cookies usually include some
  statement on use of personal data
• Privacy Agreement
• Some users switch off cookies or restrict cookies
  to trusted sites only.

57
Java applets

• JavaScript is somewhat limited, it can just
• respond to things like mouse clicks
• modify HTML objects on the page.
• To run serious code on client-side, Java is
  needed.
• Applet - Java program executed by the browser.
• Java is good for the Web since it is designed to
  be platform independent
• Java bytecode can be run on any machine with a
  simple interpreter (JVM)
• Any browser running any type of JVM can run it

58
Writing simple applet

• Java applet class is a subclass of Applet.
• Due to security restrictions, applets run in a
  sandbox
• import java.applet.Applet
• import java.awt.Graphics
• public class HelloWorld extends Applet
• public void paint(Graphics g)
• g.drawString(Hello world, 50, 25)

59
Launching applet

• Compile Java source code
• Produces HelloWorld.class
• Put it in publicly available Web directory and
  set appropriate permissions
• Use tag in HTML
• My First Applet
• height25

60
Applet lifecycle

• Certain applet methods are called at different
  points as user browser init(), start(), stop(),
  and destroy().
• These methods do nothing, they are stubs
• You can make the applet do something by
  overriding these methods
• These methods allow to start and stop applets
  cleanly.
• paint() called when any change in graphical
  representation occurs and sandbox should be
  restored

61
Methods are called in this order

• init() and destroy() are only called once each
• start() and stop() are called whenever the
  browser enters and leaves the page
• do some work is the actual code of the applet
• paint() is called when the applet needs to be
  repainted

62
Applet lifecycle

• init()
• The first method to execute
• It is an ideal place to initialize variables,
  define the GUI Components (buttons, text fields,
  etc), lay them out, and add listeners
• Most applets will have an init() method
• start()
• Not always needed
• Called after init() and each time the page is
  loaded and restarted
• Used mostly in conjunction with stop()

63
Applet lifecycle

• stop()
• Not always needed
• Called when the browser leaves the page and just
  before destroy()
• Used mostly in conjunction with start()
• destroy()
• Usually not needed
• Called after stop()
• Use to explicitly release the resources obtained
  by init() and resources that are not released
  automatically

64
Sample Graphics methods

• A Graphics is something you can paint on

65
Applets security restrictions

• Applets locally execute bytecode received from
  the Web
• This can be malicious bytecode
• Certain restrictions on what applets can do to
  safely run on the users machine
• Can not read and write files on users machine
• Can not open network connections
• Unless the connection is to the server from which
  the bytecode was loaded
• Can not launch other programs

66
Sophisticated functionalities

• We have seen HTML, JavaScript and Java for
  client-side Web applications.
• JavaScript - simple, can only manipulate Web
  page.
• Java - complex, suited for serious programming.
• Both interpreted by browser.
• To run other sorts of applications over the Web,
  the data should be handled by special
  applications installed on client machine
• Helpers - display results in a separate window.
• Plug-ins - act with browser and display results
  within the Web-page.

67
Helpers and plug-ins

• Examples
• Shockwave Flash (plugin)
• ghostview (helper for postscript)
• acroread (helper or plug-in for pdf)
• Wide range of applications for audio and video.
• How does the browser know which plug-in/helper to
  use for the given file?
• Each file has a MIME type (standard way of
  specifying file types, content-type parameter).
• Plug-in/helper of the associated program is
  invoked to display the data.

68
Choosing client-side technology

• We have seen a wide variety of client-side
  technologies
• Which one is the best one to be used? Here are
  some questions to be considered
• Will it run on most machines?
• Not everyone has plug-ins installed
• Some users disable JavaScript.
• Old browsers may not have CSS.
• What is the required network communication?
• Applets are extremely limited
• Does the task need specialized tools (e.g.,
  multimedia)?