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, don’t worry about methods • For a JavaScript database we only need objects with properties • Start with the constructor function …

10. Asssignments Properties Custom Objects Constructor function name function addressEntry(nm, adr, ph) { this.name = nm this.address = adr this.phone = ph }

11. “this object” 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: they’re 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) • addresses[0] = new addressEntry(“Bill”, “123 Main Street”, “321-4567”) • addresses[1] = new addressEntry(“Mary”, “456 Elm Street”, “987-6543”) • addresses[2] = 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: addresses[0].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 • Can’t 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 author’s 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 that’s 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: <a href="http://www.uncc.edu" target="fred"> Click here to open page in a new window. • Ch06-Ex-11

37. Name given to new window object (used in JavaScript) Name of HTML source document to be opened Name for use by target Window features (in pixels Manipulating Windows • Can open a window using the open() method of the window object: var sampleWindow = window.open( “www.uncc.edu”, “testWin”, “width=250,height=200,left=100,top=60”)

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”,“testWin”) 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 • We’ll 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 <img src=“eiffel.jpg” alt=“Eiffel Tower”> • <img> element (tag) • src and alt: attributes