1. XML Extensible Markup Language

2. 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

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

4. 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…?”)

5. XML Syntaxes...

6. XML Syntaxes.........

7. Example How to represent student’s table data below using JSON? Student basic element structure (“Brendan Eich”): Brendan Eich AC123 50 25 NameMatric No.CourseworkFinal Exam Brendan EichAC1235025 Rasmus LerdofAC4565530

8. 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 AC123 50 25

9. 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 AC123 50 25 Rasmus Lerdof AC456 55 30

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

11. 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

12. 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]

13. 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');

14. 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(' ');...

15. 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

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

17. 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("http://.../createXML.php"); // 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); }...

18. 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; }