Greg's Blog

helping me remember what I figure out

WAP: Step 1

| Comments

WAP/WML -First things first.

Having stumbled across a few articles relating to WAP and WML recently (yes I know I am slightly behind the times) I decided to have a play with WAP devices and WML, i.e. make this web site accessible to WAP devices. So after thinking about what approach to take I decided that the first thing I needed to figure out was how to re-direct a user to the appropriate page based on the browser they use to make sure the information was rendered properly. So I set out writing a browser re-direction script that would accommodate both normal web users (IE and Netscape), Nokia 6210 (since this is the mobile I own) and iTV (with several projects in the pipeline I figured this was as good time as ever to figure that one out too), but that will form part of a segment which you can have a look at here.

The first thing you will need before you an even start building the script would be a set of tools so that you can test your script and pages. Nokia has some good information and emulators for other Nokia models as well, here: http://forum.nokia.com/030/1,32009,,00.html?fsrParam=2%2D0 [incidently if you want to use one of the emulators you will also need to download the Nokia Mobile Internet Kit]. And YoSpace (http://www.yospace.com/cgi-bin/login.pl) has a more all purpose wap emulator covering a variety of WAP enabled devices. Another simple and easy to use emulator can be found on pyweb site (http://www.pyweb.com/tools/) and is called Deck-It. This emulator emulates the Nokia 7110.

Now that you have your tools downloaded and installed, let’s turn to the script. Since i develop mainly in Cold Fusion and PHP I have included both sets of scripts. Essentially what I did was look at strings passed by the browser or emulator. And based on a string evaluation I direct the user to the appropriate set of pages. In the case of WAP you are looking at the cgi variable generated by the web server called HTTP_ACCEPT and it should contain the following information: text/vnd.wap.wml. If a web browser hits the site these are the values contained in the variable:

HTTP_ACCEPT=image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, application/x-gsarcade-launch, */*

After all this info here is the code, PHP first. Include the code below, right at the top of your site’s default document:

<?php
  /*
      Browser detection script
  */
  if(eregi("text/vnd.wap.wml",$HTTP_ACCEPT)) { // wap first
    // Is a wap enabled device
    header("Location: wml/index.php");
  } else if(eregi("Liberate",$HTTP_USER_AGENT)) { // normal browsers next
    // It's the Liebrate emulator
    header("Location: itv/index.php");
  } else if(eregi("Mozilla/",$HTTP_USER_AGENT)) { // normal browsers next
    // It's web browser
    header("Location: html/index.php");
  } else {
    echo("Sonething all together different: ".$HTTP_ACCEPT."<br />".$HTTP_USER_AGENT);
  }
?>

We make use of the eregi() function, which carries out a case insensitive regular expression match on, in this case, $HTTP_ACCEPT looking for the expression text/vnd.wap.wml. If found the user is re-directed using the header() function. For completeness I have included the other browser type re-directions (Liberate and Mozilla) or a dump of the variables to help detect the browser type

And now for Cold Fusion.

<cfif cgi.HTTP_ACCEPT contains "text/vnd.wap.wml">
  <cflocation url="wml/index.cfm">
<cfelseif cgi.HTTP_USER_AGENT contains "Mozilla/">
  <cflocation url="html/index.cfm">
<cfelseif cgi.HTTP_USER_AGENT contains "Liberate">
  <cflocation url="itv/index.cfm">
<cfelse>
  <cfloop collection="#cgi#" item="i">
    <cfoutput>#i# is #cgi[i]# </cfoutput> <br />
  </cfloop>
</cfif>

As with the PHP script I make use of a function to find an expression. Here I made use of contains() inspected both the HTTP_ACCEPT and HTTP_USER_AGENT variables in the cgi scope. if found the browser or device is re-directed to the appropriate folder.

Now for certain devices or emulators (the Nokia one in my case), you need to either specify a file with the .wml extension or specify a content type in the header. NOw if you intend on using dynamic content using the .wml is not ideal as you won’t be able to execute the scripts you write unless you associate that file type with PHP or Cold Fusion instructing the application server to parse it before sending it to the browser (the segment on How to create IIS mappings for .cfm has some hints on how to do that).

Cold Fusion allows you to easily specify a document content type by making use of the <cfcontent> tag as shown below:

<CFCONTENT TYPE="text/vnd.wap.wml">

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN" "http://www.phone.com/dtd/wml11.dtd" >

<wml>

<card id="WML" title="Test WML re-direct">
<p>
Just trying a a server based re-direct. <br />
Cold fusion first.
<cfloop collection="#cgi#" item="i">
    <cfoutput>#i# is #cgi[i]#</cfoutput><br />
</cfloop>
</p>
</card>

</wml>

For PHP I found the following solution at Building WML Applications Using PHP (there’s also heaps more information there):

<?php
// send wml headers
header("Content-type: text/vnd.wap.wml");
echo "<?xml version=\"1.0\"?>";
echo "<!DOCTYPE wml PUBLIC \"-//WAPFORUM//DTD WML 1.1//EN\""
   . " \"http://www.wapforum.org/DTD/wml_1.1.xml\">";
?>

<wml>
<card id="card1" title="Example 1">
  <p>
    <?php
// format and output date
    $the_date = date("M d Y");
    print $the_date;
    print "<br/>Welcome to a PHP-enabled site!";
    ?>
  </p>
</card>
</wml>

And there you are a wap enabled device will now be re-directed to the appropriate folder and presented with a message displaying the current server date and time. In the case of Cold Fusion I simply output all the variables in the cgi scope. There you go step 1 complete.