· 6 years ago · Oct 28, 2019, 08:58 AM
1<template>
2<div class="page" data-name="about">
3 <div class="navbar">
4 <div class="navbar-inner sliding">
5 <div class="left">
6 <a href="#" class="link back">
7 <i class="icon icon-back"></i>
8 <span class="if-not-md">Back</span>
9 </a>
10 </div>
11 <div class="title">About</div>
12 </div>
13 </div>
14 <div class="page-content">
15 <div class="block-title">About My App</div>
16 <div class="block block-strong">
17 <div class="block">
18 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
19
20
21 <meta name="viewport" content="width=default-width; user-scalable=no" />
22 <meta http-equiv="Content-type" content="text/html;charset=utf-8">
23 <title>Phonegap SQLite</title>
24 <script type="text/javascript" charset="utf-8" src="C:\Users\egzamin\Desktop\wszystkie pliki uczniow\Matyv2\f7\src\js\cordova.js"></script>
25 <script type="text/javascript" charset="utf-8" src="C:\Users\egzamin\Desktop\wszystkie plik uczniow\Matyv2\f7\src\js\jquery.min.js"></script>
26 <script type="text/javascript" charset="utf-8">
27var db;
28var shortName = 'BazaFX';
29var version = '1.0';
30var displayName = 'BazaFX';
31var maxSize = 65535;
32
33// wywoływana kiedy pojawi się błąd w połączeniu do bazy:
34function errorHandler(transaction, error) {
35 alert('Błąd: ' + error.message + ' kod błędu: ' + error.code);
36}
37
38// Funkcja wywoływana po udanej transakcji z bazą
39function successCallBack() {
40 alert("Debuger: sukces!");
41}
42
43function nullHandler(){};
44
45//Funkcja wywoływana po starcie apki
46$(document).ready(function() {
47 if (!window.openDatabase) {
48 alert('Twoje urządzenie nie obsługuje SQLite!');
49 return;
50 }
51 db = openDatabase(shortName, version, displayName,maxSize); //tworzy połączenie z bazą
52 db.transaction(function(tx){ //wykonuje SQL
53 // tx.executeSql( 'DROP TABLE User',nullHandler,nullHandler);
54 tx.executeSql( 'CREATE TABLE IF NOT EXISTS User(UserId INTEGER NOT NULL PRIMARY KEY, Marka TEXT NOT NULL, Rok TEXT NOT NULL, Przebieg TEXT NOT NULL, Pojemnosc TEXT NOT NULL)',[],nullHandler,errorHandler);},errorHandler,successCallBack);
55});
56
57function ListDBValues() {
58 if (!window.openDatabase) {
59 alert('To urządzenie nie obsługuje SQLite!');
60 return;
61 }
62 $('#lbUsers').html(''); //wyczyszczenie wcześniejszej zawartości
63 db.transaction(function(transaction) {
64 transaction.executeSql('SELECT * FROM User;', [],
65 function(transaction, result) {
66 if (result != null && result.rows != null) {
67 for (var i = 0; i < result.rows.length; i++) {
68 var row = result.rows.item(i);
69 $('#lbUsers').append('<br>' + row.UserId + '. ' +row.Marka+ ' ' + row.Rok +row.Przebieg+ ' ' +row.Pojemnosc+ ' ');
70 }
71 }
72 },errorHandler);
73 },errorHandler,nullHandler);
74 return;
75}
76
77function AddValueToDB() {
78 if (!window.openDatabase) {
79 alert('To urządzenie nie obsługuje SQLite!');
80 return;
81 }
82
83 db.transaction(function(transaction) {
84 transaction.executeSql('INSERT INTO User(Marka, Rok, Przebieg, Pojemnosc) VALUES (?,?)',[$('#Marka').val(), $('#Rok Produkcji').val(),$('#Przebieg').val(),$('#Pojemnosc').val()],
85 nullHandler,errorHandler);
86 });
87 ListDBValues();
88 return false;
89}
90</script>
91
92
93 <h1>SQLite przykład bazy danych</h1>
94 <input id="imie" type="text" placeholder="Marka"><br>
95 <input id="nazwisko" type="text" placeholder="Rok Produkcji"><br>
96 <input id="nazwisko" type="text" placeholder="Przebieg"><br>
97 <input id="nazwisko" type="text" placeholder="Pojemnosc"><br>
98 <input class="col button button-large button-fill button-raised color-green" value="Dodaj do bazy" onClick="AddValueToDB()"><br>
99 <input class="col button button-small button-round button-fill" value="Odśwież" onClick="ListDBValues()"><br>
100 <br>
101 <span style="font-weight:bold;">Wartości zapisane w bazie:</span>
102 <span id="lbUsers"></span>
103 </div>
104 </div>
105</div>
106</div>
107</template>
108<script>
109export default {};
110</script>