HTML Concepts and Techniques Fourth Edition Project 12 Creating and Using XML Documents

Project 12: Creating and Using XML Documents 2 Project Objectives Describe an XML document State the syntax rules for a well-formed and valid XML document State the rules for creating a generic identifier (GI) Define document prolog and document instance Describe the purpose of processing instructions

Project 12: Creating and Using XML Documents 3 Project Objectives Describe the purpose of Document Type Definitions (DTD) Create and bind a CSS style sheet and an XSL style sheet file to an XML document Describe the XSL template, for-each, order-by, and value-of elements Bind an XML document to an HTML Web page

Project 12: Creating and Using XML Documents 4 Project Objectives Discuss the built-in table element methods Create a JavaScript user-defined function to search an XML document Use the onkeypress event handler to accept input from a text box Define recordset and describe how the EOF property is used

Project 12: Creating and Using XML Documents 5 Introduction Extensible Markup Language (XML) is a markup language that uses tags to describe the structure of a document and its content, not the format Extensible Stylesheet Language (XSL) is a language utilized to create style sheets for formatting structured XML data A parser is an XML processor that verifies the document follows the syntax rules for a well-formed document and converts the document into a tree of elements

Project 12: Creating and Using XML Documents 6 Design Goals for XML

Project 12: Creating and Using XML Documents 7 Starting Notepad and Creating a New XML Document Start Notepad, and if necessary, maximize the Notepad window. If the Word Wrap feature is not enabled, click Format on the menu bar and then click Word Wrap to enable it With the USB drive plugged into your computer, click File on the menu bar and then click Save As on the File menu If necessary, click the Look in box arrow and then click UDISK (G:)

Project 12: Creating and Using XML Documents 8 Starting Notepad and Creating a New XML Document Double-click the Project12 folder and then double-click the ProjectFiles folder in the list of available folders Type bellvideo.xml in the File name text box Click the Save button in the Save As dialog box

Project 12: Creating and Using XML Documents 9 Starting Notepad and Creating a New XML Document

Project 12: Creating and Using XML Documents 10 Entering the Prolog in an XML Document Click line 1 Enter the XML code shown in Table 12-7 on pages HTM 555 and HTM 556

Project 12: Creating and Using XML Documents 11 Entering the Prolog in an XML Document

Project 12: Creating and Using XML Documents 12 Starting to Enter the Document Instance in an XML Document Enter the following XML code, beginning on line 18

Project 12: Creating and Using XML Documents 13 Finishing Entering the Document Instance in an XML Document Click line 29 Enter the XML code shown in Table on pages HTM 559 and HTM 560

Project 12: Creating and Using XML Documents 14 Finishing Entering the Document Instance in an XML Document

Project 12: Creating and Using XML Documents 15 Saving the XML Document and Testing in the Browser With a USB drive plugged into your computer, click File on the menu bar and then click Save Start your browser. If necessary, click the Maximize button Click the Address bar Type g:\Project12\ProjectFiles\ bellvideo.xml and then press the ENTER key

Project 12: Creating and Using XML Documents 16 Saving the XML Document and Testing in the Browser

Project 12: Creating and Using XML Documents 17 Correcting the Tag Error and Retesting the XML Document Click the Notepad button on the taskbar Click line 38 Delete the uppercase tag, Type as the new tag in place of the deleted tag

Project 12: Creating and Using XML Documents 18 Correcting the Tag Error and Retesting the XML Document Click File on the menu bar and then click Save Activate the browser Click the Refresh button on the browser toolbar

Project 12: Creating and Using XML Documents 19 Correcting the Tag Error and Retesting the XML Document

Project 12: Creating and Using XML Documents 20 Creating an External Style Sheet Using CSS Start a new Notepad document, and if necessary, maximize the window. If the Word Wrap feature is not enabled, click Format on the menu bar and then click Word Wrap to enable it Click line 1 Enter the code shown in Table 12-11on page HTM 64

Project 12: Creating and Using XML Documents 21 Creating an External Style Sheet Using CSS Click File on the menu bar and then click Save As Type bellvideo-css.css in the File name text box. If necessary, click UDISK (G:) in the Save in list. Double-click the Project12 folder and then double- click the ProjectFiles folder in the list of available folders Click the Save button in the Save As dialog box

Project 12: Creating and Using XML Documents 22 Creating an External Style Sheet Using CSS

Project 12: Creating and Using XML Documents 23 Linking an External CSS Style Sheet to an XML Document Click the Close button to close the bellvideo- css.css file and the Notepad window Activate the Notepad window containing the XML document, bellvideo.xml Click the beginning of line 2

Project 12: Creating and Using XML Documents 24 Linking an External CSS Style Sheet to an XML Document Press the ENTER key once. Position the insertion point on the blank line created Type but do not press the ENTER key Click File on the menu bar and then click Save

Project 12: Creating and Using XML Documents 25 Linking an External CSS Style Sheet to an XML Document

Project 12: Creating and Using XML Documents 26 Testing an XML Document Formatted Using an External CSS Style Sheet Activate the browser Click the Refresh button on the Standard Buttons toolbar

Project 12: Creating and Using XML Documents 27 Opening and Saving an XML Document with a New File Name If necessary, click the Notepad button on the status bar to activate the Notepad window With the USB drive plugged into your computer, click File on the menu bar and then click Open on the File menu If necessary, click the Look in box arrow and then click UDISK (G:) Double-click the Project12 folder and then double-click the ProjectFiles folder in the list of available folders If necessary, click the Files of type box arrow and then click All Files

Project 12: Creating and Using XML Documents 28 Opening and Saving an XML Document with a New File Name Double-click bellvideoall.xml in the list of files With the bellvideoall.xml file open, click File on the menu bar and then click Save As Type bellvideo-year.xml in the File name text box. If necessary, click UDISK (G:) in the Save in list. Double-click the Project12 folder and then double-click the ProjectFiles folder in the list of available folders Click the Save button in the Save As dialog box

Project 12: Creating and Using XML Documents 29 Starting Creating an XSL Style Sheet Start a new Notepad document from the Start button and, if necessary, maximize the window. If the Word Wrap feature is not enabled, click Format on the menu bar and then click Word Wrap to enable it Enter the following code, beginning on line 1

Project 12: Creating and Using XML Documents 30 Adding XML Tags to a Template Element in an XSL Style Sheet Enter the following code, beginning on line 4

Project 12: Creating and Using XML Documents 31 Finishing Creating an XSL Style Sheet Enter the following code, beginning on line 10

Project 12: Creating and Using XML Documents 32 Saving an XSL Style Sheet With your USB drive plugged into your computer, click File on the menu bar and then click Save As Type bellvideo-year.xsl in the File name text box If necessary, click UDISK (G:) in the Save in list. Double-click the Project12 folder. Double-click the ProjectFiles folder Click the Save button in the Save As dialog box

Project 12: Creating and Using XML Documents 33 Linking an XSL Style Sheet to an XML Document Activate the Notepad window containing the XML document, bellvideo-year.xml Click at the beginning of line 3 Type but do not press the ENTER key

Project 12: Creating and Using XML Documents 34 Linking an XSL Style Sheet to an XML Document

Project 12: Creating and Using XML Documents 35 Saving and Testing an XML Document Formatted Using an XSL Style Sheet With the USB drive plugged into your computer, click File on the menu bar and then click Save Activate the browser Click the Address bar Type g:\Project12\ProjectFiles\ bellvideo-year.xml and then press the ENTER key

Project 12: Creating and Using XML Documents 36 Saving and Testing an XML Document Formatted Using an XSL Style Sheet

Project 12: Creating and Using XML Documents 37 Closing the Notepad Window and the XSL Style Sheet Activate the Notepad window containing the XSL style sheet, bellvideo-year.xsl Click the Close button on the Notepad title bar

Project 12: Creating and Using XML Documents 38 Creating an HTML Document to Display XML Data in a Table Activate the Notepad window With the USB drive plugged into your computer, open the file, bellvideo-table.htm, from the Project12\ProjectFiles folder Click File on the menu bar and then click Save As

Project 12: Creating and Using XML Documents 39 Creating an HTML Document to Display XML Data in a Table Type bellvideo-typetable.htm in the File name text box If necessary, click UDISK (G:) in the Save in list. Double-click the Project12 folder and then double-click the ProjectFiles folder in the list of available folders Click the Save button in the Save As dialog box

Project 12: Creating and Using XML Documents 40 Creating an HTML Document to Display XML Data in a Table

Project 12: Creating and Using XML Documents 41 Entering Code to Link an XML Document with an HTML Web Page With the bellvideo-typetable.htm Notepad window active, click line 5 Type but do not press the ENTER key

Project 12: Creating and Using XML Documents 42 Entering Code to Link an XML Document with an HTML Web Page

Project 12: Creating and Using XML Documents 43 Entering Code to Add Navigation Buttons Click line 16 Enter the following code and do not press the ENTER key when finished

Project 12: Creating and Using XML Documents 44 Entering the Code to Bind XML Elements to an HTML Table Header Enter the following code, beginning on line 21

Project 12: Creating and Using XML Documents 45 Entering the Code to Bind XML Elements to HTML Table Rows Enter the following code, beginning on line 28

Project 12: Creating and Using XML Documents 46 Saving the HTML File and Testing the Web Page With the USB drive plugged into your computer, click File on the menu bar and then click Save Activate your browser. If necessary, maximize the window Click the Address bar

Project 12: Creating and Using XML Documents 47 Saving the HTML File and Testing the Web Page Type g:\Project12\ProjectFiles\ bellvideo-typetable.htm and then press the ENTER key Click the Next Page button Click the First Page button and then click the Last Page button

Project 12: Creating and Using XML Documents 48 Saving the HTML File and Testing the Web Page

Project 12: Creating and Using XML Documents 49 Creating an HTML Document to Search an XML Document and Display Results If necessary, click the Notepad button on the taskbar to activate the Notepad window With the USB drive plugged into your computer, open the file, findmovie.htm, from the Project12\ProjectFiles folder Click File on the menu bar and then click Save As

Project 12: Creating and Using XML Documents 50 Creating an HTML Document to Search an XML Document and Display Results Type findmovietitle.htm in the File name text box If necessary, click UDISK (G:) in the Save in list. Double-click the Project12 folder, and then double-click the ProjectFiles folder in the list of available folders Click the Save button in the Save As dialog box

Project 12: Creating and Using XML Documents 51 Entering Code to Bind an XML Document with an HTML Web Page With the findmovietitle.htm Notepad window active, click line 12 Type but do not press the ENTER key

Project 12: Creating and Using XML Documents 52 Entering Code to Bind an XML Document with an HTML Web Page

Project 12: Creating and Using XML Documents 53 Entering Code to Add the and Elements Click line 18 and position the insertion point after, Movie Title: Type and press the ENTER key Type search but do not press the ENTER key

Project 12: Creating and Using XML Documents 54 Entering Code to Add the and Elements

Project 12: Creating and Using XML Documents 55 Entering the Element Click line 22 Type and then press the ENTER key Type Results: and then press the ENTER key Type and then press the ENTER key

Project 12: Creating and Using XML Documents 56 Entering the Element

Project 12: Creating and Using XML Documents 57 Entering Code for the keyPressed() User-Defined Function Enter the following code, beginning on line 25

Project 12: Creating and Using XML Documents 58 Entering the Conversion and Validation Statements in the findMove() User-Defined Function Enter the following code beginning on line 32, and then press the ENTER key

Project 12: Creating and Using XML Documents 59 Entering Code to Search an XML Document for a Movie Title Enter the following code, beginning on line 39

Project 12: Creating and Using XML Documents 60 Saving and Testing the HTML Document in the Browser With your USB drive plugged into your computer, click File on the menu bar and then click Save Click the browser button on the taskbar to activate the browser Click the Address bar. Type g:\Project12\ProjectFiles\findmovietitle.htm and then press the ENTER key Enter the title Munich in the input text box and then click the search button Repeat the previous step using the test data sets 2, 3, and 4 shown in Table on page HTML 593

Project 12: Creating and Using XML Documents 61 Saving and Testing the HTML Document in the Browser

Project 12: Creating and Using XML Documents 62 Verifying the Links in the Bell Video Web Page Click the Address bar. Type g:\Project12\ProjectFiles\ bellvideoindex.htm and then press the ENTER key Click the Browse by Type link After the Movie Video Listing by Type Web page is displayed, click the Back button on the browser toolbar to return to the Bell Video Web page. Click the Search by Title link

Project 12: Creating and Using XML Documents 63 Verifying the Links in the Bell Video Web Page After the Find a Movie by Title Web page is displayed, click the Back button on the browser toolbar to return to the Bell Video Web page Click the Browse by Year link When the Bell Video - Browse by Year Web page is displayed, scroll down to view more movies in the list

Project 12: Creating and Using XML Documents 64 Verifying the Links in the Bell Video Web Page

Project 12: Creating and Using XML Documents 65 Closing Notepad and the Browser Click the Close button on the browser title bar Click the Close button on the Notepad window title bar

Project 12: Creating and Using XML Documents 66 Project Summary Describe an XML document State the syntax rules for a well-formed and valid XML document State the rules for creating a generic identifier (GI) Define document prolog and document instance Describe the purpose of processing instructions

Project 12: Creating and Using XML Documents 67 Project Summary Describe the purpose of Document Type Definitions (DTD) Create and bind a CSS style sheet and an XSL style sheet file to an XML document Describe the XSL template, for-each, order-by, and value-of elements Bind an XML document to an HTML Web page

Project 12: Creating and Using XML Documents 68 Project Summary Discuss the built-in table element methods Create a JavaScript user-defined function to search an XML document Use the onkeypress event handler to accept input from a text box Define recordset and describe how the EOF property is used

HTML Concepts and Techniques Fourth Edition Project 12 Complete Creating and Using XML Documents