CS 371 Web Application Programming

1. CS 371 Web Application Programming XML and JSON Encoding Data CS 371 Web Application Programming

2. Data Encoding • transporting data from script to another • data needs to be organized • fixed length, comma delimited or proprietary formats can be efficient but structure must be “known” by sender and receiver • DBMS is not an option because they cannot be accessed by clients • need a portable format where the structure is independent of the scripts CS 371 Web Application Programming

3. Exensible Markup Language • subset of SGML • enforces well-formed tags (or elements) • tags are not predefined • users can define structure of data • allows groups to agree to a standard and easily enforce it. • tags are nested, self-described and case sensitive CS 371 Web Application Programming

4. Data Flow DTD or schema XML document (data) Sending script XML document (data) Validator Parser Receiving script CS 371 Web Application Programming

5. Structure of an XML Document • elements (tags) and attributes like XHTML • to be well-formed • all elements must be terminated • elements must be case sensitive • elements must be properly nested • must have a root element • attribute values must be quoted • white space is preserved • declarative tag <?xml version “1.0”?> CS 371 Web Application Programming

6. XML Example attributes name and homeTown are children of student root tag <?xml version="1.0" encoding="UTF-8"?> <students> <student id='123' campusLoc="on"> <name>Thomas Cruise</name> <homeTown>Saginaw</homeTown> </student> <student id='456' campusLoc="off"> <name>Jack Nicholson</name> <homeTown>Grand Rapids</homeTown> </student> </students> element text node CS 371 Web Application Programming

7. Rules for Elements • names • composed of letters, numbers and other chars • cannot start with a number or punctuation • cannot start with xml (XML, etc) • no spaces - also avoid "." • can have content • attributes • attributes can have values • values must be quoted CS 371 Web Application Programming

8. Content • normally everything is parsed (#PCDATA) • built-in entities: • &amp;, &lt;, &quot; • &xx; (&39; is a single quote) • use <![CDATA[text here]]> to pass data through parser as simple text CS 371 Web Application Programming

9. Examples • well-formed • <team type="divII">Grand Valley</team> • <a><b attr="val"><c>text</c></b></a> • <lesson title="html"/> • not quite well-formed • <ul><li>first bullet<li>second</ul> • <team type=divII>Grand Valley</team> • <student><name>Jason</student></name> • <student name>Mikey</student name> CS 371 Web Application Programming

10. Validation • To be well-formed a document must also conform to a dtd (document type definition) • dtd defines the structure of an xml doc: • name of root element • what is valid/invalid content for an element • what attributes can be used • type of data (parsed or unparsed) • dtd can be internal or external • xml schema is alternative to dtd • many xml validators – just google it CS 371 Web Application Programming

11. DTD Construction • reference in xml file • external: <!DOCTYPE teams SYSTEM “teams.dtd"> • internal<!DOCTYPE teams [ …element defs. … ]> • prologue in dtd file(<?xml version="1.0" encoding="UTF-8" standalone=”no” ?> CS 371 Web Application Programming

12. DTD Construction (cont) • defining elements:<!ELEMENT ename def> • content models • elements can be empty • can have text • can have other elements • avoid use of ANY • ex: <!ELEMENT student (id,name,grade)>student must have id, name and grade CS 371 Web Application Programming

13. DTD Construction Recurrence • comma means strict order • | (pipe) is like or • + is one or more, * is zero or more • ? means that the element is optional • use parens () for grouping CS 371 Web Application Programming

14. DTD Construction Examples • <!ELEMENT student EMPTY><student/> in the xml file • <!ELEMENT homeTownDesc (#PCDATA)>contents can include any parsed data • <!ELEMENT student (name, id, major, minor*)>must have name, id, major and any # of minors • <!ELEMENT student (name,(hobbies|sports)*, age)>name, any number of hobbies or sports and age • <!ELEMENT cust (#PCDATA|(name, addr) )>contains parsed data or name and address CS 371 Web Application Programming

15. DTD Attribute Types • <!ATTLIST element attr type defVal>ex: <!ATTLIST student id CDATA> • type can be • CDATA character data • (en1|en2|…) one from the list • ID a unique identifier • IDREF references an ID • NMTOKEN valid XML name • ENTITY value is an entity (&st;) • a few others… CS 371 Web Application Programming

16. DTD Attribute Types (cont) • <!ATTLIST element attr type defVal> • defVal (default value) can be: • value an actual value • #REQUIRED attribute is required • #IMPLIED not required • #FIXED attribute value is fixed CS 371 Web Application Programming

17. Caveats • hosting an xml file – make sure it has executable permissions CS 371 Web Application Programming

18. XML Parsers • parsers are used to traverse xml tree • tree-based (DOM) • loads entire document into memory • random access, readable and writable • contains objects: doc, node, nodeList, error • stream-based (SAX) • fires events when encountering new entity • ex: <author> fires startElement(“author”,attr) • DOM and SAX parsers in .net, java, etc. CS 371 Web Application Programming

19. xml parsers • javaScript • already familiar with dom parser (getElementsByTagName) • see www.w3schools.com/xml/xml_parser.asp • no sax parser (why not?). (3rd party) • PHP • dom parser – see php.net/manual/en/book.simplexml.php • sax parser – see php.net/manual/en/book.xml.php CS 371 Web Application Programming

20. XSL: Stylesheets for XML • XSL is like a template used with an xml file • like xhtml with special tags for trans. xml • use XPATH for navigation • select (student) // selects all child nodes • select (/student[0]) // first student from root • elements: • template element defines scope of xml<xsl:template match=“/”> • <xsl:for-each select=“students/student”> • <xsl:value-of select=“name”/> CS 371 Web Application Programming

21. JSON • basic syntax • {“var1”:val,”var2”:val…} • just like array initialization in javascript (hmm) • in php use json_encode($object) to create a JSON string • in javascript:var myObject = JSON.parse(text, reviver); where reviver is opt function called for every key and value CS 371 Web Application Programming