jQuery Mobile "Getting Started" Application

A couple of weeks ago, I shared an Employee Directory sample application built with jQuery Mobile and PhoneGap. That application was implemented “Ajax-style”, keeping the UI and the data access code cleanly separated. In other words: no server code intermingled in the HTML markup.

A number of people have asked for a similar example using a “classic” (non-Ajax) implementation where pages (markup + data) are entirely built at the server-side before being delivered to the client.

So, here is simpler version of the same application built “sans Ajax”. I used PHP in this version, but you can of course use your favorite server-side technology (Java, .NET, CF, RoR, etc).

Run the application

Click here to run the application.

Download the source code

Click here to download the source code. Edit config.php to make sure it matches your database configuration.

Running the Application with PhoneGap

With this implementation, the application files can’t be installed locally on the device since pages are created dynamically on the server side. So, in the PhoneGap application, instead of loading a local HTML file, you point to a file hosted on your web server. Here is the code for my main Android activity. Greg has a great post on this topic (I haven’t tried it on iOS myself yet).

package org.coenraets.directory;

import com.phonegap.DroidGap;

import android.os.Bundle;

public class EmployeeDirectoryJQMPHPActivity extends DroidGap {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.setBooleanProperty("loadInWebView", true);
        super.loadUrl(
            "http://coenraets.org/apps/directory/jqmphp/index.php");
    }
}

 

Summary

To recap the difference between the two versions: In the original (Ajax) version, the server side code exposes a set of services consumed by an HTML/JS client. In this new (non-Ajax) version, the server-side code returns fully assembled HTML pages (markup + data).

The original (Ajax) version has many benefits:

  1. Your UI code doesn’t have a dependency on a specific server-side technology.
  2. Your data access logic doesn’t have a dependency on a specific UI technology.
  3. You can manipulate the data on the client side (i.e. sort using different criteria) without requiring a server roundtrip.
  4. That decoupled architecture also works offline when working with a local database.

When none of the items above is a requirement of your application, the “non-Ajax” approach may work too and may even have some benefits. In particular, it makes the jQuery Mobile page navigation model easier to handle.

15 Responses to jQuery Mobile "Getting Started" Application

  1. Ken Vermeille November 3, 2011 at 1:52 pm #

    Yes Phonegap is amazing, it completely cuts down development time tremendously. In addition jquery mobile UI looks great. Its interesting to see your choice of app. I’m developing an app that looks just like the one that you built! Great stuff, keep up the amazing work.

  2. jose lizana December 19, 2011 at 11:31 am #

    Excelente, Gracias, Gracias, Gracias

  3. Nate Hamilton February 7, 2012 at 5:54 pm #

    I’m creating an ios app for our church. In a couple pages of the app I will need to pull content from our website (Made with expression engine) into the app. Would this be the best method of doing so or should I go a different route? I’ve read about doing it with JSON but that seems like you need special API hooks that the website has (like twitter). Any help you can provide would be greatly appreciated. Thanks!

  4. Peter July 6, 2012 at 12:44 pm #

    Nice article, it was so helpful for me. But what if my server is not available for any reason? (no internet connection, server crash, etc.) Do you know any solution to handle HTTP error codes and show a customized 404 page? (instead of the default one)

  5. dilip September 11, 2012 at 8:01 am #

    i want to know that if i am required the data from the server form the the url like xyz.php then how can we get and display the data into it through json. plz provide me information

    • kishore February 8, 2013 at 9:26 am #

      even i’ve the same question as yours…pls reply if you found the answer elsewhere…

  6. Steve Propecia February 12, 2013 at 4:12 pm #

    Thanks for the article, Still not sure whether to use ajax navigation or not though

  7. Bill Soriano March 1, 2013 at 1:23 pm #

    An excellent tutorial, great effort of your part to share your knowledge, thank you very much for that.
    I have a question about the example, this basically query information and you recomend separate server(php)+www(html,js,css,etc)… but if I want to insert or update information, how I can do this at time of do submit for pass the data?

  8. Novia April 30, 2013 at 5:52 pm #

    How can i run the application? is is possible importing to a local server like xampp

  9. dab June 2, 2013 at 12:11 am #

    Thanks for the article. It this like creating a “mobile version” ie browser version using jquery mobile and PHP inline, but make it downloadable as a native app?

  10. Jayanth June 3, 2013 at 10:23 pm #

    thanks for the post…but i have a question…is it possible to run php inside phonegap…???i dont think it is possible….correct me if am wrong….

  11. Basit Tarifler July 25, 2013 at 9:30 am #

    How can i run the application?

  12. Mark November 28, 2013 at 9:24 am #

    How would you do this but still have the app accessible offline

Trackbacks/Pingbacks

  1. Aplicación de ejemplo usando jQuery Mobile y PhoneGap « desarrollophpsenior - March 22, 2012

    [...] posted a simpler version of the same application here. Share this:TwitterFacebookMe gusta:Me gustaSé el primero en decir que te gusta esta [...]

  2. Un completo ejemplo de Phonegap, jQueryMobile, PHP, MySQL, JSon… | Programación de Dispositivos Móviles - December 7, 2013

    [...] I posted a simpler version of the same application here. [...]

Leave a Reply

css.php