It Assignment

Contents
1. INTRODUCTION.........................................................................................................1
2. XML CONTENT..........................................................................................................2
2.1. Tree Diagram........................................................................................................2
2.2. Xml Content..........................................................................................................3
3. SCHEMA CONTENT................................................................................................10
4. TESTING...................................................................................................................15
4.1. Test 1..................................................................................................................15
4.2. Test 2..................................................................................................................16
4.3. Test 3-Error correction for Test 2.......................................................................17
4.4. Test 4..................................................................................................................18
4.5. Test 5-Error Correction for Test 4......................................................................19
5. DEVELOPMENT.......................................................................................................20
6. LIMITATIONS OF DTD AND CSS............................................................................21
6.1. Limitations of DTD..............................................................................................21
6.2. Limitations of CSS..............................................................................................21
7. CRITICAL EVALUATION..........................................................................................22
8. CONCLUSION..........................................................................................................23
9. REFERENCES..........................................................................................................24
Table Of Figures
Figure 1 Tree Diagram.......................................................................................................2
Figure 2 Test 1.................................................................................................................15
Figure 3 Test 2.1..............................................................................................................16
Figure 4 Test 2.2..............................................................................................................16
Figure 5 Test 3.1..............................................................................................................17
Figure 6 Test 3.2..............................................................................................................17
Figure 7 Test 4.1..............................................................................................................18
Figure 8 Test 4.2..............................................................................................................18
Figure 9 Test 5.................................................................................................................19
Table Of Tables
Table 1 Test1...................................................................................................................15
Table 2 Test2...................................................................................................................16
Table 3 Test3...................................................................................................................17
Table 4 Test4...................................................................................................................18
Table 5 Test5...................................................................................................................19
CS5004NA Emerging Programming Platforms and Technologies
1. INTRODUCTION
XML was used for this coursework to develop a website for an online reconditioned vehicle shop.
An XML document, a CSS document and an XSD document were created for the functioning of the
website. The XML file would hold the structured data of the website and the CSS file would outline the
design of it, whereas the XSD file would hold all the required for the website.
XML stands for eXtensible Markup Language and is much like HTML. It was designed to store
and transport data and is self-descriptive. It is basically “tags that wrap information”. XML doesn’t use
predefined tags and is extensible meaning tags are not defined in any XML standard and the
applications made in XML will work even if new data is added/removed. It is designed so that the data
is carried with focus on what data actually is. XML simplifies the processes of data
availability/sharing/transport, it simplifies platform changes[ CITATION w3s20 \l 1033 ].
CSS stands for Cascading Style Sheets, which simplifies the process for users to make the
developed web pages/site look presentable. It is a simple design language which simply allows users
to make their web-applications beautiful. Using it gives user the control over variety of effects
including the colour and font of the texts, the colour and size of the background, space between and
size of columns and paragraphs, layout designs etc[ CITATION tut201 \l 1033 ].
XSD officially stands for XML Schema Definition and is basically a quality control language. Using
XSD information written in XML file is validated and it helps user make sure that the information is
described well. XSD files are XML files. Just like XML files XSD files also have elements and each of
the elements should have name and a type. The are variety of types and they are simple, complex
and custom types[ CITATION Stu202 \l 1033 ].
1
np01cp4s190035|Prayag Narsingh Rana
2. XML CONTENT
2.1. Tree Diagram
2
Figure 1 Tree Diagram
2.2. Xml Content
<?xml version="1.0" encoding="UTF-8"?>

<?xml-stylesheet type="text/css" href="catalog_18030814.css"?>
<autoShop xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="catalog_18030814.xsd">
<header>
<logo/>
<headerRight>
<name Year="2020">Boutique Automobile</name>
<address city="Kathmandu">Baluwatar</address>
<navigation>
<navigator>Home</navigator>
<navigator>Vehicles for Sale</navigator>
<navigator>Sell your Car</navigator>
<navigator>About Us</navigator>
<navigator>Contact Us</navigator>
</navigation>
</headerRight>
</header>
<welcome>Welcome
<brands> Brands we sell
<left>Hyundai</left>
<left>Kia</left>
<left>Lexus</left>
<left>Jaguar</left>
<left>Mercedes</left>
<left>Range Rover</left>
<left>Land Crusier</left>
<left>Renault</left>
<right>BMW</right>
<right>Toyota</right>
<right>Volkswagen</right>
</brands>
</welcome>
<cars> Cars Re-selling

<itemLeft itemNumber="001">
<picture1/>
<carName carID="A1">Hyundai i10</carName>
<manufacturer>Manufacturer: Hyundai</manufacturer>
<bodyType>Body Style: Hatchback</bodyType>
<carType>Car Type: Electric</carType>
<battery>Battery: 50 kWh lithium-ion battery</battery>
<color>Colour: Glacier White, Black Roof</color>
<usedFor manufacturedYear="2019">Used For: 1 years</usedFor>
<dimension> Features
<wheelbase>Wheelbase: 2,700 mm</wheelbase>
<length>Length: 4,490 mm</length>
<width>Width: 1,788 mm</width>
3
<height>Height: 1,530 mm</height>
<curbWeight>Curb Weight: 1,580-1,640 kg</curbWeight>
</dimension>
<price>Rs. 70,00,000</price>
<show>Show More</show>
</itemLeft>
<picture2/>
<carName carID="A2">Hyundai i20</carName>
<bodyType>Body Style: Hatchback</bodyType>
<carType>Car Type: Fuel</carType>
<fuel>Fuel: Petrol</fuel>
<color>Colour: Metallic White</color>
<usedFor manufacturedYear="2016">Used For: 4 year</usedFor>
<length>Length: 4,550 mm</length>
<width>Width: 1,750 mm</width>
<height>Height: 1,490 mm</height>
<curbWeight>Curb Weight: 1,150-1,165 kg</curbWeight>
</dimension>
</itemLeft>
<picture3/>
<carName carID="A3">Tucson</carName>
<bodyType>Body Style: 4 door SUV</bodyType>
<color>Colour: Gun metal grey</color>
<wheelbase>Wheelbase: 2519 mm</wheelbase>
<length>Length: 4096 mm</length>
<width>Width: 1765 mm</width>
<height>Height: 1652 mm</height>
<curbWeight>Curb Weight: 1249 kg</curbWeight>
</dimension>
</itemLeft>
<picture4/>
<carName carID="A4">Hyundai Creta</carName>
<color>Colour: Platinum Gray Metallic</color>
4
</dimension>
</itemLeft>
<picture5/>
<carName carID="A5">Range Rover</carName>
<manufacturer>Manufacturer: Kia</manufacturer>
<battery>Battery: 64 kWh lithium-ion polymer battery</battery>
<color>Colour: Neptune Blue</color>
</dimension>
<price>Rs. 1,00,99,000</price>
</itemLeft>
<picture6/>
<carName carID="A6">Hyundai Sportage</carName>
<battery>Fuel: Petrol</battery>
<color>Colour: Glossy White</color>
</dimension>
</itemLeft>
<picture7/>
<carName carID="A7">Prado</carName>
<manufacturer>Manufacturer: Toyota</manufacturer>
<battery>Fuel: Petrol</battery>
<color>Colour: M. White</color>
5
</dimension>
</itemLeft>
<picture8/>
<carName carID="A8">Lexus</carName>
<manufacturer>Manufacturer: Toyota</manufacturer>
<carType>Car Type: Hybrid</carType>
<battery>Battery: 64 kWh lithium-ion polymer battery, Fuel:
Petrol</battery>
<color>Colour: White</color>
<usedFor manufacturedYear="2018">Used For: 1 year</usedFor>
</dimension>
</itemLeft>
<itemRight itemNumber="009">
<picture9/>
<carName carID="B1">Jaguar</carName>
<manufacturer>Manufacturer: Tata</manufacturer>
<color>Colour: Surf Blue</color>
</dimension>
</itemRight>
<picture10/>
<carName carID="B2">Jaguar</carName>
<manufacturer>Manufacturer: Tata</manufacturer>
<bodyType>Body Style: 4 door Sedan</bodyType>
<color>Colour: Bronze Maroon</color>
6
</dimension>
<price> SOLD OUT</price>
</itemRight>
<picture11/>
<carName carID="B3">Mercedes Class B</carName>
<manufacturer>Manufacturer: Mercedes</manufacturer>
<bodyType>Body Style: 4 door Hatchback</bodyType>
</dimension>
<price>Rs 1,05,00,000</price>
</itemRight>
<picture12/>
<carName carID="B4">Mercedes TUV</carName>
<manufacturer>Manufacturer: Mercedes</manufacturer>
<bodyType>Body Style: 4 door TUV</bodyType>
<fuel>Fuel: Diesel</fuel>
<color>Colour: Phantom Black</color>
</dimension>
</itemRight>
<picture13/>
<carName carID="B5">BMW</carName>
<manufacturer>Manufacturer: BMW</manufacturer>
<bodyType>Body Style: Sedan</bodyType>
<color>Colour: Guardian Blue</color>
7
</dimension>
</itemRight>
<picture14/>
<carName carID="B6">Kia</carName>
<manufacturer>Manufacturer: Kia</manufacturer>
</dimension>
<price> SOLD OUT</price>
</itemRight>
<picture15/>
<carName carID="B7">ZOE</carName>
<manufacturer>Manufacturer: Renault</manufacturer>
<color>Colour: Skyhigh Blue</color>
</dimension>
</itemRight>
<picture16/>
<carName carID="B8">Volkswagen</carName>
<manufacturer>Manufacturer: Volkswagen</manufacturer>
<color>Colour: Red</color>
8
</dimension>
</itemRight>
</cars>
<footer>
<name>Boutique Automobile</name>
<address>Baluwatar, Kathmandu</address>
<telephone>Phone: 01-9841</telephone>
<email>E-mail: autoboutique@gmail.com</email>
</footer>
</autoShop>
9
3. SCHEMA CONTENT
<?xml version="1.0" encoding="UTF-8"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="autoShop">
<xs:complexType>
<xs:sequence>
<xs:element name="header">
<xs:complexType mixed="true">
<xs:sequence>
<xs:element name="logo" minOccurs="1"
maxOccurs="4"/>
<xs:element name="headerRight" minOccurs="1"
maxOccurs="unbounded">
<xs:sequence>
<xs:element name="name">
<xs:complexType>
<xs:simpleContent>
<xs:extension base="xs:string">
<xs:attribute name="Year" type="xs:string" use="required"/>
</xs:extension>
</xs:simpleContent>
</xs:complexType>
</xs:element>
<xs:element name="address">
<xs:complexType>
<xs:simpleContent>
<xs:attribute name="city" type="xs:string" use="optional"/>
</xs:extension>
</xs:simpleContent>
</xs:complexType>
</xs:element>
<xs:element name="navigation">
<xs:complexType>
<xs:sequence>
<xs:element
name="navigator" type="xs:string"/>
<xs:element
10
<xs:element
<xs:element
<xs:element
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:element name="welcome">
<xs:sequence>
<xs:element name="brands">
<xs:sequence>
<xs:element name="left"
type="xs:string" minOccurs="1" maxOccurs="8"/>
<xs:element name="right"
type="xs:string" minOccurs="1" maxOccurs="4"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:element name="cars">
<xs:sequence>
<xs:element name="itemLeft" minOccurs="1"
<xs:complexType>
<xs:sequence>
<xs:element name="picture1"
minOccurs="0" maxOccurs="1"/>
<xs:element name="carName">
<xs:complexType>
<xs:simpleContent>
11
<xs:attribute name="carID" type="xs:string" use="required"/>
</xs:extension>
</xs:simpleContent>
</xs:complexType>
</xs:element>
<xs:element
name="manufacturer" type="xs:string"/>
<xs:element name="bodyType"
type="xs:string"/>
<xs:element name="carType"
type="xs:string"/>
<xs:element name="battery"
type="xs:string" minOccurs="0"/>
<xs:element name="fuel"
<xs:element name="color"
type="xs:string"/>
<xs:element name="usedFor">
<xs:complexType>
<xs:simpleContent>
<xs:attribute name="manufacturedYear" type="xs:string" use="required"/>
</xs:extension>
</xs:simpleContent>
</xs:complexType>
</xs:element>
<xs:element name="dimension">
<xs:complexType
mixed="true">
<xs:sequence>
<xs:element
name="wheelbase" type="xs:string"/>
<xs:element
name="length" type="xs:string"/>
<xs:element
name="width" type="xs:string"/>
<xs:element
name="height" type="xs:string"/>
<xs:element
name="curbWeight" type="xs:string" minOccurs="0"/>
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:element name="price"
type="xs:string"/>
<xs:element name="show"
type="xs:string"/>
</xs:sequence>
12
<xs:attribute name="itemNumber"
type="xs:string" use="required"/>
</xs:complexType>
</xs:element>
<xs:element name="itemRight" minOccurs="1"

<xs:complexType>
<xs:sequence>
<xs:element name="carName">
<xs:complexType>
<xs:simpleContent>
<xs:attribute name="carID" type="xs:string" use="required"/>
</xs:extension>
</xs:simpleContent>
</xs:complexType>
</xs:element>
<xs:element
name="manufacturer" type="xs:string"/>
<xs:element name="bodyType"
type="xs:string"/>
<xs:element name="carType"
type="xs:string"/>
<xs:element name="battery"
<xs:element name="fuel"
<xs:element name="color"
type="xs:string"/>
<xs:element name="usedFor">
<xs:complexType>
<xs:simpleContent>
<xs:attribute name="manufacturedYear" type="xs:string" use="required"/>
13
</xs:extension>
</xs:simpleContent>
</xs:complexType>
</xs:element>
<xs:element name="dimension">
<xs:complexType
mixed="true">
<xs:sequence>
<xs:element
name="wheelbase" type="xs:string"/>
<xs:element
name="length" type="xs:string"/>
<xs:element
name="width" type="xs:string"/>
<xs:element
name="height" type="xs:string"/>
<xs:element
name="curbWeight" type="xs:string" minOccurs="0"/>
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:element name="price"
type="xs:string"/>
<xs:element name="show"
type="xs:string"/>
</xs:sequence>
<xs:attribute name="itemNumber"
type="xs:string" use="required"/>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:element name="footer">
<xs:complexType>
<xs:sequence>
<xs:element name="name" type="xs:string"/>
<xs:element name="address" type="xs:string"/>
<xs:element name="telephone" type="xs:string"/>
<xs:element name="email" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
14
4. TESTING
4.1. Test 1
Test no. 1
Action Xml file was opened in the browser.
Expected Output Xml file should open in the browser.
Actual Output Xml file opened in the browser.
Result successful
Table 1 Test1
Figure 2 Test 1
15
4.2. Test 2
Test no. 2
Action Css file was linked with the xml file

and was opened in the browser.
Expected Output Xml file along with its css description

was supposed to open in the browser.
Actual Output Xml file did not open with its css file in
the browser.
Result unsuccessful
Table 2 Test2
Figure 3 Test 2.1
Figure 4 Test 2.2
16
4.3. Test 3-Error correction for Test 2
Test no. 3
Action Css was linked properly and xml with

its css was re-opened in the browser.
Expected Output Xml file along with its css description

was supposed to open in the browser.
Actual Output Xml file opened with its css file in the
browser.
Result successful
Table 3 Test3
Figure 5 Test 3.1
Figure 6 Test 3.2
17
4.4. Test 4
Test no. 4
Action Xml file and schema file was

validated in xml.validation.
Expected Output There should be no errors found.
Actual Output There were errors found.
Result unsuccessful
Table 4 Test4
Figure 7 Test 4.1
Figure 8 Test 4.2
18
4.5. Test 5-Error Correction for Test 4

Test no. 5
Action Xml file and schema file was

validated in xml.validation.
Expected Output There should be no errors found.
Actual Output There were no errors found.
Result successful
Table 5 Test5
Figure 9 Test 5
19
5. DEVELOPMENT
Applications used for the generation of this website were Notepad++ where the language of XML,
CSS and XSD were written and draw.io where the tree diagram for the XML file was created.
Notepad++ is a source code editor and is a replacement for Notepad. It supports many languages
and is licensed by GPL. It is free to use as in “free speech” and as in “free beer” as their official
website quotes. Notepad++ is written in C++ and uses engines that ensure faster and higher
execution time[ CITATION not20 \l 1033 ].
Draw.io is also a free to use website/application that allows students and users to easily create
diagrams (which would be awfully hard to create in most cases) in their platform. It is capable of
providing pre-developed outlines of diagram/chart(s) such as a flowchart, class diagram etc. Users
also have an option of starting to craft their tables from scratch, therefore, is a very convenient and
useful website to have.
In order to develop the website, first he xml file was created in Notepad++ where all the data was
filled. Data include tag elements, attributes and information that each element held. The xml file was
gone through thoroughly and checked whether there were any misspells or mistakes, the error was
handled immediately. After the completion of the xml the css file was generated (in notepad++) that
held the information of how all the elements (and xml file in general) were to be styled and made
presentable. When the website was looking as desired an xsd file was also generated (in notepad++)
where all the attributes and elements were properly defined. The xml and xsd file were checked for
validation, and errors that were present were corrected. After, the validation was successful a tree
diagram was created co-responding to the xml structure (it showed the hierarchy of elements in the
xml file).
20
6. LIMITATIONS OF DTD AND CSS

6.1. Limitations of DTD
The XML Document Type Declaration, commonly known as DTD, is a way to describe XML
language precisely. DTDs check vocabulary and validity of the structure of XML documents against
grammatical rules of appropriate XML language. [ CITATION tut203 \l 1033 ]However, there are a few
limitations of DTD which are mentioned below.
 DTD does not support namespaces. In a DTD namespaces have to be defined within the DTD,
which violates the purpose of using namespaces. [ CITATION tur20 \l 1033 ]
 DTD only supports text string data type.
 It is not object-oriented, therefore it does not apply the concept of inheritance.
 There is a limited possibility to express the cardinality for elements.
 There is minimal support for code modularity.
 There is limited documentation support, since the structured documentation features available
for schema notation cannot be used. [ CITATION Sha07 \l 1033 ]
6.2. Limitations of CSS

Cascading Style Sheets, also referred to as CSS, is a simple design language intended to simplify
the process of making web pages presentable. [ CITATION tut204 \l 1033 ] The limitations of CSS are
mentioned below:
 The dynamic contents supported by CSS are limited, i.e. it cannot perform logical operations
such as if/else or for/while.
 It does not provide the access to read any file.
 CSS cannot interact with databases.
 A web page cannot be requested through CSS.
 CSS files are vulnerable due to lack of security and can be overridden as anyone with access
can read/write and change the file contents.
21
7. CRITICAL EVALUATION
The main aim of the coursework was to help student better understand the concept and
working mechanism of xml and xsd while also helping us enhance the skill of representing the look of
the webpage with the help of css. The coursework required us to develop a website for an online
shop that sells used vehicles (second-hand vehicles) by using xml. Css and xsd were also mandatory
components for the coursework which were required for the styling of the elements and defining the
elements along with their attributes respectively.
During the initiation of the development of the webpage there were lots of obstacles, for
example when the coursework was handed out there were lots of questions that had to be answered,
there was no idea on how the development would start as xml was a fairly new topic. As the
interactions between tutors and lecturers was conducted the questions were slowly solved and the
picture of the development of the webpage was getting clearer. The xml file was created and
elements along with their attributes were written and the webpage structure was completed after re-
checking many times and correcting the errors that occurred. The css file was created and different
elements were styled according to the need and slowly but surely the webpage was coming together.
There were many errors that arose because the tags and stly were not aligning properly but this
problem was solved easily by properly naming the tags in the css. Upon the completion of the css file
the webpage was looking presentable. An xsd file was then created that would store the definition of
the elements and attributes created in the xml file. The xml and the schema file were validated and
the errors that were shown in the xmlvalidation were corrected one at a time. The correction was
easy and after the complete validation. The webpage was complete, and the documentation was
started, the different tests that were done were explained and a tree diagram which was created
according to xml file hierarchy was presented.
22
8. CONCLUSION
For the completion of this coursework lots of research materials were gathered. And after
hours spent upon proceeding to develop the website by consulting with teachers and friends
finally the full website with CSS and XSD was developed.
After the completion of this task lots of questions regarding the eXtensible Markup Language and
XML Schema Design was solved. Furthermore, the designs of webpages and website was clearly
understood.
There were tons upon tons of failures, and successes upon those failures during the course of this
task, that were faced, and the end result was a different kind of joyful experience.
23
9. REFERENCES
notepad++. (2020) notepad++ [Online]. Available from: https://notepad-plus-plus.org/ [Accessed 02
May 2020].
Sharat. (2007) thinktank [Online]. Available from: https://sharat.wordpress.com/2007/05/18/what-are-
the-disadvantages-of-dtd/ [Accessed 20 April 2020].
Study.com. (2020) Study.com [Online]. Available from: https://study.com/academy/lesson/what-is-
xsd-examples-tutorial.html [Accessed 02 May 2020].
turotrialspoint. (2020) tutorialspoint [Online]. Available from:
https://www.tutorialspoint.com/dtd/dtd_quick_guide.htm [Accessed 20 April 2020].
tutorialspoint. (2020) tutorialspoint [Online]. Available from:
https://www.tutorialspoint.com/css/what_is_css.htm [Accessed 02 May 2020].
https://www.tutorialspoint.com/xml/xml_dtds.htm [Accessed 20 April 2020].
https://www.tutorialspoint.com/css/what_is_css.htm [Accessed 20 April 2020].
w3schools.com. (2020) w3schools.com [Online]. Available from:
https://www.w3schools.com/xml/xml_whatis.asp [Accessed 02 May 2020].
24

It Assignment

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

It Assignment

Uploaded by

Copyright:

Available Formats

Contents

2.2. Xml Content

<?xml version="1.0" encoding="UTF-8"?>

<cars> Cars Re-selling

<?xml version="1.0" encoding="UTF-8"?>

<xs:attribute name="Year" type="xs:string" use="required"/>

<xs:attribute name="city" type="xs:string" use="optional"/>

<xs:attribute name="carID" type="xs:string" use="required"/>

<xs:attribute name="manufacturedYear" type="xs:string" use="required"/>

<xs:element name="itemRight" minOccurs="1"

<xs:attribute name="carID" type="xs:string" use="required"/>

<xs:attribute name="manufacturedYear" type="xs:string" use="required"/>

Action Xml file was opened in the browser.

Expected Output Xml file should open in the browser.

Actual Output Xml file opened in the browser.

Action Css file was linked with the xml file

Expected Output Xml file along with its css description

Figure 3 Test 2.1

Figure 4 Test 2.2

Action Css was linked properly and xml with

Expected Output Xml file along with its css description

Figure 5 Test 3.1

Figure 6 Test 3.2

Action Xml file and schema file was

Expected Output There should be no errors found.

Actual Output There were errors found.

Figure 7 Test 4.1

Figure 8 Test 4.2

4.5. Test 5-Error Correction for Test 4

Action Xml file and schema file was

Expected Output There should be no errors found.

Actual Output There were no errors found.

6. LIMITATIONS OF DTD AND CSS

6.2. Limitations of CSS

You might also like