Android PhoneGap Login Example with JQuery-Ajax & Java/Servlet/JDBC

Hello Friends,

Following Example Illustrates the Login Functionality Implemented in simplest form using Phonegap.

Following is the Algo/Logic used in the Sample Application,
  • From the Phonegap app, User Enters User Name & Password,
  • From the app, JQuery-Ajax Request is made to the Servlet, Sending username & password as parameters,
  • Servlet Accepts the Parameters, Then Connects to Remote Database using JDBC and fetches Username and Passwords,
  • Matches the username and password from parameters and those fetched from database,
  • If credentials matches writes Response as "SUCCESS" else "FAIL"
  • At the Client side i.e. Phonegap App, Appropriate Alert message is shown depending on the Response Got from Servlet.

Following is the Server Side - Servlet Snippet Code,  

response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        Connection con = null;
        ResultSet resultSet = null;      
        String param_uname = request.getParameter("uname");
        String param_pwd = request.getParameter("pwd");
        try {
            Class.forName("<DB Driver>").newInstance();
            String url = "<DB URL>";
            con = DriverManager.getConnection(url);
            String query = null;
            query = "SELECT * from APP.LOGIN";
            PreparedStatement statement = con.prepareStatement(query);
            resultSet = statement.executeQuery();
            String db_uname="";
            String db_pwd="";           
            while (resultSet.next()) {
                db_uname = resultSet.getString("UNAME");
                db_pwd = resultSet.getString("PWD");                                       
             }
            if( (param_uname.equals(db_uname)) && (param_pwd.equals(db_pwd))){
                   out.write("SUCCESS");
            } else {
                out.write("FAIL");
            }        
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            out.close();
        }

Following is the Snippet Of The HTML Code for PhoneGap Application,

    <div data-role="content" id="input_login">
        <ul data-role="listview" data-divider-theme="b" data-inset="true">
            <li data-role="list-divider" role="heading">
                User Name
            </li>           
             <li data-role="list-divider" >
                <input type="text" id="txt_username"/>
            </li>           
            <li data-role="list-divider" role="heading">
                Password
            </li>            
             <li data-role="list-divider" >
                <input type="password" id="txt_pwd"/>
            </li>           
             <li data-role="list-divider" >
                <input type="button" id="btn_login" value="Login" onclick="javascript:verifyLogin();"/>
            </li>            
        </ul>
    </div>

Following is the JavaScript Function / Code,

function verifyLogin(){       
    var uname=document.getElementById("txt_username").value;
    var pwd=document.getElementById("txt_pwd").value;   
      $.ajax({
            type : 'POST',          
            url : /Login', // Servlet URL          
            data:{
                'uname':uname,
                'pwd':pwd
            },
            success : function(data) {           
                if("SUCCESS"==data){                    
                    alert("Login Success!!");
                } else {                   
                    alert("Invalid Login!!");
                }
            },
            error : function(xhr, type) {
                alert('server error occurred');
            }
      });   
}

Following are the Screenshots For the Application,



I Hope this example will be useful for people learning PhoneGap,

Happy Coding!!

~Mayuri




Best Car pool Android Application Best Car Pool Application Source Code Download Here



Best Social Network Cordova Ionic Application Best Social Networking Source Code Cordova Ioinc Application Download Here


Best Android Application, Android Restaurant System Best Android Restaurant Application Source code download here


Best Android Application Android Chat Source code download Android Chat Source code download


Best Android Quiz Source Code Download Best Android Quiz Source Code Download here

More and Lots of useful Android source codes here Best Android Source codes download here



Comments

Naresh T said…
This comment has been removed by the author.
Naresh T said…
Hi Mayuri,
Can you share me your source code.
I am new to Phonegap and I want to do
Login page in Phonegap. I am unable to receive response from My servlet code. I have used your sample code posted here but I am always failed response.
Naresh T said…
Hi Mayuri,
Can you share me your source code.
I am new to Phonegap and I want to do
Login page in Phonegap. I am unable to receive response from My servlet code. I have used your sample code posted here but I am always failed response.
jai shah said…
hello..
mam....
please...please...please...

send me this type of phonegap demo ...

I Want to learn this...
>shah.jai75@gmail.com

Thank you..mam..M waiting.... :)
Sundar said…
Hi, First of all thanks for your good intention to publish a nice post. But please make a download link along with your post. So that the beginners can learn from your post.
Sundar said…
This comment has been removed by the author.
Anonymous said…
Hi,

Thanks for the wonderful article. Can you post the entire code. I am getting server error. It doesn't work from browser too.

Regards,
Bala
thank u very much it works with little change
Krunal said…
Hi Mayuri,

What servlet response are you getting .. i mean JSON or XML..also can you let us know what if the webservice is cross-domain how to get response from that..
Please reply..
Muthu Kumar said…
Hi Mayuri,
Can you share me your source code.
Sanjay Rathore said…
Hi...
can u share this code ...
Tazeen Momin said…
This comment has been removed by the author.
Tazeen Momin said…
Hi Mayuri , can you please share this code . Because I'm newer in Android.
Sergio Revoredo said…
Hi Mayuri, can you please share this code. Regards.
Test Ba said…
Hi
I am new in phoneGap and i use the mobile jquery .
But it responsive time is very slow.
Can u suggest me any js to use it.
gowsalya said…
The knowledge of technology you have been sharing thorough this post is very much helpful to develop new idea. here by i also want to share this.
Best Devops training in sholinganallur
Devops training in velachery
Devops training in annanagar
Devops training in tambaram
tamizh said…
I appreciate that you produced this wonderful article to help us get more knowledge about this topic.
I know, it is not an easy task to write such a big article in one day, I've tried that and I've failed. But, here you are, trying the big task and finishing it off and getting good comments and ratings. That is one hell of a job done!



Selenium training in bangalore
Selenium training in Chennai
Selenium training in Bangalore
Selenium training in Pune
Selenium Online training
pragya pragya said…
Inspiring writings and I greatly admired what you have to say , I hope you continue to provide new ideas for us all and greetings success always for you..Keep update more information..
python Course in Pune
python Course institute in Chennai
python Training institute in Bangalore
pragya pragya said…
Great post! I am actually getting ready to across this information, It’s very helpful for this blog.Also great with all of the valuable information you have Keep up the good work you are doing well.
python Course in Pune
python Course institute in Chennai
python Training institute in Bangalore
amsa leka said…
Nice blog..! I really loved reading through this article. Thanks for sharing such a
amazing post with us and keep blogging...Also Checkout: cryptocurrency training in chennai | blockchain coaching in chennai | blockchain certification training in chennai | blockchain certification course in chennai
Soumitasai said…

Very nice post here thanks for it .I always like and such a super contents of these post.Excellent and very cool idea and great content of different kinds of the valuable information's.


big data hadoop training in chennai
big data training in chennai chennai tamilnadu
spark training in chennai
Amirtha Gowri said…
Really Happy to say your post is very interesting. Keep sharing your information regularly for my future reference. Thanks Again.

Check Out:
big data training in chennai chennai tamil nadu
big data training in velachery
big data hadoop training in velachery

Popular posts from this blog

Working with JSON & PhoneGap Application

Getting an Access of Android Java Code to a PhoneGap JavaScript.