Question

I have been playing around with my phonegap app in eclipse using android sdk and trying to figure out how to show dynamic html pages from a server’s DB in a phonegap application.

What I want to accomplish is;

to have a web page for example http://www.demo.com/login and the phonegap application will login to that web page and will show http://www.demo.com/dashboard.html and so it will take photos, access to build in gps etc..

Is it possible that phonegap application can be use like a web browser and display dynamic html pages and as well as have access to the native functions? Do I have to run a web service that the phonegap application will get and post json objects using that web service and then render the html code with the help of a js called mustache.js or whatever?

I really appreciate your help

Thanks a lot

Answer 1

You can use PhoneGap with PHP and jQuery Ajax to get content. Load jQuery library at file head. At function onBodyLoad(), put the Ajax call for the PHP file:

$('#content').load('http://www.example.com/test.php');
at the HTML session, put the div id=”content” where do you want to show content.

PHP:

for($i=1; $i<=10; $i++) {
    echo '<p>Dinamic content coming from test.php! Value: ' . $i . ' of 10.</p>';
}

HTML will print:

<p>Dinamic content coming from test.php! Value: 01 of 10.</p>
<p>Dinamic content coming from test.php! Value: 02 of 10.</p>
<p>Dinamic content coming from test.php! Value: 03 of 10.</p>
<p>Dinamic content coming from test.php! Value: 04 of 10.</p>
<p>Dinamic content coming from test.php! Value: 05 of 10.</p>
<p>Dinamic content coming from test.php! Value: 06 of 10.</p>
<p>Dinamic content coming from test.php! Value: 07 of 10.</p>
<p>Dinamic content coming from test.php! Value: 08 of 10.</p>
<p>Dinamic content coming from test.php! Value: 09 of 10.</p>
<p>Dinamic content coming from test.php! Value: 10 of 10.</p>

To send content to another page and log the user in, you can something like

$.get('login.php?name=user', function(data) {
    $('#content').html(data);
});

And your login.php could have something like:

if (isset($_GET['name'])) {
    $name = $_GET['name'];
    echo "Name: $name";
} else {
    echo "Please enter a valid name!!";
}

To make your login secure, you might use the POST method, as described below:

$('#form').submit(function() {
    $.post('login.php', $('#form').serialize(), function(data) {
        $('#content').html(data);
    });
    return false; // to avoid page going to login.php file
});

And login.php

if(!empty($_POST)) {
    $user = $_POST['name'];
    $pass = $_POST['password'];
    // db query and stuff goes here...
    echo "Worked!";
} else {
    "Enter values!";
}