1. Pendahuluan
Dalam dunia pengembangan aplikasi mobile, Flutter menjadi salah satu framework yang paling populer karena mampu menghasilkan aplikasi cross-platform dengan tampilan modern dan performa tinggi. Tidak hanya itu, Flutter juga fleksibel karena bisa terhubung dengan API untuk mengelola data secara online.
Banyak aplikasi saat ini membutuhkan koneksi ke server, misalnya aplikasi absensi siswa, aplikasi laundry, aplikasi penjualan, atau aplikasi catatan harian. Semua aplikasi tersebut biasanya terhubung ke database melalui API. Dengan API, aplikasi Flutter dapat menyimpan data ke server, membaca data kembali, bahkan melakukan proses CRUD (Create, Read, Update, Delete).
Artikel ini akan membahas secara lengkap, mulai dari mengenal Flutter dan API, membuat database MySQL, membangun API dengan PHP, hingga menghubungkan API ke Flutter. Panduan ini dibuat simpel tapi detail agar mudah dipahami, khususnya untuk pemula.
2. Mengenal Flutter
Flutter adalah framework open-source dari Google untuk membangun aplikasi mobile, web, dan desktop dengan satu basis kode (single codebase). Bahasa pemrograman yang digunakan adalah Dart.
Kelebihan Flutter:
- Cross-platform: satu kode bisa jalan di Android, iOS, bahkan Web.
- UI menarik: menggunakan widget yang dapat dikustomisasi.
- Hot Reload: mempermudah debugging karena perubahan kode langsung terlihat.
- Performa tinggi: karena dikompilasi langsung ke kode native.
Contoh aplikasi yang bisa dibuat dengan Flutter:
- Aplikasi Absensi Online
- Aplikasi E-Commerce
- Aplikasi Catatan Harian
- Aplikasi Laundry
3. Mengenal API
API (Application Programming Interface) adalah jembatan antara aplikasi (Flutter) dengan server (database MySQL). API biasanya dibuat dengan PHP, Node.js, atau framework backend lainnya.
Dalam artikel ini kita menggunakan:
- MySQL sebagai database.
- PHP (Native) untuk API.
- Flutter untuk aplikasi mobile.
Contoh alur kerja API:
- User login lewat aplikasi Flutter.
- Flutter mengirim data username dan password ke API.
- API memeriksa data di database MySQL.
- API mengembalikan respon berupa JSON ke Flutter.
- Flutter menampilkan hasil ke user.
Respon JSON biasanya seperti ini:
{
"success": true,
"message": "Login berhasil",
"data": {
"id": 1,
"username": "siswa1",
"role": "siswa"
}
}
4. Persiapan Lingkungan Pengembangan
a. Install Flutter
- Download Flutter SDK dari flutter.dev.
- Ekstrak ke folder, misalnya
C:\src\flutter. - Tambahkan ke Path Environment Variables.
- Cek instalasi di CMD:
flutter doctor
b. Install Laragon (atau XAMPP)
Laragon digunakan untuk menjalankan PHP dan MySQL.
- Download dari laragon.org.
- Jalankan Apache & MySQL.
- Akses phpMyAdmin di
http://localhost/phpmyadmin.
c. Install VSCode
- Gunakan VSCode atau Android Studio untuk menulis kode Flutter.
- Install plugin Flutter dan Dart.
5. Membuat Database MySQL
Buka phpMyAdmin → buat database dengan nama db_absensi.
Lalu buat tabel:
6. Membuat REST API dengan PHP
Buat folder absensi_api di C:\laragon\www.
a. File koneksi.php
<?php
$host = "localhost";
$user = "root"; // default laragon/xampp
$pass = "";
$db = "db_absensi";
$conn = new mysqli($host, $user, $pass, $db);
if ($conn->connect_error) {
die("Koneksi gagal: " . $conn->connect_error);
}
?>
b. File register.php
<?php
include 'koneksi.php';
$username = $_POST['username'];
$password = password_hash($_POST['password'], PASSWORD_DEFAULT);
$role = $_POST['role'];
$sql = "INSERT INTO users (username,password,role) VALUES ('$username','$password','$role')";
if ($conn->query($sql)) {
echo json_encode(["success"=>true,"message"=>"Registrasi berhasil"]);
} else {
echo json_encode(["success"=>false,"message"=>"Registrasi gagal"]);
}
?>
c. File login.php
<?php
include 'koneksi.php';
$username = $_POST['username'];
$password = $_POST['password'];
$sql = "SELECT * FROM users WHERE username='$username'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$row = $result->fetch_assoc();
if (password_verify($password, $row['password'])) {
echo json_encode([
"success"=>true,
"message"=>"Login berhasil",
"data"=>$row
]);
} else {
echo json_encode(["success"=>false,"message"=>"Password salah"]);
}
} else {
echo json_encode(["success"=>false,"message"=>"User tidak ditemukan"]);
}
?>
d. File absensi.php
<?php
include 'koneksi.php';
$user_id = $_POST['user_id'];
$status = $_POST['status'];
$sql = "INSERT INTO absensi (user_id, status) VALUES ('$user_id','$status')";
if ($conn->query($sql)) {
echo json_encode(["success"=>true,"message"=>"Absensi berhasil"]);
} else {
echo json_encode(["success"=>false,"message"=>"Gagal absen"]);
}
?>
7. Membuat Proyek Flutter
Buat project baru:
flutter create absensi_flutter
Masuk ke folder:
cd absensi_flutter
Install package HTTP:
flutter pub add http
8. Implementasi CRUD di Flutter
a. File main.dart
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: LoginPage(),
);
}
}
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
final TextEditingController username = TextEditingController();
final TextEditingController password = TextEditingController();
String msg = "";
Future<void> login() async {
var response = await http.post(
Uri.parse("http://localhost/absensi_api/login.php"),
body: {"username": username.text, "password": password.text},
);
var data = jsonDecode(response.body);
if (data['success']) {
if (data['data']['role'] == "siswa") {
Navigator.push(context, MaterialPageRoute(builder: (_) => DashboardSiswa()));
} else {
Navigator.push(context, MaterialPageRoute(builder: (_) => DashboardPembimbing()));
}
} else {
setState(() {
msg = data['message'];
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
padding: const EdgeInsets.all(20),
width: 300,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Text("Login", style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
TextField(controller: username, decoration: InputDecoration(labelText: "Username")),
TextField(controller: password, obscureText: true, decoration: InputDecoration(labelText: "Password")),
ElevatedButton(onPressed: login, child: const Text("Login")),
Text(msg, style: const TextStyle(color: Colors.red)),
],
),
),
),
);
}
}
class DashboardSiswa extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Dashboard Siswa")),
body: const Center(child: Text("Halo, Siswa!")),
);
}
}
class DashboardPembimbing extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Dashboard Pembimbing")),
body: const Center(child: Text("Halo, Pembimbing!")),
);
}
}
9. Testing Aplikasi
- Jalankan server Laragon →
http://localhost/absensi_api/login.php. - Jalankan Flutter →
flutter run. - Coba login dengan user yang sudah diregistrasi.
- Jika berhasil, akan masuk ke dashboard sesuai role.
10. Penutup
Dengan mengikuti tutorial ini, kita sudah belajar:
- Membuat database MySQL untuk absensi.
- Membuat REST API dengan PHP (register, login, absensi).
- Membuat aplikasi Flutter yang bisa login ke API.
- Memisahkan dashboard untuk siswa dan pembimbing.
API adalah komponen penting untuk aplikasi modern. Dengan API, data bisa tersimpan dengan aman di server, dan aplikasi Flutter bisa mengaksesnya kapan saja.