Sqlite database tutorial

Hi,
I want to store data in sqlite database with Ionic framework.

Please provide tutorial for using SQLite database.

regards,
suresh

nraboy has released many really good ionic tutorials:

2 Likes

Hi,

I tried with above and i am getting below error when plugin command executed. Do i need to install any thing related git before executing this.
Please provide me details on this like how we can install git command etc.

E:\phonegap\sqliteapp>cordova plugin add https://github.com/brodysoft/Cordova-SQ
LitePlugin.git
Fetching plugin “https://github.com/brodysoft/Cordova-SQLitePlugin.git” via git
clone
Error: Failed to fetch plugin https://github.com/brodysoft/Cordova-SQLitePlugin.
git via git.
Either there is a connection problems, or plugin spec is incorrect:
Error: “git” command line tool is not installed: make sure it is accessi
ble on your PATH.

regards,
suresh

Install Git Bash and add cordova plugin using the git bash command prompt. I had faced the same problem when i try. After that i used git bash command prompt to add plugin. It works.

I installed git bash and git GUI but not understanding what command we need to use for installing abovs plugin. I tried with git command not able to download and it looks i did not given properly.

Please provide full syntax for installing above plugin from git bash.

regards,
suresh

ionic plugin add https://github.com/litehelpers/Cordova-sqlite-storage

Thank you for providing link. Can i run sqlite related app chrome browser also or only we can run on simulator and devices.

regards,
suresh

You can use the plugin to run SQLite in the browser too but you need to just adjust how you open the database, after that you can just use the plugin as normal. I use something like the following in my app controller…

 ionic.Platform.ready(function () {   
     if (window.cordova) {
         db = $cordovaSQLite.openDB({
             name: "your.db",
             location: 2
         });
     } else {
         db = window.openDatabase("your.db", "1.0", "Your App", -1);
     }
 });

Hi,

I tried with above code and i got below error.

Failed to load resource: net::ERR_EMPTY_RESPONSE (10:14:07:015 | error, network)
at http://localhost:8383/sqliteapp/cordova.js
Uncaught TypeError: Cannot read property ‘openDatabase’ of undefined (10:14:07:025 | error, javascript)
at openDB (www/js/ng-cordova.min.js:9:17883)
at (anonymous function) (www/js/app.js:31:25)
at (anonymous function) (www/lib/ionic/js/ionic.bundle.js:53329:19)
at onPlatformReady (www/lib/ionic/js/ionic.bundle.js:2491:24)
at onWindowLoad (www/lib/ionic/js/ionic.bundle.js:2472:7)
Failed to load resource: net::ERR_EMPTY_RESPONSE (10:14:07:045 | error, network)
at http://localhost:8383/favicon.ico

Please suggest me on this.

regards,
suresh

I suspect your not injecting a dependency, look over the tutorial linked by bengtler. Other than that try to get a plnkr, codepen or jsfiddle etc together as without being able to see all the source involved it is difficult to say.

It also occurs to me that you should ensure you inject $ionicPlatform into your controllers/services and that all your database operations are wrapped by the platform ready callback, as also stated in the tutorial linked previously.

$ionicPlatform.ready(function () {
    db stuff here.......
});

Hi Suresh,

Basically Cordova plugins are used for native devices. You cannot debug your cordova application using Browser. Use Emulator to debug your app. When you say window.openDatabase(), It opens HTML 5 Web SQL Database not the SQLite. You can not get the actual result by using window.openDatabase().

When using the Emulator, you can check/view the database file by extracting db file from the file explorer of Emulator’s device monitor.

Regards,
Shakthi

you can check this out:

Its a service that wraps the sqlite service and it works for webSQL and in your device.

Let me know if it helps

1 Like

@AShakthivel Using the different open method, as shown, and no other changes to my ionic app, everything is working 100% for me on device and when testing/debuging in the browser (Chrome).

@A_Burgess Can you tell me the path to get the database file in browser?

Thanks,
Shakthi

It changes depending on your OS…

However simply open the Chrome inspector while running in the browser and click the Resources tab, then you can find it under Web SQL. You can examine the database and issue commands to it at the > prompt when selecting just the db name.

1 Like

I have a concern… If I pass the $scope variables it wont work… instead the plugin wont work and the variable is empty I also tried unbinding the $scope variable but still wont work… instead the code like this

$scope.save = function (query) { $cordovaSqlite.execute(db, query) ...  }

… how can I pass the $scope variable to act as my query instead of putting on the function parameter?

Hi, you can use this full 100% working template that uses SQLite, full documented App here: http://codecanyon.net/item/quizionic-a-quiz-app-template-for-ionic-framework-with-sqlite-database/14205904

See my example: https://github.com/jdnichollsc/Ionic-Starter-Template

Regards, Nicholls

1 Like

And if I want to see all the db structure, like phpMyAdmin or something like that, how can I do?