2 marca 2017

SQLite w Phonegap

Kategoria: Android, JavaScript, SQL Autor: FX

SQL na telefonie komórkowym? Baza danych SQLite została przeznaczona do takich zastosowań, pytanie brzmi jak jej używać z biblioteką PhoneGAP umożliwiającą pisanie aplikacji mobilnych w HTML + CSS + JavaScript. Do tego zestawu języków dołączamy SQL.

Aplikacja wymaga:
1. Pliku cordova.js z pakietu PhoneGAP
2. Załączenia biblioteki jQuery z lokalnego dysku (nie z Internetu).
Kompilujemy spakowany .ZIP z index.html, cordova.js i jquery.min.js na stronie:Adobe
index.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
        <head>
                <meta name="viewport" content="width=default-width; user-scalable=no" />
                <meta http-equiv="Content-type" content="text/html;charset=utf-8">
                <title>Phonegap SQLite</title> 
                <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
                <script type="text/javascript" charset="utf-8" src="jquery.min.js"></script>
                <script type="text/javascript" charset="utf-8">
var db;
var shortName = 'BazaFX';
var version = '1.0';
var displayName = 'BazaFX';
var maxSize = 65535;

// wywoływana kiedy pojawi się błąd w połączeniu do bazy:
function errorHandler(transaction, error) {
   alert('Błąd: ' + error.message + ' kod błędu: ' + error.code);
}

// Funkcja wywoływana po udanej transakcji z bazą
function successCallBack() {
   alert("Debuger: sukces!");
}

function nullHandler(){};

//Funkcja wywoływana po starcie apki
$(document).ready(function() {
    if (!window.openDatabase) {
       alert('Twoje urządzenie nie obsługuje SQLite!');
       return;
    }
    db = openDatabase(shortName, version, displayName,maxSize); //tworzy połączenie z bazą
    db.transaction(function(tx){ //wykonuje SQL
    // tx.executeSql( 'DROP TABLE User',nullHandler,nullHandler);
    tx.executeSql( 'CREATE TABLE IF NOT EXISTS User(UserId INTEGER NOT NULL PRIMARY KEY, FirstName TEXT NOT NULL, LastName TEXT NOT NULL)',[],nullHandler,errorHandler);},errorHandler,successCallBack);
});

function ListDBValues() {
 if (!window.openDatabase) {
  alert('To urządzenie nie obsługuje SQLite!');
  return;
 }
 $('#lbUsers').html(''); //wyczyszczenie wcześniejszej zawartości
 db.transaction(function(transaction) {
   transaction.executeSql('SELECT * FROM User;', [],
     function(transaction, result) {
      if (result != null && result.rows != null) {
        for (var i = 0; i < result.rows.length; i++) {
          var row = result.rows.item(i);
          $('#lbUsers').append('<br>' + row.UserId + '. ' +row.FirstName+ ' ' + row.LastName);
        }
       }
     },errorHandler);
 },errorHandler,nullHandler);
 return;
}

function AddValueToDB() {
 if (!window.openDatabase) {
   alert('To urządzenie nie obsługuje SQLite!');
   return;
 }

 db.transaction(function(transaction) {
   transaction.executeSql('INSERT INTO User(FirstName, LastName) VALUES (?,?)',[$('#imie').val(), $('#nazwisko').val()],
     nullHandler,errorHandler);
   });
 ListDBValues();
 return false;
}
</script>
</head>
<body>
 <h1>SQLite przykład bazy danych</h1>
 <input id="imie" type="text" placeholder="Imię"><br>
 <input id="nazwisko" type="text" placeholder="Nazwisko"><br>
 <input type="button" value="Dodaj do bazy" onClick="AddValueToDB()"><br>
 <input type="button" value="Odśwież" onClick="ListDBValues()"><br>
 <br>
 <span style="font-weight:bold;">Wartości zapisane w bazie:</span>
 <span id="lbUsers"></span>
 </body>
</html>

Komentowanie wyłączone.