Content adaption. Johan Montelius

Transcription

1 Content adaption Johan Montelius Introduction In this laboration you will do some server side scripting to identify a terminal and to adapt content to its characteristcs. We will use the follwong technology: PHP for server side scripting, XML for representing content XSL for tranforming content to presentation UAprof for extracting information about the terminal Getting started Since we shall explore some server side scripting you need a web server to upload your documents to. If you access your documents directly over the file system the scripts will not be executed. I will assume that you use the or web server and that the choice of scripting language is PHP. If you re using another server you need to check which scripting languages that are supported and choose one of them. The examples in this tutorial will be different for different languages but the idea is the same. 1 Your first script PHP scripts are written inline in any document that the server is configures to scan for scripts. Documents with a.html or.php extension are scanned per default but.wml documents are normally not scanned. The reason is that the sequence <?... is used to identify the beginning of a script and this is of course in conflict with the XML declaration in a WML document. To work with PHP and WML we need to do a little trick. We use the.php extension but give directives to the web server to present the document as a WML document. Write the following code in a filetest.php and upload it to the server. <script language="php"> header( Content-type: text/vnd.wap.wml ); echo <?xml version="1.0"?> 1

2 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" " ; <wml> <card title= PHP Test > <p>a small test.</p> </wml> The PHP script is enclosed by the <script language= php > and tags. The first line of the script is a directive to the web server to serve the document as a WML document so a browser will accept it and handle it properly even though it has the.php extension. The second statement will output the XML header. We need to produce this in the script since we could not write it directly. Notice that the final document is all text in the source document apart from the script sections but including anything the scripts output using echo or print statements. Access the file test.php from a phone or WML browser and make sure that no traces of the PHP script remains. 2 Knock, knock. - Who is there The PHP script engine running on the server and has direct access to the HTTP get (or POST) request. The information in the request headers is made available to the scripts in the form of entries in a key-word indexed array. One way to find out what information we can work with is to write a script that displays the content of the array. Try the following script in a document called http.php. Don t forget the PHP intro that will generate the XML header. <wml> <card id="home" title="http info"> <p>this is an example of HTTP variables that you can access using PHP.</p> <p> <a href="#server">server</a> <br/> </p> <card id="server" title="http info"> <p><b>server</b></p> <script language="php"> reset($_server); 2

3 while (list($key, $val) = each($_server) ) { echo "<p>key: ".$key. " <br/>"; echo " Val: <![CDATA[".$val. " ]]></p>"; </wml> If you access the document with a browser (try several) you will find that they produce quite different information. Some of the information pertains to the web server but some depend on the browser. Pay especially attention to the HTTP ACCEPT and HTTP USER AGENT keys. Why did I use the construct with <![CDATA[...]]>, why not simply echo the $val value? If we access the HTTP USER AGENT directly we can write the following page (I know, I m getting sloppy). <wml> <card id="home" title="i Spy"> <p>hello, I see that you re using a <?php echo $_SERVER[ HTTP_USER_AGENT ];?>!</p> </wml> As you know it is very tricky to use the user-agent string to adapt the content so let s move on to the accept header. 3 WML/HTML Let s create a site that returns WML or HTML documents depending on the capabilities of the client browser. The accept header is however not as simple to parse as might seam at first sight. Notice that you (probably) have some q=0.9 or similar directives in the sequence. These parameters are quality factors and specify if a media type is more (1.0) or less (0.0) preferred. If nothing is mentioned the quality factor by default 1.0. Take a look in RFC-2616 for a complete description of the accept header. Let s make a simple page that returns a WML page if WML is an accepted media type and a HTML page otherwise. We use the library function strpos() to detect if the accept header contains the string text/vnd.wap.wml and then produce two different versions of the page. Not that since 0 could also be interpreted as false we need to be very careful when we check the result of the strpos() call; === is equal without type conversion. 3

4 <script language= php > $accept = $_SERVER[ HTTP_ACCEPT ]; /* $pos will be either false or the position of the string */ $pos = strpos($accept, text/vnd.wap.wml ); /* $wml will be true if the string was found */ $wml = ($pos === 0 $pos > 0 ); if( $wml ) { header( Content-type: text/vnd.wap.wml ); echo <?xml version="1.0"?> ; echo <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" " ; echo <wml> <card title="dynamic"> <p>ahh, a WML surfer!</p> </wml> ; else { header( Content-type: text/html ); echo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ; echo <html> <head> <title>dynamic</title> </head> <body> <p>ahh, an HTML surfer!</p> </nody> </html> ; We could also look for support for XHTML and look for quality factors and serve the content that is most wanted. Since some browses (WAP 2.0) can handle both XHTML and WML we would have a choice. We could also direct the client to the right document using a redirect directive. This would however no be the best solution since this would require a mobile client to perform a second HTTP get request. One alternative would then be to serve a WML page with wml-links or a XHTML page with html-links. 4

5 4 A bit of XML parsing In the quest to separate content from presentation we will do a bit of XML hacking. Let s assume that we have a file with the latest news in the following format: <?xml version="1.0"?> <news> <story id="n1"> <date>2004/08/20</date> <title>this is news</title> <short>this is a short description of the news. We will keep int short in order to deliver it to smaller devices. </short> <long> <pre>a short intro before the whole text</pre> <full>this is the full story. It could be long and include all the details that could not fit into the short description. I don t want to write it all now.</full> </long> </story> <story id="n2"> <date>2004/08/21</date> <title>even more news</title> <short>the short description of the news is now shorter.</short> <long> <pre>a small intro</pre> <full>and the the full story. It could be long and include all the details that could not fit into the short description. </full> </long> </story> </news> The quest is now to serve this content to smaller devices using WML and larger devices using XHTML. We need to do the same trick as before to discover the capabilities of the device but we also need to transform the above news descriptions into WML and XHTML. Let s first create a page, news-wml.php that delivers the WML version. To help us in this process we use a XML parser accessible from PHP. The parser is a generic parser that runs through a XML document and by default does nothing. We need to create a element handler and a character handler to produce anything. The handlers are called every time the parser enter or leaves an element or when a character data section is encountered. 5

6 Look at the function startelement below, it is called when we enter an element. If the name of the element is SHORT or TITLE we should do something. If we enter the short element we set the global variable $chardata to true and write a <p> tag to the output stream. The $chardata variable will be a signal to the character data function to output the character data field. <script language="php"> header( Content-type: text/vnd.wap.wml ); echo <?xml version="1.0"?> ; echo <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" " ; <wml> <card> <script language="php"> $chardata = FALSE; function startelement($parser, $name, $attrs) { if( strcmp($name,"short") == 0 ) { global $chardata; $chardata = TRUE; echo "<p>"; elseif (strcmp($name,"title") == 0 ) { global $chardata; $chardata = TRUE; echo "<p>"; function endelement($parser, $name) { if( strcmp($name,"short") == 0 ) { global $chardata; $chardata = FALSE; echo "</p>"; elseif (strcmp($name,"title") == 0 ) { global $chardata; $chardata = FALSE; echo "</p><br/>"; 6

7 function characterdata($parser, $data) { global $chardata; if($chardata) { echo $data; /* create the parser */ $xml_parser = xml_parser_create(); /* we want all our tags to be upper case */ xml_parser_set_option($xml_parser, XML_OPTION_CASE_FOLDING, true); /* now we add an element handler */ xml_set_element_handler($xml_parser, "startelement", "endelement"); /* and a character handler */ xml_set_character_data_handler($xml_parser, "characterdata"); /* access the name of the news file */ $file = "news.xml"; /* open the file */ if (!($fp = fopen($file, "r"))) { die("could not open XML input"); /* start reading and feeding the parser */ 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); </wml> Go through the setting up of the parser and try to output WML content in another way, maybe including the date. Then create a file news-html.php that produces the XHTML version. 7

8 5 XSL Transformations The above transformations can be automated by using XSL transformation. You need a webserver with PHP and XSLT support. If you re going to work on another web server than web.it.kth.se you must make sure that the Sablotron package is loaded. You can always check wich packages that are supported by writing a smal php-page with the call phpinfo(). It is also very usefull to havexsltproc installed on your local machine to run XSL transformations locally. You can find documentation on xsltproc on you can install it under Cygwin if you re using Windows. We start by using the news data file, news.xml. Now we create a XSL document with some directives on how to transform the news. We first creat a file, news-wml.xsl that will output the news in WML-format. <?xml version="1.0" encoding="iso "?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:output method="html" encoding="iso " doctype-public="-//wapforum//dtd WML 1.1//EN" doctype-system=" <xsl:template match="/"> <wml> <card> <p> <table columns="1"> <xsl:for-each select="news/story"> <tr> <td> <a> <xsl:attribute name="href"> #<xsl:value-of select="@id"/> </xsl:attribute> <xsl:value-of select="title"/> </a> </td> </tr> </xsl:for-each> </table> </p> 8

9 <xsl:for-each select="news/story"> <card> <xsl:attribute name="id"> <xsl:value-of </xsl:attribute> <p><xsl:value-of select="title"/><br/> <xsl:value-of select="short"/> </p> </xsl:for-each> </wml> </xsl:template> </xsl:stylesheet> Now this is of course a lot of XSL in one go but if you go through the code you will get the main idea of how it works. The next thing we need is a script file that calls the xslt process and apply the xsl transformation on the news.xml file. <script language="php"> $file = "news.xml"; $xsl = "news-wml.xsl"; $xh = xslt_create(); $result = xslt_process($xh, $file, $xsl); header( Content-type: text/vnd.wap.wml ); if ($result) { print $result; else { print "Error"; xslt_free($xh); Now write a news-html.xsl file that transforms the news into XHTML. You also need a news-xsl.-html.php file but as you can see this is a trivial modification. Using the two XSL transformations and the examples above where we looked at the accept headers you can easily write a news-xsl.php file that calls the right xsl file depending on the accept header. 9

10 6 UAProf The most interesting test is of course if we can take the UAprof from the request header and transform it into a XSL file that can be used to transform our news file. We will only do as simple transformation to see that we can actually retrieve the UAProf and parse it. It becomes quite comlicated if we want to do more advanced transformations. We first need a new directory called cache that should be writeable (and insert) by the webserver. YOu need to set the AFS rights to fix this. We will store uaprofs and also device XSl files in this directory. We then need a file uaprox.xsl that will take a UAprof file and turn it into a WML file. We will onlt produce WML files given the news.xml files that we have but we will augmnent it with a greeting thatis unique for each terminal. You will find this file on the course web site. Next we need a uaprof.php file that reads the UAProf (if available), caches it and process it using uaprof.xsl. The result is saved as model.xsl (where model is the name of the terminal, in the cache. This XSL file is then used to process the news.xml file. Tricky, yes ideed. Set it up and test it with a phone, then try other models and see how you start to collect UAprof data. For a more advanced exercise you can try to extract information about screen size and serve each device a banner that fits the screen. 10