CS 174: Web Programming November 4 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak www.cs.sjsu.edu/~mak
Jan 17, 2016
CS 174: Web ProgrammingNovember 4 Class Meeting
Department of Computer ScienceSan Jose State University
Spring 2015Instructor: Ron Mak
www.cs.sjsu.edu/~mak
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
2
Assignment #7
Add AJAX to your web application.
Modify a portion of your web page (or dynamically create a menu or table) without a full page refresh.
Turn in the usual zip file containing source files, database dump, and screen shots.
Due Friday, Nov. 13.
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
3
XML
The Extensible Markup Language (XML) is an industry standard to:
Store information. Describe the structure of that information. Exchange the information among different
applications in a programming language-independent way.
Not all data comes from relational databases!
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
4
XML Components
An XML element has an opening and a closing tag:
The closing tag is mandatory.
An XML element may be nested in another element (child elements):
XML documents that obey all
the syntax rulesare “well formed”.<book> ... </book>
<book> <title> ... </title> <author> ... </author></book>
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
5
XML Components, cont’d
An XML element may have content:
An element can have both content and child elements.
An XML element may have attributes.Attribute values must be quoted:
Attribute names must be unique within an element.
<title>Macbeth</title><author>William Shakespeare</author>
<title language="English"> Macbeth</title><author nationality="British" gender="male"> William Shakespeare</author>
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
6
XML Components, cont’d
An empty element has no content and no child elements.
An empty element can be “self closed”.
Comments:
<ebook></ebook><printed pages="256" />
<!--comment text-->
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
7
XML Components, cont’d
Begin every XML document with the processing instruction:
Every XML document must have a single root element:
<?xml version="1.0"?>
<library> <book> ... </book> <book> ... </book> <journal> ... </journal> ...</library>
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
8
XML Namespaces
Prevent element name clashes. An element name can be in the scope of a
namespace.
A namespace name must be unique.
Use a URI (uniform resource identifier) as the name. Start with your unique domain name.
A URL is a common form of URI. The URL doesn’t have to point to an actual file.
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
9
XML Namespaces, cont’d
Declare a namespace in an element tag.
The scope of the namespace is that element and its children.
Example: A namespace declared in the root element has the entire XML document in its scope.
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
10
XML Namespaces, cont’d
Declare the default namespace. Example:
All elements in its scope are in the default namespace.
Elements not in any namespace scope are “in no namespace”.
<library xmlns="http://www.cs.sjsu.edu/cs157b/library"> ...</library>
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
11
XML Namespaces, cont’d
Declare a non-default namespace with a prefix. Example:
Prefix element names that are in the namespace scope (e.g., au). The element containing the declaration
is itself in the scope. The prefix is considered part of the element name.
<au:author xmlns:au="http://www.cs.sjsu.edu/cs157b/author"> ...</au:author>
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
12
XML Namespaces, cont’d
Nested namespaces:
Why both the book and author namespaces? Prevent the book title and the author title
name clash.
<library xmlns="http://www.cs.sjsu.edu/cs157b/library" xmlns:bk="http://www.cs.sjsu.edu/cs157b/book" xmlns:au="http://www.cs.sjsu.edu/cs157b/author"> <bk:book> <bk:title>Java Programming</bk:title> <au:author> <au:title>Dr.</au:title> ... </au:author> </bk:book></library>
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
13
XML Namespaces, cont’d
Alternate:
<library xmlns="http://www.cs.sjsu.edu/cs157b/library"> <bk:book xmlns:bk="http://www.cs.sjsu.edu/cs157b/book"> <title>Java Programming</title> <au:author xmlns:au="http://www.cs.sjsu.edu/cs157b/author"> <title>Dr.</title> ... </au:author> </bk:book></library>
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
14
Common XML Tools
XPath “Path expressions” to locate a specific node
(element, attribute, or content) or node sets within an XML document.
Functions to compare, count, do arithmetic, extract substrings, etc.
XSLT Extensible Style Language for Transformation. Transform XML from one form to another
(such as to HTML).
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
15
Common XML Tools, cont’d
DTD Document Type Definition. Specify the schema of XML documents.
The DTD is itself not an XML document. Validate an XML document against its schema.
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
16
Common XML Tools, cont’d
XML Schema XML Schema Definition (XSD). An way to specify the schema of XML documents.
An XML Schema is itself an XML document. A valid XML document is an instance of its schema.
XML schema : XML document Java class : Java object
XQuery A query language for data stored as XML.
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
17
Common XML Tools, cont’d
XML parsers Parse an XML document to obtain its information.
Object-XML mapping Perform object bindings.
Web services A way to transport XML data between applications.
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
18
XML Data on the Server
A data source for the web server can be XML.
The server must parse the XML data in order to understand its structure and extract its information.
Example: Parse XML data and convert it to HTML
for download to a web browser.
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
19
Expat: An “Event-Driven” XML Parser
The Expat parser is an XML parser for PHP.
As it parses XML data from start to end, “events” are fired each time it reads
a start element tag an end element tag element contents
Callback functions process each event.
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
20
Example XML Data: Courses
<?xml version="1.0"?><courses> <course> <title>CS 149 Operating Systems</title> <description> Fundamentals: Contiguous and non-contiguous memory management; processor scheduling and interrupts; concurrent, mutually exclusive, synchronized and deadlocked processes; files. Substantial programming project required. </description> <prequisites> CS 146 or SE 146 (with a grade of "C-" or better). </prequisites> </course>
courses.xml
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
21
Example XML Data: Courses, cont’d
<course> <title>CS 153 Compiler Design</title> <description> Theoretical aspects of compiler design, including parsing context free languages, lexical analysis, translation specification and machine-independent code generation. Programming projects to demonstrate design topics. </description> <prequisites> CS 47 or CMPE 102, CS 146, and CS 154 (with a grade of "C-" or better in each) or instructor consent. </prequisites> </course>
courses.xml
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
22
Example XML Data: Courses, cont’d
<course> <title>CS 174 Web Programming</title> <description> Development and deployment of multi-tier web-based applications. Introduction to HTML, XML, enterprise design patterns, web services and database access. </description> <prequisites> CS 46B (with a grade of "C-" or better). </prequisites> </course>
courses.xml
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
23
Example XML Data: Courses, cont’d
<course> <title>CS 235 User Interface Design</title> <description> We will study the principles of designing, developing, and evaluating a compelling and effective user interface (UI) and experience (UX) for desktop, web, and mobile applications. </description> <topics> <topic>User requirements and use cases</topic> <topic>UI and UX design patterns</topic> <topic>Usability testing</topic> </topics> <prequisites> CS 46B (with a grade of "C-" or better). </prequisites> </course></courses>
courses.xml
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
24
Expat Parsing for Structure<html><head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery.js"> </script> <script type="text/javascript"> $(init); function init() { $("#output").load("structure.php"); } </script> <title>Structure</title></head>
<body> <h1>Structure</h1> <pre id='output'></pre></body></html>
structure.html
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
25
Expat Parsing for Structure, cont’d
$file = "courses.xml";$depth = array();
function startElement($parser, $name, $attrs){ global $depth;
if (!isset($depth[$parser])) { $depth[$parser] = 0; }
for ($i = 0; $i < $depth[$parser]; $i++) { echo " "; } echo "$name\n"; $depth[$parser]++;}
structure.php
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
26
Expat Parsing for Structure, cont’d
function endElement($parser, $name){ global $depth; $depth[$parser]--;}
$xml_parser = xml_parser_create();xml_set_element_handler($xml_parser, "startElement", "endElement");
if (!($fp = fopen($file, "r"))) { die("Could not open XML input.");}
structure.php
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
27
Expat Parsing for Structure, cont’d
while ($data = fread($fp, 4096)) { if (!xml_parse($xml_parser, $data, feof($fp))) { die(sprintf("XML error: %s at line %d", xml_error_string(xml_get_error_code($xml_parser)), xml_get_current_line_number($xml_parser))); }}
xml_parser_free($xml_parser);?>
Demo
structure.php
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
28
Expat Parsing: XML to HTML <html><head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery.js"> </script> <script type="text/javascript"> $(init); function init() { $("#output").load("courses1.php"); } </script> <title>Expat Parser</title></head>
<body> <h1>Courses by Expat Parser</h1> <div id='output'></div></body></html>
courses1.html
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
29
Expat Parsing: XML to HTML, cont’d
function openElement($p, $element, $attributes) { switch ($element) { case "COURSE": { echo "<div>"; break; } case "TITLE": { echo "<h2>"; break; } case "DESCRIPTION": { echo "<p>"; break; } courses1.php
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
30
Expat Parsing: XML to HTML, cont’d
case "PREQUISITES": { echo "<dl><dt>Prerequisites</dt><dd>"; break; } case "TOPICS": { echo "<ul>"; break; } case "TOPIC": { echo "<li>"; break; } }} courses1.php
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
31
Expat Parsing: XML to HTML, cont’d
function closeElement($p, $element) { switch ($element) { case "COURSE": { echo "</div><hr />"; break; } case "TITLE": { echo "</h2>"; break; } case "DESCRIPTION": { echo "</p>"; break; } courses1.php
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
32
Expat Parsing: XML to HTML, cont’d
case "PREQUISITES": { echo "</dd><dl>"; break; } case "TOPICS": { echo "</ul>"; break; } case "TOPIC": { echo "</li>"; break; } }}
courses1.php
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
33
Expat Parsing: XML to HTML, cont’d
function characterData($p, $cdata) { echo $cdata;}
$parser = xml_parser_create();xml_set_element_handler($parser, "openElement", "closeElement");xml_set_character_data_handler($parser, "characterData");
courses1.php
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
34
Expat Parsing: XML to HTML, cont’d
$file = "courses.xml";$fp = @fopen($file, "r") or die("<p>Could not open a file called '$file'." . "</p></body></html>");
while ($data = fread($fp, 4096)) { xml_parse($parser, $data, feof($fp));}
xml_parser_free($parser);?>
courses1.php
Demo
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
35
Expat Advantages and Disadvantages
Advantages
Very fast One pass Can handle arbitrarily large XML data.
Disadvantages
Inflexible Must process the stream of “events” as they occur. The parser may become large.
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
36
“Simple”: A DOM-Based Parser
“Simple” is a DOM-based XML parser for PHP. As it parses XML data, it builds a DOM tree. Walk the tree in order to obtain its information.
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
37
“Simple”: A DOM-Based Parser, cont’d<?php$xml = simplexml_load_file("courses.xml");
foreach ($xml->course as $course) { echo "<div><h2>$course->title</h2>"; echo "<p>$course->description</p>";
if (isset($course->topics)) { echo "<ul>"; $topics = $course->topics; foreach ($topics->topic as $topic) {
echo "<li>$topic</li>"; } echo "</ul>"; } echo "<dl><dt>Prerequisites</dt><dd>$course->prequisites</dd></dl>"; echo "</div><hr />";}?>
courses2.php
Demo
Computer Science Dept.Spring 2015: November 4
CS 174: Web Programming© R. Mak
38
“Simple” Advantages and Disadvantages
Advantages
More straightforward, structure-aware code. The parser can be small.
Disadvantages
Must understand the structure of the XML datain order to walk the DOM tree properly.
Building the DOM tree in memory limits the size of the XML data that can be parsed.