Web Application
Development
BCS 102
XML
XML-extensible markup
language
• XML is a software- and hardware-independent tool for storing and transporting data.
• XML is a markup language much like HTML
• XML was designed to store and transport data
• XML was designed to be self-descriptive
• XML is a W3C Recommendation
• Example:
<note>
<to>Jiya</to>
<from>Tanisha</from>
<heading>Meeting reminder</heading>
<body>Hi!I hope you remember we have a meeting this wednesday</body>
</note>
• The XML example below is quite self-descriptive:
• It has sender information
• It has receiver information
• It has a heading
• It has a message body
But still, the XML above does not DO anything. XML is just information wrapped in tags.
Someone must write a piece of software to send, receive, store, or display it
The Difference Between XML and HTML
XML and HTML were designed with different goals:
• XML was designed to carry data - with focus on what data is
• HTML was designed to display data - with focus on how data looks
• XML tags are not predefined like HTML tags are
• The tags in the example on previous slide (like <to> and <from>) are not defined in any XML
standard. These tags are "invented" by the author of the XML document.
• HTML works with predefined tags like <p>, <h1>, <table>, etc.
• With XML, the author must define both the tags and the document structure
XML is Extensible
• Most XML applications will work as expected even if new data is added (or removed).
• Imagine an application designed to display the original version of [Link] (<to> <from> <heading> <body>).
• Then imagine a newer version of [Link] with added <date> and <hour> elements, and a removed
<heading>.
• The way XML is constructed, older version of the application can still work:
<note>
<date>2024-10-05</date>
<hour>10:30</hour>
<to>Jiya</to>
<from>Tanisha</from>
<body>Hi!I hope you remember we have a meeting this wednesday</body>
</note>
XML Simplifies Things
• XML simplifies data sharing
• XML simplifies data transport
• XML simplifies platform changes
• XML simplifies data availability
• Many computer systems contain data in incompatible formats. Exchanging data between
incompatible systems (or upgraded systems) is a time-consuming task for web developers. Large
amounts of data must be converted, and incompatible data is often lost.
• XML stores data in plain text format. This provides a software- and hardware-independent way of
storing, transporting, and sharing data.
• XML also makes it easier to expand or upgrade to new operating systems, new applications, or
new browsers, without losing data.
XML Separates Data from Presentation
• XML does not carry any information about how to be displayed.
• The same XML data can be used in many different presentation scenarios.
• Because of this, with XML, there is a full separation between data and presentation.
XML is Often a Complement to HTML
• In many HTML applications, XML is used to store or transport data, while HTML is used to format
and display the same data.
XML Separates Data from HTML
• When displaying data in HTML, you should not have to edit the HTML file when the data changes.
• With XML, the data can be stored in separate XML files.
• With a few lines of JavaScript code, you can read an XML file and update the data content of any
HTML page.
The XML Tree Structure
The XML Tree Structure Example:
<?xml version="1.0" encoding="UTF-8"?>
• XML documents are formed as element trees. <bookstore>
• An XML tree starts at a root element and branches <book category="cooking">
from the root to child elements. <title lang="en">Everyday Italian</title>
• All elements can have sub elements (child <author>Giada De Laurentiis</author>
elements): <year>2005</year>
<price>30.00</price>
<root>
</book>
<child> <book category="children">
<subchild>.....</subchild> <title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
</child>
<year>2005</year>
</root> <price>29.99</price>
• The terms parent, child, and sibling are used to </book>
describe the relationships between elements. <book category="web">
• Parents have children. Children have parents. <title lang="en">Learning XML</title>
Siblings are children on the same level (brothers <author>Erik T. Ray</author>
and sisters). <year>2003</year>
<price>39.95</price>
</book>
</bookstore>
XML Syntax Rules
• XML documents must contain one root element that is the parent of all other elements.
• All XML Elements Must Have a Closing Tag
• XML tags are case sensitive. The tag <Letter> is different from the tag <letter>.
• Opening and closing tags must be written with the same case
• XML Elements Must be Properly Nested
<b><i>This text is bold and italic</i></b>
• XML Attribute Values Must Always be Quoted as XML elements can have attributes in name/value
pairs just like in HTML.
• Some characters have a special meaning in XML.
If you place a character like "<" inside an XML element, it will generate an error because the parser
interprets it as the start of a new element.
This will generate an XML error:
<message>salary < 1000</message>
• To avoid this error, replace the "<" character with an entity reference:
<message>salary < 1000</message>
• Comments in XML
The syntax for writing comments in XML is similar to that of HTML:
<!-- This is a comment -->
• White-space is Preserved in XML
XML does not truncate multiple white-spaces (HTML truncates multiple white-spaces to one single white-
space):
XML Elements Example:
• An XML element is everything from (including) the element's start <bookstore>
tag to (including) the element's end tag. <book category="children">
Example: <price>29.99</price> <title>Harry Potter</title>
An element can contain: <author>J K. Rowling</author>
-Text - other elements <year>2005</year>
-attributes -or a mix of the above <price>29.99</price>
</book>
In the example above: <book category="web">
• <title>, <author>, <year>, and <price> have text content because <title>Learning XML</title>
they contain text (like 29.99).
<author>Erik T. Ray</author>
• <bookstore> and <book> have element contents, because they
contain elements. <year>2003</year>
• <book> has an attribute (category="children"). <price>39.95</price>
</book>
</bookstore>
Empty XML Elements
• An element with no content is said to be empty.
• In XML, you can indicate an empty element like this:
<element></element>
• You can also use a so called self-closing tag:
<element />
XML Naming Rules
XML elements must follow these naming rules:
• Element names are case-sensitive
• Element names must start with a letter or underscore
• Element names cannot start with the letters xml (or XML, or Xml, etc)
• Element names can contain letters, digits, hyphens, underscores, and periods
• Element names cannot contain spaces
• Any name can be used, no words are reserved (except xml).
XML Elements are Extensible <note>
• XML elements can be extended to carry <to>Jiya</to>
more information. <from>Tanisha</from>
• Suppose we created an application that
<body>Hi!I hope you remember we have a
extracted the <to>, <from>, and <body> meeting this wednesday</body>
elements from the XML document to
produce the output. </note>
• If the author of the XML document added
some extra information to it: <note>
• The application will not break or crash and <date>2024-10-05</date>
application should still be able to find the
<to>, <from>, and <body> elements in the <to>Jiya</to>
XML document and produce the same <from>Tanisha</from>
output.
<heading>Meeting reminder</heading>
<body>Hi!I hope you remember we have a
• This is one of the beauties of XML. It can be meeting this wednesday</body>
extended without breaking applications.
</note>
XML Attributes
• Attributes are designed to contain data related to a specific
element.
• Attribute values must always be quoted. Either single or double
quotes can be used.
• Example:
Example:
<student gender="female">
<college>
<name>Prerna</name>
<student sid="s1">
<marks>95</marks>
<name>Prerna</name>
</student>
<marks>95</marks>
XML Attributes for Metadata </student>
• Sometimes ID references are assigned to elements. These IDs
can be used to identify XML elements in much the same way as
the id attribute in HTML. <student sid="s2">
• Metadata (data about data) should be stored as attributes, and <name>Prerna</name>
the data itself should be stored as elements. <marks>95</marks>
</student>
</college>
DTD: Document Type Definition
• A DTD defines the structure and the legal elements and attributes of an XML document.
• With a DTD, independent groups of people can agree on a standard DTD for interchanging data.
• An application can use a DTD to verify that XML data is valid.
An Internal DTD Declaration
If the DTD is declared inside the XML file, it must be wrapped inside the <!DOCTYPE> definition:
<?xml version="1.0"?>
<!DOCTYPE note [
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)> #PCDATA means parseable character data
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
<note>
<to>Jiya</to>
<from>Tanisha</from>
<heading>Important</heading>
<body>we are meeting this week.</body>
An External DTD Declaration
• If the DTD is declared in an external file, the <!DOCTYPE> definition must contain a reference to the DTD file:
<?xml version="1.0"?>
<!DOCTYPE note SYSTEM "[Link]"> This is the file "[Link]", which contains
the DTD:
<note>
<to>Jiya</to>
<from>Tanisha</from> <!ELEMENT note (to,from,heading,body)>
<heading>Important</heading> <!ELEMENT to (#PCDATA)>
<body>we are meeting this week.</body> <!ELEMENT from (#PCDATA)>
</note>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
The Building Blocks of XML Documents
Seen from a DTD point of view, all XML documents are made up by the following building blocks:
Elements : Elements are the main building blocks of both XML and HTML documents.
Attributes :Attributes provide extra information about elements.
Entities : Some characters have a special meaning in XML, like the less than sign (<) that defines the start of an XML tag.
PCDATA : PCDATA means parsed character [Link] is text that WILL be parsed by a parser. The text will be examined by the
parser for entities and markup.
CDATA : CDATA means character [Link] is text that will NOT be parsed by a parser
DTD Elements
• Elements with one or more children are declared with the name of the children elements inside parentheses:
Example:
<!ELEMENT note (to,from,heading,body)>
When children are declared in a sequence separated by commas, the children must appear in the same sequence in the document.
The full declaration of the "note" element is:
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
• <!ELEMENT element-name (child-name)>
The example declares that the child element "message" must occur once, and only once inside the "note" element.
Example:
<!ELEMENT note (message)>
• The + sign in the example declares that the child element "message" must occur one or more times inside the "note" element.
<!ELEMENT note (message+)>
• The * sign in the example declares that the child element "message" can occur zero or more times inside
the "note" element.
<!ELEMENT note (message*)>
• The ? sign declares that the child element "message" can occur zero or one time inside the "note" element.
<!ELEMENT note (message?)>
• The example declares that the "note" element must contain a "to" element, a "from" element, a "header"
element, and either a "message" or a "body" element.
<!ELEMENT note (to,from,header,(message|body))>
• The example declares that the "note" element can contain zero or more occurrences of parsed character
data, "to", "from", "header", or "message" elements.
<!ELEMENT note (#PCDATA|to|from|header|message)*>
DTD Attributes
In a DTD, attributes are declared with an ATTLIST declaration.
An attribute declaration has the following syntax:
<!ATTLIST element-name attribute-name attribute-type attribute-value>
• The attribute-type examples : CDATA:The value is character data , ID:The
value is a unique id
• The attribute-value can be: #REQUIRED:The attribute is required ,
#IMPLIED:The attribute is optional , #FIXED value:The attribute value is DTD:
fixed
<!ELEMENT square EMPTY>
A Default Attribute Value
<!ATTLIST square width CDATA "0">
In the example , the "square" element is defined to be an empty element
with a "width" attribute of type CDATA. If no width is specified, it has a Valid XML:
default value of 0. <square width="100" />
DTD:
#REQUIRED <!ATTLIST person age CDATA #REQUIRED>
Use the #REQUIRED keyword if you don't have an option for a default Valid XML:
value, but still want to force the attribute to be present
<person age="22" />
Invalid XML:
<person />
#IMPLIED DTD:
<!ATTLIST person age CDATA #IMPLIED>
Valid XML:
Use the #IMPLIED keyword if you don't want to force the author
<person age="22" />
to include an attribute, and you don't have an option for a default
value. Valid XML:
<person />
#FIXED DTD:
Use the #FIXED keyword when you want an attribute to have a <!ATTLIST person company CDATA #FIXED "Google">
fixed value without allowing the author to change it. If an author Valid XML:
includes another value, the XML parser will return an error. <person company="Google" />
Invalid XML:
<person company="Amazon" />
Syntax
Enumerated Attribute Values <!ATTLIST element-name attribute-name (en1|en2|..) default-value>
Example
Use enumerated attribute values when you want the attribute
DTD:
value to be one of a fixed set of legal values. <!ATTLIST payment type (check|cash) "cash">
XML example:
<payment type="check" />
or
<payment type="cash" />
XML Schema
• An XML document with correct syntax is called "Well Formed".
• An XML document validated against an XML Schema is both "Well Formed" and "Valid".
• The XML Schema language is also referred to as XML Schema Definition (XSD)
Learning XML Schema is important because:
• In the XML world, hundreds of standardized XML formats are in daily use.
• Many of these XML standards are defined by XML Schemas.
• XML Schema is an XML-based (and more powerful) alternative to DTD.
• One of the greatest strength of XML Schemas is the support for data types.
XML Schemas use XML Syntax
• Another great strength about XML Schemas is that they are written in XML.
• You don't have to learn a new language
• You can use your XML editor to edit your Schema files
• You can use your XML parser to parse your Schema files
• You can manipulate your Schema with the XML DOM
• You can transform your Schema with XSLT
• An XML Schema file called "[Link]“ defines the elements of the XML document.
XSD Schema
• The <schema> element is the root element of every XML Schema.
• The <schema> element may contain some attributes. A schema declaration often looks something like this:
<xs:schema xmlns:xs="[Link]
.
.
</xs:schema>
• This indicates that the elements and data types used in the schema come from the
"[Link] namespace. It also specifies that the elements and data types that
come from the "[Link] namespace should be prefixed with xs
• The syntax for defining a simple element is:
<xs:element name="xxx" type="yyy"/>
where xxx is the name of the element and yyy is the data type of the element.
• XML Schema has a lot of built-in data types. The most common types are:
xs:string,
xs:decimal
xs:integer
xs:boolean
xs:date,
xs:time
• Example : <xs:element name="age" type="xs:integer"/>
• A default value is automatically assigned to the element when no other value is specified.
Example : <xs:element name="color" type="xs:string" default="green"/>
• A fixed value is also automatically assigned to the element, and you cannot specify another value.
Example: <xs:element name="color" type="xs:string" fixed=“green"/>
XSD Attributes
Simple elements cannot have attributes. If an element has attributes, it is considered to be of a complex type. But the attribute itself is
always declared as a simple type.
• The syntax for defining an attribute is:
<xs:attribute name="xxx" type="yyy"/>
where xxx is the name of the attribute and yyy specifies the data type of the attribute.
• XML Schema has a lot of built-in data types. The most common types are:
xs:string, xs:decimal, xs:integer, xs:boolean, xs:date, xs:time
• An XML element with an attribute: <lastname lang="EN">Ananya</lastname>
And this is the corresponding attribute definition: <xs:attribute name="lang" type="xs:string"/>
• <xs:attribute name="lang" type="xs:string" default="EN"/>
• <xs:attribute name="lang" type="xs:string" fixed="EN"/>
• <xs:attribute name="lang" type="xs:string" use="required"/>
Restrictions on Content
• When an XML element or attribute has a data type defined, it puts restrictions on the element's or attribute's content.
• If an XML element is of type "xs:date" and contains a string like "Tanya", the element will not validate.
Complex Element
• A complex element is an XML element that contains other elements and/or attributes.
There are four kinds of complex elements:
• empty elements
• elements that contain only other elements
• elements that contain only text
• elements that contain both other elements and text
• A complex XML element, “employee", which is empty:
<employee eid="12"/>
• A complex XML element, "employee", which contains only other elements:
<employee>
<firstname>Rajvi</firstname>
</employee>
• A complex XML element, "food", which contains only text:
<food type="dessert">Ice cream</food>
• A complex XML element, "description", which contains both elements and text:
<description>
It happened on <date lang="norwegian">03.03.99</date> ....
</description>
XML DATA XML Schema
<class> <xs:schema xmlns:xs="[Link]
<student> <xs:element name="class">
<firstname>Shruti</firstname> <xs:complexType>
<age>20</age> <xs:sequence>
</student> <xs:element name="student">
</class> <xs:complexType>
<xs:sequence>
<xs:element type="xs:string" name="firstname"/>
<xs:element type="xs:byte" name="age"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
XML DATA XML Schema
<xs:schema xmlns:xs="[Link]
<class>
<xs:element name="class">
<student>
<xs:complexType>
<firstname>Shruti</firstname>
<xs:sequence>
<age>20</age> <xs:element name="student" maxOccurs="unbounded“ minOccurs="0">
</student> <xs:complexType>
<xs:sequence>
<student> <xs:element type="xs:string" name="firstname"/>
<firstname>Varnika</firstname> <xs:element type="xs:integer" name="age"/>
</xs:sequence>
<age>20</age>
</xs:complexType>
</student> • maxOccurs="unbounded“ means that the
</xs:element>
<student> element can occur any number of
</class> </xs:sequence> times (zero or more) within the <class>
</xs:complexType> element.
• minOccurs="0“ means that the <student>
</xs:element> element is optional, and the <class> element
</xs:schema> can be empty.
XML using XSL and XSLT
• XSL stands for EXtensible Stylesheet Language.
• The World Wide Web Consortium (W3C) started to develop XSL because there was a need for an XML-based Stylesheet
Language.
• XML does not use predefined tags, and therefore the meaning of each tag is not well understood.
• A <table> element could indicate an HTML table, a piece of furniture, or something else - and browsers do not know how to
display it!
• So, XSL describes how the XML elements should be displayed.
XSL consists of four parts:
• XSLT - a language for transforming XML documents
• XPath - a language for navigating in XML documents
• XSL-FO - a language for formatting XML documents (discontinued in 2013)
• XQuery - a language for querying XML documents
XSLT
• XSLT stands for XSL Transformations
• XSLT is a language for transforming XML documents.
• XSLT is the most important part of XSL
• XSLT transforms an XML document into another XML document
• XSLT uses XPath to navigate in XML documents
• XSLT is used to transform XML documents into other formats like HTML.
XSLT Uses XPath
• XSLT uses XPath to find information in an XML document. XPath is used to navigate through elements and attributes in
XML documents.
• In the transformation process, XSLT uses XPath to define parts of the source document that should match one or more
predefined templates. When a match is found, XSLT will transform the matching part of the source document into the
result document.
• An XSL style sheet consists of one or more set of rules that are called templates.
A template contains rules to apply when a specified node is matched.
The <xsl:template> element is used to build templates.
Example on the next page:
• Since an XSL style sheet is an XML document, it always begins with the XML declaration: <?xml version="1.0"
encoding="UTF-8"?>.
• The next element, <xsl:stylesheet>, defines that this document is an XSLT style sheet document (along with
the version number and XSLT namespace attributes).
• The <xsl:template> element defines a template. The match="/" attribute associates the template with the
root of the XML source document.
• The content inside the <xsl:template> element defines some HTML to write to the output.
• The last two lines define the end of the template and the end of the style sheet.
• Note: The select attribute, in the example, contains an XPath expression. An XPath expression works like
navigating a file system; a forward slash (/) selects subdirectories.
Example:
<xsl:stylesheet version="1.0"
xmlns:xsl="[Link]
<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="yellow">
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:for-each select="catalog/cd"> The XSL <xsl:for-each> element can be used to select every XML element of a specified node-set
<tr>
<td><xsl:value-of select="title"/></td> The <xsl:value-of> element can be used to extract the value of an XML element and add it to the output stream of
the transformation.
<td><xsl:value-of select="artist"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
• Filtering the Output <table border="1">
We can also filter the output from the XML file by adding a <tr bgcolor="#9acd32">
criterion to the select attribute in the <xsl:for-each> element. <th>Title</th>
<th>Artist</th>
<xsl:for-each select="catalog/cd[artist='Bob Dylan’]”> </tr>
<xsl:for-each select="catalog/cd[artist='Bob Dylan']">
Legal filter operators are: <tr>
= (equal) <td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
!= (not equal)
</tr>
< less than
</xsl:for-each>
> greater than
</table>
<xsl:for-each select="catalog/cd">
• To sort the output, simply add an <xsl:sort> element inside <xsl:sort select="artist"/>
the <xsl:for-each> element in the XSL file.
<tr>
<xsl:for-each select="catalog/cd"><xsl:sort select="artist"/>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
</tr>
</xsl:for-each>
• To put a conditional if test against the content of the <xsl:for-each select="catalog/cd">
XML file, add an <xsl:if> element to the XSL <xsl:if test="price > 10">
document. <tr>
• The code above will only output the title and artist <td><xsl:value-of select="title"/></td>
elements of the CDs that has a price that is higher <td><xsl:value-of select="artist"/></td>
than 10. <td><xsl:value-of select="price"/></td>
</tr>
</xsl:if>
</xsl:for-each>
<td><xsl:value-of select="title"/></td>
<xsl:choose>
• The <xsl:choose> element is used in conjunction
<xsl:when test="price > 10">
with <xsl:when> and <xsl:otherwise> to express
multiple conditional tests. <td bgcolor="#ff00ff">
<xsl:value-of select="artist"/></td>
</xsl:when>
<xsl:otherwise>
<td><xsl:value-of select="artist"/></td>
</xsl:otherwise>
</xsl:choose>
</tr>
</xsl:for-each>
• Declaration
The root element that declares the document to be an XSL style sheet is <xsl:stylesheet> or <xsl:transform>. (these both are
synonyms)
• 2 files will be created : one will be [Link] and other will be [Link]
Add the XSL style sheet reference to your XML document ("[Link]")
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="[Link]"?>
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
.
.
</catalog>
<[Link]> <[Link]>
<xsl:stylesheet version = "1.0"
xmlns:xsl = "[Link]
<?xml-stylesheet type = "text/xsl" href = "[Link]"?>
<xsl:template match = "/class">
<class> <html>
<student> <body>
<firstname>Prerna</firstname> <h2>[Link] Students</h2>
<table border = "1">
<age>20</age>
<tr bgcolor="yellow">
</student> <th>First Name</th>
<student> <th>Age</th>
<firstname>Vartika</firstname> </tr>
<xsl:for-each select = "student">
<age>19</age>
<tr>
</student> <td><xsl:value-of select = "firstname"/></td>
<student> <td><xsl:value-of select = "age"/></td>
<firstname>Tanisha</firstname>
</tr>
<Age>21</age> </xsl:for-each>
</student> </table>
</class> </body>
</html>
</xsl:template>
</xsl:stylesheet>
DHTML
• Dynamic HTML, or DHTML, is a combination of HTML, CSS, JavaScript, and the Document Object Model
(DOM) that allows for the creation of interactive and animated web pages.
• It uses the Dynamic Object Model to modify settings, properties, and methods.
• DHTML is not a technology; rather, it is the combination of three different technologies,client-side scripting
(JavaScript or VBScript), cascading style sheets and document object model.
• Note: Many times DHTML is confused with being a language like HTML but it is not. It is an interface or
browsers enhancement feature which makes it possible to access the object model through Javascript
language and hence make the webpage more interactive
• We Use DHTML because it has the ability to change look, content and style of a webpage once the
document has loaded on the demand without changing or deleting everything already existing on the
browser’s webpage.
• DHTML can change the content of a webpage on demand without the browser having to erase everything
else, i.e. being able to alter changes on a webpage even after the document has completely loaded
HTML DOM (Document Object Model)
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects:
