Insert form data into db and validate login Phonegap

Hi guys!!

First of all my friends and fans Happy Diwali to all.

Today we are learning to how to insert the form data into sqlite in PhoneGap and successful registration then check the authorization in login page.
 Sqlite is the database that android device provide is the optional for us. We can store the a lot of data inside the sqlite database.
PhoneGap makes it pretty darn easy to create and work with a database in your application. For this we have to create the database name and version and in phonegap it stored inside the data/data/package name/files_01/000000001.db. So your table data will be stored inside the 000000001.db file. In your dbname your table have no data.
The most stuff I feel that to create the UI design, And jquerymobile provide the pretty ui design. So in this tutorial we will integrate with jquery mobile UI and cordova with sqlite. I hope this tutorial might be helpfull to all my friends.
Now lets start the create the android project to build this feature. And build structure looks like that.



MainActivity.java

package com.sunil.phonegapregisindb;

import org.apache.cordova.DroidGap;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class MainActivity extends DroidGap {

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  super.loadUrl("file:///android_asset/www/index.html");
 }
}

index.html

< html>
< head>
< meta charset="utf-8">
< meta name="viewport" content="initial-scale=1.0, user-scalable=no">
< meta name="apple-mobile-web-app-capable" content="yes">
< meta name="apple-mobile-web-app-status-bar-style" content="black">
< title>< /title>
 
     < link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
     < script type="text/javascript" src="cordova.js">< /script>
  < script type="text/javascript" src="jquery.js">< /script>
  < script type="text/javascript" src="jquery.mobile-1.3.2.min.js">< /script> 
  < script type="text/javascript" src="register.js">< /script>  
  < script type="text/javascript" src="iscroll.js">< /script> 
< /head>
< body>

 < div data-role="page" id="page1">
  < div class="header" id="header" data-theme="a" data-role="header">
   < h3>Registration< /h3>
  < /div>
  
   < div id="wrapper">
 < form action="" name="myForm">
  < div data-role="content">
   < div class="fname" data-role="fieldcontain">
    < label for="fname"> First Name < /label> < input name="fname"
     id="fname" placeholder="enter first name" value="" data-mini="true" type="text">
   < /div>
   < div class="lname" data-role="fieldcontain">
    < label for="lname"> Last Name < /label> < input name="lname"
     id="lname" placeholder="enter last name" value="" type="text">
   < /div>
   < div class="age" data-role="fieldcontain">
    < label for="age"> Age < /label> < input name="age" id="age"
     placeholder="enter age" value="" type="number">
   < /div>
   < div class="username" data-role="fieldcontain">
    < label for="username"> User Name < /label> < input name="username"
     id="username" placeholder="enter username" value="" type="text">
   < /div>
   < div class="psw" data-role="fieldcontain">
    < label for="psw"> Password < /label> < input name="password" id="psw"
     placeholder="enter password" value="" type="text">
   < /div>
   < input id="register" value="Register" type="button" name="Register" onclick="validationcheck();">
  < /div>
  < /form>
  < /div>
 < /div>

 < script type="text/javascript">
  function validationcheck() {
   
   if (document.myForm.fname.value == "") {
    alert("Please Enter fname.");
    document.myForm.fname.focus(); 
   } else if (document.myForm.lname.value == "") {
    alert("Please Enter lname.");
    document.myForm.lname.focus();
   } else if (document.myForm.age.value == "") {
    alert("Please Enter age.");
    document.myForm.age.focus();
   } else if (document.myForm.username.value == "") {
    alert("Please Enter username.");
    document.myForm.username.focus();
   }
   else if (document.myForm.psw.value == "") {
    alert("Please Enter password");
    document.myForm.psw.focus();
   }
   else
    {
      success();
    }
  }
  
  function success(){
   onDeviceReady();
  }
 < /script>

< /body>
< /html>

register.js

var db;
var dbCreated = false;

var scroll = new iScroll('wrapper', {
 vScrollbar : false,
 hScrollbar : false,
 hScroll : false
});
document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

 var fname = document.getElementById("fname").value;
 var lname = document.getElementById("lname").value;
 var age = document.getElementById("age").value;
 var username = document.getElementById("username").value;
 var password = document.getElementById("psw").value;

 db = window.openDatabase("RegistrationDB", "1.0", "Registration", 200000);
 if (dbCreated)
 else
  db.transaction(populateDB, transaction_error, populateDB_success);
}

function populateDB(tx) {
 tx.executeSql('DROP TABLE IF EXISTS Registration');
 var sql = "CREATE TABLE IF NOT EXISTS Registration ( "
   + "firstName VARCHAR(50), " + "lastName VARCHAR(50), "
   + "age INTEGER, " + "username VARCHAR(50), "
   + "password VARCHAR(200))";
 tx.executeSql(sql);
 var fname = document.getElementById("fname").value;
 var lname =  document.getElementById("lname").value;
 var age = document.getElementById("age").value;
 var uname =document.getElementById("username").value;
 var pwrd = document.getElementById("psw").value;
 tx.executeSql("INSERT INTO Registration (firstname,lastname,age,username,password) VALUES ('"+ fname +"','"+ lname +"' , "+ age+", '"+ uname +"','"+ pwrd +"' )");
 
}

function transaction_error(tx, error) {
 alert("Database Error: " + error);
}
  
function populateDB_success() {
 dbCreated = true;
 
 // where you want to move
 alert("Successfully inserted");
  window.location="file:///android_asset/www/login.html";
}

login.html

< html>
< head>
< meta charset="utf-8">
< meta name="viewport" content="initial-scale=1.0, user-scalable=no">
< meta name="apple-mobile-web-app-capable" content="yes">
< meta name="apple-mobile-web-app-status-bar-style" content="black">
< title>< /title>

< link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
< script type="text/javascript" src="cordova.js">< /script>
< script type="text/javascript" src="jquery.js">< /script>
< script type="text/javascript" src="iscroll.js">< /script>
< script type="text/javascript" src="jquery.mobile-1.3.2.min.js">< /script>
< script type="text/javascript" src="login.js">< /script>
< /head>

< body>

 
 < div data-role="page" id="page1">
  < div id="header" data-theme="b" data-role="header">
   < h3>Login< /h3>
  < /div>
   < div id="wrapper">
   < form action="" name="mylogin">
  < div data-role="content">
   < div class="username" data-role="fieldcontain">
    < label for="username"> Username < /label> < input name="username"
     id="username" placeholder="enter username" value="" type="text">
   < /div>
   < div class="psw" data-role="fieldcontain">
    < label for="psw"> Password < /label> < input name="password" id="psw"
     placeholder="enter password" value="" type="text">
   < /div>
    < input id="login" value="Login" type="button" name="Login" onclick="validationcheck();">
  < /div>
  < /form>
  < /div>
 < /div>

< script type="text/javascript">
 function validationcheck(){

  if (document.mylogin.username.value == "") {
   alert("Please Enter Username.");
   document.mylogin.username.focus(); 
  } else if (document.mylogin.psw.value == "") {
   alert("Please Enter Password.");
   document.mylogin.psw.focus();
  }
  else
   {
     success();
   }
 }
 
 function success(){
  onDeviceReady();
 }
< /script>
< /body>
< /html>

login.js

var db;
var dbCreated = false;

var scroll = new iScroll('wrapper', {
 vScrollbar : false,
 hScrollbar : false,
 hScroll : false
});
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){
 db = window.openDatabase("RegistrationDB", "1.0", "Registration", 200000);
 if (dbCreated)
  {
      // created
  }
 
 else{
 db.transaction(getregistdata, transaction_error);
 }
}

function getregistdata(tx){
 
  var sql = "select username, password from Registration";
  tx.executeSql(sql, [], getlogin_success);
}

function transaction_error(tx, error) {
 alert("Database Error: " + error);
}

function getlogin_success(tx, results){
   var len = results.rows.length;
   for (var i=0; i< len; i++) {  
    var employee = results.rows.item(i);
    var username=document. getElementById("username").value;
    var password=document. getElementById("psw").value;
    var uname=employee.username;
    var pasw=employee.password;
    alert(username);
    alert(password);
    if(username==uname && password==pasw){
     alert("Login Success");
     break;
    }
    else{
        var status=1;
     }
   }
   
   if(status==1)
    {
       alert("login failed");
    }
}

manifest.xml



    
  
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
        
            
                

                
            
        
        
            
            
        
    





You can download the source code PhoneGapReginDb

Cheers Guys!!!

Comments

  1. Happy diwali
    Sir,
    Please post json, jquery parsing in phonegap

    ReplyDelete
  2. After clicking the register button its doing nothing and console it showing in console it showing file:///android_asset/www/index.html: Line 80 : Uncaught ReferenceError: onDeviceReady is not defined
    please help me out i am new to phonegap and javascript

    ReplyDelete
    Replies
    1. after reloading the app sqlite wont store my data...I'm using the same credentials that i used while registering but i get error msg 'login failed' every time. Please help

      Delete
  3. after reloading the app sqlite wont store my data...I'm using the same credentials that i used while registering but i get error msg 'login failed' every time. Please help

    ReplyDelete
  4. All the codes are working fine. Thank you so much sir. but i have one doubt , how to know database file.? where it is located.? can u please reply me.

    ReplyDelete
  5. I want to show all database values in new page. how to do that one.?

    ReplyDelete
  6. Can you make sure we can download the files. The link currently provided is a dead link :-)

    ReplyDelete
  7. Download link for source code does not work. Could you fix that please?

    ReplyDelete
  8. also
    Download link for source code does not work. Could you fix that please?

    ReplyDelete
  9. Sunil

    Which IDE you are using to write the codes.

    Thanks

    Arif

    ReplyDelete
  10. Sir we need to change any correction in androidManifest.XML file??I'm a begineerc sir

    ReplyDelete

Post a Comment

Popular posts from this blog

Getting data from db and show in listview in Android Apache Cordova

Get Current Location and load on GoogleMap