CS311 Introduction to Web Services Developed Assignment 2 Spring 2025 | VU

CS311 Instructions:

Please read the following instructions carefully before submitting assignment: It should be clear that your assignment will not get any credit if:

The assignment is submitted after due date.

• The assignment is submitted via email.
• The assignment is copied from the Internet or from any other student.
• The submitted assignment does not open or file is corrupt.

Objective: To understand and get hands on experience of:

• XML DOM
• DOM Operations

Problem Statement: Marks 20

Create a small XML-based web page application for managing product records in an online store. Suppose the data is stored in an XML file containing details of products, such as their ID, Name, Category, and Price.

Your task is to write code using HTML and JavaScript that uses XML DOM traversal techniques to perform the following tasks:

1. Display All Product Details:

Traverse the XML DOM tree and print the details of all products in a structured format.

2. Add a New Product:

Append a new <Product> node to the XML DOM tree with details such as ID, Name, Category, and Price. The user should input these details.

3. Delete a Product Record:

Allow the user to delete a product's record by providing its ID. Traverse the DOM to locate and remove the corresponding <Product> node.

Sample XML File:

Here's a sample XML file with that aligns with the above HTML and JavaScript implementation:
<?xml version="1.0" encoding="UTF-8"?>
<Products>
<Product>
<ID>201</ID>
<Name>Wireless Mouse</Name>
<Category>Electronics</Category>
<Price>29.99</Price>
</Product>
<Product>
<ID>202</ID>
<Name>Bluetooth Speaker</Name> <Category>Audio</Category>
<Price>45.50</Price>
</Product>
<Product>
<ID>203</ID>
<Name>USB-C Charger</Name>
<Category>Accessories</Category>
<Price>19.99</Price>
</Product>
</Products>

Steps to Run:

1. Place the HTML file and the products.xml file in the same directory.
2. Open the HTML file in your browser.
3. The XML data will be loaded dynamically, and you can perform the operations (Display, Add, Delete) as described.