Login
Membuat CRUD menggunakan phonegap cordova dan sqlite

Membuat CRUD menggunakan phonegap cordova dan sqlite

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; }

Javascript

// 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'; }

Demo+Tutorial