BIT301 Web Technology II

Web Technology IIUnit 712 min read

XML Structure, Querying, XSD, XSLT, XQuery, XPath: Rules, Validation, Transformation

Unit 7 of Web Technology II covers XML’s core concepts—its tree structure, extensibility, validation via XSD/DTD, querying with XPath/XQuery, and transformation to HTML using XSLT—with real-world examples from eSewa’s transaction logs, Ncell’s billing systems, and Daraz’s product catalogs.

TAKEAWAYS:

  • XML is a self-descriptive, extensible markup language that stores data in a hierarchical tree structure, unlike HTML’s fixed tags.
  • XSD (XML Schema Definition) enforces rules (e.g., password length) via data types, constraints, and namespaces to avoid conflicts.
  • XPath navigates XML trees (e.g., /MovieStore/Movie[Budget>500]/Title) while XQuery retrieves subsets (e.g., movies with budgets >500).
  • XSLT transforms XML into HTML (e.g., converting Ncell’s billing XML into a user-friendly invoice).
  • Namespaces (e.g., xmlns:ns1="http://example.com/ns1") prevent tag collisions in merged XML documents.
  • DTD (Document Type Definition) is an older alternative to XSD for validation, using <!ELEMENT> and <!ATTLIST> syntax.

1. What is XML? Why is it called "Extensible"?

XML (eXtensible Markup Language) is a human- and machine-readable format for storing and transporting structured data. Unlike HTML (which defines how to display content), XML defines what the data means. Its "extensibility" comes from:

  • User-defined tags: You can invent tags like <Username>, <MovieBudget>, or <eSewaTransaction>.
  • Hierarchical structure: Data is organized in a tree (parent-child relationships), making it easy to query and validate.
JaariTitle500BudgetAnup BaralActorMovieLal PuranaTitle800BudgetSaugat MallaActorMovieMovieStoreRoot
Hierarchical XML structure for a MovieStore (extensible tags like <Movie>, <Budget>)

Key Features

mindmap
  root((XML))
    Feature1((Self-descriptive))
    Feature2((Extensible))
    Feature3((Platform-independent))
    Feature4((Supports Unicode))
    Feature5((Hierarchical))
    Feature6((Supports validation via XSD/DTD))

XML Naming Rules

  • Must start with a letter or underscore (_).
  • Can contain letters, numbers, hyphens (-), underscores, and periods (.).
  • Cannot start with xml, XML, or Xml (reserved for XML itself).
  • Case-sensitive (<Name> ≠ <name>).

2. XML Structure: Elements, Attributes, and Tree Model

An XML document is built from:

  1. Elements: Defined by opening (<tag>) and closing (</tag>) tags.
    <Movie>
      <Title>Jaari</Title>
      <Budget>500</Budget>
    </Movie>
    
  2. Attributes: Provide extra metadata inside the opening tag.
    <Movie Accessible="true" Year="2023">
    
  3. Tree Structure: XML is a nested hierarchy (like a family tree).

```figure
{"type":"tree","root":{"v":"eSewaTransaction","children":[{"v":"User","children":[{"v":"Username","children":[{"v":"ram_thapa123"}]},{"v":"Password","attributes":{"minLength":"4","maxLength":"8"},"children":[{"v":"abc123"}]}]},{"v":"Amount","attributes":{"currency":"NPR"},"children":[{"v":"500"}]}]},"caption":"XML tree structure for an eSewa transaction (attributes and nested elements)"}

#### **Example: eSewa Transaction Log**
```xml
<eSewaTransaction>
  <User>
    <Username>user123</Username>
    <Password minLength="4" maxLength="8">abc123</Password>
  </User>
  <Amount currency="NPR">500</Amount>
  <Status>Completed</Status>
</eSewaTransaction>

Why this matters: eSewa uses XML to log transactions in a structured way, ensuring every field (e.g., Amount, Status) is validated before processing.


3. XML Validation: XSD vs. DTD

Validation ensures XML follows predefined rules. Two methods:

A. XML Schema Definition (XSD)

  • Modern standard (replaces DTD).
  • Uses data types (string, integer, boolean) and constraints (min/max length, patterns).
  • Supports namespaces to avoid tag conflicts.

Example XSD for Password Validation:

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
  <xs:element name="Password">
    <xs:simpleType>
      <xs:restriction base="xs:string">
        <xs:minLength value="4"/>
        <xs:maxLength value="8"/>
      </xs:restriction>
    </xs:simpleType>
  </xs:element>
</xs:schema>

Validation Rule: Password must be 4–8 characters long.

B. Document Type Definition (DTD)

  • Older method (less flexible).
  • Defines elements and attributes using <!ELEMENT> and <!ATTLIST>.
  • No data types (only strings).

Example DTD for the same Password:

<!ELEMENT Password (#PCDATA)>
<!ATTLIST Password
  minLength CDATA "4"
  maxLength CDATA "8"
>

Comparison Table

Feature XSD DTD
Data Types Supports (string, int, bool) Only strings
Namespaces Yes No
Complexity Higher (XML-based) Simpler (text-based)
Use Case Modern apps (eSewa, banks) Legacy systems

Real-World Tie-In:

  • Ncell’s Billing System: Uses XSD to validate customer data (e.g., PhoneNumber must be 10 digits) before processing payments.
  • NEPSE Stock Data: XML + XSD ensures stock prices (<Price currency="NPR">) are formatted correctly.

4. Querying XML: XPath and XQuery

sequenceDiagram
  participant User
  participant DarazCatalog
  participant XPathEngine
  User->>DarazCatalog: Query: /ProductCatalog/Product[Price>50000]
  DarazCatalog-->>XPathEngine: Parse XML
  XPathEngine-->>User: Return <Product>Laptop</Product>

A. XPath (XML Path Language)

  • Purpose: Navigate and select parts of an XML document.
  • Syntax: Uses / for hierarchy, [] for conditions, and * for wildcards.

Example XPath Queries:

Query Meaning Example Output
/MovieStore/Movie All Movie elements All movies in the store
/MovieStore/Movie[Budget>500] Movies with budget >500 <Movie><Title>Jaari</Title>...</Movie>
//Actor All Actor elements (anywhere) All actors in the store

Worked Example: Daraz Product Catalog

<ProductCatalog>
  <Product>
    <Name>Smartphone</Name>
    <Price currency="NPR">20000</Price>
    <Stock>50</Stock>
  </Product>
  <Product>
    <Name>Laptop</Name>
    <Price currency="NPR">80000</Price>
    <Stock>10</Stock>
  </Product>
</ProductCatalog>

XPath Query: Find all products priced >50,000 NPR.

/ProductCatalog/Product[Price>50000]

Result:

<Product>
  <Name>Laptop</Name>
  <Price currency="NPR">80000</Price>
  <Stock>10</Stock>
</Product>

B. XQuery (XML Query Language)

  • Purpose: Retrieve and process XML data (like SQL for databases).
  • Example: Get titles of movies with budget >500 from the earlier XML.
for $movie in /MovieStore/Movie[Budget>500]
return $movie/Title

Output:

Jaari

Real-World Use:

  • NTC’s Traffic Route Planner: Uses XPath/XQuery to extract real-time traffic data from XML feeds and display delays on their website.

5. Transforming XML: XSLT to HTML

XSLT (eXtensible Stylesheet Language Transformations) converts XML into HTML for display.

[object Object][object Object][object Object]
XSLT transformation: MovieStore XML → HTML table (step-by-step)

Example: Transform the MovieStore XML into an HTML table.

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="/">
    <html>
      <body>
        <h2>Movie List</h2>
        <table border="1">
          <tr>
            <th>Title</th>
            <th>Actor</th>
            <th>Budget</th>
          </tr>
          <xsl:for-each select="MovieStore/Movie">
            <tr>
              <td><xsl:value-of select="Title"/></td>
              <td><xsl:value-of select="Actor"/></td>
              <td><xsl:value-of select="Budget"/></td>
            </tr>
          </xsl:for-each>
        </table>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

Output HTML:

<table>
  <tr><th>Title</th><th>Actor</th><th>Budget</th></tr>
  <tr><td>Jaari</td><td>Dayahang</td><td>500</td></tr>
</table>

Real-World Use:

  • Khalti’s Receipts: Converts XML transaction logs into HTML invoices for users.
  • NEPSE’s Stock Reports: Transforms XML stock data into interactive HTML charts.

6. XML Namespaces: Avoiding Tag Conflicts

Problem: Two XML documents might use the same tag (e.g., <Name> for a person and a movie). Solution: Namespaces prefix tags to avoid collisions.

Example:

<MovieStore xmlns:ns1="http://example.com/movies">
  <ns1:Movie>
    <ns1:Title>Jaari</ns1:Title>
  </ns1:Movie>
</MovieStore>

<UserData xmlns:ns2="http://example.com/users">
  <ns2:User>
    <ns2:Name>John Doe</ns2:Name>
  </ns2:User>
</UserData>

Why This Matters:

  • eSewa + Ncell Integration: Both use <Transaction>, but namespaces ensure their XML schemas don’t clash.

7. XML in Databases (PHP + XML)

PHP can query XML files like a database:

<?php
$xml = simplexml_load_file("movies.xml");
foreach ($xml->Movie as $movie) {
  if ($movie->Budget > 500) {
    echo $movie->Title . "<br>";
  }
}
?>

Output:

Jaari

Real-World Use:

  • Bank Loan Processing: PHP reads XML loan applications, validates them via XSD, and stores approved data in a database.

In the Real World

  1. eSewa Transactions

    • Idea Used: XML + XSD for validation.
    • How: Every transaction (e.g., bill payment) is logged in XML with XSD rules (e.g., Amount must be a number). This ensures no invalid data is processed.
  2. Ncell Billing System

    • Idea Used: XPath/XQuery for data extraction.
    • How: Ncell’s backend uses XPath to pull customer details (e.g., /Customer[Phone='9800000000']/Usage) from XML billing logs to generate invoices.
  3. Daraz Product Catalog

    • Idea Used: XSLT for HTML transformation.
    • How: Daraz stores product data in XML. XSLT converts it into the HTML pages users see, dynamically updating prices and stock levels.
  4. NEPSE Stock Data

    • Idea Used: XML + XSD for structured data.
    • How: Stock prices are published in XML with XSD validation (e.g., <Price> must be a number). Investors’ apps parse this XML to display real-time quotes.
  5. Khalti Receipts

    • Idea Used: XSLT for receipt generation.
    • How: After a payment, Khalti’s system generates an XML transaction log. XSLT transforms this into a clean HTML receipt emailed to the user.

Exam Tip

  1. For XSD/DTD Questions:

    • Always define <xs:schema> or <!DOCTYPE> at the start.
    • Use <xs:element> for elements and <xs:simpleType> for constraints (e.g., minLength, maxLength).
    • Past Exam Pitfall: Forgetting to declare the XML namespace (xmlns:xs="http://www.w3.org/2001/XMLSchema").
  2. For XPath/XQuery:

    • Practice navigating trees with /, //, and [condition].
    • Example: Given XML, write XPath to find all movies with Budget > 500.
    • Common Mistake: Using > instead of gt() in XQuery (XQuery uses function syntax).
  3. For XSLT:

    • Start with <xsl:template match="/">.
    • Use <xsl:value-of> to extract data and <xsl:for-each> for loops.
    • Tip: Always include <html> and <body> tags in the output.
  4. Namespaces:

    • Prefix tags with xmlns:prefix="URI".
    • Example: <ns1:Movie> where ns1 is the prefix.
  5. Real-World Scenarios:

    • Relate XML to eSewa (validation), Ncell (querying), or Daraz (transformation) in explanations.
    • Example Answer Start:

      "In eSewa’s transaction system, XML stores user data with XSD validation to ensure passwords meet security rules (e.g., 4–8 characters). XPath queries then extract completed transactions for reporting."


In the real world

  • eSewa Transactions: Uses XSD validation to enforce rules like minLength="4" for passwords before processing payments, ensuring data integrity.
  • Ncell Billing System: Applies XPath queries (e.g., /Customer[Plan='Unlimited']/Usage) to extract usage data for invoicing.
  • NEPSE Stock Data: Employs XSLT transformations to convert raw XML stock feeds into user-friendly HTML tables for investors.

Based on the TU BIT syllabus for Web Technology II (BIT301), unit 7.

Discussion

Loading…