Help:COAP-3180/week5: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(22 intermediate revisions by the same user not shown)
Line 1: Line 1:
== Week 5 - [[Help:COAP-3180 | COAP 3180]] ==
== Week 5 - [[Help:COAP-3180 | COAP 3180]] ==
'''ATTENTION''': Monday week 6 class is cancelled. To catch up, we will add 20 minutes to each class.


=== Topics Covered ===
=== Topics Covered ===
Line 8: Line 10:
; Termproject
; Termproject
* Each student should now have a "must-have" and "nice-to-have" list of features
* Each student should now have a "must-have" and "nice-to-have" list of features
* Demonstration of the Wordpress extension "Formidable"


; Crashcourse on XML
; Crashcourse on XML
Line 18: Line 19:
=== Classroom activities ===
=== Classroom activities ===


'''(1) Wordpress'''
==== Monday ====
 
''' (1) Term project'''
 
* Must have and nice to have features
* Remark: There must an embedded "database", i.e. a data-collection / presentation module
 
'''(2) Wordpress'''
 
* Fire up MoWes and enter wordpress as admin
* Fire up MoWes and enter wordpress as admin
* Install "Formidable" if not already done so
* Install "Formidable" if not already done so
** Best method is to click on ''Plugins'' in the Dashboard
** Best method is to click on ''Plugins'' in the Dashboard
** Else, use the [[http://wordpress.org/extend/plugins/formidable/installation/ "manual" method]] described by its developer.
** Else, use the [http://wordpress.org/extend/plugins/formidable/installation/ "manual" method] described by its developer.


'''(3) Produce XML output from an SQL query with php
'''(3) Produce XML output from an SQL query with php '''
* copy this code to a mowes/web/ directoty
 
* call it for example: mysql-to-xml.php
* copy code below to a mowes/www/ directoty
* call the file for example: mysql-to-xml.php
* configure and test
* configure and test
* Alternatively, get it from: http://tecfa.unige.ch/guides/xml/examples/mysql-php-xml/mysql-to-xml-raw.php.txt (and rename the file to *.php)


<source lang="php">
<source lang="php">
<?php
<?php
/* Made by Daniel K. Schneider, TECFA Jan 2010. This is freeware
  Will connect to a MySQL database, execute an SQL statement and
  then return the result as valid XML.
*/
error_reporting(E_ALL);
error_reporting(E_ALL);


// ---------------------------  Configuration section
// ---------------------------  Configuration section


// Fill in according to your db settings
// Fill in according to your db settings (example is for a local and locked "play" WAMP server)
// Make sure to keep the ; and the ""
// Make sure to keep the ; and the ""
$host      = "localhost";
$host      = "localhost";
Line 41: Line 57:
$pass      = "";
$pass      = "";
$database  = "exam";
$database  = "exam";
// replace by a real *.xsl file, e.g.
// $xslt_file = "exam.xsl";
$xslt_file  = FALSE; 


// Replace by a query that matches your database
// Replace by a query that matches your database
$SQL_query = "SELECT * FROM question,response_item WHERE question.id = response_item.id_question";
$SQL_query = "SELECT * FROM question,response_item WHERE question.id = response_item.id_question";
// Optional: add the name of XSLT file.
$xslt_file = "";
//$xslt_file = "mysql-result.xsl";


// -------------------------- no changes needed below
// -------------------------- no changes needed below


$DB_link = mysql_connect($host, $user, $pass) or die("Could not connect to host.");
$DB_link = mysql_connect($host, $user, $pass)  
mysql_select_db($database, $DB_link) or die ("Could not find or access the database.");
          or die("Could not connect to host.");
$result = mysql_query ($SQL_query, $DB_link) or die ("Data not found. Your SQL query didn't work... ");
mysql_select_db($database, $DB_link)  
          or die ("Could not find or access the database.");
$result = mysql_query ($SQL_query, $DB_link)  
          or die ("Data not found. Your SQL query didn't work... ");


if ($xslt_file) {
// we produce XML
  header("Content-type: text/xml");
header("Content-type: text/xml");
  $XML = "<?xml version=\"1.0\"?>\n";
$XML = "<?xml version=\"1.0\"?>\n";
  $XML .= "<?xml-stylesheet href=\"$xslt_file\" type=\"text/xsl\" ?>";
if ($xslt_file) $XML .= "<?xml-stylesheet href=\"$xslt_file\" type=\"text/xsl\" ?>\n";
  $XML .= "<result>\n";
}
else {
  $XML = "Don't forget to create an XSLT file .... <p>";
  $XML .= "<pre>\n";
  $XML .= "&lt;result&gt;";
}


// root node
$XML .= "<result>\n";
// rows
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {     
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {     
   $XML .= "\t<row>\n";
   $XML .= "\t<row>\n";  
   $i = 0;
   $i = 0;
  // cells
   foreach ($row as $cell) {
   foreach ($row as $cell) {
     // Escaping illegal characters
     // Escaping illegal characters - not tested actually ;)
     $cell = str_replace("&", "&amp;", $cell);
     $cell = str_replace("&", "&amp;", $cell);
     $cell = str_replace("<", "&lt;", $cell);
     $cell = str_replace("<", "&lt;", $cell);
Line 77: Line 93:
     $cell = str_replace("\"", "&quot;", $cell);
     $cell = str_replace("\"", "&quot;", $cell);
     $col_name = mysql_field_name($result,$i);
     $col_name = mysql_field_name($result,$i);
     if ($xslt_file)
     // creates the "<tag>contents</tag>" representing the column
      $XML .= "\t\t<$col_name>" . $cell . "</$col_name>\n";
     $XML .= "\t\t<" . $col_name . ">" .  
     else
            $cell . "</" . $col_name . ">\n";
      $XML .= "\t\t&lt;$col_name&gt;" . $cell . "&lt;/$col_name&gt;\n";
     $i++;
     $i++;
   }
   }
   $XML .= "\t</row>\n";
   $XML .= "\t</row>\n";  
  }
  }
$XML .= "</result>\n";


// output the whole XML string
echo $XML;
echo $XML;
if (!$xslt_file)  {
?>  
  echo "&lt;/result&gt;";
  echo "</pre>";
}
else
  echo "</result>";
   
?>
</source>
</source>


'''(2) Edit an XML file''' (Wednesday)
==== Wednesday ====
 
'''(1) Term project '''
* Short demo of the Wordpress extension "Formidable"
 
'''(2) Editing an XML file''' (recall)
 
* Use an XML editor since it can test the well-formedness of an XML file. You may use a normal programming editor for fixing small contents in a raw XML file (that is just well-formed but not valid) ... but make sure that tags remain matched.
* For XML that can be validated, always use an XML editor and '''validate'''.
 
'''(5) Create/adapt an XSLT file'''
* Simple XSLT (adaptation of some code)
* Filtering data with XSLT, e.g. creating rules that will do nothing
* Copy/paste the following code to a file called ''mysql-result.xsl''. This file must sit next to the PHP file above.
* Alternatively, get this from http://tecfa.unige.ch/guides/xml/examples/mysql-php-xml/mysql-result-template.xsl
<source lang="xml">
<?xml version="1.0"?>               
<xsl:stylesheet version="1.0"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html"
      doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"/>
 
  <xsl:template match="result">
    <html> <head> <title> Query results </title> </head>
      <body bgcolor="#ffffff">
 
<h1>Query results</h1>
 
<table border="2" cellspacing="1" cellpadding="6">
          <!-- Here you might insert a table heading row
  <tr> <th>col1</th> <th>col2</th> <th>col 3</th> <th></th> </tr>
  -->


'''(3) Modify an XSLT file'''
  <xsl:apply-templates select="row"/>
* Filter data with XSLT
</table>
<hr />
 
      </body>
    </html>
  </xsl:template>
 
  <xsl:template match="row">
    <tr> <xsl:apply-templates/> </tr>
  </xsl:template>
 
  <!-- copy/paste the rule below and replace by custom rules for various columns of your output -->
  <xsl:template match="*">
    <td> <xsl:apply-templates/> </td>
  </xsl:template>
 
  <xsl:template match="col2">
  <!-- no real output --> 
  </xsl:template>
 
</xsl:stylesheet>
 
</source>


=== Homework 5 ===
=== Homework 5 ===


Details to be announced on Wednesday ...
; Objectives
* Pull out data in XML format from a database
* Pull out data in XML format from a database. If you turned in homework 3, use its tables. Else you may use any other table you can find (but you need to import it to a database).
* Produce an XSLT file that will display the data (any maybe do some filtering)
* Produce a XSLT file that will display the data in a nice way in HTML or XHTML. You also may do some filtering, i.e. only parts of the data. Finally, you also will have to add some extra information in the XSLT (at least a meaningful title)
* Associate the XSLT file either server-side or client side.
* Associate the XSLT file with the XML produced by the PHP script given to you by the instructor.
The instructor will provide a php file that does the extraction.
 
; Steps
* Read [[PHP - MySQL - XML tutorial - basics]]
* Copy file http://tecfa.unige.ch/guides/xml/examples/mysql-php-xml/mysql-to-xml-raw.php.txt to a web directory of your WAMP server (or a PHP/MySQL provider). Alternatively you may copy/paste it from here. Then call it something like ''mysql-to-xml.php'' (I.e. file must end with .php!!)
* Change the values in the configuration section to make it work with one of your databases. You do not need to change anything else in this file.
* Test this PHP script. In your browser, you should see some raw XML.
* Then save the result as test.xml (for testing purposes). In your browser, open the mowes/xxx directory, then right-click on ''mysql-to-xml.php'' and "save target as" ''test.xml''.
* Create an XSLT file that will translate test.xml to (X)HTML.  
Test it with an XML editor and the test.xml file until you are pleased with the result. Remark: The XML file will be well-formed in principle, but you are likely to make XSLT syntax mistakes. '''Validate''' the XSLT file with the Exchanger light editor.
* Once you are done, copy this XSLT file to the directory of the PHP file.
* If necessary, edit the configuration of the PHP file and specify the name of the XSLT file.  


==== Submission Dates ====
If the above is not clear, look at the files in this directory (it includes the test files)
* http://tecfa.unige.ch/guides/xml/examples/mysql-php-xml/


* This homework is due at start of wed week 6
; XSLT - If things go wrong
* Students must provide the URL (where the instructor can see the widget) in the world classroom
 
Style-sheet error !
* Validate the style-sheet in your XML editor
* If it provides XSLT support, it will help you find the error spots
XHTML doesn’t display in Firefox !
* Firefox wants a namespace declaration in the XHMTL produced, do it (see above).
HTML doesn’t seem to be right !
* Transform the XML document within your XML editor and look at the HTML
In "Exchanger Lite", use Transform in the menu bar with the following parameters:
* Transform->Execute Advanced XSLT
* Input = current document
* XSLT = Use Processing instructions
* Output = to new file or to new document
* You also may validate the output HTML with an HTML validator !
There is various unformatted text in the output
* You forgot to write a rule for some XML element
HTML still doesn’t seem to be right !!
* Use a XSLT debugger/tracer to understand how your XSLT executes
 
; PHP - If something goes wrong
 
Blank page
 
* If you get a blank page, it is very likely that you have a syntax mistake. Mowes is configured not to display PHP errors. You must have a look at the Apache log files that you can find here:
...  \mowes\apache2\logs\error.log
 
 
==== Submission Procedure and dates ====
 
You must upload the following files to the worldclassroom:
* The *.xsl file
* The *.sql file
* The *.php file
 
* This homework is due at start of Wed week 6
* Each homework counts 10% in your global evaluation. The four best homeworks will be taken into account.
* Each homework counts 10% in your global evaluation. The four best homeworks will be taken into account.


==== Evaluation ====
==== Evaluation ====


=== Tips for the homework===
See the worldclassroom.
 


=== Links and teaching materials ===
=== Links and teaching materials ===


; Software
; Software
* A good XML editor, e.g. XML exchanger light
* A decent enough [[XML editor]], e.g. XML exchanger light
** [[XML_editor#Exchanger_XML_Editor_lite|Instructions for download and installation]]
* Apache/PHP/MySQL


; Online software
; Online software
* none
* (optional) A LAMP service provider


; Teaching materials
; Teaching materials
Line 134: Line 244:
* [[DTD tutorial]] (understand how to use/read a DTD only)
* [[DTD tutorial]] (understand how to use/read a DTD only)
* [[XSLT Tutorial - Basics]] ('''exam topic, must know''')
* [[XSLT Tutorial - Basics]] ('''exam topic, must know''')
* [[XPath tutorial - basics]] ('''exam topic, must know''')
* [[XPath tutorial - basics]] (''exam topic, must know partly'')
* [[XQuery tutorial - basics]] (week 6 preview, '''exam topic, must know''')
* [[XQuery tutorial - basics]] (week 6 preview, '''exam topic, must know''')
* [[PHP-MySQL tutorial -basics]] (in particular the section about XML output)
* [[PHP-MySQL tutorial -basics]] (good to know, but will not be tested)
* [[PHP - MySQL - XML tutorial - basics]] ('''must be able to use this code, i.e. configure''')


; Teaching materials (older slides)
; Teaching materials (older slides)
* http://tecfa.unige.ch/guides/te/files/xml-intro-edit.pdf
* http://tecfa.unige.ch/guides/te/files/xml-intro-edit.pdf
* http://tecfa.unige.ch/guides/te/files/xml-ns.pdf (optional)
* http://tecfa.unige.ch/guides/te/files/xml-ns.pdf (optional)
* http://tecfa.unige.ch/guides/te/files/xslt-basics.pdf  
* http://tecfa.unige.ch/guides/te/files/xml-xslt.pdf ('''exam topic''')


; Optional reading
; Optional reading

Latest revision as of 00:38, 22 February 2010

Week 5 - COAP 3180

ATTENTION: Monday week 6 class is cancelled. To catch up, we will add 20 minutes to each class.

Topics Covered

Homework and mid-term exam
  • Quick feedback
Termproject
  • Each student should now have a "must-have" and "nice-to-have" list of features
Crashcourse on XML
  • XML - The formalism
  • XML - where is it used
  • XSLT - XML transformations
  • XPath - identify elements in a tree (used by XPath and XQuery)

Classroom activities

Monday

(1) Term project

  • Must have and nice to have features
  • Remark: There must an embedded "database", i.e. a data-collection / presentation module

(2) Wordpress

  • Fire up MoWes and enter wordpress as admin
  • Install "Formidable" if not already done so
    • Best method is to click on Plugins in the Dashboard
    • Else, use the "manual" method described by its developer.

(3) Produce XML output from an SQL query with php

<?php

/* Made by Daniel K. Schneider, TECFA Jan 2010. This is freeware
   Will connect to a MySQL database, execute an SQL statement and
   then return the result as valid XML. 
 */
error_reporting(E_ALL);

// ---------------------------  Configuration section

// Fill in according to your db settings (example is for a local and locked "play" WAMP server)
// Make sure to keep the ; and the ""
$host       = "localhost";
$user       = "root";
$pass       = "";
$database   = "exam";

// Replace by a query that matches your database
$SQL_query = "SELECT * FROM question,response_item WHERE question.id = response_item.id_question";

// Optional: add the name of XSLT file.
$xslt_file = ""; 
//$xslt_file = "mysql-result.xsl"; 

// -------------------------- no changes needed below

$DB_link = mysql_connect($host, $user, $pass) 
           or die("Could not connect to host.");
mysql_select_db($database, $DB_link) 
           or die ("Could not find or access the database.");
$result = mysql_query ($SQL_query, $DB_link) 
           or die ("Data not found. Your SQL query didn't work... ");

// we produce XML
header("Content-type: text/xml");
$XML = "<?xml version=\"1.0\"?>\n";
if ($xslt_file) $XML .= "<?xml-stylesheet href=\"$xslt_file\" type=\"text/xsl\" ?>\n";

// root node
$XML .= "<result>\n";
// rows
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {    
  $XML .= "\t<row>\n"; 
  $i = 0;
  // cells
  foreach ($row as $cell) {
    // Escaping illegal characters - not tested actually ;)
    $cell = str_replace("&", "&amp;", $cell);
    $cell = str_replace("<", "&lt;", $cell);
    $cell = str_replace(">", "&gt;", $cell);
    $cell = str_replace("\"", "&quot;", $cell);
    $col_name = mysql_field_name($result,$i);
    // creates the "<tag>contents</tag>" representing the column
    $XML .= "\t\t<" . $col_name . ">" . 
            $cell . "</" . $col_name . ">\n";
    $i++;
  }
  $XML .= "\t</row>\n"; 
 }
$XML .= "</result>\n";

// output the whole XML string
echo $XML;
?>

Wednesday

(1) Term project

  • Short demo of the Wordpress extension "Formidable"

(2) Editing an XML file (recall)

  • Use an XML editor since it can test the well-formedness of an XML file. You may use a normal programming editor for fixing small contents in a raw XML file (that is just well-formed but not valid) ... but make sure that tags remain matched.
  • For XML that can be validated, always use an XML editor and validate.

(5) Create/adapt an XSLT file

<?xml version="1.0"?>                
<xsl:stylesheet version="1.0"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 
  <xsl:output method="html"
	      doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"/>

  <xsl:template match="result">
    <html> <head> <title> Query results </title> </head>
      <body bgcolor="#ffffff">

	<h1>Query results</h1>

	<table border="2" cellspacing="1" cellpadding="6">
          <!-- Here you might insert a table heading row
	  <tr> <th>col1</th> <th>col2</th> <th>col 3</th> <th></th> </tr>
	   -->

	  <xsl:apply-templates select="row"/>
	</table>
	<hr />

      </body>
    </html>
  </xsl:template>
  
  <xsl:template match="row">
    <tr> <xsl:apply-templates/> </tr>
  </xsl:template>

  <!-- copy/paste the rule below and replace by custom rules for various columns of your output -->
  <xsl:template match="*">
    <td> <xsl:apply-templates/> </td>
  </xsl:template>

  <xsl:template match="col2">
  <!-- no real output -->  
  </xsl:template>

</xsl:stylesheet>

Homework 5

Objectives
  • Pull out data in XML format from a database. If you turned in homework 3, use its tables. Else you may use any other table you can find (but you need to import it to a database).
  • Produce a XSLT file that will display the data in a nice way in HTML or XHTML. You also may do some filtering, i.e. only parts of the data. Finally, you also will have to add some extra information in the XSLT (at least a meaningful title)
  • Associate the XSLT file with the XML produced by the PHP script given to you by the instructor.
Steps
  • Read PHP - MySQL - XML tutorial - basics
  • Copy file http://tecfa.unige.ch/guides/xml/examples/mysql-php-xml/mysql-to-xml-raw.php.txt to a web directory of your WAMP server (or a PHP/MySQL provider). Alternatively you may copy/paste it from here. Then call it something like mysql-to-xml.php (I.e. file must end with .php!!)
  • Change the values in the configuration section to make it work with one of your databases. You do not need to change anything else in this file.
  • Test this PHP script. In your browser, you should see some raw XML.
  • Then save the result as test.xml (for testing purposes). In your browser, open the mowes/xxx directory, then right-click on mysql-to-xml.php and "save target as" test.xml.
  • Create an XSLT file that will translate test.xml to (X)HTML.

Test it with an XML editor and the test.xml file until you are pleased with the result. Remark: The XML file will be well-formed in principle, but you are likely to make XSLT syntax mistakes. Validate the XSLT file with the Exchanger light editor.

  • Once you are done, copy this XSLT file to the directory of the PHP file.
  • If necessary, edit the configuration of the PHP file and specify the name of the XSLT file.

If the above is not clear, look at the files in this directory (it includes the test files)

XSLT - If things go wrong

Style-sheet error !

  • Validate the style-sheet in your XML editor
  • If it provides XSLT support, it will help you find the error spots

XHTML doesn’t display in Firefox !

  • Firefox wants a namespace declaration in the XHMTL produced, do it (see above).

HTML doesn’t seem to be right !

  • Transform the XML document within your XML editor and look at the HTML

In "Exchanger Lite", use Transform in the menu bar with the following parameters:

  • Transform->Execute Advanced XSLT
  • Input = current document
  • XSLT = Use Processing instructions
  • Output = to new file or to new document
  • You also may validate the output HTML with an HTML validator !

There is various unformatted text in the output

  • You forgot to write a rule for some XML element

HTML still doesn’t seem to be right !!

  • Use a XSLT debugger/tracer to understand how your XSLT executes
PHP - If something goes wrong

Blank page

  • If you get a blank page, it is very likely that you have a syntax mistake. Mowes is configured not to display PHP errors. You must have a look at the Apache log files that you can find here:
...  \mowes\apache2\logs\error.log


Submission Procedure and dates

You must upload the following files to the worldclassroom:

  • The *.xsl file
  • The *.sql file
  • The *.php file
  • This homework is due at start of Wed week 6
  • Each homework counts 10% in your global evaluation. The four best homeworks will be taken into account.

Evaluation

See the worldclassroom.

Links and teaching materials

Software
Online software
  • (optional) A LAMP service provider
Teaching materials
Teaching materials (older slides)
Optional reading