Mobile responsive Web Design example using jQuery Mobile with PHP & MySql
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.
I created a table ‘tbl_news’ and ‘tbl_comment’ the 7 columns with data are:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
CREATE TABLE IF NOT EXISTS `tbl_news` ( `id` int(11) NOT NULL AUTO_INCREMENT, `title` varchar(150) NOT NULL, `body` text NOT NULL, `date_create` varchar(12) NOT NULL, `description` varchar(500) NOT NULL, `images` varchar(100) NOT NULL, `viewed` int(11) NOT NULL, PRIMARY KEY (`id`) ) CREATE TABLE IF NOT EXISTS `tblcomment` ( `id` int(11) NOT NULL AUTO_INCREMENT, `news_id` int(11) NOT NULL, `name` varchar(50) NOT NULL, `email` varchar(50) NOT NULL, `message` text NOT NULL, `date_create` text NOT NULL, `status` enum('true','false') NOT NULL, PRIMARY KEY (`id`) ) |
Now, I will create a config.inc.php to have a database connection. Create a file config.inc.php with this code paste:
1 2 3 4 5 6 7 8 9 10 11 |
<?php $db_host='localhost'; $db_user='news_db'; $db_pass='password'; $db_data='news_db'; $item_per_page = 8; mysql_connect($db_host,$db_user,$db_pass) or die("Not connected to database"); mysql_select_db($db_data) or die ("Not found database"); mysql_query("SET NAMES utf8"); ?> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
? include("config.php"); ?> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>Free Network Tools</title> <meta content="Free Network Tools" name="description" /> <meta content="Free Network Tools" name="keywords" /> <title>Network Tools</title> <link rel="stylesheet" href="lib/jquery.mobile-1.0a2.min.css" /> <script src="lib/jquery-1.4.4.min.js"></script> <script src="lib/jquery.mobile-1.0a2.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header" data-theme="b"> <h1>Free Network Tools</h1> </div> <div data-role="content"> <ul data-role="listview" data-theme="c"> <? if((!isset($_GET['page'])) || ($_GET['page'] == "1") || !is_numeric($_GET['page']) ) { $page = 1; } else { $page = intval($_GET['page']); } $max_results = 10; $from = (($page * $max_results) - $max_results); $sql = mysql_query("SELECT * FROM tbl_news order by id desc LIMIT $from, $max_results"); if(mysql_num_rows($sql)<=0){echo"<center>No Articles<center>";} else{ ?> <? while($r_prod = mysql_fetch_array($sql)) {$i++ ?> <li> <img <? if($r_prod["images"]=="") echo("src='../img/default.jpg'"); else echo("src='../img/news/{$r_prod["images"]}'")?> alt="<?=($r_prod['title'])?>" alt="" width="102px" height="70px" style="padding-top:7px; padding-left:5px"> <a href="details.php?id=<?=$r_prod['id']?>"><h2><?=$r_prod['title']?></h2></a> <p><?=$r_prod['description'];?></p></p> <span class="ui-li-count"> <? $id1=$r_prod['id']; $result3=mysql_query("select count(news_id) as count from tbl_comment where news_id=$id1"); while($r1=mysql_fetch_array($result3)){ echo $r1["count"]; } ?> </span> </li> <? } } ?> <? $total_results = mysql_result(mysql_query("SELECT COUNT(*) as Num FROM tbl_news"),0); $total_pages = ceil($total_results / $max_results); echo "<center> "; if($page > 1) { $prev = ($page - 1); echo "<a data-role='button' data-transition='slide' data-inline='true' href=\"".$_SERVER['PHP_SELF']."?page=$prev\">Previous Page</a>"; } if($page < $total_pages) { $next = ($page + 1); echo "<a data-role='button' data-transition='slide' data-inline='true' href=\"".$_SERVER['PHP_SELF']."?page=$next\">Next Page</a>"; } echo "</center>"; ?> </ul> </div> <div data-role="footer" data-theme="b"> <h3>Copyright © 2014 visofts.com</h3> </div> </div> </body> </html> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
<? include("config.php"); ?> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title><Free Network Tools</title> <meta content="Free Network Tools" name="description" /> <meta content="Free Network Tools" name="keywords" /> <title>Free Network Tools</title> <link rel="stylesheet" href="lib/jquery.mobile-1.0a2.min.css" /> <script src="lib/jquery-1.4.4.min.js"></script> <script src="lib/jquery.mobile-1.0a2.min.js"></script> </head> <body> <!-- Home Page --> <div data-role="page" id="home"> <div data-role="header" data-theme="b"> <h1>visofts.com</h1> </div> <div data-role=content> <? $id=intval($_GET['id']); $re=mysql_query("SELECT * FROM tbl_news WHERE id=$id"); mysql_query("UPDATE tbl_news SET view_click=view_click+1 WHERE id=$id"); while($r=mysql_fetch_array($re)){ ?> <h2><?=stripslashes($r['title'])?></h2> <?=stripslashes($r['description'])?> <?=stripslashes($r['content'])?> <div class="pane-content"> <ul data-theme="c" data-inset="true" data-role="listview"> <li data-role="list-divider" role="heading">New Artists</li> <? $result1 = mysql_query("SELECT * FROM tbl_news where id=$id LIMIT 10"); while($r_prod1 = mysql_fetch_array($result1)){ $id_category=$r_prod1["id_category"]; $result2 = mysql_query("SELECT * FROM tbl_news where id_category=$id_category and id NOT IN ($id) and display='true'"); while($r_prod2 = mysql_fetch_array($result2)){ ?> <li> <img <? if($r_prod2["images"]=="") echo("src='../img/default.jpg'"); else echo("src='../img/news/{$r_prod2["images"]}'")?> alt="<?=($r_prod2['title'])?>" alt="" width="102px" height="70px" style="padding-top:7px; padding-left:5px"> <a href="details.php?id=<?=$r_prod2['id']?>"><h2><?=$r_prod2['title']?></h2></a> <p><?=$r_prod2['description'];?></p></p> <span class="ui-li-count"> <? $id1=$r_prod2['id']; $result3=mysql_query("select count(news_id) as count from tbl_comment where news_id=$id1"); while($r1=mysql_fetch_array($result3)){ echo $r1["count"]; } ?> </span> </li> <? } } ?> </ul> </div> <?} ?> </div> <div data-role="footer" data-theme="b"> <h3>Copyright © 2014 visofts.com</h3> </div> </div> </body> </html> |
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