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.

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

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`)
)

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:

<?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");
?>

<?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

?
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>

include("config.php");

<!DOCTYPE html>

<html>

<head>

<title>Free Network Tools</title>

<title>Network Tools</title>

</head>

<body>

<h1>Free Network Tools</h1>

</div>

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">

$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>

</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

<?
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>

include("config.php");

<!DOCTYPE html>

<html>

<head>

<title>Free Network Tools</title>

</head>

<body>

<h1>visofts.com</h1>

</div>

$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)){

<?=stripslashes($r['description'])?>

<?=stripslashes($r['content'])?>

<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">

$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>

</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

DEMO

About Author

Join

No Responses

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

HTML with PHP code

About Author

Add Your Comment

MOBILE

PROTECTED

HTML with PHP code

Related Posts

About Author

Add Your Comment