Before you start
To get the most from this tutorial you should be comfortable constructing web
accompanying the mobile web application is written in PHP and MySQL. Familiarity with
server-side programming can also help you as you follow along with this tutorial. If
you are familiar with other server-side platforms such as ASP classic, ASP.Net, or
Java™ Server Pages, you can find the server-side code quite easy to follow.
Familiarity with jQuery is not necessary but, of course, will not hurt. In fact, this
tutorial is written from the perspective of a mobile programmer looking to explore a
new framework rather than from that of a jQuery professional launching into the mobile
space. After completing this tutorial, you will have learned how to construct a basic
jQuery Mobile application and manage data between the mobile browser and a back-end
server. The application demonstrates how to perform basic record operations such as (
delete) on sales-related data. You also witness how universal your mobile web application is as you run it from multiple browsers. Last, you install shortcuts to your mobile web application to the home screen of both iPod and Android devices to demonstrate how to deploy a web application.
This tutorial introduces the jQuery Mobile (JQM) framework for writing mobile web applications targeted at the mobile industry's leading browsers. JQM is used to provide intuitive and consistent user experience for web-based applications running on mobile devices such as iPhone, iPad, Android, WebOS, BlackBerry Version 6 (Torch, Playbook), and others. The tutorial begins with a high-level look at the JQM project and the relation of JQM to, and dependence on, HTML5. After a brief look at one of the many ways in which you can construct a JQM application and some of the ways in which JQM enhances fundamental web UI elements, the tutorial takes a look at a basic sales force automation requirement.
With the problem in hand, the tutorial maps out a plan to implement a solution for mobile device users, without the need for native mobile development. The completed application is demonstrated so that you can get a feel for where the tutorial will take you as you follow along and build your own application, step by step. The source files are examined, function by function, as you learn to implement the solution using JQM. The tutorial concludes with a couple of tricks on making the application easy for your users to access on their mobile devices.
To follow this tutorial, you need the following:
- Text editor—You can use any text editor you prefer. An editor with syntax highlighting might come in handy. Notepad++ is an open source editor that works well.
- JQuery Mobile links—You actually do not need to download anything. The necessary files are available through jQuery's Content Delivery Network (CDN).
- Web browser—This browser is used to view the jQuery Mobile help and documentation.
- WebKit (Safari) or Chrome Browser—These browsers support jQuery Mobile development on the desktop.
- Mobile device—You can use the iPod Touch, Android, BlackBerry Torch, or similarly capable mobile devices.
- PHP and MySQL hosting environment—This is used for the server side of the application
I created the code samples for this tutorial on a MacBook Pro with VMWare Fusion running Windows® 7. I use Notepad++ for editing the files because it has good syntax highlighting plus secure FTP for making interacting with server-based PHP files very straightforward. You can edit files in vi, but who wants to? For working with the MySQL database, I used the phpMyAdmin available with my hosting account. For testing on a physical device, I used a Nexus One running Android 2.2 and an iPod Touch running iOS 4.1.