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