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

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');

            } 

      });    

}