Page 1 of 1

Ionic Framework : วิธีใช้งาน SQLite

Posted: 11/07/2016 12:34 am
by thatsawan
1. สร้างโปรเจค ionic ตัวอย่างจะเป็นโปรเจคเปล่าๆ

Code: Select all

ionic start IonicProject blank
cd IonicProject
ionic platform add android

2. ติดตั้ง Cordova-SQLitePlugin

Code: Select all

cordova plugin add https://github.com/brodysoft/Cordova-SQLitePlugin.git 
3. จำเป็นต้องใช้ ng-cordova.min.js
ดาวน์โหลดได้ที่ https://github.com/driftyco/ng-cordova/ ... master.zip
เมื่อดาวน์โหลดเสร็จเเล้วเปิดไฟล์ index.html ขึ้นมาเเล้วเรียกใช้งาน

ถ้าดาวน์โหลดโดยใช้ command จะได้ path เเบบนี้

Code: Select all

 <script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
ถ้าดาวน์โหลดไฟล์มาเอาเฉพาะไฟล์ ng-cordova.min.js เรียกใช้งาน เราสามารถ copy ไฟล์มาวางที่ Folder js เเล้วเรียก

Code: Select all

 <script src="js/ng-cordova.min.js"></script>

Code: Select all

 <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>

        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">

        <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
        <link href="css/ionic.app.css" rel="stylesheet">
        -->

        <!-- ionic/angularjs js -->
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="js/ng-cordova.min.js"></script>
        <!-- cordova script (this will be a 404 during development) -->
        <script src="cordova.js"></script>

        <!-- your app's js -->
        <script src="js/app.js"></script>
    </head>
2016-07-11_0-29-08.png
2016-07-11_0-29-08.png (170.75 KiB) Viewed 1109 times
4.สร้าง controller ทดสอบ

Code: Select all

     <ion-content ng-controller="ExampleController">
            <button class="button" ng-click="insert('ddd', 'rong')">insert</button>
            <button class="button" ng-click="select('rong')">select</button>

        </ion-content> 
5.ส่วนของ app.js

Code: Select all

var db = null;

var example = angular.module('starter', ['ionic', 'ngCordova'])
        .run(function ($ionicPlatform, $cordovaSQLite) {
            $ionicPlatform.ready(function () {
                if (window.cordova && window.cordova.plugins.Keyboard) {
                    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
                }
                if (window.StatusBar) {
                    StatusBar.styleDefault();
                }
                    db = $cordovaSQLite.openDB({name: "my.db", iosDatabaseLocation: 'default'});
                $cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS people (id integer primary key, firstname text, lastname text)");
            });
        }); 
ส่วนของการสร้างฐานข้อมูล

6.สร้าง Controller ไว้สำหรับรับค่าตอน click

Code: Select all

example.controller("ExampleController", function ($scope, $cordovaSQLite) {

    $scope.insert = function (firstname, lastname) {
  
        var query = "INSERT INTO people (firstname, lastname) VALUES (?,?)";
        $cordovaSQLite.execute(db, query, [firstname, lastname]).then(function (res) {
            console.log("INSERT ID ---------> " + res.insertId);
        }, function (err) {
            console.error(err);
        });
    }

    $scope.select = function (lastname) {
        var query = "SELECT firstname, lastname FROM people WHERE lastname = ?";
        $cordovaSQLite.execute(db, query, [lastname]).then(function (res) {
            if (res.rows.length > 0) {
                console.log("SELECTED +++++++++++++++++++++++> " + res.rows.item(0).firstname + " " + res.rows.item(0).lastname);
            } else {
                console.log("No results found");
            }
        }, function (err) {
            console.error(err);
        });
    }

}); 
7.วิธีรันเพื่อเเสดงผล Ionic Framework : วิธี debug SQlite (adb logcat)
https://www.mindphp.com/forums/viewtopic ... 98&t=34352

8.ผลที่ได้
2016-07-11_0-33-28.png
2016-07-11_0-33-28.png (249.02 KiB) Viewed 1109 times