1. Web Technologies COMP6115 Session 4: Adding a Database to a Web Site Dr. Paul Walcott Department of Computer Science, Mathematics and Physics University of the West Indies, Cave Hill Campus Barbados 14/12/06 © 2006/2007 Dr. Paul Walcott

2. Introduction In order to demonstrate the use of an XML database in a Web site a contact (person) list application is implemented In order to demonstrate the use of an XML database in a Web site a contact (person) list application is implemented This application will require an understanding of XML, forms, events and JavaScript This application will require an understanding of XML, forms, events and JavaScript

3. The Process The development process that will be used to create this application is: The development process that will be used to create this application is: –Define the requirements/specifications –Describe the design of the: Architecture Architecture User interface User interface Database Database –Implement the application –Test and debug the application

4. The Functional Requirements The Requirements Specification simply stated is: The Requirements Specification simply stated is: –A user shall be able to: View the name (first and last), address, telephone number, gender and image of the contact (person) View the name (first and last), address, telephone number, gender and image of the contact (person) Scroll through the contact list Scroll through the contact list Search for a contact by last name or first name Search for a contact by last name or first name

5. The System Requirements Since this is only an application used for demonstration, only a single workstation shall be required which is running: Since this is only an application used for demonstration, only a single workstation shall be required which is running: –Windows XP + –The Apache server + – + Detailed specifications will be provided in class

6. The Constraints The constraints are: The constraints are: –The application must be coded in JavaScript –An XML database must be used –The database items will not need be sorted –The size of the database will be small (less than 1000 items)

7. The Design The Architecture The Architecture –A simple 2-tier architecture will be used –Three main files will be required for the application: contacts.html – contains the Contact application user interface contacts.html – contains the Contact application user interface contacts.xml – contains the XML contact database contacts.xml – contains the XML contact database Contacts.js – contains the JavaScript functions required for the Contact application Contacts.js – contains the JavaScript functions required for the Contact application

8. The Design Cont’d In addition a folder called images is required which contains the images of the contacts In addition a folder called images is required which contains the images of the contacts

9. The Design Cont’d To the right is a screen shot of the basic user interface: To the right is a screen shot of the basic user interface: –Note that only the first name, last name and address of the contact are shown –The interface is divided into two sections, Personal Information and Search

10. The Design Cont’d When the Previous button is clicked, information for the previous contact is displayed, provided that the user is not at the beginning of the contact list When the Previous button is clicked, information for the previous contact is displayed, provided that the user is not at the beginning of the contact list –Otherwise, the message “No more records” will be displayed When the Next button is clicked, information for the next contact is displayed, provided that the user is not at the end of the contact list When the Next button is clicked, information for the next contact is displayed, provided that the user is not at the end of the contact list –Otherwise, the message “No more records” will be displayed

11. The Design Cont’d When a user types in a last name in the last name text box, in the search section, and clicks the go button, the first record corresponding to the given last name will be displayed When a user types in a last name in the last name text box, in the search section, and clicks the go button, the first record corresponding to the given last name will be displayed Similarly, when a user types in a first name in the first name text box, in the search section, and clicks the go button, the first record corresponding to the given first name will be displayed Similarly, when a user types in a first name in the first name text box, in the search section, and clicks the go button, the first record corresponding to the given first name will be displayed

12. The Design Cont’d In order to create the XML database, it is necessary to recall some of the basic rules and recommendations In order to create the XML database, it is necessary to recall some of the basic rules and recommendationsRules –An XML document contains one root element, which contains all other elements –XML is case sensitive –An element may have zero or more attributes, which are placed in the start tag; and associated attribute values are enclosed in single or double quotes

13. The Design Cont’d Recommendations The use of elements are preferred over attributes since attributes do not describe structure and are more difficult to manipulate in program code The use of elements are preferred over attributes since attributes do not describe structure and are more difficult to manipulate in program code –See http://www.w3schools.com/xml/xml_attributes.asp for a comprehensive explanation http://www.w3schools.com/xml/xml_attributes.asp Meta data such as unique identifiers should be stored in attributes Meta data such as unique identifiers should be stored in attributes The data itself should be stored in elements The data itself should be stored in elements

14. The Design Cont’d The XML database: <contacts> Walcott Walcott Paul Paul UWI Cave Hill Campus UWI Cave Hill Campus 417-4372 417-4372 Male Male photo1.jpg photo1.jpg …</contacts>

15. Implementation In order to implement this application the reader must understand: In order to implement this application the reader must understand: –Forms (text boxes, text areas, drop-down lists and buttons, fieldsets, legends and labels) –How to read data from an XML database –Events (onclick) –The document object model, specifically the use of the methods getElementByID() and getElementsByTagName() See www.w3schools.com www.w3schools.com

16. Testing and Debugging Full testing must be performed on the application to ensure that it functions correctly Full testing must be performed on the application to ensure that it functions correctly If any issues are discovered then debugging will be performed using the Microsoft Script Editor If any issues are discovered then debugging will be performed using the Microsoft Script Editor

17. Testing and Debugging Cont’d Some of the Test Requirements are: Some of the Test Requirements are: –Ensure that the data displayed in the user interface is the same as the data stored in the XML database –Ensure that the contact list scrolling feature works correctly –Ensure that the search functionality works correctly –Ensure that the application works in multiple browsers (determined by the audience)

18. Testing and Debugging Cont’d It is left up to the reader to define the test cases It is left up to the reader to define the test cases –Remember that test cases must have: A pre-condition A pre-condition A test and A test and A post-condition A post-condition

19. Conclusion In this section the reader has been exposed to the creation of a database in XML which has been integrating it into a web application In this section the reader has been exposed to the creation of a database in XML which has been integrating it into a web application The reader should now be able to: The reader should now be able to: –create an XML database for a custom application and create a JavaScript program to read it –Build the appropriate user interface using XHTML 1.0