The XML Project: An Introduction to XML

Must be completed by Friday October 27 at 3pm by students enrolled in the TR class Must be completed by Friday October 27 at 4:30pm by students enrolled in MWF class

IN ORDER FOR YOUR SUBMISSION TO BE CONSIDERED “ON-TIME”, your printouts and file submission must be made by the day/time listed above.

First, make some sort of folder containing your own first and last name, as well as the words XML. You will store all of your work for this project in this folder.

Prior to starting this activity, you need to download the activity files from KSU Online. After logging in, visit Files, then locate the XML Project folder. This folder contains all of the files to download for this XML project. Download ALL OF THE FILES that you see into your named folder.

Once you are finished, you should see 4 files (two instance documents and two stylesheets).The full names of the files that you just downloaded are:

o inventory.xmlo inventoryTable.xslo ProductTable.xsl o universities.xml

Verify that those 4 files are indeed in your named folder. All of the files that you create or modify as part of this project need to be in that named folder. If you don’t have everything in this folder, future problems will result (and who wants that).

As you work through the tutorial, do the activities and exercises that you encounter. PLEASE READ EVERYTHING CARFULLY.

As mentioned in the XML tutorial, it is important that you are able to use your web browser to see errors when they occur in XML documents. Therefore, when using a web browser to work with XML documents, it is important that you use the right browser. Here are recommended browsers:

All versions of FireFox. FireFox is best for this. All versions of Google Chrome will work. However, some of our tasks will be difficulty to complete since Chrome

does not have easily accessible menus.Please check your web browser at this point in time, making sure that you are using one of the recommended browsers listed above.

You can download FireFox at: http://www.getfirefox.com

1

Exercise #1 – Create an Instance DocumentNow, it is time to actually create your first XML instance document. Prior to doing that, you need to determine what you want to store data about. Seen below are four different things that you want to use as the basis of your instance document, along with suggested tags. Please look them over and select one as the basis for your work in this activity (or you can create your own from scratch using these as a guide).

Root Element My Class Schedule My Friends My Favorite Books Sports Equipment Element Class Friend Book Item Attribute Tags Name

Number Instructor Meeting Time Meeting Location Subject Type

Last Name First Name Age Gender Hair Color College Major

Book Title Author Genre Publisher Price Main Character

Name Sport Price Color Size Equipment Type

Regardless of what you decide to use to make your instance document, the following conditions must be met: All instance documents must contain one root element Each of the things that you are storing in the instance document must use the same element tag. Each instance document must contain at least 6 elements. Each “thing/element” stored in the instance document must have at least 6 attributes. Each “thing” will have the same tags, although the data stored within each tag will be different

On the right is an instance document (as seen in a web browser). Let’s pretend I am selling Universities in the Big 12. My root element is SelectedBig12Universities (recall that XML tags can’t have spaces in them). My element tag is University (generic in nature). Following each university are the attribute tags used to describe the university, along with specific data content. Each university is turned on, its data and data tags are added, and then the university is turned off (all tags are turned off). Then, I turn on the next university and continue the process. When I am all done, all tags must be turned off.

After having seen an instance document and selecting the topic of your own instance document, it is time to begin coding the instance document in Notepad. When coding the instance document, don’t forget the rules regarding well-formed instance documents that you saw as part of your pre-lab activity.

First, you need to open or start a new document in Notepad. Before you begin typing code, you need to save the file you are creating into the named project folder that you created at the start of this activity. You can give the file you create whatever name you wish, but the extension for the file MUST BE .xml

When you are ready to begin coding the XML instance document, the first line of code should be:<?xml version="1.0"?>This line of code is the declaration that indicates that the file uses version 1.0 of XML.

Continue working on the instance document, making sure that your tags are consistent and the result is a well-formed instance document. Your instance document should contain information about a minimum of 6 different things (elements). Each thing/element needs to be described by a minimum of 6 different attribute tags as well.

One thing to remember: Even though the element names cannot contain spaces, data content (which is not surrounded by < or >) can have spaces. Thus, Kansas State University and University of Kansas are acceptable examples of data content.

After you create the code for your XML instance document (or as you are coding it), open the XML file that you are creating in your web browser. Your final result should be a WELL-FORMED XML document.

2

Bank AccountAccount ID Account Holders Balance

Account Holder

Account Holder

Account Holder

Holder Name HolderTax ID

Holder Name HolderTax ID

Holder Name HolderTax ID

XMLDocument

Once you have a well-formed XML instance document:1. Make a printout of your XML code, as seen in Notepad.2. Make a screenshot of your well-formed XML instance document, as seen in the web browser. 3. Label both of your printouts as Exercise #1

XSL Stylesheets: Presentation and Transformation

Presentation of information on the web is one common application of XML. As you saw in prior XML sections (pre-lab and this activity), by default, today’s web browsers are capable of processing XML and they display the XML document in a hierarchical, text format. Above is a picture of the Bank Account schema and its corresponding XML document, displayed in Internet Explorer.

Although this format may be acceptable for simple XML documents, this format is not appropriate for complex XML documents. XSL provides a means of formatting XML data for easier use. With XSL, the web browser displays a more meaningful view of this same data, as seen to the right.

Data Transformation: In addition to presenting information on the web, the XSL stylesheet provides a means to transform data as needed so that different applications can examine the same data in whatever way they need the data. One XML document may have many XSL stylesheets, one stylesheet for each user. The user can be a person or an application.

Multiple XSL Stylesheets for One XML Document

As a simple illustration, a person interested in information about his or her bank account may prefer the view in the illustration; however, a computer program would have a great deal of difficulty understanding this format. Instead, the computer program might prefer the data in a comma-separated format, seen as pictured.

3

In the stylesheet exercises that you will complete as part of this tutorial, you will create one stylesheet from scratch, and then modify two stylesheets that I have already created. When you are finished, the instance document (that you created earlier) will be formatted as needed (according to the code contained in the stylesheet).

At this point in time, you have been working with an XML instance document that has been displaying data, that you can expand and collapse. That raw inventory data will now be formatted, using the stylesheets, so that the inventory data is displayed in a bulleted list, and then it will be formatted to display that same data as a table. In order for your instance document to use either of the stylesheets, a new line of code must be added to the instance document, “calling” or invoking the stylesheet’s code and indicating that the stylesheet code should be used to format the instance document.

To the right, you can see a sample XML instance document displayed in Internet Explorer. Let’s also open that document in your browser.

Go to the location on your storage media where your XML files are being stored. Double click on the file called universities.xml.

You should see the well-formed XML instance document seen pictured.

After opening the file, expand and collapse the different items to get a better feel for the data content of this file.

This instance document contains data related to selected universities in the Big 12 (just pretend these are the products I am selling). Based on the display, you can see that three of the universities being “sold” are Kansas State University, the University of Kansas and the University of Nebraska. You can also see the attributes of each university -- name, city, state, mascot, abbreviation and color.

Rather than just displaying raw XML data, you can create different XSL stylesheets to display the data in different ways for different purposes.

Creating an XSL Stylesheet: A Bulleted List of XML DataWe will create our first stylesheet, which will be used to allow you to view the universities in the instance document in the form of a bulleted list. Here is what you must do.

First, you need to open or start a new document in Notepad. The file that we will create will be called UniversityList.xsl. Whenever you create a XSL stylesheet, the file that you create must have an extension of .xsl.

You will next need to type in the code that follows. Along with each line of code, I will describe what that line of code does. You MUST TYPE IN THE CODE PERFECTLY for this to work. The first time that I made an XSL stylesheet, I made 5 or 6 errors, and it took me a LONG TIME to track those down and fix them.

On the first two lines of your new file, you will type in:<?xml version="1.0"?><xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">(IMPORTANT: THERE IS A SPACE IN BETWEEN Transform” and version)Line #1 declares that the file uses version 1.0 of XML. Line #2 declares the contents of the file as an XSL stylesheet based on the 1999 XSL standard.

Next, skip a line and then type in the following:<xsl:template match="/">

This line establishes the initial point in the XML document for processing nodes/elements. The slash (/) at the start of match=”/” establishes the root node/element as the starting point for processing the XML document.

Next, we will add some HTML tags to this stylesheet document in order to create a basic bulleted list.

Skip a line. Indent a few spaces, and then type in <HTML>

4

On the next line down, indent a few spaces, and then type in <ul>This tag begins an unordered/bulleted list. Why are we indenting as we begin a new element in our document (the list)? It makes it easier for us to read our code and both track down and find errors that we might make. Students in programming classes learn pretty early on that it is best to indent their computer programming code.

On the next line down, indent a few spaces, and then type in <xsl:for-each select=" SelectedBig12Universities/University">This line starts a repetitive process. For each university that we have, we will do something. That something that we will do later is to take all of the data content for that university and place it in one cell of one row of our table. IMPORTANT: even though you see SelectedBig12Universities/University in this example, its general form is RootElement/ElementName (and you will substitute in your own root element and the element for those words). The general form is important when you modify the stylesheets that I give you later on.

On the next line down, indent a few spaces, and then type in <li>We have now created a bullet item (list item) for each university that we have in our XML instance document.

On the next line down, indent a few more spaces, and then type in <xsl:value-of select="." />Notice the /> end of the line. Make sure that your line also ends in />The period (.) inside the quotation marks refers to an entire university/record. This is where we take all of the data content for each item and place it as a list item. When you view your result later on, you will see the next line in your list for Kansas State University:Kansas State University Manhattan Kansas Wildcats KSU Purple

Now, we will start to turn off commands. The turn off commands line up vertically (up and down) with the prior turn on commands that you typed in.

Line up with the <li> command and type in </li> Line up with the <xsl:for-each select> command and type in </xsl:for-each> Line up with the <ul> command and type in </ul>Line up with the <HTML> command and type in </HTML>Line up with the <xsl:template> command and type in </xsl:template>Line up with the <xsl:stylesheet> command and type in </xsl:stylesheet>

We need to save our work under the file name of UniversityList.xsl. The contents of your file should match the coding seen previously.

Before attempting to look at our results in a web browser, we also need to add a line of code to our universities.xml instance document.

Open universities.xml in Notepad. You want to add a new line between <?xml version="1.0"?> and <SelectedBig12Universities>.

The new line that you will add will be:<?xml-stylesheet type="text/xsl" href="UniversityList.xsl"?>This line of code is said to “call” the XSLT program (UniversityList.xsl), with the result being a listing of the universities in the instance document.

Save your work in Notepad. Now, open the file called universities.xml in your web browser. The list seen to the right should appear in the browser.

5

Make a printout of the actual bulleted list, as displayed in the browser. Label the printout as University Listing.

Next, we will modify one of my stylesheets so that you can display your inventory data in a table, with the individual data content/attributes for each item in its own cell in the table.

Modifying an XSL Stylesheet: An Inventory Table Open the file called inventory.xml in Notepad.

Bring up a second instance/version of Notepad. Open the file called inventoryTable.xsl in Notepad. Stylesheets have file extensions of .xsl.

This stylesheet is similar to the stylesheet that you just made. However, it uses the HTML commands of <table border>, <tr>, <th> and <td> to display individual data content in its own cell.

Notice the line of code: <xsl:for-each select="RootElement/ElementName">

You will need to replace the words RootElement and ElementName with the actual root element and element name that is found in the inventory.xml instance document. In the instance document that you are wanting to format, the root element is inventory and the element name is item. Replace RootElement and ElementName with those two words (like you did on the stylesheet that you typed earlier).

Notice the lines that contain the words value-of select=The words inside the quotation marks (name, cost, qoh) are all attributes. When you modify your next stylesheet, you will replace the words inside the quote marks with the attribute tags found in the instance document.

Notice the following line of code:<td><xsl:value-of select="cost * qoh" /> </td>Inside one of your cells in the table, this line of code will perform a calculation, taking the cost of the item times the quantity on hand for that item. In addition to formatting data, stylesheets can also be used to perform a calculation, prior to the data being displayed.

Once you have made the required modification, your stylesheet code should match the previously seen picture.

Next, save your work.

Before attempting to look at our results in the web browser, we also need to add a line of code to our instance document, inventory.xml (which should already be open in Notepad). This line of code “tells” the instance document to use/call the stylesheet.

You want to add a new line between <?xml version="1.0"?> and <inventory>.

The new line will be:<?xml-stylesheet type="text/xsl" href="inventoryTable.xsl"?>This line of code is said to “call” the XSLT program (inventoryTable.xsl), with the result being a listing of your inventory now showing up in a table, with each cell containing different data content related to the items that you are selling.

Save your work.

6

XMLDocument

Data DataFormatted

Using HTML

XSL Stylesheet

Now, open the file called inventory.xml in your web browser. The table seen to the right, which is an inventory table, should appear in the web browser.

Make a printout of the table, as displayed in the browser. Label the printout as Inventory Table.

As you have now seen using the two XSL Stylesheets, eXtensible Stylesheet Language (XSL) is used to process/format XML documents into other forms.

Return to your storage media and the folder where you have all of your XMLfiles stored.

Note: the next part of this activity is optional extra credit. If you are not going to do the extra credit, THEN MAKE SURE THAT YOU SKIP OVER THIS SECTION AND CONTINUE ON WITH THE WRITTEN QUESTIONS THAT FOLLOW. The written questions are required components for all students.

Extra credit exercise begins here Your next step is to make a copy of the instance document that you made in exercise #1. After you have found the

instance document you made in exercise #1, right-click the file and select the Copy option. After selecting the Copy option, click somewhere else in that same folder (as where your instance document is) and then select the Paste option.

You now should see the original file that you made in exercise #1 and you should also see the copy that you just made, probably similar to the following: “Copy of original file name”. Rename this copy so that its new name is ExtraCredit, making sure that the file is still a .xml file.

Now, it is time to format the instance document data that you created in exercise #1 using a stylesheet. Your task is to modify another one of my stylesheets so that it can be used to display the XML instance document that you made in Exercise #1 in the form of a table.

Examine the XSL code seen in the picture below. The modifications that you will make include:1. Replacing RootElement

with your own root element wording

2. Replacing Element with your own element tag wording.

3. Replacing each Attribute with the attributes that you used to describe each of the products.

IMPORTANT: for each of these modifications that you do, make sure that the wording that you add to the stylesheet EXACTLY MATCHES the spelling and capitalization found

7

in your instance document.

Now, it is time to begin to make your modifications. To begin, you will need to open the ProductTable.xsl file in Notepad.

After making those basic modifications, go to the section where you see the <th> commands. Capitalize the first letter of each word that serves as one of your attributes. If more than one word appears within the <th> tags, then space the words out so that they are separate. For example, if you see LastName appearing in this section, modify the <th> section so that it appears as Last Name (with the space).

Don’t forget that you need to add a line of code to your instance document that “calls” the stylesheet (similar to the code that you added to the other instance documents when you made their stylesheets). Remember that the name of the stylesheet being called or used by your instance document is ProductTable.xsl

Once you are successful, you will see each of your products showing up in a table, with each cell containing different data content related to the each individual product. Additionally, each attribute will show up as a bold heading in your table (as a result of using the <th> command.

Once you have a result that displays your instance document data in a table, with each data point in its own cell:1. Make a printout of your stylesheet code, as seen in Notepad.2. Make a printout of your instance document code, as seen in Notepad (so that I can see that you did make the “call”)3. Make a printout of instance document after applying the stylesheet (so I can see the actual table that you made)4. Label each of your printouts as Extra Credit.

REQUIRED QUESTIONS THAT ALL STUDENTS MUST ANSWERIn addition to the printouts listed above, you will also need to answer the following questions in a word processing document. EACH QUESTION CONTAINS MULTIPLE PARTS, and in order to receive full credit for the question, YOU MUST ANSWER ALL PARTS OF EACH QUESTION WHEN CREATING YOUR RESPONSE. Make sure that you think about your response to each question before writing/typing. When I evaluate your answers, I will evaluate the correctness of the answer and the quality of the answer, looking at completeness of the answer, evidence of learning and not simply repeating something that is found in the tutorial, spelling, and just the overall thought and effort behind your answer. None of the following questions can be answered in 1-2 sentences. It will take more than that to have a “high-quality answer.”

NOTE: The answers to these questions can be found in this packet, the XML pre-lab tutorial and your notes from class.

1. What is the difference between XML and HTML? Make sure that your answer addresses what each one is, how each is used, tag differences, and what you can do with one that you can’t do with the other.

2. What is the rule regarding having spaces in your XML tags and how might you handle a situation where you wanted to have Last Name as one of your tags?

3. In addition to the rule regarding having spaces in your XML tags, list two or more additional rules regarding the requirements of a well-formed instance document (more than 2 rules is better in the event that your first two items mentioned aren’t really XML rules) .

4. What is the BASIC PURPOSE and USE of an instance document versus a schema versus a stylesheet? What do you use each one for?

5. What is XBRL and what is it used for? Is XBRL considered to be a stylesheet or a schema (and why)?

HANDING IN THE ACTIVITY1) When you are ready to turn in your work, make sure that you place or have ALL OF YOUR ACTIVITY FILES IN A NAMED FOLDER/DIRECTORY. Submit ALL OF THE FILES to the appropriate KSU Online Canvas Submission Location.

2) Please assemble your packet of printouts. The printouts should be stapled and arranged in the following order: A cover page containing the required information (outlined in the class syllabus). A printout of your word processing write-up where you answered the written questions. A printout of the exercise #1 code from Notepad. A screenshot of exercise #1, as seen in a web browser.

8

The University Listing printout (results of applying the stylesheet as seen in the web browser) The Inventory Table printout (results of applying the stylesheet as seen in the web browser)If you did the extra credit, then you also need to include the following printouts The extra credit stylesheet code, as seen in Notepad. The extra credit instance document, as seen in Notepad. The printout that you made showing the extra credit table, as seen in a web browser after applying the stylesheet.

When assembling your packet, make sure that the printouts are arranged in the order listed above.

9