ITC5202: XML and JavaScript Professor: Shahdad

Project1 - Part 2: This is part 2 of the Project which you will complete it with your assigned
groupmate.

Note:
• I am expecting a professional teamwork and fair collaboration between team members
• You are allowed to use any material from the internet, but those materials should be
relevant to our course and you should be able to answer any question about what you
submit at the end.
• You can do brainstorming with other groups, but any form of sharing work/code is
strictly avoided.

Project Description
You have been asked to process the XML data of a superstore, which is attached (products.xml).
This data file shows each supplier and its products.

Based on product.xml, answer the following question

NOTE: In each step, you need to assign a new name to product.xml before you proceed that step.

Q1) Name all XML elements and child elements.

Ans :- XML elements :-

suppliers ,supplier,supplierid,distributionarea,product,productid,product_name,asin,product_url,
brand_name,image_url,msrp,sale_price,discount,product_description,date_available,number_rev
iews
,seller_name

CHILD elements :-
suppliers (root element) => supplier
supplier(root element) => supplierid,distributionarea,product
product(root element) => productid,product_name,asin,product_url,brand_name,image_url,msrp
sale_price,discount,product_description,date_available,number_reviews,seller_name.

Q2) Is this a well-formed document? Is it a valid document?

Ans :- Yes , it is well formed as it follows proper rules , syntax , proper closing and enclosing
tags , nesting of elements , etc .
But its validity depends on DTD or schema and based on that , we can decide whether it is valid
or not .
ITC5202: XML and JavaScript Professor: Shahdad

Q3) Design the DTD for this document.

Ans :-

Q4) Design XML Schema for this document and link the XML Schema to this document.

Ans :-
ITC5202: XML and JavaScript Professor: Shahdad
ITC5202: XML and JavaScript Professor: Shahdad

Q5) Write an XSLT document to transform product.xml into an HTML document that displays
all the products details (without supplier info) in a table format.

Ans :-
ITC5202: XML and JavaScript Professor: Shahdad
ITC5202: XML and JavaScript Professor: Shahdad
ITC5202: XML and JavaScript Professor: Shahdad
ITC5202: XML and JavaScript Professor: Shahdad

Q6) Write a Js program (using XHR) that displays all the products details (without supplier info)
in a table format.

Ans :-
ITC5202: XML and JavaScript Professor: Shahdad
ITC5202: XML and JavaScript Professor: Shahdad

Before starting Q7~Q10, You need to add some new supplier/product data to the
product.xml file (minimum: 2 suppliers with 2 products).

Q7) Using Q7.html, you need to develop a proper JavaScript function which will be invoked
when user clicks on the “Show all products” button. The JavaScript function processes the
product.xml data and displays all products details (including suppliers).
• highlight those product which their instock attribute is “N” (use different font or
background color)

Ans :-
ITC5202: XML and JavaScript Professor: Shahdad
ITC5202: XML and JavaScript Professor: Shahdad

Q8) Using Q8.html, you need to develop a proper JavaScript function which will be invoked
when user clicks on the “Search” button. The JavaScript function, reads the product_name, and
processes the product.xml data and displays matching records of all products which their
product_id is matched with the user input. (choose 4 fileds to display: i.e:
product_name,product_msrp,…)
ITC5202: XML and JavaScript Professor: Shahdad

Apply partial search to the program. (if user enters “anti”, it displays all products name which
has the word “anti”—Hint: you need to implement partial search functionality for searching
prouct_name)
• Can you add supplier_id to the output as well? Apply and Explain!

Ans :-
ITC5202: XML and JavaScript Professor: Shahdad
ITC5202: XML and JavaScript Professor: Shahdad

Here , we cannot add supplier id as it is giving error named cannot read property of textContent.

Q9) Write an XSLT document to transform order.xml into an HTML document that displays all
the Products/Suppliers information in the following format (you can use your creativity to make
is better  )
• Display Supplier info in table format on the top
• The list of products of each supplier should be displayed in table format, sorted by
product_name.
Hint: use xsl:sort
• Is the any way to highlight products which are not available? (instock=’n’)
ITC5202: XML and JavaScript Professor: Shahdad
ITC5202: XML and JavaScript Professor: Shahdad

Q10) Complete the followings:

• Modify the product.xml by removing the <supplierid> element and add it as attribute to
the <supplier> element. save it as product_modified.xml:

• Based on the new xml data file, redo the Q3, Q7 and Q8.
• From your understanding as developer, explain your idea about coding/processing XML
element vs attribute. Which one is easier to develop with JS or XSLT, process supplierid
as element-data or attribute-data? Explain your answer based on your observation
through this project.

Ans :-
ITC5202: XML and JavaScript Professor: Shahdad
ITC5202: XML and JavaScript Professor: Shahdad
ITC5202: XML and JavaScript Professor: Shahdad
ITC5202: XML and JavaScript Professor: Shahdad
ITC5202: XML and JavaScript Professor: Shahdad
ITC5202: XML and JavaScript Professor: Shahdad

Bonus question) How to implement Q8 using XSLT? (Asking user to enter item-name and
display related result using XSLT, so the output is being generated by xslt.. Hint: check
XSLTProcessor in JS!)
ITC5202: XML and JavaScript Professor: Shahdad

Rubrics
The project has 10% of the total which the mark is divided as follow:
• Fundamental XML concepts( 1%)
• Designing XML Structure using DTD and XML Schema (2%)
• Developing JavaScript programs to process XML data (4%)
• Developing XSLT document (3%)

Note: In designing XML documents and developing JavaScript codes, you need to use your
design/coding skills in order to fulfil the project functional requirements and also consider the followings:
• Use your creativity to apply some CSS formatting styles like layout/color/font to the pages
• Add comments you your design/coding
• Assign proper name (for files, methods, variables,…)

Submission:

1) Complete the Project Report Template (attached .doc file)

2) Submit all HTML/JS/XSD/DTD source codes
3) Please submit a recorded-video which explains how you implement the project and
demonstrate how it works. This will give everyone the opportunity to present their
Project-solution. Please record a video (2~10 minutes) with the following contents: a.
Introduce yourself
b. Show/demonstrate how your assignment works.
c. Explain your code (walkthrough), how you design it (a quick/detailed
walkthrough of the
d. programming, and setting/deployment)
e. Speak about challenges that you faced during this Assignment.
f. Evaluate your team progress out of 10. Have you implemented all requirements of
the project?
NOTE: You can record the video using some screen-capture software (like OBS :
https://obsproject.com/ ). To submit the video, you can upload the video on the
youtube (you may make it unlisted) and submit the link here.You can also directly
upload the video to the BB.

Note : Late submission: There is a 5% deduction every two hours after deadline.

Important Note: Add the following declaration at the top of your “JS/XML” files
/***************************************************************************** *
ITC5202 – Project1
* I declare that this assignment is my own work in accordance with Humber Academic *
Policy.
ITC5202: XML and JavaScript Professor: Shahdad

* No part of this assignment has been copied manually or electronically from any other *
source (including web sites) or distributed to other students.
*
* Name: ______Yug Sutariya And Dirgh Jani____________ Student ID:
_N01580206 and N01579462_____________ Date: _____4/7/23_____________
*
*
*****************************************************************************/

Grading
• Group performance in project1-part1 (in class-deadline end of class of June 15) (10%)
• Group performance in project1-part2 (at home-deadline June 21 @11:59pm) (70%) o
10% marks for this project is considered for the quality of your design/code, according to
the guidelines
 In designing XML documents and developing JavaScript codes, you need to
use your design/coding skills in order to fulfil the project functional
requirements and also consider the followings:
• Use your creativity to apply some CSS formatting styles like layout/color/font to the
pages
• Follow ES6 (and higher versions) coding feature in your coding
• Add comments you your design/coding
• Assign proper name (for files, methods, variables,…)
• Submission of project_document + video recording (10%) o If you don’t have enough
time to submit both project and video, please submit the project by due date and then
submit the video presentation later (not later than June 22 @ 12pm)
• Peer Evaluation and project presentation on Thursday June 22 class (10%) o Each group
member should be able to answer questions / explain the project