การเชื่อมต่อ Mobile Application กับ ฐานข้อมูล MySql นั้นถือว่าเป็นเรื่องที่สำคัญมากในการพัฒนา Mobile Application เพราะการจะทำ Application ให้เป็นแบบ online ได้นั้นเราจำเป็นต้องมีการเก็บข้อมูลไว้ในโปรแกรมจัดการฐานข้อมูลที่อยู่บน Server การที่ที่จะ ในที่นี้จะเป็นตัวอย่างการพัฒนา Mobile Application ที่ดึงข้อมูลมาจาก MySql โดย ใช้ Ionic Framework version 2
- Ionic Frame คือ Framework สำหรับพัฒนา Mobile Application ที่ทำงานได้ทั้งบนระบบปฎิบัติการ
Android และ IOS หรือที่เรียกว่า cross platform development
- สำหรับการ Install ionic framework สามารถ
ดูได้ที่นี่
- สำหรับการ สร้างหน้า และการเชื่อต่อหน้าใน ionic2 สามารถ
ดูได้ที่ที่นี่
โดยในบทความนี้ จะเป็นการเขียนต่อจากบทความที่แล้ว คือ
การเชื่อมต่อหน้าใน ionic2
1. เตรียมโปรแกรมดึงข้อมูลจาก MySQL ทางฝั่ง Server ชื่อ ไฟล์ index.php
<?php
//ให้โปรแกรมเรียกจากฝั่ง Client ได้
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
header('Content-Type: text/html; charset=utf-8');
//ให้ใช้ ภาษาไทยได้
//ตรวจสอบ username password
$dbUname="root";
$dbPword="";
$dbHost="localhost";
$dbName="rsi";
$link=mysqli_connect($dbHost,$dbUname,$dbPword,$dbName);
//ให้ใช้ ภาษาไทยได้
mysqli_query($link,'SET CHARACTER SET utf8');
mysqli_query($link,'SET collation_connection = "utf8_unicode_ci"');
//ส่งคำสั่งให้ mysql ทำงาน
$result=mysqli_query($link,"SELECT stock_name FROM stock");
//ตัวแปร $result เก็บผลลัพธ์ของคำสั่ง sql
//ส่งข้อมูลไปให้ฝั่ง Mobile ในรูปแบบ JSON
while($row = $result->fetch_array(MYSQL_ASSOC)) {
$myArray[] = $row;
}
echo json_encode($myArray);
//ปิดการเชื่อมต่อ mysql
mysqli_close($link);
?>
2. แก้ Code interface ในไฟล์ p1.html ที่อยู่ใน folder pages เฉพาะในส่วนของ
<ion-content></ion-content>
ดังนี้
<ion-content >
<ion-list>
<ion-item>
<ion-label>Stock name</ion-label>
<!-- สร้าง Select Controller ชื่อ stock_name -->
<ion-select
[(ngModel)]="stock_name" okText="ตกลง" cancelText="ยกเลิก" multiple="true">
<!-- กำหนดให้ตัวเลือกของ Select Controller มาจากแถวข้อมูลใน object ชื่อ data_table -->
<ion-option
*ngFor="let row of data_table" value="{{row.stock_name}}" > {{row.stock_name}}
</ion-option>
</ion-select>
</ion-item>
<div padding>
<!-- สร้างปุ่มเพื่อดูข้อมูลที่เลือกใน select controller และกำหนดให้เมื่อกดปุ่มแล้วทำงานที่
function get_selected_value -->
<button
(click)="get_selected_value()" ion-button block icon-right color="secondary">
View Selected Items
</button>
</div>
</ion-list>
</ion-content>
3. แก้ code typescript ในส่วนที่ควบคุม ในไฟล์ p1.ts ที่อยู่ใน folder pages
import { Component } from '@angular/core';
//ให้สามารถใช้ service http ของ angular ได้
import { Http } from '@angular/http';
//import LoadingController , AlertController เพื่อให้ใช้ หน้าแสดงข้อความรอ และขึ้นกล่องข้อความ
//แจ้งเตือนได้
import { NavController , LoadingController , AlertController} from 'ionic-angular';
@Component({
templateUrl: 'p1.html'
})
export class p1 {
//ประกาศ JSON object สำหรับแสดงข้อมูลใน select controller
public data_table: Array<{stock_name: string}>;
//
public stock_name:string;
constructor(public navCtrl: NavController,public loadingCtrl: LoadingController,public http: Http,public alertCtrl: AlertController) {
//กำหนดให้เมื่อเปิดหน้า app มาทำงาน function load_data() เป็น function แรกที่ทำงาน
this.load_data();
}
load_data() {
// ให้แสดง popup กำลังโหลด
let loading_popup = this.loadingCtrl.create({
content: 'กำลังโหลด...'
});
loading_popup.present();
// url ฝั่ง server ที่ดึงข้อมูลจาก mysql
var link = "http://localhost/ionic_http/index.php";
var send_data = {};
//เชื่อต่อกับ mysql server โดยส่งข้อมูลแบบ post
this.http.post(link, send_data)
.subscribe(response => {
loading_popup.dismiss();
//เมื่อโหลดเสร็จแล้วให้ปิด popup
// นำข้อมูลจาก mysql มาแสดงในตัวเลือกของ select controller
this.data_table=JSON.parse(response["_body"]);
}, error => {
});
}
//function ดูว่าผู้ใช้เลือกตัวเลือกใน select controller ตัวไหนบ้าง
get_selected_value()
{
//สร้างกล่องข้อความแจ้งเตือน
let alert = this.alertCtrl.create({
title: 'รายการที่เลือก',
subTitle: this.stock_name,
//แสดงข้อมูลที่เลือกใน select controller
buttons: ['ตกลง']
//ให้ปุ่มแสดง text คำว่า ตกลง
});
alert.present();
//แสดงกล่องข้อความแจ้งเตือน
}
}
ผลลัพธ์ที่ได้คือ
เมื่อเลือก และกดปุ่ม view select items
แสดงกล่องข้อความ item ที่เลือก
