CRUD phonegap cordova & sqlite

Membuat aplikasi android CRUD menggunakan phonegap cordova dan sqlite langsung di smartphone.

HTML

<!DOCTYPE html>
<html>
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />     

     <!-- CSS -->
     <link type="text/css" rel="stylesheet" href="css/style.css" />
   </head>
   <body>     

     <!-- HTML -->
     <h1>CRUD Mode On ^^</h1>
     <div id="qrpopup" >
       <input type="text" id="editNameBox">
       <input type="text" id="editNumberBox">
       <button onclick="goDelete()">Delete</button>
       <button onclick="goEdit()">Edit</button>
       <button onclick="document.getElementById('qrpopup').style.display='none';">Discard</button>
     </div>
     <div>
       <input type="text" placeholder="Nama" id="txtName">
       <input type="text" placeholder="No." id="txtNumber">
     </div>
     <div id="tblDiv"></div>
     <div style="text-align: center">
       <button onclick="goInsert()">Insert</button>
       <button onclick="goSearch()">Search</button>
       <button onclick="successCB()">Show All</button>
     </div>     

     <!-- JS -->
     <script src="js/cordova.js"></script>
     <script type="text/javascript" charset="utf-8" src="js/app.js"></script>
   </body>
</html>

CSS

html{ 
   background: #ccc;
   background-size: cover;
   height: 100%;
   font-family: Arial, Helvetica, sans-serif;
   color: #777
}

input[type='text'] {
   color:#3c3c3c;
   font-weight:500;
   font-size: 18px;
   border-radius: 0;
   line-height: 22px;
   background-color: #fbfbfb;
   padding: 13px;
   margin-bottom: 10px;
   width:100%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   border: 3px solid rgba(0,0,0,0);
}

input[type='text']:focus{
   background: #fff;
   box-shadow: 0;
   border: 3px solid #3498db;
   color: #3498db;
   outline: none;
   padding: 13px;
}

table {
  width: 100%;
  margin-bottom: 20px
}

table, th, td {
  border: 1px solid #999;
  border-collapse: collapse;
}

th, td {
  padding: 10px;
  text-align: left;
}

table#t01 tr:nth-child(even) {
  background-color: #eee;
}

table#t01 tr:nth-child(odd) {
  background-color: #fff;
}

table#t01 th {
  background-color: #333;
  color: #fff;
}

button {
   float:left;
   width: 100%;
   border: #fbfbfb solid 4px;
   cursor:pointer;
   background-color: #3B8BBA;
   color:white;
   font-size:24px;
   padding-top:22px;
   padding-bottom:22px;
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   transition: all 0.3s;
   margin-top:-4px;
   font-weight:700;
}

button:active {
   background-color: #eee;
}

#qrpopup {
  display: block;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 9999;
  background-color: #333;
  width: 100%;
  height: 100%;
  display: none;
}

JS

// Wait for Cordova to load
document.addEventListener("deviceready", onDeviceReady, false);
var currentRow;
// Populate the database function populateDB(tx) {   tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id INTEGER PRIMARY KEY AUTOINCREMENT, name,number)'); }
// Query the database function queryDB(tx) {   tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB); }
function searchQueryDB(tx) {   tx.executeSql("SELECT * FROM DEMO where name like ('%" + document.getElementById("txtName").value + "%')", [], querySuccess, errorCB);
}
// Query the success callback function querySuccess(tx, results) {   var tblText = '<table id="t01"><tr><th>ID</th> <th>Nama</th> <th>No.</th></tr>';   var len = results.rows.length;   for (var i = 0; i < len; i++) {   var tmpArgs = results.rows.item(i).id + ",'" + results.rows.item(i).name + "','" + results.rows.item(i).number + "'";   tblText += '<tr onclick="goPopup(' + tmpArgs + ');"><td>' + results.rows.item(i).id + '</td><td>' + results.rows.item(i).name + '</td><td>' + results.rows.item(i).number + '</td></tr>';   }   tblText += "</table>";   document.getElementById("tblDiv").innerHTML = tblText; }
//Delete query function deleteRow(tx) {   tx.executeSql('DELETE FROM DEMO WHERE id = ' + currentRow, [], queryDB, errorCB); }
// Transaction error callback function errorCB(err) {   alert("Error processing SQL: " + err.code); }
// Transaction success callback function successCB() {   var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);   db.transaction(queryDB, errorCB); }
// Cordova is ready function onDeviceReady() {   var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);   db.transaction(populateDB, errorCB, successCB); }
//Insert query function insertDB(tx) {   tx.executeSql('INSERT INTO DEMO (name,number) VALUES ("' + document.getElementById("txtName").value + '","' + document.getElementById("txtNumber").value + '")'); }
function goInsert() {   var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);   db.transaction(insertDB, errorCB, successCB); }
function goSearch() {   var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);   db.transaction(searchQueryDB, errorCB); }
function goDelete() {   var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);   db.transaction(deleteRow, errorCB);   document.getElementById('qrpopup').style.display = 'none'; }
//Show the popup after tapping a row in table function goPopup(row, rowname, rownum) {   currentRow = row;   document.getElementById("qrpopup").style.display = "block";   document.getElementById("editNameBox").value = rowname;   document.getElementById("editNumberBox").value = rownum; }
function editRow(tx) {   tx.executeSql('UPDATE DEMO SET name ="' + document.getElementById("editNameBox").value +   '", number= "' + document.getElementById("editNumberBox").value + '" WHERE id = ' + currentRow, [], queryDB, errorCB);
}
function goEdit() {   var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);   db.transaction(editRow, errorCB);   document.getElementById('qrpopup').style.display = 'none'; }

keyboard_arrow_up