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!!!