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.

17 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

  13. world of tanks gold hack May 21, 2014 at 4:21 am #

    Despite what many might think, world of tanks gold hack is well
    known across hundreds of nations all over the world. world of tanks gold
    hack has been around for several centuries and has a very important
    meaning in the lives of many. It would be safe to assume that world of tanks gold hack is going to be around for
    a long time and have an enormous impact on the lives of many people.test
    for introduce3

    Social & Cultural Factors

    world of tanks gold hack has a large role in American Culture.
    Many people can often be seen taking part in activities associated
    with world of tanks gold hack. This is partly because
    people of most ages can be involved and families are brought together by
    this. Generally a person who displays their dislike for world of tanks gold hack may be considered an outcast.

    Economic Factors

    It is not common practice to associate economics with
    world of tanks gold hack. Generally, world of tanks gold hack would be thought to have no effect on our economic situation, but there are in fact some effects.
    The sales industry associated with world of tanks gold hack
    is actually a 2.3 billion dollar a year industry and growing each year.
    The industry employs nearly 150,000 people in the
    United States alone. It would be safe to
    say that world of tanks gold hack play an important role in American economics and
    shouldn’t be taken for granted.

    Environmental Factors

    After a three month long research project, I’ve been able to
    conclude that world of tanks gold hack doesn’t negatively effect the environment at all.

    A world of tanks gold hack did not seem to result in waste products
    and couldn’t be found in forests, jungles, rivers, lakes, oceans, etc…
    In fact, world of tanks gold hack produced some positive
    effects on our sweet little nature.

    Political Factors

    Oh does world of tanks gold hack ever influence politics.
    Last year 5 candidates running for some sort of position used world of tanks gold hack as the primary topic of their campaign. A person might
    think world of tanks gold hack would be a bad
    topic to lead a campaign with, but in fact with the social and environmental impact is has, this topic was able to gain a
    great number of followers. These 5 candidates went 4 for 5 on winning their
    positions.

    Conclusion

    world of tanks gold hack seem to be a much more important idea that most give credit for.
    Next time you see or think of world of tanks gold hack, think about
    what you just read and realize what is really going on. It is likely you under valued world of tanks gold hack before,
    but will now start to give the credited needed and deserved.

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. [...]

  3. Un completo ejemplo de Phonegap, jQueryMobile, PHP, MySQL, JSon… | Centro Inca - June 12, 2014

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

Leave a Reply