Unit 5 WTD Question Bank 1
Unit 5 WTD Question Bank 1
Unit 5 WTD Question Bank 1
XML Basics – Structuring Data – XML Namespaces – DTD – XSLT transformation – Creating
AJAX Applications using XML Http Request Object and JSON
Textbook: Deitel and Deitel and Nieto, ―Internet and World Wide Web - How to Program‖,
5th Edition, Prentice Hall, 2011.
The text namespace prefix is used for elements file and description. The end tags
must also specify the namespace prefix text.
<text:directory
xmlns:text = "http://www.deitel.com/xmlns-text"
xmlns:image = "http://www.deitel.com/xmlns-
image">
apply namespace prefix image to the elements file, description and size. Attributes
do not require namespace prefixes (although they can have them), because each
attribute is already part of an element that specifies the namespace prefix. For
example, attribute filename is implicitly part of namespace text because its element
(i.e., file) specifies the text namespace prefix.
21PCS10 – Web Technology and Design
Unit 5 – Question Bank
Specifying a Default Namespace
Another common practice is to use URLs, which specify the location of a file or a
resource on the Internet. For example, www.deitel.com is the URL that identifies the
home page of the Deitel & Associates website. Using URLs guarantees that the
namespaces are unique because the domain names (e.g., www.deitel.com) are
guaranteed to be unique.
XML allows authors to create their own tags to describe data precisely. People and
organizations in various fields of study have created many different kinds of XML for
structuring data. Some of these markup languages are: MathML (Mathematical
Markup Language), Scalable Vector Graphics (SVG), Wireless Markup Language
(WML), Ex- tensible Business Reporting Language (XBRL), Extensible User Interface
Language (XUL) and Product Data Markup Language (PDML). Two other examples of
XML vocabularies are W3C XML Schema and the Extensible Stylesheet Language
(XSL).
6. What is xsl?
XML allows document authors to create custom elements. This extensibility can
result in naming collisions among elements in an XML document that have the same
name. For example, we may use the element book to mark up data about a Deitel
publication. A stamp collector may use the element book to mark up data about a
book of stamps. Using both of these elements in the same document could create a
naming collision, making it difficult to determine which kind of data each element
contains.
<subject>Geometry</subject>
And
<subject>Cardiology</subject>
use element subject to mark up data. In the first case, the subject is something one
studies in school, whereas in the second case, the subject is a field of medicine.
Namespaces can differentiate these two subject elements—for example:
21PCS10 – Web Technology and Design
Unit 5 – Question Bank
<highschool:subject>Geometry</highschool:subject>
and
<medicalschool:subject>Cardiology</medicalschool:subject>
Each value can be a string, a number, a JSON representation of an object, true, false
or null. You can convert JSON strings into JavaScript objects with JavaScript’s
JSON.parse function. JSON strings are easier to create and parse than XML and
require fewer bytes. For these reasons, JSON is commonly used to communicate in
21PCS10 – Web Technology and Design
Unit 5 – Question Bank
client/server interaction.
var data =
JSON.parse(asyncRequest.responseText);
} // end if
); listBox.innerHTML = "";
use the HTML5 DOM to store the placeholder div element Names in the variable
listbox and clear its content. Once parsed, the JSON string of address-book entries
becomes an array, which this function traverses.
A new technique for creating better, faster, and more interactive web applications
with the help of XML, HTML, CSS, and Java Script.
21PCS10 – Web Technology and Design
Unit 5 – Question Bank
Ajax uses
CSS for
presentation
<!ELEMENT flag EMPTY> defines an empty element named flag. Keyword EMPTY
specifies that the element does not contain any data between its start and end tags.
Empty elements commonly describe data via attributes. For example, flag’s data
appears in its gender attribute (<!ATTLIST flag gender (M | F) "M">). <!ATTLIST flag
gender (M | F) "M"> specifies that the gender attribute’s value must be one of the
enumerated values (M or F) enclosed in parentheses and delimited by a vertical
bar (|) meaning ―or.‖ <!ATTLIST flag gender (M | F) "M"> also indicates that
gender has a default value of M.
PART B & C
1. Explain the XSLT transformation process that produces a single result XML
document given an XSLT document and a source XML document (K2)
Example:
Suppose you have an XSLT stylesheet that transforms an XML document containing
book information into an HTML table. The XSLT document defines templates for
matching book elements and transforming them into HTML table rows and columns.
```xml
<!-- Sample XML (source document) -->
<library>
<book>
<title>Book 1</title>
<author>Author 1</author>
</book>
<book>
21PCS10 – Web Technology and Design
Unit 5 – Question Bank
<title>Book 2</title>
<author>Author 2</author>
</book>
</library>
```
```xslt
<!-- XSLT Stylesheet -->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<table border="1">
<tr>
<th>Title</th>
<th>Author</th>
</tr>
<xsl:apply-templates select="library/book"/>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="book">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="author"/></td>
</tr>
</xsl:template>
</xsl:stylesheet>
```
When the XSLT processor applies this stylesheet to the provided XML, it transforms the
book elements into an HTML table, producing a single result document that presents
book information in table format.
The result of an XSLT transformation is a new XML document or another format that
represents the transformed data based on the rules and transformations specified in
the XSLT stylesheet.
2. Explain about how to create a Full-Scale Ajax-Enabled Application using JSON (K2)
21PCS10 – Web Technology and Design
Unit 5 – Question Bank
Creating a full-scale Ajax-enabled application using JSON involves leveraging the power of
Asynchronous JavaScript and XML (Ajax) along with JSON (JavaScript Object Notation) to
facilitate data exchange between the client and server. Here are the steps to create such
an application:
HTML Structure:
Create an HTML structure that includes elements for user interface components. For
instance, forms, buttons, tables, etc., that will interact with the backend via Ajax.
JavaScript (Ajax):
1. Event Listeners: Attach event listeners (e.g., click events) to the HTML elements that will
trigger Ajax requests.
3. Handling Responses: Handle the responses from the server, parse JSON data (if received),
and update the DOM dynamically to reflect the changes.
1. Endpoints: Create server-side endpoints (API routes or functions) that respond to Ajax
requests.
2. Data Processing: Implement logic to process incoming requests, interact with databases,
perform calculations, or any other backend operation required.
2. Parsing: Parse JSON responses received from the server on the client-side to extract and
utilize the data.
Data Exchange:
1. Request Payload: Send JSON-formatted data as part of Ajax requests (either as request
parameters or in the request body).
2. Response Handling: Parse JSON responses received from the server and use the data to
update the user interface dynamically.
Example Workflow:
Frontend:
2. JavaScript triggers an Ajax request to the server, sending data in JSON format.
3. Backend processes the request, performs operations, and returns a JSON response.
4. Frontend JavaScript parses the JSON response and updates the UI accordingly.
Backend:
Tips:
- Use appropriate HTTP methods (GET, POST, PUT, DELETE) for different types of operations.
- Validate user inputs both on the client-side and server-side to prevent security
21PCS10 – Web Technology and Design
Unit 5 – Question Bank
vulnerabilities.
By leveraging Ajax for asynchronous communication and using JSON as the data format,
you can create responsive and interactive web applications with seamless data exchange
between the client and server.
XML namespaces are used in XML documents to avoid element name conflicts and to
differentiate elements that might have the same name but belong to different
vocabularies or sources. They provide a way to uniquely identify elements and attributes
within an XML document or between different XML documents.
Basic Concepts:
1. Namespace Declaration:
- Namespaces are declared using the `xmlns` attribute in XML elements.
- The `xmlns` attribute assigns a unique identifier (namespace URI) to a namespace prefix.
- It is common to use the `xmlns` attribute in the root element of an XML document.
2. Namespace Prefixes:
- Prefixes (e.g., `x`, `html`, `svg`) are used to associate elements and attributes with a
specific namespace.
- They are followed by a colon (`:`) in element and attribute names.
Example:
Consider an example where we have two XML vocabularies: a bookstore and a library. We'll
use namespaces to differentiate elements from these vocabularies:
```xml
<!-- XML document using namespaces -->
<library:books xmlns:library="http://example.com/library">
<book>Book 1 from Library</book>
</library:books>
<bookstore:books xmlns:bookstore="http://example.com/bookstore">
<book>Book 1 from Bookstore</book>
</bookstore:books>
21PCS10 – Web Technology and Design
Unit 5 – Question Bank
```
Explanation:
When working with XPath or XSLT, namespaces need to be considered for proper element
selection and transformations:
XPath:
```xpath
//library:books/book <!-- Selects book elements within the library namespace -->
```
XSLT:
```xml
<xsl:template match="library:books">
<!-- XSLT template to process elements within the library namespace -->
</xsl:template>
```
Benefits of Namespaces:
1. Avoiding Name Conflicts: Prevents clashes between elements with the same name from
different sources.
2. Modularity: Enables mixing elements from different vocabularies within a single
document.
3. Interoperability: Facilitates exchange of XML data between different systems and
applications.
A Document Type Declaration (DTD) is an optional but essential part of an XML document
that defines the structure, elements, entities, and their relationships within the
document. It essentially serves as a set of rules or a schema that specifies the valid
elements, attributes, and their organization in an XML document. Here's an in-depth
explanation of DTD:
21PCS10 – Web Technology and Design
Unit 5 – Question Bank
Purpose of DTD:
2. Ensuring Validity:
- It ensures that the XML document conforms to a predefined structure, helping maintain
consistency and validity.
3. Enabling Interoperability:
- DTD facilitates data exchange between systems by establishing a common set of rules for
document structure.
Components of DTD:
1. Element Declarations:
- Defines the elements that can appear in the document.
- Specifies the element names, their content models (such as EMPTY, ANY, or specific
content), and occurrence constraints.
```xml
<!ELEMENT element_name (child_element)>
```
2. Attribute Declarations:
- Defines the attributes associated with specific elements.
- Specifies the attribute names, their types, and default or fixed values.
```xml
<!ATTLIST element_name attribute_name attribute_type default_value>
```
3. Entity Declarations:
- Defines entities (variables) that can be referenced within the document.
- Entities can represent text strings, special characters, or reusable content.
```xml
<!ENTITY entity_name "entity_value">
```
4. Notation Declarations:
- Specifies notations for non-XML data, such as images or multimedia content.
- Defines the format or application associated with specific data types.
```xml
21PCS10 – Web Technology and Design
Unit 5 – Question Bank
<!NOTATION notation_name SYSTEM "system_identifier">
```
Consider an XML document representing a list of books. A simple DTD for this XML might
look like this:
```xml
<!DOCTYPE bookstore [
<!ELEMENT bookstore (book+)>
<!ELEMENT book (title, author, year)>
<!ELEMENT title (PCDATA)>
<!ELEMENT author (PCDATA)>
<!ELEMENT year (PCDATA)>
]>
```
- `<!DOCTYPE>` declares the document type and associates it with the DTD.
- Inside the square brackets (`[]`) is the DTD definition.
- `<!ELEMENT>` defines the structure of elements and their content.
- `(PCDATA)` denotes parsed character data (text content).
To use the DTD within an XML document, you include a `DOCTYPE` declaration at the
beginning of the XML file, referencing the DTD file or defining the DTD structure directly
within the document:
```xml
<!DOCTYPE root_element_name SYSTEM "path/to/dtd_file.dtd">
<!-- XML content -->
<root_element_name>
<!-- Elements and content -->
</root_element_name>
```
Advantages of DTD:
- Validation: Ensures the correctness and consistency of the XML document structure.
- Interoperability: Enables data exchange between systems by adhering to a common
structure.
- Reusability: Allows the reuse of entities and definitions across multiple XML documents.
1. XSLT Processor:
- XSLT processors interpret XSLT stylesheets and apply transformations to XML documents.
- Browsers, programming languages (like Java, Python), or dedicated XSLT processors (such
as Xalan, Saxon) can execute XSLT transformations.
2. XSLT Stylesheets:
- XSLT stylesheets contain instructions for transformations.
- Written in XML syntax and comprise templates and rules to define how XML elements
should be transformed into other formats.
a. Templates:
- Define rules for transforming specific elements or patterns in the XML document.
- Written using `<xsl:template>` elements.
```xml
<xsl:template match="book">
<!-- Transformation logic -->
</xsl:template>
```
b. XPath Expressions:
- Used to navigate and select nodes in the XML document.
- Allows filtering, selecting, and manipulating nodes.
```xml
<xsl:value-of select="title"/>
```
c. Output Elements:
- Control the output structure and format.
- For example, `<xsl:element>`, `<xsl:attribute>`, `<xsl:value-of>`.
Consider a simple XML document representing a list of books and an XSLT stylesheet to
transform this XML into an HTML table:
21PCS10 – Web Technology and Design
Unit 5 – Question Bank
XML (books.xml):
```xml
<library>
<book>
<title>Book 1</title>
<author>Author 1</author>
</book>
<book>
<title>Book 2</title>
<author>Author 2</author>
</book>
</library>
```
XSLT (transform.xslt):
```xml
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>Book List</h2>
<table border="1">
<tr>
<th>Title</th>
<th>Author</th>
</tr>
<xsl:apply-templates select="library/book"/>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="book">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="author"/></td>
</tr>
</xsl:template>
</xsl:stylesheet>
```
Transformation Process:
2. Matching Templates:
- The processor begins at the root template (`<xsl:template match="/">`) and executes
instructions accordingly.
3. Applying Templates:
- The `<xsl:apply-templates>` instruction selects and applies matching templates
(`<xsl:template match="book">`) to elements in the XML.
4. Generating Output:
- The transformation generates an HTML output based on the rules defined in the XSLT
stylesheet.
Advantages of XSLT:
XSLT is a powerful language for transforming XML data into various formats, making it an
essential tool for generating dynamic content, reports, or formatting XML data for display
on web pages or in different applications.
6. Develop XSLT code to display employee details in a Table from which is stored is
XML. (K3)
XSLT code that transforms an XML document containing employee details into an HTML
table format:
```xml
<?xml version="1.0" encoding="UTF-8"?>
<employees>
<employee>
<id>1</id>
<name>John Doe</name>
<department>IT</department>
</employee>
<employee>
21PCS10 – Web Technology and Design
Unit 5 – Question Bank
<id>2</id>
<name>Jane Smith</name>
<department>HR</department>
</employee>
<!-- Other employee details -->
</employees>
```
XSLT (transform_employees.xslt):
```xml
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>Employee Details</h2>
<table border="1">
<tr bgcolor="9acd32">
<th>ID</th>
<th>Name</th>
<th>Department</th>
</tr>
<xsl:for-each select="employees/employee">
<tr>
<td><xsl:value-of select="id"/></td>
<td><xsl:value-of select="name"/></td>
<td><xsl:value-of select="department"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
```
Explanation:
- The XSLT code defines a template that matches the root node of the XML document
21PCS10 – Web Technology and Design
Unit 5 – Question Bank
(`<xsl:template match="/">`).
- It generates an HTML table with a header row (`<th>`) and iterates through each
`<employee>` element in the XML using `<xsl:for-each>`.
- For each employee, it extracts the `<id>`, `<name>`, and `<department>` values and
populates them in respective table cells (`<td>`).
- The resulting output will be an HTML table displaying employee details.
7. Develop a XML program to store voter ID, voter name, address and date of birth
details. Create a DTD to validate the document. (K3)
XML document that stores voter details (voter ID, name, address, and date of birth) along
with a corresponding DTD (Document Type Definition) to validate the structure of the
XML document:
```xml
<voters>
<voter>
<voterID>V123456789</voterID>
<name>John Doe</name>
<dob>1990-05-15</dob>
</voter>
<voter>
<voterID>V987654321</voterID>
<name>Jane Smith</name>
<dob>1985-08-25</dob>
21PCS10 – Web Technology and Design
Unit 5 – Question Bank
</voter>
</voters>
```
DTD (voter_details.dtd):
```xml
```
Explanation:
- Each `<voter>` element includes child elements for `voterID`, `name`, `address`, and
`dob` (date of birth).
- The `DOCTYPE` declaration references the DTD file (`voter_details.dtd`) for validation.
- `<voters>` can have one or more `<voter>` elements (`<!ELEMENT voters (voter+)>`).
- `<voter>` elements must contain `voterID`, `name`, `address`, and `dob` elements
(`<!ELEMENT voter (voterID, name, address, dob)>`).
- `voterID`, `name`, `address`, and `dob` are defined as elements containing parsed
character data (`<!ELEMENT voterID (PCDATA)>`, `<!ELEMENT name (PCDATA)>`, etc.).
21PCS10 – Web Technology and Design
Unit 5 – Question Bank
AJAX application using the `XMLHttpRequest` object to fetch data in JSON format from a
server and display it on a web page.
HTML (index.html):
Create an HTML file with a button to trigger the AJAX request and a `<div>` to display the
fetched data.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
function fetchData() {
xhr.onreadystatechange = function() {
} else {
};
xhr.send();
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
```
JSON (data.json):
```json
"id": 1,
"age": 30,
"email": "[email protected]"
},
{
21PCS10 – Web Technology and Design
Unit 5 – Question Bank
"id": 2,
"age": 25,
"email": "[email protected]"
```
Explanation:
- The `onreadystatechange` event listener monitors the state changes of the request.
- If there's an error in fetching data, an error message is displayed in the same `<div>`.
Ensure that the `data.json` file is placed in the same directory as the HTML file for this
example to work properly. This code demonstrates a basic AJAX application using
`XMLHttpRequest` to fetch JSON data and display it on a web page when a button is
clicked.