Dev to webs {Coding…}

ร บทเรียนฟรีด้านการพัฒนาซอฟต์แวร์ ที่ครอบคลุมเนื้อหาหลากหลาย ตั้งแต่การเขียนโค้ดพื้นฐานไปจนถึงเทคนิคขั้นสูง

การเชื่อมต่อ Flutter กับ MySQL ผ่าน REST API

🔖 หมวดเสริม: การเชื่อมต่อระบบ backend จริงกับแอป Flutter

📌 เหมาะสำหรับ: ผู้ที่ต้องการเชื่อมต่อแอป Flutter กับฐานข้อมูล MySQL ผ่าน API

🎯 เป้าหมาย: เข้าใจการเชื่อม Flutter กับ PHP/MySQL ด้วย HTTP request และ JSON

🧭 เกริ่นนำ

Flutter ไม่สามารถเชื่อมต่อกับฐานข้อมูล MySQL โดยตรง แต่สามารถใช้ PHP หรือ Node.js เขียน REST API เพื่อให้ Flutter ดึงข้อมูลผ่าน HTTP ได้ ซึ่งเป็นแนวทางมาตรฐานในการพัฒนาแอปที่มี backend จริง


🌐 โครงสร้างระบบ

Flutter App <--> REST API (PHP/Node.js) <--> MySQL Database

🛠️ 1. สร้าง REST API ด้วย PHP (ตัวอย่าง)

ไฟล์: get_users.php

<?php
$conn = new mysqli("localhost", "root", "", "flutter_demo");
$result = $conn->query("SELECT id, name, email FROM users");
$data = [];
while ($row = $result->fetch_assoc()) {
  $data[] = $row;
}
echo json_encode($data);
?>

📱 2. เรียก API จาก Flutter

เพิ่ม dependency ใน pubspec.yaml

dependencies:
  http: ^0.13.5

โค้ด Flutter:

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: UserList());
  }
}

class UserList extends StatefulWidget {
  @override
  _UserListState createState() => _UserListState();
}

class _UserListState extends State<UserList> {
  List users = [];

  Future<void> fetchUsers() async {
    final response = await http.get(Uri.parse('http://yourdomain.com/get_users.php'));
    if (response.statusCode == 200) {
      setState(() => users = json.decode(response.body));
    }
  }

  @override
  void initState() {
    super.initState();
    fetchUsers();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Users from MySQL')),
      body: ListView.builder(
        itemCount: users.length,
        itemBuilder: (ctx, i) => ListTile(
          title: Text(users[i]['name']),
          subtitle: Text(users[i]['email']),
        ),
      ),
    );
  }
}

✅ สรุป

  • Flutter สื่อสารกับ MySQL ผ่าน REST API เท่านั้น
  • API ฝั่ง PHP รับผิดชอบ query และส่ง JSON กลับ
  • Flutter ใช้ http package รับข้อมูลมาแสดงผล

หากต้องการต่อยอด: เพิ่ม insert/update, auth, JWT, pagination ฯลฯ ได้เลยครับ!