Hi Friends,
I am going to explain how to create database , insert values into tables,retrive value them using android and phonegap.
Environment :
1) Require to install android sdk.
2) Add PhoneGap plugin for Eclipse.
Example : Database CRUD Example using Android and Phonegap.
Step 1:
create a new phonegap project name it as DataBase,package name as com.sree.database.
Step 2:
now create a new file and name it as database.js as we need to write our java script functions in this file.
Step 3 :
now write the following functions in the java script file.
populateDB(tx){I am going to explain how to create database , insert values into tables,retrive value them using android and phonegap.
Environment :
1) Require to install android sdk.
2) Add PhoneGap plugin for Eclipse.
Example : Database CRUD Example using Android and Phonegap.
Step 1:
create a new phonegap project name it as DataBase,package name as com.sree.database.
Step 2:
now create a new file and name it as database.js as we need to write our java script functions in this file.
Step 3 :
now write the following functions in the java script file.
function
tx.executeSql(
'DROP TABLE IF EXISTS DEMO');
tx.executeSql(
'CREATE TABLE IF NOT EXISTS DEMO(id unique,data)');
tx.executeSql(
'INSERT INTO DEMO(id,data) VALUES (1,"First Row")');
tx.executeSql(
'INSERT INTO DEMO(id,data) VALUES (2,"SECOND ROW")');Explanation :
executeSql function is used to execute sql statements using tx object.
the above function drops table demo if it is allready exists then crteates table demo if not allready exists and stores id and data values.and inserts some data into demo table.
function
errorCB(err){
console.log(
"Error processing SQL:" + err.code);
document.getElementById(
'sql-result').innerHTML = "<STRONG>Error processing SQL: " + err.code + "</STRONG>";}if there is any error like not creating database or any syntax errors will be displayed in the console with sql error.
function
successCreateCB(){
console.log(
"Database has been created successfully");
document.getElementById(
'sql-result').innerHTML = "<STRONG>DATABASE HAS BEEN CREATED SUCCESSFULLY</STRONG>"; }if it is created successfully then it shows database has been created successfully.
var
db=0;
function
createDB(){
db=window.openDatabase(
"Database","1.0","PhoneGap Training",200000);
}
db.transaction(populateDB,errorCB,successCreateCB);
if you want to create database use the above function.
function
querySuccess(tx,results){
console.log(
"Rows Effected = "+ results.rowEffected);
console.log(
"No of Rows = " + results.rows.length);
document.getElementById(
'sql-result').innerHTML = ("<STRONG>number of rows" + results.rows.length + "</STRONG>");the above function give number of rows inserted.
function
queryDB(tx){
tx.executeSql(
'SELECT * FROM DEMO',[],querySuccess,errorCB);
}
The above function is used to retrive all rows and columns from the table.
function
getSqlResultSet(){
db=window.openDatabase(
"Database","1.0","PhoneGap Training",200000);
}
db.transaction(queryDB,errorCB);
}to retrive the sql result set use the above function.
function
writeLocalStorage(){
window.localStorage.setItem(
"myKey", "vmSoftTech");
document.getElementById(
'local-storage-result').innerHTML = "Wrote key: <strong>" + keyname + "</strong>";}As phonegap supports localstorage we can write values to local storage using the above method.
function
readLocalStorage(){
document.getElementById(
'local-storage-result').innerHTML = "<strong>Null</strong> - Try Write first";
}
else{
document.getElementById(
'local-storage-result').innerHTML =
}
}As phonegap supports localstorage we can read values from localstorage using the above method.
function
removeItemLocalStorage(){
window.localStorage.removeItem(
"myKey");
document.getElementById(
'local-storage-result').innerHTML = "Removed key/value: <strong>myKey/vmSoftTech</strong>";}we can also remove localstorage item using the above function.
Step 4 :
now we edit the index.html file and call all the methods above.
<!-- Copyright (c) 2012 Mobile Developer Solutions -->
<!
DOCTYPE HTML>
<
html>
SQL Result:
<br/><span id="sql-result"></span><br/>
Local Storage:
<span id="local-storage-result"></span><br/>
</
html>
step 5 :
now we need to design our screen to look good so create index.css file and insert the following code .
body
{
}
h1,ul,li
{
}
#header
{
}
#subheader
{ display: none; }
#footer
{
}
#sidebar
{
}
#sidebar
ul,#sidebar li {
}
#sidebar
li, #sidebar li a {
}
#scrollable
{
}
#content
{
}
#header
h1, #footer h1 {
}
#footer
h1 {
}
#content
h2 {
}
code
{
}
blockquote
{
}
blockquote
p {
}
blockquote
::before {
}
ul
{
}
ul
>li {
}
ul
ul {
}
a
.btn {
/* float:left; */
}
a
.btn.deux {
}
a
.btn.trois {
}
#deviceinfo
{
}
#deviceinfo
tr th.alt, #deviceinfo tr td.alt {
}
#deviceinfo
, th, td {
}
#deviceinfo
th {
}
#deviceinfo
td, #deviceinfo th {
}
.result-block
{
}
#accel-data
{
}
dl
{
}
dl
> dt{
}
dl
> dd{
}
.api-div
{
}
.api-div
h4 {
}
.api-div
.help {
}
#cameraImage
{
}
#eventOutput
{
}
#map
{
}
@media
screen and (max-width: 320px) and (orientation:portrait) {
}
}
}
}
}
@media
all and (min-width: 800px){
}
}
}
}
}
}
}
}
}
}
}
}
}
@media
all and (min-width: 1200px){
}
}
}
}
}
}
}
Step 6:
finally your javascript file looks like this,
function
populateDB(tx){
tx.executeSql(
'DROP TABLE IF EXISTS DEMO');
tx.executeSql(
'CREATE TABLE IF NOT EXISTS DEMO(id unique,data)');
tx.executeSql(
'INSERT INTO DEMO(id,data) VALUES (1,"First Row")');
tx.executeSql(
'INSERT INTO DEMO(id,data) VALUES (2,"SECOND ROW")');
}
function
errorCB(err){
console.log(
"Error processing SQL:" + err.code);
document.getElementById(
'sql-result').innerHTML = "<STRONG>Error processing SQL: " + err.code + "</STRONG>";
}
function
successCreateCB(){
console.log(
"Database has been created successfully");
document.getElementById(
'sql-result').innerHTML = "<STRONG>DATABASE HAS BEEN CREATED SUCCESSFULLY</STRONG>";
}
var
db=0;
function
createDB(){
db=window.openDatabase(
"Database","1.0","PhoneGap Training",200000);
}
db.transaction(populateDB,errorCB,successCreateCB);
}
function
querySuccess(tx,results){
console.log(
"Rows Effected = "+ results.rowEffected);
console.log(
"No of Rows = " + results.rows.length);
document.getElementById(
'sql-result').innerHTML = ("<STRONG>number of rows" + results.rows.length + "</STRONG>");
}
function
queryDB(tx){
tx.executeSql(
'SELECT * FROM DEMO',[],querySuccess,errorCB);
}
function
getSqlResultSet(){
db=window.openDatabase(
"Database","1.0","PhoneGap Training",200000);
}
db.transaction(queryDB,errorCB);
}
function
writeLocalStorage(){
window.localStorage.setItem(
"myKey", "vmSoftTech");
document.getElementById(
'local-storage-result').innerHTML = "Wrote key: <strong>" + keyname + "</strong>";
}
function
readLocalStorage(){
document.getElementById(
'local-storage-result').innerHTML = "<strong>Null</strong> - Try Write first";
}
else{
document.getElementById(
'local-storage-result').innerHTML =
}
}
function
removeItemLocalStorage(){
window.localStorage.removeItem(
"myKey");
document.getElementById(
'local-storage-result').innerHTML = "Removed key/value: <strong>myKey/vmSoftTech</strong>";}
very very helpful........excellent work....keep up the good work
ReplyDeletevery very thank you sir i am looking for kind of tutorial from long time thank you and please keep on posting phone gap tutorial
ReplyDeleteVery nice post, It will be very useful. Otherwise, I have no clear where the database that is created by phonegap is stored? The database is stored at device File System or at memory? the database created depends on the operating system (Android, Windows 8, iOS, ..) or indifferent?
ReplyDeleteKind Regards,
Jordi.
Thanks Sir.....
ReplyDeletenice blog. excellent post. in this blog stor information of student. in this update, delete,edit perform this opration.
ReplyDelete