Connect HTML5 PhoneGap App to an online database

Question

I am looking to make an HTML 5 App which will be available on the apple and android store. (so it needs to be cross platform and for which I am using Phonegap)

My problem is the information displayed on the app will be updated regularly via some online database that will be edited online by myself not users. What is the best practice to connect to this database and what database would work best (note the information isn't private and can be openly available the information is used to populate lists and content on the app)

I have been looking into XML then JSON for the "database" and handlebars to insert the content, which I've gone off a bit..

Think of this as an HTML5 app that has to use js. The app itself is simple it's just classified lists ( category , genre , list , item ) and then a title:img:description of each item.

Any help, code or insight would be great. Thanks for your time!

Answer 1

You can use any database of your choice on the server side. Suppose your database is on mysql then you can write some php script to retrieve the data. Next these php scripts should return some kind of JSON or XML response based on your choice. Lastly you can use ajax to call those php scripts and get those JSON / XML response inside your app and extract them.

Now there are many many ways. You should use in which you are comfortable with. So many database options so many scripting language options.

Search -> analyze -> try -> use

Get familiar with AJAX calls to server.

You will get some idea from this link

An example:

PHP script:

<?php
include("dbconfig.inc.php");
header("Content-type: text/xml");

echo "<?xml version=\"1.0\" ?>\n";
echo "<Loadinglist>\n";


    $select="Select * FROM tb_table";
    $dbh->query("SET NAMES utf8;");
    $dbh->query("SET CHARACTER_SET utf8;");


        foreach($dbh->query($select) as $row)
        {
            echo "<bangla>\n";

            $id=$row['id'];
            echo "\t<id>"."<![CDATA[".$id."]]>"."</id>\n";


            $category=$row['category'];
            echo "\t<category>"."<![CDATA[".$category."]]>"."</category>\n";


        }



echo "</Loadinglist>";
?>

Sample ajax call

jQuery.ajax({
                                  url: 'http://www.examplecom/myscript.php',  //load data 
                                  global: false,
                                  type: "POST",
                                  dataType: "xml",
                                  data: data,
                                  async: true,
                                  timeout: 40000,
                                  success: loading_complete_list,
                                  error: errorfunc
                            });

Search them, learn them, try them.