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.

<span class="hljs-keyword">CREATE</span> <span class="hljs-keyword">TABLE</span> <span class="hljs-string">`users`</span> (

<span class="hljs-string">`userid`</span> <span class="hljs-built_in">int</span>(<span class="hljs-number">1</span>) <span class="hljs-keyword">NOT</span> <span class="hljs-literal">NULL</span>, 
<span class="hljs-string">`fullname`</span> <span class="hljs-built_in">varchar</span>(<span class="hljs-number">50</span>) <span class="hljs-keyword">NOT</span> <span class="hljs-literal">NULL</span>, 
<span class="hljs-string">`email`</span> <span class="hljs-built_in">varchar</span>(<span class="hljs-number">50</span>) <span class="hljs-keyword">NOT</span> <span class="hljs-literal">NULL</span>, 
<span class="hljs-string">`password`</span> <span class="hljs-built_in">varchar</span>(<span class="hljs-number">50</span>) <span class="hljs-keyword">NOT</span> <span class="hljs-literal">NULL</span>

) <span class="hljs-keyword">ENGINE</span>=<span class="hljs-keyword">InnoDB</span> <span class="hljs-keyword">DEFAULT</span> <span class="hljs-keyword">CHARSET</span>=latin1 AUTO_INCREMENT=<span class="hljs-number">1</span> ;

<span class="hljs-keyword">ALTER</span> <span class="hljs-keyword">TABLE</span> <span class="hljs-string">`users`</span> <span class="hljs-keyword">ADD</span> PRIMARY <span class="hljs-keyword">KEY</span> ( <span class="hljs-string">`userid`</span> );
<span class="hljs-keyword">ALTER</span> <span class="hljs-keyword">TABLE</span> <span class="hljs-string">`users`</span> <span class="hljs-keyword">MODIFY</span> <span class="hljs-string">`userid`</span> <span class="hljs-built_in">int</span>(<span class="hljs-number">1</span>) <span class="hljs-keyword">NOT</span> <span class="hljs-literal">NULL</span> AUTO_INCREMENT;

Once, we created a new table, we have to write an API or PHP code for validation purposes. 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:

<span class="hljs-keyword">if</span>(isset(<span class="hljs-variable">$_POST</span>[<span class="hljs-string">'register'</span>]))
{   
    <span class="hljs-variable">$register</span> = mysqli_num_rows(mysqli_query(<span class="hljs-variable">$con</span>, <span class="hljs-string">"SELECT * FROM `users` WHERE `email` ='<span class="hljs-variable">$email</span>'"</span>));
    <span class="hljs-keyword">if</span>(<span class="hljs-variable">$register</span> == 0)
    {
        <span class="hljs-variable">$insert</span> = mysqli_query(<span class="hljs-variable">$con</span>,<span class="hljs-string">"INSERT INTO `users` ( `email` , `password` ) VALUES ('<span class="hljs-variable">$email</span>','<span class="hljs-variable">$password</span>')"</span>);
        <span class="hljs-keyword">if</span>(<span class="hljs-variable">$insert</span>)
            <span class="hljs-built_in">echo</span> <span class="hljs-string">"success"</span>;
        <span class="hljs-keyword">else</span>
            <span class="hljs-built_in">echo</span> <span class="hljs-string">"error"</span>;
    }
    <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(<span class="hljs-variable">$register</span> != 0)
        <span class="hljs-built_in">echo</span> <span class="hljs-string">"exist"</span>;
}

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:

<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(isset(<span class="hljs-variable">$_POST</span>[<span class="hljs-string">'login'</span>]))
{

    <span class="hljs-variable">$login</span> = mysqli_num_rows(mysqli_query(<span class="hljs-variable">$con</span>, <span class="hljs-string">"SELECT * FROM `users` WHERE `email` ='<span class="hljs-variable">$email</span>' AND `password` ='<span class="hljs-variable">$password</span>'"</span>));
    <span class="hljs-keyword">if</span>(<span class="hljs-variable">$login</span> != 0)
        <span class="hljs-built_in">echo</span> <span class="hljs-string">"success"</span>;
    <span class="hljs-keyword">else</span>
        <span class="hljs-built_in">echo</span> <span class="hljs-string">"error"</span>;

}

If a user posted with an email & password with the login parameter, we need to verify the user’s 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 the 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 a 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

$(<span class="hljs-string">"#loginButton"</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span>()</span>{
    <span class="hljs-keyword">var</span> email= $.trim($(<span class="hljs-string">"#email"</span>).val());
    <span class="hljs-keyword">var</span> password= $.trim($(<span class="hljs-string">"#password"</span>).val());
    $(<span class="hljs-string">"#status"</span>).text(<span class="hljs-string">"Authenticating..."</span>);
    <span class="hljs-keyword">var</span> loginString =<span class="hljs-string">"email="</span>+email+<span class="hljs-string">"&password="</span>+password+<span class="hljs-string">"&login="</span>;
    $.ajax({
        <span class="hljs-attr">type</span>: <span class="hljs-string">"POST"</span>,<span class="hljs-attr">crossDomain</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">cache</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">url</span>: url,
        <span class="hljs-attr">data</span>: loginString,
        <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>)</span>{
            <span class="hljs-keyword">if</span>(data == <span class="hljs-string">"success"</span>) {
                $(<span class="hljs-string">"#status"</span>).text(<span class="hljs-string">"Login Success..!"</span>);
                localStorage.loginstatus = <span class="hljs-string">"true"</span>;
                <span class="hljs-built_in">window</span>.location.href = <span class="hljs-string">"welcome.html"</span>;
            }
            <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(data == <span class="hljs-string">"error"</span>)
            {
                $(<span class="hljs-string">"#status"</span>).text(<span class="hljs-string">"Login Failed..!"</span>);
            }
        }
    });
});

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

$(<span class="hljs-string">"#registerButton"</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span>()</span>{

    <span class="hljs-keyword">var</span> email= $.trim($(<span class="hljs-string">"#email"</span>).val()); 
    <span class="hljs-keyword">var</span> password= $.trim($(<span class="hljs-string">"#password"</span>).val()); 

    $(<span class="hljs-string">"#status"</span>).text(<span class="hljs-string">"Creating New Account..."</span>); 
    <span class="hljs-keyword">var</span> dataString=<span class="hljs-string">"email="</span>+email+<span class="hljs-string">"&password="</span>+password+<span class="hljs-string">"&register="</span>; 
    $.ajax({

        <span class="hljs-attr">type</span>: <span class="hljs-string">"POST"</span>,<span class="hljs-attr">crossDomain</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">cache</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">url</span>: url,
        <span class="hljs-attr">data</span>: dataString,
        <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>)</span>{
            <span class="hljs-keyword">if</span>(data == <span class="hljs-string">"success"</span>)
                $(<span class="hljs-string">"#status"</span>).text(<span class="hljs-string">"Registered success"</span>);
            <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>( data == <span class="hljs-string">"exist"</span>)
                $(<span class="hljs-string">"#status"</span>).text(<span class="hljs-string">"Account is already there"</span>);
            <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(data == <span class="hljs-string">"error"</span>)
                $(<span class="hljs-string">"#status"</span>).text(<span class="hljs-string">"Register Failed"</span>);
        }

    }); 

});

Download