This blog is really fantastic, I am going to develop an app which is login system using phonegap with php and mysql backend. It contains following steps.

Just you have to…
1. Creating database for inserting user data to mysql database
2. Creating Signup page for adding new user account
3. Creating Login page for authenticate existing user
4. Database design for phonegap login system
First we need to create database for storing new user’s data such as reg_id, reg_date, full name, email address and password.
CREATE TABLE `app_login` (
`reg_id` int(1) NOT NULL,
`reg_date` varchar(20) NOT NULL,
`fullname` varchar(50) NOT NULL,
`email` varchar(50) NOT NULL,
`password` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

ALTER TABLE `app_login` ADD PRIMARY KEY (`reg_id`);
ALTER TABLE `app_login` MODIFY `reg_id` int(1) NOT NULL AUTO_INCREMENT;
Creating Signup page for creating new user account
signup using phonegap, php ,mysql
signup using phonegap, php ,mysql

This part includes two sections such as,

Creating web page for signup process using php
Create mobile page for requesting / sending data for login system
Creating web page for signup process (signup.php) This is a simple code for creating new user account written in php.

+++++++++++++++++++++++++++++++++++signup.php++++++++++++++++++++++++++++++++++++++++++++
if(isset($_POST[‘signup’]))
{
$fullname=mysql_real_escape_string(htmlspecialchars(trim($_POST[‘fullname’])));
$email=mysql_real_escape_string(htmlspecialchars(trim($_POST[‘email’])));
$password=mysql_real_escape_string(htmlspecialchars(trim($_POST[‘password’])));
$login=mysql_num_rows(mysql_query(“select * from `app_login` where `email`=’$email'”));
if($login!=0)
{
echo “exist”;
}
else
{
$date=date(“d-m-y h:i:s”);
$q=mysql_query(“insert into `app_login` (`reg_date`,`fullname`,`email`,`password`) values (‘$date’,’$fullname’,’$email’,’$password’)”);
if($q)
{
echo “success”;
}
else
{
echo “failed”;
}
}
echo mysql_error();
}
this code will return 3 type for values to mobile application, such as

success after creating account.
failed if any errors occurs.
Exist – if email already registered.
Creating Signup page for mobile application (signup.html) This is an example code for building signup page (build using ionic framework)
+++++++++++++++++++++++++++++++++++signup.html++++++++++++++++++++++++++++++++++++++++++++

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<meta name=”format-detection” content=”telephone=no” />
<meta name=”msapplication-tap-highlight” content=”no” />
<!– WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 –>
<meta name=”viewport” content=”user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi” />
<link rel=”stylesheet” type=”text/css” href=”css/ionic.min.css” />
<title>Create an Account</title>
</head>
<body>
<div class=”bar bar-header”>
<h1 class=”title”>Create an Account</h1>
<a href=”login.html” class=”button button-clear button-royal”>Login</a>
</div>
<div class=”padding” style=”margin-top:75px;”>
<label class=”item-input”>
<span class=”input-label”>Full Name</span>
<input type=”text” placeholder=”Sundaravel” id=”fullname”>
</label>
<label class=”item-input”>
<span class=”input-label”>Email</span>
<input type=”email” placeholder=”email@domain.com” id=”email”>
</label>
<label class=”item-input”>
<span class=”input-label”>Password</span>
<input type=”password” placeholder=”password” id=”password”>
</label>
<label class=”item-input”>
<button class=”button button-block button-positive” id=”signup”>Create an Account</button>
</label>
</div>
<script type=”text/javascript” src=”cordova.js”></script>
<script type=”text/javascript” src=”js/jq.js”></script>
<script type=”text/javascript” src=”js/auth.js”></script>
</body>
</html>
JQuery code for sending user’s data to server for signup process
$(“#signup”).click(function(){
var fullname=$(“#fullname”).val();
var email=$(“#email”).val();
var password=$(“#password”).val();
var dataString=”fullname=”+fullname+”&email=”+email+”&password=”+password+”&signup=”;
if($.trim(fullname).length>0 & $.trim(email).length>0 & $.trim(password).length>0)
{
$.ajax({
type: “POST”,
url: url,
data: dataString,
crossDomain: true,
cache: false,
beforeSend: function(){ $(“#signup”).val(‘Connecting…’);},
success: function(data){
if(data==”success”)
{
alert(“Thank you for Registering with us! you can login now”);
}
else if(data=”exist”)
{
alert(“Hey! You alreay has account! you can login with us”);
}
else if(data=”failed”)
{
alert(“Something Went wrong”);
}
}
});
}return false;
});
Creating login system for authenticate existing user
phonegap login system
phonegap login system

This part explains how to authenticate user using phonegap with PHP and MySQL backend with following steps

Creating webpage for authenticate user
Creating mobile page for login process
Creating webpage for authentication (login.php) This is a example code for authenticate user with PHP & MySQL using phonegap.
+++++++++++++++++++++++++++++++++++++++login.php++++++++++++++++++++++++++++++++++++++++

if(isset($_POST[‘login’]))
{
$email=mysql_real_escape_string(htmlspecialchars(trim($_POST[‘email’])));
$password=mysql_real_escape_string(htmlspecialchars(trim($_POST[‘password’])));
$login=mysql_num_rows(mysql_query(“select * from `app_login` where `email`=’$email’ and `password`=’$password'”));
if($login!=0)
{
echo “success”;
}
else
{
echo “failed”;
}
}
This code will return following data when data is submitted

“success” if login successful
“failed” if any problem occurred
Building Login Page for mobile (login.html) this is an example page for phonegap login designed with ionic UI framework
++++++++++++++++++++++++++++++++++++login.html+++++++++++++++++++++++++++++++++++++++++++

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<meta name=”format-detection” content=”telephone=no” />
<meta name=”msapplication-tap-highlight” content=”no” />
<!– WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 –>
<meta name=”viewport” content=”user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi” />
<link rel=”stylesheet” type=”text/css” href=”css/ionic.min.css” />
<title>Login</title>
<script type=”text/javascript”>
var url = window.location.pathname;var filename = url.substring(url.lastIndexOf(‘/’)+1);
if(localStorage.login==”true” && filename == ‘login.html’){window.location.href = “index.html”;}
else if(localStorage.login==”false” && filename != ‘login.html’){window.location.href = “login.html”;}
</script>
</head>
<body>
<div class=”bar bar-header”>
<h1 class=”title”>Login</h1>
<a href=”signup.html” class=”button button-clear button-royal”>Signup</a>
</div>
<div class=”padding” style=”margin-top:55px;”>
<label class=”item-input”>
<span class=”input-label”>Email</span>
<input type=”email” placeholder=”email@domain.com” id=”email”>
</label>
<label class=”item-input”>
<span class=”input-label”>Password</span>
<input type=”password” placeholder=”password” id=”password”>
</label>
<label class=”item-input”>
<span class=”input-label”></span>
<a href=”forget-password.html” class=”button button-clear button-royal”>Forget Password ?</a>
</label>
<label class=”item-input”>
<button class=”button button-block button-positive” id=”login”>Login</button>
</label>
</div>
<script type=”text/javascript” src=”cordova.js”></script>
<script type=”text/javascript” src=”js/jq.js”></script>
<script type=”text/javascript” src=”js/auth.js”></script>
</body>
</html>
Jquery Code for login

$(“#login”).click(function(){
var email=$(“#email”).val();
var password=$(“#password”).val();
var dataString=”email=”+email+”&password=”+password+”&login=”;
if($.trim(email).length>0 & $.trim(password).length>0)
{
$.ajax({
type: “POST”,
url: url,
data: dataString,
crossDomain: true,
cache: false,
beforeSend: function(){ $(“#login”).html(‘Connecting…’);},
success: function(data){
if(data==”success”)
{
localStorage.login=”true”;
localStorage.email=email;
window.location.href = “index.html”;
}
else if(data=”failed”)
{

alert(“Login error”);
$(“#login”).html(‘Login’);
}
}
});
}return false;
});
+++++++++++++++++++++++++++++++++++welcome page++++++++++++++++++++++++++++++++
Creating Logout
<a href=”#” class=”button button-clear” id=”logout”>Logout</a>
JQuery code for logout

$(“#logout”).click(function(){
localStorage.login=”false”;
window.location.href = “login.html”;
});

Enjoy the coding….

7700 Total Views 4 Views Today

3 Comments


  1. Hi there to all, the contents present at this website are really remarkable for people experience, well, keep up the nice work fellows.

    Reply

  2. Way cool! Some extremely valid points! I appreciate you writing this post and the rest of the site is also really good.

    Reply

  3. I am sure this article has touched all the internet users, its really really good paragraph on building up new website.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>