Friday, July 12, 2013

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



16 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.
Balachander 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

Maruthu Pandiyan said...

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.

Naviya Nair said...

Great and Useful Article.
Java Online Training

Online Java Course

Java Course Online

J2EE training

online J2EE training

Best Recommended books for Spring framework

Java Interview Questions








Java Training Institutes in Chennai

Java Training in Chennai

J2EE Training in Chennai

java j2ee training institutes in chennai

Java Course in Chennai