In this HOWTO, we will show you how to create a dynamic list.
HOWTO's context:
Data about the articles sold by your company are stored in an online database (here MySQL, but you are free to adapt the scripts...) and are grouped by categories.
Your app shall show the list of available categories.
When the user selects an item of this list, the app shall display a list of all articles of this category.
Requirements
To test the sample scripts of this HOWTO, you need a web server with PHP language and MySQL database. Minimal comprehension of PHP and MySQL is required.
You can modify following examples to test them with another language or DB. The only technical constraint is : the produced XML document must be compliant to AppMobile XML format.
If you don't have a server, just type "free hosting php mysql" in your favourite internet search engine and find plenty of solutions that will be more than enough for your testing phase.
Level 1: list of articles
Data
All tables in AppMobile HOWTOs are prefixed with "amdoc_" to avoid any risk of overwriting existing tables in your base.
Article catégories are stored in the "amdoc_categories" table, which contains following fields: "name", "pic" et "id" (primary key).
Articles are stored in the "amdoc_products" table, which contains following fields: "name", "id" (primary key), "price", "description", "pic" and "id_cat" (points to the category of the given article).
Following MySQL code will create some content for your tests on this HOWTO.
Articles and categories tables:
-- -------- `amdoc_categories` table structure ---------- CREATE TABLE IF NOT EXISTS `amdoc_categories` ( `id` tinyint(3) unsigned NOT NULL AUTO_INCREMENT, `name` varchar(30) NOT NULL, `pic` varchar(30) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 ; -- -------- `amdoc_categories` table content ---------- INSERT INTO `amdoc_categories` (`id`, `name`, `pic`) VALUES (1, 'Pizzas', 'pizza6.jpg'), (2, 'Sandwichs', 'Sandwichs.jpg'), (3, 'Salades', 'salade1.jpg'), (4, 'Flammekueche', 'flam2.jpg'), (5, 'Boissons', 'orangina.jpg'), (6, 'Desserts', 'dessert4.jpg'); -- -------- `amdoc_products` table structure ---------- CREATE TABLE IF NOT EXISTS `amdoc_products` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(30) NOT NULL, `descr` varchar(200) NOT NULL, `price` float NOT NULL DEFAULT '0', `pic` varchar(30) NOT NULL, `id_cat` tinyint(3) unsigned NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8; -- -------- `products` table content ---------- INSERT INTO `amdoc_products` (`id`, `name`, `descr`, `price`, `pic`, `id_cat`) VALUES (1, 'Louisiane', 'sauce tomate, mozzarella, champignons frais, oignons frais, poivrons verts et double poulet', 9.8, 'pizza1.jpg', 1), (2, 'Tartiflette', 'creme fraîche, mozzarella, pommes de terre, lardons et Saint-Nectaire', 11.5, 'pizza2.jpg', 1), (3, 'Quatre saisons', 'sauce tomate, mozzarella, champignons frais, oignons frais, poivrons verts et tomates fraiches', 8.9, 'pizza3.jpg', 1), (4, 'Quatre Fromages', 'sauce tomate, mozzarella, cantal, fourme d''Ambert AOC, fromage de chevre', 12.3, 'pizza4.jpg', 1), (5, 'Montova', 'Tomates, mozzarella, salade, pesto, oignons', 4.9, 'wichpizza1.jpg', 2), (6, 'Como', 'Poulet, curry, salade', 4.9, 'wichpizza2.jpg', 2), (7, 'Trento', 'Jambon, fromage, salade, pesto', 4.9, 'wichpizza3.jpg', 2), (8, 'Cesar', 'Poulet, salade, croûtons, olives, tomate cerise', 5.5, 'salade1.jpg', 3), (9, 'Rimini', 'Mortadelle, salade, maïs, oignons, olives, champignons', 5.5, 'salade2.jpg', 3), (10, 'Padova', 'Tomate, mozzarella, salade, oignons, olives', 5.5, 'salade3.jpg', 3), (11, 'Gratinée', 'Crème fraîche, oignons, fromage', 6.5, 'flam4.jpg', 4), (12, 'Normale', 'Crème fraîche, oignons', 6.1, 'flam5.jpg', 4), (13, 'Orangina', 'Orangina, boîte 33 cl.', 1.7, 'orangina.jpg', 5), (14, 'Munster', 'Crème fraîche, oignons, munster', 7.05, 'flam2.jpg', 4), (15, 'Framboise / Speculos', 'Crème fraîche, framboise, speculos', 6.9, 'flam3.jpg', 4), (16, 'Pommes / cannelle', 'Crème fraîche, pomme, cannelle', 6, 'flam1.jpg', 4), (17, 'Coca Cola', 'Coca Cola, boîte 33 cl.', 1.7, 'coca.jpg', 5);
Generation of the list
Let's write a little script, products_list.php, which generates on the fly a list of all articles of a given category. If articles have been added, deletede, or modified, the generated list will display the actual DB content in real time.
Script call / parameters
In order to display the articles belonging to a given category, this category information must be passed to the script. It'll be passed in the URL (or "GET" parameter):
http://my_server.com/products_list.php?cat=4
Server-side, the script will get the parameter for further use: $cat=$_GET['cat'];
SQL query:
The query here is very simple:
SELECT id, name, price, pic from `amdoc_products` where id_cat={selected id}
Warning: we decided to make use of the deprecated mysql_* functions in the demo scripts, for larger compatibility reasons. You should NOT run these in production, but download the PDO based modules scripts instead.
Select articles of a category :
<?php
include('config.php');
//récupération du paramètre passé dans l'url et requête sql
$cat=$_GET['cat'];
$req="SELECT id, name, price, pic from `$db_tbl_prod` where id_cat=$cat";
//exécution de la requête mysql:
$db = mysql_connect($dbhost, $dbuser, $dbpassword);
mysql_select_db($dbname);
$result = mysql_query($query,$db);
mysql_close($db);
?>Note 1: a select * would have given the same result in this simple example, but we assume that the real DB where you will be seeking for data will have many more fields of no interest for simply displaying a list of products.
Note 2: we decided to focus on the target of this HOWTO, so this little script lacks a bit of exception handling... this is completed in the script available for download.
The script should also test the result and deliver appropriate message if it is empty.
Note 3: we have put all general config variables, that will be reused in other sample scripts, in the "config.php" file: site base URL, database connection IDs, names of the tables...
config.php :
<?php
$dbhost='hostName';
$dbuser='userLogin';
$dbpassword='password';
$dbname='DBName';
$db_tbl_prod='amdoc_products';
$db_tbl_cat='amdoc_categories';
$db_tbl_ord='amdoc_orders';
$db_tbl_user='amdoc_users';
$db_tbl_msg='amdoc_messages';
$urlprefix='http://mysite.com/path/to/folder';
$emailaddress='yourMailAddress';
?>Generation of the XML-list
All requested data now just needs to be organized in the required XML format.
Note: You'll find all specifications about this format here. 
XML format:
<?xml version="1.0" encoding="UTF-8"?> <items version="1.0" type="1" reload="0"> <item type="1"> <img>http://my_server.com/pic/th_pizza1.jpg</img> <txt1>Louisiane</txt1> <txt2>9,80 €</txt2> <txt3></txt3> <link type="1" url="http://my_server.com/description.php?id=1" title="Détail"/> </item> <item type="1"> etc.... </item> </items>
Therefore, you just need to paste the values collected from the DB in the right place for each article.
Nothing more than these few PHP lines:
XML export:
<?php
header ("Content-Type:text/xml; charset=utf-8");
echo"<?xml version='1.0' encoding='UTF-8'?>
<items version='1.0' type='1' reload='0'>";
while ($l = mysql_fetch_assoc($result)) {
$id=$l["id"]; $name=$l["name"]; $price=$l["price"]; $pic=$l["pic"];//or call extract()
echo("
<item type='1'>
<img>$urlprefix/pic/$pic</img>
<txt1>$name</txt1>
<txt2>$price</txt2>
<txt3></txt3>
<link type='1' url='$urlprefix/description.php?id=$id'
title='Détail'/>
</item>");
}
echo("</items>");
?>Summary
You just created your first dynamic list, on the fly with up-to-date data from your DB at script call-time. This just needed scripting about 30 lines, summarized hereunder.
As already mentioned above: this little script lacks a bit of exception handling... this is completed in the script available for download.
art_list.php :
<?php
include('config.php');
//get the parameter from URL and prepare the request
$cat=$_GET['cat'];
$req="SELECT id, name, price, pic from `$db_tbl_prod` where id_cat=$cat";
//execute the request
$db = mysql_connect($dbhost, $dbuser, $dbpassword);
mysql_select_db($dbname);
$result = mysql_query($query,$db);
mysql_close($db);
//use results to generate output XML
header ("Content-Type:text/xml; charset=utf-8");
echo"<?xml version='1.0' encoding='UTF-8'?>
<items version='1.0' type='1' reload='0'>";
while ($l = mysql_fetch_assoc($result)) {
$id=$l["id"]; $name=$l["name"]; $price=$l["price"]; $pic=$l["pic"];
echo("
<item type='1'>
<img>$urlprefix/pic/$pic</img>
<txt1>$name</txt1>
<txt2>$price</txt2>
<txt3></txt3>
<link type='1' url='$urlprefix/description.php?id=$id'
title='Détail'/> //lien vers une page HTML (type='1')
</item>");
}
echo("
</items>");
?>To use and test this script, you now need to:
- enter its URL on mvsappmobile.com portal
and see the result directly on your smartphone:
- create the HTML page that will be called when the user selects an entry in the list, see <link> element in the XML output:
http://my_server.com/description.php?id={article id}
2-level list: categories of articles
You can configure an item in a list so that it calls a sublist when it gets selected, and this up to five levels.
Let's see how to create a two-level list.
- First level: display categories of articles.
- Second level: display a list of articles that belong to the selected category. This list already exists: it's the script explained step by step just above.
So we just have to create the first level list. Each item of this list will call, for the second level, the above script, passing the category ID as a GET parameter (remember our "?cat=x" parameter in the script URL?):
http://my_server.com/products_list.php?cat=4
A very simple request to get the categories from the DB:
SELECT id, name, pic FROM amdoc_categories
The method to generate the XML is exactly the same.
The content differs only on one point: the "type" attribute of the <link> element is set to "4" to indicate a sub-list, and not to "1" like for HTML pages (see XML specifications):
The PHP script generating this list looks like this:
art_catlist.php
<?php
include('config.php');
//mysql request
$req="SELECT id, name, pic FROM `$db_tbl_cat`";
$db = mysql_connect($dbhost, $dbuser, $dbpassword);
mysql_select_db($dbname);
$result = mysql_query($query,$db);
mysql_close($db);
//XML export generated with request results
header ("Content-Type:text/xml; charset=utf-8");
echo"<?xml version='1.0' encoding='UTF-8'?>
<items version='1.0' type='1' reload='0'>";
while ($l = mysql_fetch_assoc($result)) {
$id=$l["id"]; $name=$l["name"]; $pic=$l["pic"];
echo("
<item type='1'>
<img>$urlprefix/pic/$pic</img>
<txt1>$name</txt1>
<txt2></txt2>
<txt3></txt3>
<link type='4' url='$urlprefix/products_list.php?cat=$id'
title='$name'/> //link to XML sublist (type='4')
</item>");
}
echo("
</items>");
?>To test the script directly on your smartphone, enter the script URL on mvsappmobile.com portal .
AppMobile system manages the list automatically: display the list, launch a selected sublist (<link type="4"> links), then a sub-sublist or a page (<link type="1"> links), navigate back to parent, etc...
Practical advice
Use adapted pictures
The thumbnails in the list (<img> element) are displayed in following format: width:80px and height:60px. To avoid unnecessary downloading delays, please use .png or .jpg, 80x60px pictures for your lists, and for HTML pages, resize your pictures so that their definition -and weight- fits for mobile display.
Validate your XML
To make sure your XML is valid against AppMobile expected format, or to help you track errors in your XML, use our validator:
'.$baseURL.$lang[$_SESSION['doc_lang']]['path_validator'].'validate.html'); ?>