Web-based Application Development

1
Web-based Application Development

• Lecture 21
• April 6, 2006
• Anita Raja

2
Agenda

• Chapter 16
• Chapter 17
• Demos

3
Programming the Web using XHTML and JavaScript

• Chapter 16
• Custom Objects Creating and Searching a Database

4
The Basics of Databases

• Database group of associated variables
• Typical form is a table of
• Records (rows) made up of
• Fields (columns), each containing data about one
  attribute of interest for each record

5
The Basics of Databases
6
The Basics of Databases

• How to implement a table in JavaScript?
• An object and its properties correspond to a
  record and its fields
• One object might have three properties
• Name
• Address
• Phone

7
The Basics of Databases

• Creating a number of these objects would
  correspond to a number of records (rows) in a
  table
• Already have used objects that come with
  JavaScript
• Images
• Dates
• How can we define and create our own objects?

8
Custom Objects

• Use the constructor function to create a new
  instance of an object then assign it to a
  variable
• var someImage new Image(69,120)
• Technically, this creates an instance of the
  Image object
• Image defines a basic template for a particular
  type of object
• new creates a copy of this template
• The new Image object is named someImage

9
Custom Objects

• You can write your own custom constructor
  functions in JavaScript
• Defines the template for the object
• Properties
• Methods
• Right now, dont worry about methods
• For a JavaScript database we only need objects
  with properties
• Start with the constructor function

10
Custom Objects
Constructor function name

• function addressEntry(nm, adr, ph)
• this.name nm
• this.address adr
• this.phone ph

11
Custom Objects
function addressEntry(nm, adr, ph)
this.name nm this.address adr
this.phone ph
In other words, the object we are creating with
this constructor function
12
Custom Objects
function addressEntry(nm, adr, ph)
this.name nm this.address adr
this.phone ph
var firstAddress new addressEntry(
Bill, 123 Main Street, 321-4567
)
13
Custom Objects

• After creating an object, its properties are
  available using standard dot notation
• firstAddress.name is Bill
• firstAddress.address is 123 Main Street
• firstAddress.phone is 321-4567
• Ch16-Ex-01

14
Custom Objects

• Create a new instance of the addressEntry object
  for each item in our database
• Problem theyre all named something unique
  firstAddress, secondAddress, etc.
• Hard to search such a database
• Need a common naming convention

15
Databases as Arrays of Objects

• Instead of creating separate variables
• We create an array
• Then we define each element of the array as a new
  address object

16
Databases as Arrays of Objects
var addresses new Array(6) addresses0 new
addressEntry(Bill, 123 Main Street,
321-4567) addresses1 new addressEntry(Mary
, 456 Elm Street, 987-6543) addresses2
new addressEntry(Sam, 789 Oak Avenue,
123-1234)
17
Databases as Arrays of Objects

• Now we can use dot notation to refer to the
  object properties of each array element
• addresses0.name is Bill
• Ch16-Ex-02

18
Searching a Database

• By defining a database as an array of objects and
• Using array notation and loops
• We can write search routines for databases
• Ch16-Ex-03

19
Limitations

• JavaScript is not the ideal mechanism to
  implement databases
• Client cannot change database so
• Cant add, delete, or edit records
• Database exists only in HTML document so large
  database make pages slow to load

20
Assignment

• Use chapter and the Debugging Exercise on p. 461
  as a guide
• Define a database that records information on
  books
• For each book record information on title,
  author, publisher, and number of pages
• Create a database of at least four records
• Create a form that displays all the information
  about any one book

21
Assignment

• Write a search function that accepts an authors
  name as input then displays the information about
  the book or an error message.
• Post the completed document to your Web space as
  Lagerstrom-Ch-16.html
• Grade based on
• Appearance
• Technical correctness of code
• Proper results

22
Programming the Web using XHTML and JavaScript

• Chapter 17
• JavaScript with Frames and Windows

23
Dynamic Content with Frames

• CyberPizza
• Two side-by-side frames
• Left pizza order choices
• Right display order
• Documents
• CyberPizza.html the frameset document
• SelectPizza.html code for left frame
• DisplayChoices.html code for right frame

24
Dynamic Content with Frames

• CyberPizza.html
• Establishes the frameset
• Defines a function (more on that later)
• SelectPizza.html
• Defines 3 forms
• Toppings
• Crusts
• Submit order

25
Dynamic Content with Frames

• Problem
• The left and right frames involve two separate
  documents
• Functions declared in a document act only in the
  frame containing that document
• How can we call a function from one document that
  acts on a different frame?

26
Dynamic Content with Frames

• Answer by ensuring that both documents are
  simultaneously present in different frames of the
  frameset
• Since the code is present it can be called
• Where to put the code?
• In a frame thats always loaded the frameset
  document, CyberPizza.html

27
Dynamic Content with Frames

• How do you call a function declared in a
  different document?
• Using the hierarchical dot notation

CyberPizza.html frameset document aka parent
Document in left frame
Document in left frame
28
Dynamic Content with Frames

• The document that establishes a frameset is
  considered to be the parent of the documents
  that define the individual frames
• Thus, to refer to the displayOrder function we
  use
• parent.displayOrder()

29
Dynamic Content with Frames

• The displayOrder function
• Must be able to display user-selected data
• In the right-most frame
• If the user changes their order, displayOrder
  must be able to update the right-most frame with
  the latest data

30
Dynamic Content with Frames

• This means that the displayOrder function has to
  be able to
• Write data
• To a specific frame
• Writing data is accomplished with the write
  method of the document object
• document.write()

31
Dynamic Content with Frames

• The data written is specified as a parameter
• document.write(Hello world)
• Ch17-Ex-01

32
Dynamic Content with Frames

• If writing to a different document, specify the
  destination
• rightFrame.document.write()

33
Dynamic Content with Frames

• HTML tags and data can be included
• This means that a script can change the document
  content dynamically
• Ch17-Ex-02
• Variables can be used
• Ch17-Ex-03

34
Dynamic Content with Frames

• The Document Output Stream
• The document.write() method only works when the
  browser is loading an HTML source document
• To do this, the browser opens the document
  output stream and starts interpreting the HTML
  and placing information on the screen

35
Dynamic Content with Frames

• The Document Output Stream (cont.)
• Once the document contents have been displayed,
  the DOS is closed
• When the DOS is closed, the document.write()
  method cannot be used
• This means that write() cannot be used in
  conjunction with a form in the same document
  without completely replacing the current document

36
Manipulating Windows

• In Chapter 6 we showed how to open a document in
  a new browser window
• lta href"http//www.uncc.edu" target"fred"gt
• Click here to open page in a new window.
• Ch06-Ex-11

37
Manipulating Windows

• Can open a window using the open() method of the
  window object
• var sampleWindow window.open(
• www.uncc.edu,
• testWin,
• width250,height200,left100,top60)

38
Manipulating Windows

• The close() method can be used to close a window
  if its name is known
• Ch17-Ex-04

39
Manipulating Windows

• Windows have more than 40 methods and 50
  properties (Appendix F)
• if (sampleWindow.closed)
• sampleWindow.open()
• There are over 25 windows features
• height, width, top, left
• toolbar, scrollbars, resizable,

40
Manipulating Windows

• If you leave out the third parameter
• var sampleWindow window.open(www.uncc.edu,tes
  tWin)
• a default window is created
• However, if you specify any value in the third
  parameter, all unspecified values are considered
  to be off

41
Assignment

• Implement the CyberPizza problem
• Post the completed documents to your Web space
• Name the main (frameset) page CyberPizza.html

42
Programming the Web Using Visual Studio .NET

• Chapter 2. Programming

43
Introduction

• VS.NET permits programming in a visual
  environment
• That means developing via forms using
  drag-and-drop techniques
• Hand-coding is available also
• Well be using Visual Basic.NET

44
XML

• Extensible Markup Language
• Not actually a markup language
• Specification for making markup languages
• XML documents have two fundamental
  characteristics
• Must be well-formed
• May be associated with a DTD or XML schema

45
XML

• Well-formed
• Must comply with XML syntax rules
• DTD Document Type Definition
• Dictates what elements and attributes are
  permitted
• Example
• ltimg srceiffel.jpg altEiffel Towergt
• ltimggt element (tag)
• src and alt attributes