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

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

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

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

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

โพสต์โดย thatsawan » 11/07/2016 12:34 am

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) เปิดดู 293 ครั้ง


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 (firstnamelastname) {
  
        var 
query "INSERT INTO people (firstname, lastname) VALUES (?,?)";
        
$cordovaSQLite.execute(dbquery, [firstnamelastname]).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(dbquery, [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)
viewtopic.php?f=198&t=34352

8.ผลที่ได้

2016-07-11_0-33-28.png
2016-07-11_0-33-28.png (249.02 KiB) เปิดดู 293 ครั้ง

ย้อนกลับไปยัง

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

กำลังดูบอร์ดนี้: 2 และ บุคคลทั่วไป 0 ท่าน