Tutorial 02 XML and Java Script 1

Tutorial 02 XML and Java. Script 1

Contents § The ABC problem § Solution 2

The ABC problem § OSS is an open source software used to manage employees in ABC Company. The software is also allowed users to look up their information via PCs, smart phones and other mobile devices. To meet all requirements above, the software needs to use XML to store information. § At first, the owner of ABC wants you to create an XML file to store its data and create a simple HTML file to display employee information on web page (using Java. Script to load data from XML and display on HTML page). 3

Solution 1. Analysis and Design 2. Create XML data file of ABC company 3. Create HTML file using Java. Script to load data 4

1. Analysis and Design Structure of data file is as below: § Staff § Employee (Status) • Name • Department • Position • Phone • Years • Photo 5

2. Create XML data file of ABC company 2. 1 Create a new XML document 2. 2 Insert the root element 2. 3 Insert the first employee 2. 4 Insert other employees 6

2. 1 Create a new XML document § Open your XML editor (XMLSpy) and create a new XML file named staff. xml 7

2. 2 Insert the root element § Insert the root element named Staff below the declaration 8

2. 3 Insert the first employee using the structure above and data file Alice Ashman Accounting Administrative Assistant 555 -4580 ext. 581 5 Ashman. jpg 9

2. 4 Insert other employees § Insert other employee information using the data text file 10

3. Create HTML file using Java. Script to load data 3. 1 Create a new HTML 3. 2 Create the load XML function 3. 3 Create the show data function 3. 4 Check on web browser 11

3. 1 Create a new HTML § Create a new HTML file named staff. html § Create a div tag with id staff, all information will be loaded and displayed inside this div tag. 12

3. 2 Create the load XML function § Create a new js file and create the load. XML function. § The URL parameter is the XML file name § The root parameter is the root element name of XML file 13

3. 3 Create the show data function § Go back to staff html file and insert the js file into it. § Create a function named showstaff to load data from XML 14

3. 3 Create the show data function (cont. ) § Using load. XML function to load data to an array variable var result = ""; var staff = load. XML("staff. xml", "Staff"); var employees = staff. get. Elements. By. Tag. Name("Employee"); 15

3. 3 Create the show data function (cont. ) § Using for loop to load each employee from the array for(var i = 0; i

3. 3 Create the show data function (cont. ) § Get the first child element (Name) result += "Name: " + employee. get. Elements. By. Tag. Name("Name")[0]. first. Child. nod e. Value + "
"; document. get. Element. By. Id("staff"). inner. HTML = result; 17

3. 3 Create the show data function (cont. ) § Load data to body tag and check on web browser

3. 3 Create the show data function (cont. ) § Get the attribute Status "Status: " + employee. get. Attribute("Status") + "
" 19

3. 3 Create the show data function (cont. ) § Get other child elements (Department, Position, Phone, Years) 20

3. 3 Create the show data function (cont. ) § Load employee image "" 21

3. 3 Create the show data function (cont. ) § Add a horizontal line after each employee and move the photo to the beginning of each piece of information, and format the image 22

3. 4 Check on web browser (display top down) 23

Exercise § Create another web page that display employee one by one, and four buttons: First, Back, Forward, Last as the image below: 24