phonegap-login-system

Phonegap login system using PHP & MySQL

Want create site? Find Free WordPress Themes and plugins.
login system using phonegap

login system using phonegap

Phonegap login system using php & mysql 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

  • Creating database for storing user data ( mysql )
  • Creating Login page for authenticate existing user
  • Creating Signup page for add new user account

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,

  • 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.

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 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) JQuery code for sending user’s data to server for signup process 

<input id="fullname" type="text" />
<input id="email" type="email" />
<input id="password" type="password" placeholder="password" />
<button id="signup">Create an Account</button>

<script src="cordova.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>

 

$("#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.

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

  • 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.

<input id="email" type="email" placeholder="email@domain.com" />
<input id="password" type="password" placeholder="password" />
<button id="login">Login</button>

<script src="cordova.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>

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 id="logout" class="button button-clear" href="#">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 now ($5)

Did you find apk for android? You can find new Free Android Games and apps.
  • 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.

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

      • 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.

  • sidharth sikka

    hey with the signup page it works fine if the email is normal text but as soon i add @something.com it is unable to send the request how can i fix that?

  • Kaj Hutchison

    tried to purchase script… It failed you cannot buy script

  • Nasser Mansouri

    is safe and secure enough to use local storage for saving some data like user’s email or token?

  • eric

    Whats the best way to block certain content for not registerd users?

    • Abhishek Pathak

      check for, localStorage.login==’false’

  • shihabudheen

    hai friends, anyone plz help me.. i hv a dbt..
    i am usually using wamp server for php and write php files in wamp server.. because only that code which i write in www folder of wamp server is work properly.. otherwise not work.. so where(which folder) i write this code(signup.php)? when i write in the phonegap folder vs code editor shows a message tht ‘Cannot validate the php file. The php program was not found. Use the ‘php.validate.executablePath’ setting to configure the location of ‘php’.. so wht i do for fix it? where i write php codes in phonegap? thank u..

    • PHP files should post on server side

      • shihabudheen

        vry vry thnks for reply.. bt i still confused. server side means i use wamp server for php projects. so we need to write signup.php in wamp server for phonegap also?

  • Kishan Das

    When I Clicked on signup button the new user is not created on the server side on the database.And Similarly login of user is performed.

    • Faustine Yiu

      I have the same problem

  • Rafael Fleitas

    I would like to know how I make a connection to my web-hosted service, through ajax, what code do I put?

  • Andres Guevara

    Thanks for the tutorial! it worked perfectly!

  • HOW TO SIGN PHONEGAP APP

  • Sachin Sachin

    what happens when the login succeeds, which page should it go to?, and where is index.html?

MyMail WordPress Plugin free
Save $50 USD on Ionic Firebase Chat Source CodeEXPLORE