Monday, February 22, 2016

Continue... PhoneGap Demo Project For Beginner - Sqlite DB connetion

iii) Sqlite DB connetion

1. Now to use Sqlite in PhoneGap first we need to install it by following command.
npm i cordova-sqlite-storage

2. then add plugin in project directory by following command

D:\>cordova plugin add cordova-sqlite-storage



3. No Create new Html File "JoinUs.html" You can Download this File here and paste that file in project "www" directory where the index.html is present. 

4. Now Modify "Home.js" file and Update JoinUs() funtion
$scope.JoinUs = function()
    {      
 //alert('Hello World');
 window.location = "joinUs.html"
 
    };

You Can Download Home.js File here.
Now it will look like below

iv) Ajax Request

1. Now For Ajax we will create on button that will call some ajax data for that add Below code in "JoinUs.html" File

          <div class="cl_div_submit">
<label>Ajax Data :{{lbltime}}</label>
                 <br/>
                <button  ng-click="ajaxReqs()">Ajax</button>
            </div>
2. Now we need to add base domain name of ajax request URL for eg here Ajax Get request is https://httpbin.org/get so we need to add that under <head> tag in "JoinUs.html" file as show below

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://httpbin.org 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

3. Now We need to Add ajaxReqs() this funtion in Home.js file

$scope.ajaxReqs = function()
    {
         var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
              data1 = xhttp.responseText;
                $scope.lbltime = xhttp.responseText;
$scope.$apply();//To refresh the page
                //alert('ajax Data '+$scope.lbltime);
            }
          };
          xhttp.open("GET", "https://httpbin.org/get", true);
          xhttp.send();
          
     };

You Can Download Complete Project Here

Here I end this demo project Tutorial..............
Thanks...




1 comment:

  1. Thanks for sharing this informative knowledge about phone-gap demo project, Before reading this blog, I have no ideas about these types of phonegap App development code.

    ReplyDelete