PhoneGap Login with PHP & MySQL

PhoneGap login system (Cordova login) using PHP & MySQL: In this tutorial, we’re going to build a simple login system using PhoneGap with PHP and MySQL backend.

• Creating a database for storing user data ( MySQL )
• Creating a Login page for authenticating an existing user
• Creating Signup page for add new user account

Creating Database for PhoneGap Login System

Let’s start by creating a new database & tables for our project. Here I have created a table name called “users” where we’re keeping all users information such as id, name, email, 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;

Once, we created a new table, we have to write an API or PHP code for validation purpose. Let’s do that.

Writing PHP code for Authentication

Let me create a new file called auth.php for managing user registration and login request.

User Registration code:

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 the mobile application, such as

• success after creating an account.
• failed if any errors occur
• exist if email already registered.

User login code:

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

If a user posted with email & password with login parameter, we need to verify the users presence with the database. if yes, we’re returning success message otherwise, we return error

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 a success, we need to navigate/redirect user into the welcome page.

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

Working with login: When user clicks the login button, we need to read user inputs (email, password), add login (as a keyword to the 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 the 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");
        }
    });
});