PhoneGap Login with PHP & MySQL

phonegap-cordova-login-system

Phonegap login system (cordova login) using php & mysql: In this tutorial, we’re going to build simple login system using phonegap with php and mysql backend.

• 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 userid, full name, email address and password.

CREATE TABLE `users` (
`userid` int(1) 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 `users` ADD PRIMARY KEY (`userid`);
ALTER TABLE `users` MODIFY `userid` int(1) NOT NULL AUTO_INCREMENT;

After creating database, we need to write a php code for validating new user. we’re going to validate user based on email address. if email address is already present with database, we need to notify user otherwise we need to create a new account.

Working with PHP / Backend

we’re going to create a common file (auth.php) for managing both register request and login request.

Working with Registration process:

if(isset($_POST['register']))
{   
    $register = mysqli_num_rows(mysqli_query($con, "SELECT * FROM `users` WHERE `email`='$email'"));
    if($register == 0)
    {
        $insert = mysqli_query($con,"INSERT INTO `users` (`email`,`password`) VALUES ('$email','$password')");
        if($insert)
            echo "success";
        else
            echo "error";
    }
    else if($register != 0)
        echo "exist";
}

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.

Working with login process:

else if(isset($_POST['login']))
{
    $login = mysqli_num_rows(mysqli_query($con, "SELECT * FROM `users` WHERE `email`='$email' AND `password`='$password'"));
    if($login != 0)
        echo "success";
    else
        echo "error";
}

This will return two states are reply, success if authentication is successful. error if authentication failed.

Working with PhoneGap / Cordova

We’re going to create 2 pages called index.html and welcome.html; inside index.html we’re going to get login / register information. If login is success, we need to navigate / redirect user into welcome page.

Let’s create two inputs for email and password and two buttons for login and register

Working with login: When user click login button, we need to read user inputs (email, password), add login (as keyword to server) and make ajax request to custom URL

$("#loginButton").click(function(){
    var email= $.trim($("#email").val());
    var password= $.trim($("#password").val());
    $("#status").text("Authenticating...");
    var loginString ="email="+email+"&password="+password+"&login=";
    $.ajax({
        type: "POST",crossDomain: true, cache: false,
        url: url,
        data: loginString,
        success: function(data){
            if(data == "success") {
                $("#status").text("Login Success..!");
                localStorage.loginstatus = "true";
                window.location.href = "welcome.html";
            }
            else if(data == "error")
            {
                $("#status").text("Login Failed..!");
            }
        }
    });
});

Working with register: When user click register button, we need to read user inputs and add register keyword, then make ajax request to web url

$("#registerButton").click(function(){
    var email= $.trim($("#email").val());
    var password= $.trim($("#password").val());

    $("#status").text("Creating New Account...");
    var dataString="email="+email+"&password="+password+"&register=";
    $.ajax({
        type: "POST",crossDomain: true, cache: false,
        url: url,
        data: dataString,
        success: function(data){
            if(data == "success")
                $("#status").text("Registered success");
            else if( data == "exist")
                $("#status").text("Account is already there");
            else if(data == "error")
                $("#status").text("Register Failed");
        }
    });
});

Download