CS 174: Web Programming April 16 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak

Computer Science Dept. Spring 2015: April 16 CS 174: Web Programming © R. Mak Assignment #6  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, April 24. 2

Computer Science Dept. Spring 2015: April 16 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: April 16 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 rules are “well formed”

Computer Science Dept. Spring 2015: April 16 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 empty element has no content and no child elements. An empty element can be “self closed”. Macbeth William Shakespeare

Computer Science Dept. Spring 2015: April 16 CS 174: Web Programming © R. Mak 6 XML Components, cont’d  An XML element may have attributes Attribute values must be quoted. Attribute names must be unique within an element. Macbeth William Shakespeare

Computer Science Dept. Spring 2015: April 16 CS 174: Web Programming © R. Mak 7 XML Components, cont’d  Comments:  Begin every XML document with the processing instruction:

Computer Science Dept. Spring 2015: April 16 CS 174: Web Programming © R. Mak 8 XML Components, cont’d  Every XML document must have a single root element:

Computer Science Dept. Spring 2015: April 16 CS 174: Web Programming © R. Mak 9 Most 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: April 16 CS 174: Web Programming © R. Mak 10 Most 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: April 16 CS 174: Web Programming © R. Mak 11 Most Common XML Tools, cont’d  XML Schema XML Schema Definition (XSD). An alternate 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

Computer Science Dept. Spring 2015: April 16 CS 174: Web Programming © R. Mak 12 Most Common XML Tools, cont’d  XML parsers Parse an XML document to obtain its information.  Object-XML mapping Perform object bindings.  Xquery A query language for data stored as XML.  Web services A way to transport XML data between applications.

Computer Science Dept. Spring 2015: April 16 CS 174: Web Programming © R. Mak 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. 13

Computer Science Dept. Spring 2015: April 16 CS 174: Web Programming © R. Mak 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. 14

Computer Science Dept. Spring 2015: April 16 CS 174: Web Programming © R. Mak Example XML Data: Courses 15 CS 149 Operating Systems Fundamentals: Contiguous and non-contiguous memory management; processor scheduling and interrupts; concurrent, mutually exclusive, synchronized and deadlocked processes; files. Substantial programming project required. CS 146 or SE 146 (with a grade of "C-" or better). courses.xml

Computer Science Dept. Spring 2015: April 16 CS 174: Web Programming © R. Mak Example XML Data: Courses, cont’d 16 CS 153 Compiler Design 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. CS 47 or CMPE 102, CS 146, and CS 154 (with a grade of "C-" or better in each) or instructor consent. courses.xml

Computer Science Dept. Spring 2015: April 16 CS 174: Web Programming © R. Mak Example XML Data: Courses, cont’d 17 CS 174 Web Programming Development and deployment of multi-tier web-based applications. Introduction to HTML, XML, enterprise design patterns, web services and database access. CS 46B (with a grade of "C-" or better). courses.xml

Computer Science Dept. Spring 2015: April 16 CS 174: Web Programming © R. Mak Example XML Data: Courses, cont’d 18 CS 235 User Interface Design 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. User requirements and use cases UI and UX design patterns Usability testing CS 46B (with a grade of "C-" or better). courses.xml

Computer Science Dept. Spring 2015: April 16 CS 174: Web Programming © R. Mak Expat Parsing for Structure 19 $(init); function init() { $("#output").load("structure.php"); } Structure Structure structure.html

Computer Science Dept. Spring 2015: April 16 CS 174: Web Programming © R. Mak Expat Parsing for Structure, cont’d 20 $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: April 16 CS 174: Web Programming © R. Mak Expat Parsing for Structure, cont’d 21 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: April 16 CS 174: Web Programming © R. Mak Expat Parsing for Structure, cont’d 22 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: April 16 CS 174: Web Programming © R. Mak Expat Parsing: XML to HTML 23 $(init); function init() { $("#output").load("courses1.php"); } Expat Parser Courses by Expat Parser courses1.html

Computer Science Dept. Spring 2015: April 16 CS 174: Web Programming © R. Mak Expat Parsing: XML to HTML, cont’d 24 function openElement($p, $element, $attributes) { switch ($element) { case "COURSE": { echo " "; break; } case "TITLE": { echo " "; break; } case "DESCRIPTION": { echo " "; break; } courses1.php

Computer Science Dept. Spring 2015: April 16 CS 174: Web Programming © R. Mak Expat Parsing: XML to HTML, cont’d 25 case "PREQUISITES": { echo " Prerequisites "; break; } case "TOPICS": { echo " "; break; } case "TOPIC": { echo " "; break; } courses1.php

Computer Science Dept. Spring 2015: April 16 CS 174: Web Programming © R. Mak Expat Parsing: XML to HTML, cont’d 26 function closeElement($p, $element) { switch ($element) { case "COURSE": { echo " "; break; } case "TITLE": { echo " "; break; } case "DESCRIPTION": { echo " "; break; } courses1.php

Computer Science Dept. Spring 2015: April 16 CS 174: Web Programming © R. Mak Expat Parsing: XML to HTML, cont’d 27 case "PREQUISITES": { echo " "; break; } case "TOPICS": { echo " "; break; } case "TOPIC": { echo " "; break; } courses1.php

Computer Science Dept. Spring 2015: April 16 CS 174: Web Programming © R. Mak Expat Parsing: XML to HTML, cont’d 28 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: April 16 CS 174: Web Programming © R. Mak Expat Parsing: XML to HTML, cont’d 29 $file = "courses.xml"; $fp "r") or die(" Could not open a file called '$file'.". " "); while ($data = fread($fp, 4096)) { xml_parse($parser, $data, feof($fp)); } xml_parser_free($parser); ?> courses1.php Demo

Computer Science Dept. Spring 2015: April 16 CS 174: Web Programming © R. Mak 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. 30

Computer Science Dept. Spring 2015: April 16 CS 174: Web Programming © R. Mak “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. 31

Computer Science Dept. Spring 2015: April 16 CS 174: Web Programming © R. Mak “Simple”: A DOM-Based Parser, cont’d 32 <?php $xml = simplexml_load_file("courses.xml"); foreach ($xml->course as $course) { echo " $course->title "; echo " $course->description "; if (isset($course->topics)) { echo " "; $topics = $course->topics; foreach ($topics->topic as $topic) { echo " $topic "; } echo " "; } echo " Prerequisites $course- >prequisites "; echo " "; } ?> courses2.php Demo

Computer Science Dept. Spring 2015: April 16 CS 174: Web Programming © R. Mak “Simple” Advantages and Disadvantages  Advantages More straightforward, structure-aware code. The parser can be small.  Disadvantages Must understand the structure of the XML data in order to walk the DOM tree properly. Building the DOM tree in memory limits the size of the XML data that can be parsed. 33