Ionic Framework : วิธีใช้งาน SQLite ทำฐานข้อมูลบน แอปมือถือ

Mobile Application Developing- Android, iOS, Window Phone สอนเขียนโปรแกรมบนมือถือ ระบบปฏิบัติการต่าง แอนดรอยด์ ไอโอเอส วินโดโฟน สอนเขียนโปรแกรมบนมือถือ

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
thatsawan
PHP VIP Members
PHP VIP Members
โพสต์: 28508
ลงทะเบียนเมื่อ: 31/03/2014 10:02 am
ติดต่อ:

Ionic Framework : วิธีใช้งาน SQLite ทำฐานข้อมูลบน แอปมือถือ

โพสต์ที่ยังไม่ได้อ่าน โดย thatsawan »

1. สร้างโปรเจค ionic ตัวอย่างจะเป็นโปรเจคเปล่าๆ

โค้ด: เลือกทั้งหมด

ionic start IonicProject blank
cd IonicProject
ionic platform add android

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

โค้ด: เลือกทั้งหมด

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 เเบบนี้

โค้ด: เลือกทั้งหมด

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

โค้ด: เลือกทั้งหมด

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

โค้ด: เลือกทั้งหมด

 <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 1614 times
4.สร้าง controller ทดสอบ

โค้ด: เลือกทั้งหมด

     <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

โค้ด: เลือกทั้งหมด

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

โค้ด: เลือกทั้งหมด

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 1614 times
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 80