XML Extensible Markup Language

Introduction to XML Text based format As JSON it’s mainly intended for data interchange (transport & store) Also widely used for document content and information structure formatting Much like HTML but tags are not predefined and self-descriptive

XML vs HTML XML – data and structure descriptions, storage, and transportation – Not to replace HTML HTML – data view layout and presentation

XML Syntaxes Users can define their own element’s tags Tags are case sensitive Must have single root element Sub elements must be properly nested Element with attribute must has its attribute value quoted (attribute=“value…?”)

XML Syntaxes...

XML Syntaxes

Example How to represent student’s table data below using JSON? Student basic element structure (“Brendan Eich”): Brendan Eich AC NameMatric No.CourseworkFinal Exam Brendan EichAC Rasmus LerdofAC

Example If we make “coursework” and “final exam” as sub elements of parent element let say “marks” and also add the attribute “dev” for student Brendan Eich AC

Example Complete student list in XML format: JSON counterpart: [ { "name":"Brendan Eich", "matric_no":"AC123", "marks": {"cw": 50, "fe": 25 } }, { "name":"Rasmus Lerdof", "matric_no":"AC456", "marks": {"cw": 55, "fe": 30 } } ] Brendan Eich AC Rasmus Lerdof AC

Transforming XML to HTML via XSLT student_list.xml <?xml-stylesheet type="text/xsl" href="student_list.xsl"?> Brendan Eich AC Rasmus Lerdof AC student_list.xsl Browser HTML Output [1] [2] [3]

Transforming XML to HTML via XSLT student_list.xsl Student List Name Matric No. Do notice that student_list.xsl itself is just another type of XML document

Client-Server Implementation (AJAX, PHP, MySQL, XML, JavaScript, & XSLT) The Architecture: Client Server createXML.php MySQL DB Table student_list.html student_list.xsl AJAX (GET) AJAX (text/xml) AJAX (GET)AJAX (text/xml) Transform(); [1] [2] [3] [4] [5] [6]

Client-Server Implementation (MySQL, PHP, XML, JavaScript, & XSLT) MySQL: create table student ( matric_no varchar(15) not null, name varchar(15) not null, cw smallint default 0, fe smallint default 0, primary key (matric_no) ); insert into student values ('AC123', 'Brendan Eich', '50', '25'); insert into student values('AC456', 'Rasmus Lerdof', '55', '30');

Client-Server Implementation (MySQL, PHP, XML, JavaScript, & XSLT) PHP - part 1 (createXML.php): <?php header("Content-type:text/xml"); header("Access-Control-Allow-Origin: *"); // Connect to db and query student table items. $dbconn = mysql_connect("localhost", "login", "password"); mysql_select_db("db_name", $dbconn); $query = mysql_query("select * from student", $dbconn); // Create SimpleXMLElement instance. $xml = new SimpleXMLElement(' ');...

Client-Server Implementation (MySQL, PHP, XML, JavaScript, & XSLT) PHP - part 2 (createXML.php):... while ($row = mysql_fetch_assoc($query)) { $student = $xml->addChild("student"); $student->addChild("name", $row["name"]); $student->addChild("matric_no", $row["matric_no"]); $marks = $student->addChild("marks"); $marks->addChild("cw", $row["cw"]); $marks->addChild("fe", $row["fe"]); } mysql_close($dbconn); echo $xml->asXML(); ?> $xml $student $marks

Client-Server Implementation (MySQL, PHP, XML, JavaScript, & XSLT) HTML - part 1 (student_list.html): $(document).ready(function() { Transform(); });...

Client-Server Implementation (MySQL, PHP, XML, JavaScript, & XSLT) HTML - part 2 (student_list.html):... function Transform() { // Download XML data from the server side. var xml = getXMLData(" // Get XSL template at the client side. var xsl = getXMLData("student_list.xsl"); // Only for Mozilla based browsers. xsltProcessor = new XSLTProcessor(); xsltProcessor.importStylesheet(xsl); var result = xsltProcessor.transformToFragment(xml, document); $("body").append(result); }...

Client-Server Implementation (MySQL, PHP, XML, JavaScript, & XSLT) HTML - part 3 (student_list.html):... function getXMLData(url) { return $.ajax({type:"GET", url:url, async:false}).responseXML; }