BITM3730Week5.pptx

XML
BITM 3730
Developing Web Applications

Previous Work Review
• http://pirate.shu.edu/~marinom6/work.html
• Please Note only previously due HW assignments are posted on my
pirate.shu.edu web space
• Begin organizing your creating files for this course into an easy to find folder
on your desktop for easy FTP later on

XML Basics
• Stands for eXtensible Markup Language
• Used to define customized markup languages
• We are already familiar with XML since we understand HTML

Interesting XML Notes
• XML is a software- and hardware-independent tool for storing and transporting
data.
• XML was designed to store and transport data
• XML was designed to be self-descriptive
• Maybe it is a little hard to understand, but XML does not DO anything.

XML Just Stores Data
• XML is just information wrapped in tags.
• XML is the parent language to HTML
• XML is used to contain data, not to display data
• XML tags are custom, defined by the author.
• HTML can enrich XML data but neither can replace the other. One is used
for storing (XML) and the other is used for displaying (HTML).

XML Rules
• XML elements must follow these rules:
• Can contain letters, numbers and other characters
• Can’t start with a number or punctuation character
• Can’t start with ‘xml’
• Can’t contain spaces

Writing in XML
• XML attributes must be quoted as in: <employee type=‘permanent’>
• Alternatively, you can write
• <employee>
<type>permanent</type>
</employee>
• Both above examples accomplish the same goal and there are no rules as to which
one is right. The second example is easier to read and looks nicer.

XML vs. HTML
• XML was designed to carry data - with focus on what data is
• HTML was designed to display data - with focus on how data looks
• XML tags are not predefined like HTML tags are

You Define XML Tags
• The XML language has no predefined tags.
• Tags are "invented" by the author of the XML document.
• HTML works with predefined tags like <p>, <h1>, <table>, etc.
• With XML, the author must define both the tags and the document structure.

Why Use XML?
• It simplifies data sharing
• It simplifies data transport
• It simplifies platform changes
• It simplifies data availability

More Reasons to use XML
• XML stores data in plain text format. This provides a software- and hardware-
independent way of storing, transporting, and sharing data.
• XML also makes it easier to expand or upgrade to new operating systems, new
applications, or new browsers, without losing data.
• With XML, data can be available to all kinds of "reading machines" like people,
computers, voice machines, news feeds, etc.

In What Ways Can We Use XML?
• Create a list of books
• Create a list of transactions
• Create a news article header
• Detail weather service information
• And much, much more!

XML Example Code
• <?xml version="1.0" encoding="UTF-8"?> Prolog
• <note> Root
• <to>Tove</to>
• <from>Jani</from>
• <heading>Reminder</heading>
• <body>Don't forget me this weekend!</body>
• </note> notice all have closing tags like HTML!!!!

XML can use HTML tags
• Tags you have previously seen can be used in XML, such as:
• <b></b> for bold text
• <i></i> for italicized text

Attributes Must Be Quoted
• <note date="12/18/1953">
• <to>Tove</to>
• <from>Jani</from>
• </note>
• In this example our attribute is our date 12/18/1953

Entity References
< < less than
> > greater than
& & ampersand
' ' apostrophe
" " quotation mark
Entity references help you to avoid errors

Comments in XML
• 
• This exact structure is required for XML comments

XML Elements
• An element can contain:
• Text
• Attributes
• other elements
• or a mix of the above
• Examples could be <rate>19.99</rate>

XML Naming Rules Reminder
• XML elements must follow these naming rules:
• Element names are case-sensitive
• Element names must start with a letter or underscore
• Element names cannot start with the letters xml (or XML, or Xml, etc)
• Element names can contain letters, digits, hyphens, underscores, and periods
• Element names cannot contain spaces
• Any name can be used, no words are reserved (except xml).

Standards Advising Naming Rules
• Create descriptive names, like this: <person>, <firstname>, <lastname>.
• Create short and simple names, like this: <book_title> not like this: <the_title_of_the_book>.
• Avoid "-". If you name something "first-name", some software may think you want to subtract "name" from "first".
• Avoid ".". If you name something "first.name", some software may think that "name" is a property of the object "first".
• Avoid ":". Colons are reserved for namespaces (more later).
• Non-English letters like éòá are perfectly legal in XML, but watch out for problems if your software doesn't support them.

XLink
• <?xml version="1.0" encoding="UTF-8"?>
• <homepages xmlns:xlink="http://www.w3.org/1999/xlink">
• <homepage xlink:type="simple"
xlink:href="https://www.w3schools.com">Visit W3Schools</homepage>
• <homepage xlink:type="simple" xlink:href="http://www.w3.org">Visit
W3C</homepage>
• </homepages>

Where Else Can We Use XML?
• HTML
• JavaScript
• PHP

XSLT
• XSLT - eXtensbile Stylesheet Language Transformations
• XSLT transform XML into HTML, before it is displayed by a browser
• You can transform a XML document into an HTML document just by
linking the XML document to the XSLT file by using the following line:
• <?xml-stylesheet type="text/xsl" href="xsltexample.xsl"?>

Another XML Example
• <xml>
<addressbook>
<address>
<name>Mark Nazzaro</name>
<email>nazzarma@shu.edu</email>
</address>
<address>
<name>David Rosenthal</name>
<email>rosentdv@shu.edu</email>
</address>
</addressbook>
</xml>

Building Assignment 5
<xml>
<instructors>
<name>Professors</name>
<contact>
<name>Mark Nazzaro</name>
<email>nazzarma@shu.edu</email>
</contact>
</instructors>
</xml>

• Each new professor’s name and email will require another contact tag
<contact>
<name>Matt Marino</name>
<email>matt.marino@shu.edu</email>
</contact>

• You will need to create as many <contact> tag attributes for name and email
as you have professors this semester
• In the upcoming example I have listed four professor contacts

Building Project 2
• The easiest way to embed a file is to use a <link> tag in HTML
• However, we have not uploaded our files to pirate.shu.edu yet, so we will
embed them right into the code
• <xml id="cdcat" src="cd_catalog.xml"></xml>
• <link rel="stylesheet" href="styles.css">

Building Project 2
• First, put the following code from your Blue.css file under the title:
<style>
body {
background-color: black;
}
h1 {
color: blue;
}
p {
color: blue;
}
</style>

Building Project 2
• Putting your XML into HTML requires you to translate it into a table [easiest for our beginner status]
• First, create your table:
<h1>Email Data</h1>
<table border="1">
<tbody>
Add table rows here
</tbody>
</table>
We need the <h1> tag so that our text is colored blue from our Blue.css code

Building Project 2
• First, we need our table headers:
<tr>
<th><p>Name</p></th>
<th><p>Email</p></th>
</tr>

Building Project 2
• Next, we need our table data:
<tr>
<td><p>Matt Marino</p></td>
<td><p>matt.marino@shu.edu</p></td>
</tr>
We need the <p> tag so that our text is colored blue from our Blue.css code

Building Project 2
• Keep adding each professor to the table using the tags and elements
provided on the previous slide using the <tr>, <td>, and <p> tags as
appropriate

Project 2 Visually
If your code is correct within your HTML file
your result should look like this
All of our text is blue and our background is
black due to our Blue.css code [make sure it is
embedded using the <style> tag
We also made sure to use the <h1> and <p>
tags to see our CSS code in action
The names and emails depend on your professors
this semester like your XML file

BITM3730Week5.pptx

More Related Content

Similar to BITM3730Week5.pptx

More from MattMarino13

Recently uploaded

BITM3730Week5.pptx