Wednesday, 2 October 2019

PhoneGap login system (Cordova login) using 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");
        }
    });
});

Friday, 20 September 2019

Upgrading Gradle for Cordova mobile apps in Windows

Ocassionally, a new Cordova or plugin version will force you to upgrade your Gradle version. This process must be performed with caution, and this article shows how to chose a correct gradle version and install it on Windows.

1: Stop gradle daemon

Run this command to stop all gradle daemons, if any:

2. Delete gradle cache

Locate and delete the gradle cache folder:
To free up space, you may delete the other folders in the same level of the cache folder if you don’t plan to use the other versions anymore.

3. Download a new gradle version

Before jumping directly to latest gradle version, check compatibility with your Cordova environment. For safety reasons, I wont use anything newer than gradle 4.x on Cordova 7.1.0 alongside Visual Studio, otherwise some issues could be introduced.
Download the desired gradle version from the Gradle Distributions site. In this case I’m downloading gradle-4.1-bin.zip.

4. Unzip the downloaded file

Place the contents of the downloaded ZIP in any location such as C:\gradle\gradle-4.1

5. Add the bin path to environment variables

To edit environment variables in Windows I use Rapid Environment Editor but you can use the clumsy editor provided by Microsoft.
Set the  CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL  System variable to the URL of the downloaded gradle ZIP file:
Add to the location you used in step 4 to the Path  System variable:
Save the variables from the File > Save menu if using the Rapid Environment Editor tool.

6. Close existing command prompt and Visual Studio

Close any opened command prompts windows, otherwise your new environment variables won’t be updated. Also close Visual Studio to ensure it gets the new path later.

7. Check the new version

To check if the new version was installed correctly, run this command:
Gradle version check
Gradle version check

8. Done!

After the new gradle version has been installed, you should remove and re-add the android platform and clean your Cordova app as follows:

Remove the android platform from your app

Clean your project

Recent Posts

Powered by Blogger.

Pages

About Me

My Photo
B.E.(COMPUTER ENGINEER) PHP Web developer & Provide Training for Web Development , Digital Marketing ,Android Mobile Apps Development

 

© 2013 ANDROID TRAINING IN MUMBAI BY OM SIR. All rights resevered. Designed by Templateism

Back To Top