Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

WebApp for Mobile

Posted on 2012-12-25
6
1 solution
Medium Priority
?
516 Views
Last Modified: 2012-12-27
Good day and season's greetings to all,

I would like to create a WebApp for mobile devices, I have seen many ways to do this, jQTouch, jQuery Mobile, and others.
I need some advice on which is the best solution for performance and ease of use.
I also need a simple example of how to display data from a table in a list and see the detail in another view where I can modify, delete and / or add a record.
The table structure is:

CREATE TABLE `customers` (
  `CustomerID` varchar(5) NOT NULL,
  `CompanyName` varchar(40) NOT NULL,
  `ContactName` varchar(30) DEFAULT NULL,
  `ContactTitle` varchar(30) DEFAULT NULL,
  `Address` varchar(60) DEFAULT NULL,
  `City` varchar(15) DEFAULT NULL,
  `Region` varchar(15) DEFAULT NULL,
  `PostalCode` varchar(10) DEFAULT NULL,
  `Country` varchar(15) DEFAULT NULL,
  `Phone` varchar(24) DEFAULT NULL,
  `Fax` varchar(24) DEFAULT NULL,
  PRIMARY KEY (`CustomerID`),
  KEY `City` (`City`),
  KEY `CompanyName` (`CompanyName`),
  KEY `PostalCode` (`PostalCode`),
  KEY `Region` (`Region`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Open in new window

0
Comment
Question by:danz67
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Join The Community
6 Comments
 
LVL 30

Expert Comment

by:IanTh
ID: 38720833
a web designer mate of mine uses jqueary mobile to great affect
0
 

Author Comment

by:danz67
ID: 38720871
thanks for the reply but I need more information and code examples with MySql
0
 
LVL 11

Accepted Solution

by:
mcnute earned 1500 total points
ID: 38721033
Thats how a jquery mobile webapp could look like with mysql and php involved:

<?php
$link = mysql_connect('localhost', 'your_user', 'your_pw');
mysql_set_charset('utf8',$link); 

if (!$link) {
    die('Verbindung schlug fehl: ' . mysql_error());
} else {
   // echo "connection is super!". $link;
}

$selectdb = mysql_selectdb('your_db', $link);


$sql = "select * from customers limit 0,10"; // you may want to limit the results for big tables to the firs 10 by adding LIMIT 0,10 at the end of the query.
$result = mysql_query($sql);
?>
<!DOCTYPE html> 
<html> 
<head> 
	<title>Customers</title> 
	
	<meta name="viewport" content="width=device-width, initial-scale=1"> 

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head> 
<body> 

<div data-role="page" id="one">

	<div data-role="header">
		<h1>Select Customer</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<h2>Get Customer Profile:</h2>
  	<ul data-role="listview" data-inset="true">
	<?php
	$html;
	while ($r = mysql_fetch_object($result)) {
		echo '<li><a href="#customer'.$r->id.'">Customer '.$r->id.' Profile</a></li>';
		$html .= '<div data-role="page" id="customer'.$r->id.'" data-theme="a">

		<div data-role="header">
			<h1>Customer '.$r->name.'</h1>
		</div><!-- /header -->
	
		<div data-role="content" data-theme="a">	
			<h2>Customer '.$r->name.'</h2>
			<p>display here the customer information.</p>	
			<p><a href="#one" data-direction="reverse" data-role="button" data-theme="b">Back to page "one"</a></p>	
			
		</div><!-- /content -->
		
		<div data-role="footer">
			<h4>Page Footer</h4>
		</div><!-- /footer -->
		</div>';
	}
	?>
	</ul>	
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->
<?php
echo $html;
?>

</body>
</html>

Open in new window


This will create a page with all information on one html doc. If your customer table is big, ti is better to limit the query as stated in the code.

The php does the mysql query and structures the data in the page, by clicking the links in the list view the page transitions to the customer profile pages.

Good Luck!
0
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Register now!
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 38721080
You probably want to start with the simplest "Hello World" kind of application, and then build up from that.  This article will help you get started with the jQuery interface to the backend script (this is called AJAX), and the book will help you get an understanding of how PHP and MySQL play together.
www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_10712.html
http://www.sitepoint.com/books/phpmysql5/

Note that MySQL has now been officially deprecated by PHP.  A better choice might be MySQLi or PDO.
http://us2.php.net/manual/en/mysqlinfo.api.choosing.php
0
 

Author Comment

by:danz67
ID: 38722009 
<?php
$link = mysql_connect('localhost', 'your_user', 'your_pw');
mysql_set_charset('utf8',$link); 

if (!$link) {
    die('Verbindung schlug fehl: ' . mysql_error());
} else {
   // echo "connection is super!". $link;
}

$selectdb = mysql_selectdb('your_db', $link);


$sql = "select * from customers limit 0,10"; // you may want to limit the results for big tables to the firs 10 by adding LIMIT 0,10 at the end of the query.
$result = mysql_query($sql);
?>
<!DOCTYPE html> 
<html> 
<head> 
	<title>Customers</title> 
	
	<meta name="viewport" content="width=device-width, initial-scale=1"> 

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head> 
<body> 

<div data-role="page" id="one">

	<div data-role="header">
		<h1>Select Customer</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<h2>Get Customer Profile:</h2>
  	<ul data-role="listview" data-inset="true">
	<?php
	$html;
	while ($r = mysql_fetch_object($result)) {
		echo '<li><a href="#customer'.$r->id.'">Customer '.$r->id.' Profile</a></li>';
		$html .= '<div data-role="page" id="customer'.$r->id.'" data-theme="a">

		<div data-role="header">
			<h1>Customer '.$r->name.'</h1>
		</div><!-- /header -->
	
		<div data-role="content" data-theme="a">	
			<h2>Customer '.$r->name.'</h2>
			<p>display here the customer information.</p>	
			<p><a href="#one" data-direction="reverse" data-role="button" data-theme="b">Back to page "one"</a></p>	
			
		</div><!-- /content -->
		
		<div data-role="footer">
			<h4>Page Footer</h4>
		</div><!-- /footer -->
		</div>';
	}
	?>
	</ul>	
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->
<?php
echo $html;
?>

</body>
</html>

Open in new window


Thank you for the code you've provided, I was able to optimize it to display data in list and detail.
To complete, as I asked in the question, how do I modify, delete and / or add a record? Make a small effort for me :) thanks
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 38722041
There really isn't an answer short of writing your application for you and since I'm a professional programmer I can't do that for free.  But the SitePoint book will teach you everything you need to know to get started.
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Learn More
Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Display your dates as Today, Yesterday etc in PHP
Article by: Gary
Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Creating linked dropdowns using jQuery and PHP
Article by: Julian
This article discusses how to create an extensible mechanism for linked drop downs.
Introduction to jQuery (Part 1)
Video by: Jason
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Introduction to jQuery (Part 2)
Video by: Jason
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Advertise Here

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Advertise Here