Flutter adalah framework yang semakin populer untuk pengembangan aplikasi mobile yang terus dikembangkan oleh google. Salah satu aspek penting dalam pengembangan aplikasi adalah koneksi ke database. Dalam artikel ini, kita akan membahas cara menghubungkan Flutter dengan MySQL, baik di localhost di komputer atau laptop lokal maupun server online, sehingga Anda dapat menyimpan dan mengambil data dengan efisien.
Sebelum memulai, pastikan Anda telah menginstal Flutter dan membuat proyek baru. Jika Anda ingin menggunakan localhost, instal XAMPP atau MAMP untuk mengatur server MySQL. Untuk server online, pilih penyedia hosting yang mendukung MySQL.
Pastikan juga anda sudah membuat folder dengan nama img di direktori project atau hosting anda lalu menambahkan upload photo sepatu.jpg dan kemeja.jpg, karena data di mysql nya ada 2 yaitu sepatu dan kemeja, untuk photo sepatu dan kemejanya bebas terserah anda.
I. Menghubungkan flutter dengan Mysql di localhost
1.Membuat database dan table di Mysql
Pertama kita akan mengaktifkan xampp lalu aktifkan Apache dan MySQL lalu membuat database di phpmyadmin dengan nama db_shop, dengan perintah ” CREATE DATABASE `db_shop` ” lalu buat table dengan nama product dengan perintah SQL :
CREATE TABLE `product` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nama` varchar(50) NOT NULL,
`photo` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=utf8
lalu kita akan menambahkan 2 data kedalam table product dengan menggunakan perintah SQL :
INSERT INTO `product` (`id`, `nama`, `photo`) VALUES
(1, ‘sepatu’, ‘sepatu.jpg’),
(2, ‘kemeja’, ‘kemeja.jpg’);
2. Membuat file koneksi kedatabase MySQL
Kita akan membuat folder baru di htdocs dengan nama apiflutter lalu buat file dengan nama config.php
isi config.php dengan kode dibawah ini
<?php
$conn = new mysqli("localhost", "root", "", "db_shop");
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
header('Content-Type: application/json');
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
$sql = "SELECT * FROM product";
$result = $conn->query($sql);
$users = array();
while($row = $result->fetch_assoc()) {
$users[] = $row;
}
echo json_encode($users);
}
$conn->close();
?>
Lalu kita akan coba menjalankan config.php di browser dengan URL http://localhost/apiflutter/config.php jika berhasil akan kelihatan seperti gambar dibawah ini
File koneksi sudah berhasil kita buat.
3. Membuat project baru di Flutter
Sekarang kita akan membuat project baru di flutter, buka VScode lalu buka terminal lalu masuk ke direktori D, saya membuat projectnya di D:\FLUTTER\ jadi sesuaikan dengan project anda masing-masing. setelah masuk ke direktori D:\FLUTTER\ di terminal ketikan flutter create koneksikelokal untuk membuat project baru dengn nama koneksikelokal, tunggu proses pembuatan project flutter selesai.
Untuk menghubungkan Flutter dengan MySQL, kita perlu menggunakan paket http untuk melakukan permintaan API. Tambahkan paket ini di file pubspec.yaml:
dependencies:
http: ^0.13.3
Buka main.dart yang berada di folder lib lalu ganti dengan kode dibawah ini
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: UserPage(),
);
}
}
class UserPage extends StatefulWidget {
@override
_UserPageState createState() => _UserPageState();
}
class _UserPageState extends State<UserPage> {
List productdata = [];
@override
void initState() {
super.initState();
fetchUsers();
}
Future<void> fetchUsers() async {
final response =
await http.get(Uri.parse('http://192.168.18.81/apiflutter/config.php'));
if (response.statusCode == 200) {
setState(() {
productdata = json.decode(response.body);
});
} else {
throw Exception('Failed to load users');
}
}
Future<void> addUser(String nama, String photo) async {
final response = await http.post(
Uri.parse('http://192.168.18.81/apiflutter/config.php'),
body: {'name': nama, 'email': photo},
);
if (response.statusCode == 200) {
fetchUsers(); // Refresh user list
} else {
throw Exception('Failed to add user');
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Product')),
body: Column(
children: [
Container(
color: Colors.grey,
height: 30,
child: Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 100,
height: 20,
child: Center(
child: Text('NAMA'),
),
),
Container(
width: 100,
height: 20,
child: Center(
child: Text('PHOTO'),
)),
],
)),
),
Expanded(
child: ListView.builder(
itemCount: productdata.length,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
width: 100,
height: 50,
child: Center(
child: Text(productdata[index]['nama']),
),
),
SizedBox(
width: 100,
height: 50,
child: Center(
child: Image.network(
'http://192.168.18.81/apiflutter/img/' +
productdata[index][
'photo'], // Ganti ID sesuai gambar yang diinginkan
loadingBuilder:
(context, child, loadingProgress) {
if (loadingProgress == null) {
return child; // Jika gambar sudah selesai dimuat
} else {
return Center(
child: CircularProgressIndicator(
value: loadingProgress
.expectedTotalBytes !=
null
? loadingProgress
.cumulativeBytesLoaded /
(loadingProgress
.expectedTotalBytes ??
1)
: null,
),
);
}
},
errorBuilder: (context, error, stackTrace) {
return Center(
child: Text('Error loading image'));
},
),
),
),
],
)
],
));
},
),
),
],
),
);
}
}
lalu save, setelah itu kita akan coba menjalankan aplikasi yang kita buat dengan klik menu Run lalu klik start debugging tunggu proses launching berlangsung sampai selesai, jika berhasil akan tampak seperti gambar dibawah ini.
II. Menghubungkan flutter dengan Mysql di Server Online atau Hosting
1. Membuat database dan table di MySQL hosting provider
Masuk ke cpanel hosting anda lalu buat database baru, user baru beserta passwordnya kemudian buka phpMyadmin untuk membuat table product dengan field sebagai berikut
CREATE TABLE `product` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nama` varchar(50) NOT NULL,
`photo` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=utf8
setelah itu kita tambahkan 2 data baru ke table product dengan menggunakan perintah SQL :
INSERT INTO `product` (`id`, `nama`, `photo`) VALUES
(1, ‘sepatu’, ‘sepatu.jpg’),
(2, ‘kemeja’, ‘kemeja.jpg’);
2. Buat file config.php
buatlah file config.php di folder public_html, file ini berguna untuk melakan koneksi ke database MySQL
PERHATIAN :
- root diganti dengan nama user database
- password_user diganti password user database
- db_shop diganti nama database anda
<?php
$conn = new mysqli(“localhost”, “root”, “password_user”, “db_shop”);
if ($conn->connect_error) {
die(“Connection failed: ” . $conn->connect_error);
}
header(‘Content-Type: application/json’);
if ($_SERVER[‘REQUEST_METHOD’] === ‘GET’) {
$sql = “SELECT * FROM product”;
$result = $conn->query($sql);
$users = array();
while($row = $result->fetch_assoc()) {
$users[] = $row;
}
echo json_encode($users);
}
$conn->close();
?>
kemudian kita akan coba akses file config.php lewat browser dengan URL http://nama_domain.com/config.php ganti nama_domain.com dengan nama domain anda.
jika berhasil akan muncul seperti gambar dibawah
3. Create new project di Flutter
Buat project baru di flutter, buka VScode lalu buka terminal lalu masuk ke direktori D, saya membuat projectnya di D:\FLUTTER\ jadi sesuaikan dengan project anda masing-masing. setelah masuk ke direktori D:\FLUTTER\ di terminal ketikan flutter create koneksikeonline untuk membuat project baru dengn nama koneksikeonline, tunggu proses pembuatan project selesai.
Untuk menghubungkan Flutter dengan MySQL yang dihosting server, kita perlu menggunakan paket http untuk melakukan permintaan API. Tambahkan paket ini di file pubspec.yaml:
dependencies:
http: ^0.13.3
Buka main.dart yang berada di folder lib lalu ganti dengan kode dibawah ini
Perhatian :
- Ganti nama_domainku.com dengan nama domain anda
- buat folder img di public_html dan upload photo sepatu.jpg dan kemeja.jpg sesuai dengan data product yang telah kita masukan.
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: UserPage(),
);
}
}
class UserPage extends StatefulWidget {
@override
_UserPageState createState() => _UserPageState();
}
class _UserPageState extends State<UserPage> {
List productdata = [];
@override
void initState() {
super.initState();
fetchUsers();
}
Future<void> fetchUsers() async {
final response =
await http.get(Uri.parse('http://nama_domainku/config.php'));
if (response.statusCode == 200) {
setState(() {
productdata = json.decode(response.body);
});
} else {
throw Exception('Failed to load users');
}
}
Future<void> addUser(String nama, String photo) async {
final response = await http.post(
Uri.parse('http://nama_domainku.com/config.php'),
body: {'name': nama, 'email': photo},
);
if (response.statusCode == 200) {
fetchUsers(); // Refresh user list
} else {
throw Exception('Failed to add user');
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Product')),
body: Column(
children: [
Container(
color: Colors.grey,
height: 30,
child: Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 100,
height: 20,
child: Center(
child: Text('NAMA'),
),
),
Container(
width: 100,
height: 20,
child: Center(
child: Text('PHOTO'),
)),
],
)),
),
Expanded(
child: ListView.builder(
itemCount: productdata.length,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
width: 100,
height: 50,
child: Center(
child: Text(productdata[index]['nama']),
),
),
SizedBox(
width: 100,
height: 50,
child: Center(
child: Image.network(
'http://nama_domainku.com/img/' +
productdata[index][
'photo'], // Ganti ID sesuai gambar yang diinginkan
loadingBuilder:
(context, child, loadingProgress) {
if (loadingProgress == null) {
return child; // Jika gambar sudah selesai dimuat
} else {
return Center(
child: CircularProgressIndicator(
value: loadingProgress
.expectedTotalBytes !=
null
? loadingProgress
.cumulativeBytesLoaded /
(loadingProgress
.expectedTotalBytes ??
1)
: null,
),
);
}
},
errorBuilder: (context, error, stackTrace) {
return Center(
child: Text('Error loading image'));
},
),
),
),
],
)
],
));
},
),
),
],
),
);
}
}setelah itu jalankan aplikasi flutter kita dan jika berhasil akan tampak seperti gambar dibawah ini:
Kesimpulan
Menghubungkan Flutter dengan MySQL di localhost dan server online memerlukan langkah-langkah yang jelas. Dengan menggunakan API berbasis PHP, Anda dapat mengelola data dengan mudah dan menyajikannya dalam aplikasi Flutter Anda. Dengan mengikuti panduan ini, Anda kini memiliki dasar yang kuat untuk mengembangkan aplikasi berbasis data yang lebih kompleks.
Demikian tutorial menghubungkan aplikasi flutter dengan database di localhost dan server hosting online, semoga bermanfaat.