Phonegap login system using PHP & MySQL

BUY PHONEGAP LOGIN SCRIPT

In this tutorial, we’re going to build login system using phonegap with php and mysql backend. This process contains following steps those are mentioned below

      1. Creating database for storing user data ( mysql )
      2. Creating Signup page for add new user account
      3. Creating Login page for authenticate existing user

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 `phonegap_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 `phonegap_login` ADD PRIMARY KEY (`reg_id`);
ALTER TABLE `phonegap_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,

        1. Creating web page for signup process using php
        2. 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.


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 `phonegap_login` where `email`='$email'"));
if($login!=0)
{
echo "exist";
}
else
{
$date=date("d-m-y h:i:s");
$q=mysql_query("insert into `phonegap_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

        1. success after creating account.
        2. failed if any errors occurs.
        3. 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)


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

        1. Creating webpage for authenticate user
        2. 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.


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

        1. “success” if login successful
        2. “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


<!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;
});

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

BUY Advanced Login Script with Signup, Login, Forgot Password, Reset Password, User Profile with gravatar

BUY PHONEGAP LOGIN SCRIPT

  • Govind kumar.

    Thanks Dear its amazing … thanks again … Nice Article . In INDIAN Developer.. Love this site..

    I have a question.
    My phonegap app are Log Out After Minimize or Cancel without logout. We are login everytime when we open my app. Please help me. Local storage in not working properly.

    • http://www.lucin.in Sundara Vel

      Thank you for your feedback @Govind Kumar You can use localStorage=”false” & Check them at page load

      • http://www.lucin.in Sundara Vel

        Dear @disqus_yIqYFwlK0n:disqus You didn’t check localStorage on page load,you can purchase my code,it’ll work for you.

        Performance Tips:
        Don’t use JQuery Animation, try to use CSS animation

  • Onur Kahveci

    Hi, I want to buy the script however I can not. Please fix the problem with paypal. Thanks

  • Mel

    Hi, I’m interested in your login script but link is not available. Please reopen link or send instructions. Thank you

  • Sagesse Magezi

    Great article and thank you for sharing but I wanted to know if is that secure because in other articles people use webservice so which one is a good practice?

    • Chitranjan Bariya

      webservice is better way to develope it.

  • j vie

    Hi! I want to buy it but there is an error. Please check it. Thank you.

  • Mridul

    Great work…..n thanx for sharing…i made similar app that works on localhost but when i configure it for server it doesnt work. Dont know how to connect to mysql server….can u help me for this.

Share This

Share this post with your friends!