Developing WML applications using PHP Presented by developerworks, your source for great tutorials Table of Contents If you're viewing this document online, you can click any of the topics below to link directly to that section. 1. About this tutorial... 2 2. Wireless Markup Language (WML)... 3 3. PHP:Hypertext Preprocessor (PHP)... 6 4. Generating Dynamic WML using PHP... 9 5. WML and PHP - an example... 11 6. Feedback... 15 Developing WML applications using PHP Page 1 of 15
Section 1. About this tutorial Who should take this tutorial? The course is intended for developers and technical managers who want to get an overview and understanding of WML application development using PHP. About the author Vivek Malhotra is a wireless technology expert based in the Washington D.C. area. Vivek has several years of experience developing and implementing wireless applications and has spoken on expert panels focusing on the wireless industry. You can contact Vivek with any questions you might have about the content of this tutorial. Introduction to the tutorial PHP: Hypertext Preprocessor (PHP) is an open source server-side scripting language that can be used to dynamically create Wireless Markup Language (WML) based applications. This tutorial provides an introduction to developing dynamic WML applications using PHP to serve WAP-enabled wireless devices. Prerequisites You should be familiar with basic PHP, WML, and MySQL. Resources For additional information and resources, refer to the following sites: * The Official PHP Language Web site at http://www.php.net/ * The WAP Forum Web site at http://www.wapforum.org * Get information on MySQL at http://www.mysql.com * Download the UP SDK and the phone emulator at the Openwave Web site (http://www.openwave.com/) * Read the developerworks article "Developing Wireless Applications" * IBM and Wireless: Lotus Mobile Services for Domino has been enhanced by the new Domino Everyplace. Developing WML applications using PHP Page 2 of 15
Section 2. Wireless Markup Language (WML) What is WML? Wireless Markup Language (WML) is a markup language, based on XML, that allows information to be presented to WAP-enabled devices. WML specifications are developed by the WAP Forum, a consortium founded by Nokia, Phone.com (now called Openwave), Motorola, and Ericsson. The current version of the WAP specifications is 2.0. Cards and decks A deck is a single WML page that contains information with which a user interacts. A card is part of a deck that contains formatting information, content, and processing instructions. A deck can be made up of one or more cards. Basic structure of a WML deck Below is a the basic structure of a WML deck: <?xml version="1.0" <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/dtd/wml_1.1.xml"> <head>... </head> <template>... </template>... Hello World! Example in WML Below is an example of a basic WML application: <?xml version="1.0" <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/dtd/wml_1.1.xml"> Hello World! Developing WML applications using PHP Page 3 of 15
Displaying text This section describes displaying text to a WAP client. You can display text on a WAP client that is either formatted or unformatted. The <br/> element -- also called the break element -- is used for starting a new line of text. The element, or paragraph element, without any attributes displays unformatted text using the various attributes supported by the element and can be used for aligning the text. For example, <?xml version="1.0" <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/dtd/wml_1.1.xml"> This is a Hello World! application. This text is unformatted with white space removed and text wrapped. will display text that is unformatted, and <?xml version="1.0" <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML1.1//EN" "http://www.wapforum.org/dtd/wml_1.1.xml"> <p align="left" mode="wrap"> This is a Hello World! application. This text is left justified with white space removed and wrapping of text enabled. will display text that is aligned as left justified with wrapping of text enabled. Tables in WML can be created using the <table>, <td>, and <tr> elements. Overall alignment of the table can be controlled, but not individual cells within the table. Here is how you would create a WML table: <?xml version="1.0" <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/dtd/wml_1.1.xml"> <table columns="2"> <tr><td>col1</td><td>col2</td ></tr></table> Links and navigation The <go> and <anchor> elements allow for navigation between WML cards and decks. Below is an example of how you would use the <go> element to navigate to specified URL: <card id="name"> <do type="type" label="label"> <go href="url"/> </do> Developing WML applications using PHP Page 4 of 15
... where url specifies where to go next. The <anchor> element provides another way to navigate between cards and decks. By pressing the ACCEPT key the task associated with the anchored link is invoked. Below is the use of the <anchor> element: <anchor title="link1"><go href="#sports"/>sports</anchor> <br/> In this case the link is to the sports card. User input The <input> element prompts the user to input text in string or number format. The following is how you would use the <input> element: Please input your name: <input name="variable" title="label" format="specifier" maxlength="n" emptyok="boolean"/> where name stores the input value, title is the label for the input item, format is the type of input, maxlength specifies the maximum number of characters a user can enter, and emptyok specifies whether the field is optional. Selecting from a list The <select> element prompts the user to select from a list. The following is how you would use the <select> element: Please select from the following list: <select title="label" name="variable" ivalue="default"> <option value="value">content</option> <option value="value">content</option>... </select> where title is the label for the selected item, name stores the value of selected item, ivalue is the default item selected if name isn't set to anything. The <option> creates the list of items where value stores the value of list and content is the list item. Variables The <setvar> element is used to set a variables name and assign it a value. Note that variable names are case sensitive. Here is how you would create a variable and assign it a value: <setvar name="id" value="123"/> where the variable name is id and 123 is its value. The id variable can be referenced by $id. Developing WML applications using PHP Page 5 of 15
Section 3. PHP:Hypertext Preprocessor (PHP) What is PHP? PHP: Hypertext Preprocessor (PHP) is an open source server-side scripting language. With PHP you can create dynamic wireless and Web pages. Using PHP In order to test PHP-based applications your application server will have to be PHP activated and should be able to handle all.php type files. For my examples, I configured Microsoft's Internet Information Server to support PHP. You can download PHP EasyWindows Installer from the PHPeverywhere Web site to configure IIS to support PHP. Hello World! Example in PHP Below is an example of a basic PHP page: <html> <head> <title>example</title> </head> <body> echo "Hello World!"; </body> </html> Variables and operations PHP variables begin with a $ and a leading letter or _ followed by letters, numbers, or more underscore characters. $userid and $_userid are valid PHP variables whereas $1userid isn't. You can assign values using the = operand to variables and variables can be referenced using the & operator. PHP supports arithmetic, boolean, bitwise, and many more operators. More on PHP operators can be found on the Official PHP Web site. Control statements Below are some of the common control statements supported by PHP: if-elseif-else Developing WML applications using PHP Page 6 of 15
The following code is an example of using the if-elseif-else control statement: if ($x > $y) { print "x is bigger than y"; } elseif ($a == $b) { print "x is equal to y"; } else { print "x is smaller than y"; } The elseif extends the if and else conditional statement. You can have multiple elseif conditions within the conditional statement. The code after the elseif condition are executed only if the elseif condition evaluates to TRUE. for and foreach: The use of the for loop is very similar to any other programming language like c, c++, etc. The syntax for the for loop is: for (expr1; expr2; expr3) statement The foreach loop gives an easy way to iterate over arrays. The syntax for the foreach loop is: foreach(array_expression as $value) statement On each loop, the value of the current element is assigned to $value and the internal array pointer is advanced by one. For example, if the array arr is defined as $arr = array (1, 2, 3, 4), then executing the following code foreach ($arr as $v) { print "$v\n"; } will result in 1,2,3,4 being displayed. switch: The use of the switch statement would be if you had to use a seried of IF statements on the same expression. An example of the switch statement would be: switch ($v) { case 0: print "i equals 0"; break; case 1: print "i equals 1"; break; case 2: print "i equals 2"; break; } The code that gets executed will depend on the value of $v. while: The simplest of the control statements in PHP is the while statement. The statement or Developing WML applications using PHP Page 7 of 15
code nested in the while loop continues to be executed as long as the while expression evaluates to TRUE. The syntax for the while statement is: while (expr) {... } More on PHP control statements can be found on the Official PHP Web site. Developing WML applications using PHP Page 8 of 15
Section 4. Generating Dynamic WML using PHP Document header A WML document containing PHP must always have the following header information: echo("<?xml version=\"1.0\""); echo("<!doctype wml PUBLIC \"-//WAPFORUM//DTD WML 1.1//EN\"". "http://www.wapforum.org/dtd/wml_1.1.xml\">"); Basic WML structure using PHP Below is an outline of a basic PHP-based WML document: echo "<?xml version=\"1.0\"";... An Example: Hello World! In the following example, "Hello World!" will be displayed. The example illustrates how PHP and WML can be used together to generate dynamic applications. // send wml headers echo "<?xml version=\"1.0\""; print "<br/>hello World!"; Developing WML applications using PHP Page 9 of 15
Database access For the purpose of this tutorial I used a MySQL database, which can be downloaded from the MySQL Web site. I am going to assume that you understand basic SQL and have MySQL installed and running. The following PHP statements allow you to connect, select, query, and get results from a database: //Connect to Database $dbconnect = mysql_pconnect("localhost"); //make a database selection @mysql_select_db("test"); //query the database $dbquery = "select xxx from table"; //get the recordset resulting from the query $dbresult = @mysql_query($dbquery); Database access -- an example This example illustrates how to query a MySQL database and display the results. Create a simple table called weather_table in the MySQL database by executing the following: mysql>create table weather_table ( >city varchar(20), >temperature int(11), >description varchar(20) ); After creating the table, insert a few entries using the INSERT command. Execute the following: //Connect to Database $dbconnect = mysql_pconnect("localhost"); //make a database selection @mysql_select_db("test"); //get city information from database $dbquery = "select city from weather_table"; //get the recordset resulting from the query $dbresult = @mysql_query($dbquery); if (mysql_num_rows($dbresult) > 0) : while ($row = mysql_fetch_array($dbresult)) : print "$row[city] $row[temperature] $row[description]"; endwhile; else: print "No results were found."; endif; The result of the query to the weather_table will be displayed. You will get the "No results were found" message if there were no entries in the table. Developing WML applications using PHP Page 10 of 15
Section 5. WML and PHP - an example Overview On this page you will see the implementation of a dynamic WML application using a PHP and MySQL database. In this PHP/WML example, you will be creating an application that gives you a menu of items to select from: display Hello World! message, get weather information, or send an e-mail. Once you make your selection you are taken to the appropriate document. Below is the code that displays the main menu for the user to select from: // send wml headers echo "<?xml version=\"1.0\""; print "Welcome! Make a Selection"; <select> <option onpick="http://www.hostname.com/helloworld.php"> print"hello World!";</option> <option onpick="http://www.hostname.com/getweather.php"> print"get Weather";</option> <option onpick="http://www.hostname.com/sendmail.php"> print"send An Email";</option> </select> Copy and save the code as main.php. Displaying the Hello World! message The code below displays the Hello World! message. Copy and save the code as helloworld.php. // send wml headers echo "<?xml version=\"1.0\""; print "<br/>hello World!"; Developing WML applications using PHP Page 11 of 15
Get Weather information When the user selects weather information, the code below is executed. The user is given a list of cities to get weather information for. Upon selecting the city, a request is made using the POST method to weatherdetail.php, where the weather detail for the city is displayed. // send wml headers echo "<?xml version=\"1.0\""; <do type="accept"> <go href="http://localhost/scripts/php/project/weatherdetail.php" method="post"> <postfield name="city" value="$(choice)"/> </go> </do> <do type="options" label="main"> <go href="http://localhost/scripts/php/project/main.php"/> </do> print "Select City<br/>"; //Connect to Database $dbconnect = mysql_pconnect("localhost"); //make a database selection @mysql_select_db("test"); //get city information from database $dbquery = "select city from weather_table"; $dbresult = @mysql_query($dbquery); <select name="choice"> if (mysql_num_rows($dbresult) > 0) : while ($row = mysql_fetch_array($dbresult)) : <option value=' print "$row[city]";? >'> print "$row[city]";</option> endwhile; else: print "No results were found."; endif; </select> Developing WML applications using PHP Page 12 of 15
Copy and save the code as getweather.php. Get weather information, cont'd The following code displays the weather detail for the city selected: // send wml headers echo "<?xml version=\"1.0\""; <do type="options" label="main"> <go href="http://localhost/scripts/php/project/main.php"/> </do> print "Detail forecast for "; print $city; print " is: <br/>"; //Connect to Database $dbconnect = mysql_pconnect("localhost"); //make a database selection @mysql_select_db("test"); //get city information from database $dbquery = "select temperature,description from weather_table where city='$city'"; $dbresult = @mysql_query($dbquery); if (mysql_num_rows($dbresult) > 0) : while ($row = mysql_fetch_array($dbresult)) : print "$row[temperature] degrees and $row[description]"; endwhile; else: print "No results were found."; endif; Copy and save the code as weatherdetail.php. Sending an e-mail In this section, you will create the document that handles the sending of an e-mail. The user is prompted to input to whom the message is being sent, the subject, and the message. // send wml headers echo "<?xml version=\"1.0\""; Developing WML applications using PHP Page 13 of 15
<do type="accept"> <go href="http://localhost/scripts/php/project/mail.php" method="post"> <postfield name="email" value="$email"/> <postfield name="message" value="$message"/> <postfield name="subject" value="$subject"/> </go> </do> To: <input title="email" name="email"/> <br/> Subject: <input title="subject" name="subject"/> <br/> Message: <input title="message" name="message"/> <br/> Copy and save the code as sendmail.php. Sending an e-mail, cont'd Once the user submits the information, the information from $Email,$Subject,$Message variables is retrieved from the POST request. The PHP mail function is used to send the mail message. You will need to set the SMTP directive in the php.ini configuration file to a known SMTP server name. You could also use other mail components like JavaMail to send the mail message. // send wml headers echo "<?xml version=\"1.0\""; if (mail($email,$subject,$message, "From:PHP-enabled WAP site")) : print "Message has been sent to $Email"; else : print "Could not send message to $Email"; endif; Copy and save the code as mail.php. Developing WML applications using PHP Page 14 of 15
Section 6. Feedback Feedback Please send us your feedback on this tutorial. We look forward to hearing from you! Colophon This tutorial was written entirely in XML, using the developerworks Toot-O-Matic tutorial generator. The open source Toot-O-Matic tool is an XSLT stylesheet and several XSLT extension functions that convert an XML file into a number of HTML pages, a zip file, JPEG heading graphics, and two PDF files. Our ability to generate multiple text and binary formats from a single source file illustrates the power and flexibility of XML. (It also saves our production team a great deal of time and effort.) You can get the source code for the Toot-O-Matic at www6.software.ibm.com/dl/devworks/dw-tootomatic-p. The tutorial Building tutorials with the Toot-O-Matic demonstrates how to use the Toot-O-Matic to create your own tutorials. developerworks also hosts a forum devoted to the Toot-O-Matic; it's available at www-105.ibm.com/developerworks/xml_df.nsf/allviewtemplate?openform&restricttocategory=11. We'd love to know what you think about the tool. Developing WML applications using PHP Page 15 of 15