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
successafter creating an account.failedif any errors occurexistif 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+"®ister=";
$.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");
}
});
});