Today’s tutorial is going to show you how you can use jQuery Mobile with PHP, MySQL and a bit of AJAX to build a small mobile web application.

At the end of this tutorial you will know how to add new RSS feed name and url into the database, how to delete the record from the database, how to fetch and parse a RSS feed and show its results inside jQuery Mobile list view.

If you are not familiar with jQuery Mobile, I suggest you read my jQuery Mobile basic tutorial and then come back.

So, let’s start. Many things in our RSS reader application will take place inside our index.php file. The front page of the application will have links for creating new RSS feed and Read existing feeds.

First of all we need a database table to store our feeds in. Create one using this SQL code:

[code lang=”sql”]
CREATE TABLE IF NOT EXISTS `demo` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
`url` varchar(256) COLLATE utf8_unicode_ci NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM
[/code]

Now, I will create a db.php which will have a database connection and some basic functions for database handling. Create folder named inc and put your db.php file in it with this code pasted:

[code lang=”php”]
/*** mysql hostname ***/
$hostname = ‘localhost’;

/*** mysql username ***/
$username = ‘root’;

/*** mysql password ***/
$password = ”;

$dbname = ‘demo’;

try
{
mysql_connect($hostname, $username, $password);
mysql_select_db($dbname);
}
catch (Exception $e)
{
// normally we would log this error
echo $e->getMessage();
}

function db_select_list($query)
{
$q = mysql_query($query);
if (!$q) return null;
$ret = array();
while ($row = mysql_fetch_array($q, MYSQL_ASSOC)) {
array_push($ret, $row);
}
mysql_free_result($q);
return $ret;
}

function db_select_single($query)
{
$q = mysql_query($query);
if (!$q) return null;
$res = mysql_fetch_array($q, MYSQL_ASSOC);
mysql_free_result($q);
return $res;
}
[/code]

This is a pretty basic code for connecting and fetching records from our database.

To keep things organized, I will put my header section inside external PHP file. Inside inc folder create file named header.php, then paste this in the header file:

[code lang=”php”]

[/code]

This is basic HTML 5 header with included jQuery and jQuery Mobile.

Now create a file in your root directory and name it index.php and paste this in it:

[code lang=”php”]

[/code]

Save everything and try it in your browser. Pretty cool.

As you can see our links to other pages look like anchor links. I am going to have multiple pages inside my index.php file and that is the way to link to them.

Now paste this whole code inside index.php overwriting the previous code:

[code lang=”php”]

[/code]

Above code is pretty simple. There are 3 pages, the indexPage, addFeedPage and readFeedPage. As we firstly have to add some feeds to read, let me show you how to do it.

As you can see, the AddNewFeedPage is basically a form for collecting New feed data (Feed name and Feed URL). Open your index.php in browser and click on Create New Feed link. You should see the form.

Now, add this JavaScript code directly before the closing body tag in your index.php file:

[code lang=”javascript”]

[/code]

Above code is catching Submit button click event and making an AJAX call to addFeed.php file which will handle the database writing. Create an addFeed.php file and paste this in:

[code lang=”php”]
getMessage();
}
[/code]

We are including our database file, sanitizing user input (you should never trust user entered data and always sanitize it!) and finally writing our entry in database. Now, go and add your RSS feed and save it. Make sure the feed URL is correct.

Now go back to your home page and click on Read RSS feeds link. You should see a feed name you just entered. Let me show you how to fetch and parse this feed.

Create a file named feed.php in your root directory and paste this in:

[code lang=”php”]
feedData.php in your root folder and paste this in:

[code lang=”php”]

[/code]

This code is rendering the view. First we check if feed is valid and if it is parsing it using SimpleXMLElement. Go ahead and try it. If everything worked, you should see 10 titles from the feed which are links to the actual articles.

If something is wrong with the feed format and it is not in RSS feed format, you will get a nice message.

Notice the Delete button on top right. It is used so you can delete the feed you are viewing from the database. Create deleteFeed.php and paste the code for deleting in:

[code lang=”php”]

I hope that this tutorial showed how easy it is to build mobile web applications using jQuery Mobile, PHP and MySQL.

Do you like jQuery Mobile? Are you using it or plan to use it? Do not hesitate to discuss in our comment section below. And if you have any questions, I will gladly answer them.

Stay tuned.