Mobile responsive Web Design example using jQuery Mobile with PHP & MySql

Sep-23-2014 in jQuery, PHP No comments

In the previous article I showed how to create the mobile website mobile website using Simple responsive mobile website using PHP & MySQL. Today I will will be creating example mobile responsive web design using jQuery with PHP & MySql.

jquery-mobile-php-mysql

I created a table ‘tbl_news’ and ‘tbl_comment’ the 7 columns with data are:

Now, I will create a config.inc.php to have a database connection. Create a file config.inc.php with this code paste:

 

This above code is the same as in previous article.

Let’s start…

First we need a page index.php(Creating the Home Page). It contains HTML, PHP code and Jquery Mobile.

HTML with PHP code

 

Above code is display 10 record on page(“$max_results = 10;”). You can create your own theme or use themes from library jQuery Mobile(There are 6 themes include). Ex: “data-theme:” value(a, b, c,..) to change theme web. the mobile “page” using a div element with its data-role attribute set to “page” attribute. Ex: data-role=”page”, data-role=”header”, data-role=”footer”.

Create a file details.php: when you click on the link article on index.php “id” will be sent to the details.php page will then display details this article

 

Mobile devices supports Palm, Blackberry, iPhone, Windows Phone, etc.

In the article some parts I can not use, but it is useful if you want to develop

You can use this tools to test Testing Mobile Web

No Responses

Add Your Comment