1 Introduction  Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible Stylesheet Language (XSL) –XML is a subset of Standard Generalized Markup Language

2 Introduction

3

4  Documents must be well-formed –Must adhere to the basic syntax rules for XML and contain at least one root element  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

5 Introduction

6 Creating a Well-Formed XML Document  Prolog –Contains declaration and processing instruction statements  Document instance –Contains the main content or elements of the XML document  Processing instruction –One or more instructions passed to the application using the XML document  XML declaration –Processing instruction statement identifying the version of XML used in the document

7

8 Creating a Well-Formed XML Document  Document type declaration –A processing instruction that tells the processor where to locate the Document Type Definition  Document Type Definition (DTD) –Defines the elements and attributes in an XML document  Validity of XML documents  Instance –Occurrence of XML elements  Root element –The main element in an XML document

9 Document Type Definition (DTD)

10 Creating the Prolog in an XML Document

11 Creating the Prolog in an XML Document

12

13 Creating the Document Instance in an XML Document

14 Creating the Document Instance in an XML Document  Generic Identifier (GI) –The name that a developer provides for the tags  Namespace –A unique identifier or prefix used to identify tags that have the same name  Relation –A collection of data  Schema –States the relation name and follows with a list of attributes or fields in parentheses

15

16

17 Linking a Cascading Style Sheet to Format an XML Document  Makes XML easier to read  Start a new Notepad document  Click line 1  Enter the code shown on the following slide

18

19

20 Formatting and Manipulating an XML Document Using an XSL Style Sheet  Extensible Stylesheet Language  Binding XML documents to HTML Web pages

21 Formatting and Manipulating an XML Document Using an XSL Style Sheet  Transforming an XML document –The XSL style sheet tells the browser or parser to output the XML document in a completely different form, such as HTML  Source  Result tree

22 Creating an XSL Style Sheet  Stylesheet element –Establishes a namespace, so the remaining elements can use names that will not be confused with other elements

23 Creating an XSL Style Sheet  Template –An instruction that identifies which elements in a document should be transformed, and how they should be transformed

24

25

26 Adding XML Tags to a Template Element in an XSL Style Sheet  Click line 4  Enter the code shown on the following slide

27

28

29 Adding XML Tags to a Template Element in an XSL Style Sheet  for-each element –Makes each element of the XML document display in the table

30 Adding XML Tags to a Template Element in an XSL Style Sheet  value-of element –Defines the display for each element within the PHONELIST

31

32

33 Saving an XSL Style Sheet  With your HTML Data Disk in drive A, click File on the menu bar and then click Save As. Type xslalphaclublist.xsl in the File name text box. Save to the Project 11 folder on your HTML Data Disk

34 Linking an XSL Style Sheet to an XML Document

35 Linking an XSL Style Sheet to an XML Document  Activate the Notepad window containing the XML document, clublist.xml  Click line 3  Type but do not press the ENTER key

36

37 Saving and Testing an XML Document Formatted Using an XSL Style Sheet  With your HTML Data Disk in drive A, click File on the menu bar and then click Save As. Type clublist-xsl.xml in the File name text box. Save to the Project 11 folder on your HTML Data Disk  Activate the browser  Click the Address bar. Type a:\Project 11\clublist-xsl.xml and then press the ENTER key

38

39 Closing the Notepad Window Containing the XSL Style Sheet  Activate the Notepad window containing the XSL style sheet, xslalphaclublist.xsl  Click the Close button on the Notepad title bar

40 Using Paging to Display XML Data in a Table  Data binding –Mapping the XML elements to a data format that preserves the hierarchy of the data and allows the data to be manipulated using different methods

41

42 Using Paging to Display XML Data in a Table  Data island –A set of data elements separate from the main HTML Web page  Data Source Object (dso)  Recordset –A collection of data records and their fields

43 Using Paging to Display XML Data in a Table

44 Creating an HTML Document to Display XML Data in a Table  Activate the Notepad Window containing the XML document, clublist- xsl.xml  With the HTML Data Disk in drive A, open the file, clubsponsor.htm  Save this file to the Project 11 Folder on your Data Disk with the name, clubsponsor-table.htm

45

46 Entering Code to Bind an XML Document with an HTML Web Page  With the clubsponsor-table.htm Notepad window active, click line 6  Type but do not press the ENTER key

47

48 Entering Code to Add Navigation Buttons

49 Entering Code to Add Navigation Buttons  Click line 12  Enter the following code:

50

51 Start Entering Code to Bind XML Elements to a Table  Click line 16  Enter the following code

52

53 Finish Entering Code to Bind XML Elements to an HTML Table  Click line 24  Enter the following code:

54

55 Saving the HTML File on the Data Disk  With your HTML Data Disk in drive A, click File on the menu bar and then click Save

56 Testing the HTML Web Page  Activate your browser. If necessary, maximize the window  Click the Address bar. Type a:\Project 11\clubsponsor-table.htm and then press the ENTER key  Click the Next Page button. Click the First Page button and then click the Last Page button

57

58 Using JavaScript to Search an XML Document and Display Results on a Web Page

59 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 HTML Data Disk in drive A, open the file, findclub.htm  Click File on the menu bar and then click Save As. Type findclubsponsor.htm in the File name text box. Save to the Project 11 folder on your HTML Data Disk

60 Entering Code to Link an XML Document with an HTML Web Page  With the findclubsponsor.htm Notepad window active, click line 6  Type but do not press the ENTER key

61

62 Entering Code to Add the and Elements  Click line 11  Type &nbsp Search but do not press the ENTER key

63

64 Entering the Element  Click line 14  Type but do not press the ENTER key

65

66 The JavaScript User-Defined Function, FindClub()  Converts the SearchText text box input value into uppercase characters  Validates that the input value is not blank or empty  Moves to the first record in the XML document  Compares each element in the XML document with the text box value until a match is found  Constructs an output text string with search results

67 Entering Code to Start the FindClub() User-Defined Function  Click line 15  Type and then press the ENTER key  Type <!-- Hide from old browsers and then press the ENTER key  Press the SPACEBAR four times to indent the function name. Type function FindClub() { and then press the ENTER key

68

69 Entering Code to Start the FindClub() User-Defined Function  toUpperCase() method

70 Entering the Conversion and Validation Statements in the FindClub() User-Defined Function  Click line 18  Enter the following code:

71

72 Entering Code to Complete the FindClub() User-Defined Function  Click line 23  Enter the code shown on the following slide

73

74

75 Saving and Testing the HTML Document in the Browser  With your HTML Data Disk in drive A, 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 a:\Project 11\findclubsponsor.htm and then press the ENTER key  Enter the club name, spanish, and then click the Search button  Repeat the previous step using the test data on the following slide

76

77

78 Verifying the Links in the Main Student Services Clubs Web Page  Click the Address bar. Type a:\Project 11\club-index.htm and then press the ENTER key  Click the Browser alphabetic list link. After the Student Clubs List by Club Name Web page displays, click the Back button on the browser toolbar to return to the main Student Services Clubs Web page

79 Verifying the Links in the Main Student Services Clubs Web Page  Click the Search by club name link. After the Find a Club Sponsor Web page displays, click the Back button on the browser toolbar to return to the main Student Services Clubs Web page  Click the Browse sponsor link

80

81 Closing Notepad and Your Browser  Click the Close button on the browser title bar  Click the Close button on the Notepad window title bar

82 Summary  Describe an XML document  State the W3C design goals for creating XML tags  Name 10 real-world uses for XML  State the syntax rules for a well-formed and valid XML document  State the rules for creating a generic identifier (GI)

83 Summary  Define document prolog and document instance  Describe the purpose of processing instructions  Describe the purpose of Document Type Definitions (DTD)  Bind a CSS file to an XML document  Describe the purpose of XSL style sheets

84 Summary  Bind an XSL style sheet 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  Discuss the build-in table element methods  Create a JavaScript user-defined function to search an XML document  Define recordset and describe how the EOF property is used

85 What You Should Know

HTML Comprehensive Concepts and Techniques Second Edition Project 11 Complete