ionic-sqlite-tutorial-with-example
ionic-sqlite-tutorial-with-example
ionic-sqlite-tutorial-with-example

Introduction

So, you want to integrate SQLite with Ionic? Let’s start the tutorial without wasting our time.

we’re going to create a simple to-do list app with ionic and SQLite, for that, we need a create database. before creating a database, we need to do some prerequisites such as creating a new ionic project (you can also use your old projects) and adding plugins.

Installation

Let’s create a new ionic project, then add the required platform and plugins.

ionic start todolist blank
cd todolistionic cordova platform add android
ionic cordova platform add iosionic cordova plugin add cordova-sqlite-storage
npm install –save @ionic-native/sqlite

Once you added plugin, we need to declare our plugin inside app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { SQLite } from '@ionic-native/sqlite';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    SQLite,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Once you have declared inside app.module.ts, we can start writing code.

Let’s create a button on header (home.html) for creating database and table & createDB function on home.ts

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic SQLite TODO
    </ion-title>
    <ion-buttons end>
      <button ion-button (click)="createDB()">Create</button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
createDB(){
    this.sqlite.create({
      name: 'codesundar',
      location: 'default'
    }).then( (db:SQLiteObject) => {
      
      this.dbConnection = db;
      this.dbConnection.executeSql("CREATE TABLE IF NOT EXISTS datatable (todo VARCHAR(32))", []).then(
        (success) => { console.log("Table created")
        this.readData()
      },
        (err) => { console.log("Issue with creating table")}
      );
    }).catch( err =>{
      console.log('Error in creating DB', err)
    })
  }

Once you have created these, we can able to create a new database on your device called codesundar. then it’ll create a table called datatable

Now, we create a text input for receiving data from user & insert into the database.

<ion-list>
    <ion-item>
      <ion-input type="text" [(ngModel)]="todoInput"></ion-input>
      <button ion-button item-right (click)="insert()">Add</button>
    </ion-item>
  </ion-list>
insert(){
    this.dbConnection.executeSql("INSERT INTO datatable VALUES (?)", [this.todoInput]).then(
      (success) => {
        console.log("Inserted");
        this.readData();
      },
      (err) => { console.log("Error insert") }
    )
  }

Let’s create a function to read data from table & display into user’s input

readData(){
    this.dbConnection.executeSql("SELECT * FROM datatable",[]).then( (data)=>{
      let tmp = [];
      for(let i=0; i<data.rows.length; i++){
        tmp.push(data.rows.item(i).todo)
      }
      this.todoList = tmp;

    }).catch( err => console.log(err));
  }

That’s it.

Download ionic SQLite example

You can download the latest source code for ionic SQLite tutorial here.

Please login to download the latest source code

To avoid spam user, we only have social login • we do not post anything on your wall


Secured • No Spam