Flutter, framework yang dikembangkan oleh Google, telah menjadi pilihan populer untuk membuat aplikasi mobile yang dapat berjalan di berbagai platform seperti Android, iOS, dan web. Salah satu hal yang penting dalam pengembangan aplikasi adalah kemampuan untuk berinteraksi dengan database untuk menyimpan, mengubah, mengambil, dan menghapus data. Dalam artikel ini, kita akan membahas bagaimana cara melakukan operasi CRUD (Create, Read, Update, Delete) di aplikasi Flutter dengan menggunakan MySQL sebagai database.

Apa Itu CRUD?

CRUD adalah singkatan dari Create, Read, Update, Delete, yang merupakan operasi dasar yang dilakukan pada database:

• Create: Menambahkan data baru ke dalam database.
• Read: Mengambil data dari database untuk ditampilkan.
• Update: Mengubah data yang sudah ada dalam database.
• Delete: Menghapus data dari database.

Untuk melakukan operasi CRUD pada Flutter dengan MySQL, Anda membutuhkan dua komponen utama:

1. Flutter: Untuk membangun aplikasi mobile.
2. MySQL Database: Sebagai penyimpan data yang akan diakses oleh aplikasi.

Dalam implementasinya, aplikasi Flutter akan berkomunikasi dengan server (misalnya, PHP atau Node.js) yang akan melakukan operasi database menggunakan MySQL.

1. Persiapan: MySQL Database

Sebelum kita mulai membuat aplikasi Flutter, pastikan Anda memiliki MySQL yang terpasang dan siap digunakan. Anda bisa menggunakan XAMPP atau LAMP stack untuk menjalankan MySQL secara lokal atau menggunakan layanan database online.

1.1. Membuat Database dan Tabel di MySQL

Misalkan Anda membuat sebuah aplikasi untuk mengelola data buku, dan Anda ingin melakukan operasi CRUD pada data buku. Berikut adalah contoh untuk membuat database dan tabel di MySQL:

CREATE DATABASE flutter_crud;

USE flutter_crud;

CREATE TABLE books (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    author VARCHAR(255) NOT NULL,
    year INT
);

Dengan tabel ini, Anda bisa menyimpan data buku yang memiliki id, title, author, dan year.

2. Membuat API untuk Akses Database

Untuk berkomunikasi dengan database MySQL dari aplikasi Flutter, Anda memerlukan API. API ini akan menghubungkan aplikasi dengan server dan database. Anda bisa menggunakan berbagai teknologi backend seperti PHP, Node.js, atau Python. Dalam contoh ini, kita akan menggunakan PHP untuk membuat API yang akan menangani operasi CRUD.

2.1. Membuat File API (PHP)

1. Create.php (Create Operation): Menambahkan buku baru ke dalam database.

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "flutter_crud";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

$title = $_POST['title'];
$author = $_POST['author'];
$year = $_POST['year'];

$sql = "INSERT INTO books (title, author, year) VALUES ('$title', '$author', '$year')";

if ($conn->query($sql) === TRUE) {
  echo "New record created successfully";
} else {
  echo "Error: " . $sql . "
" . $conn->error;
}

$conn->close();
?>

2. Read.php (Read Operation): Mengambil semua data buku dari database.

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "flutter_crud";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT * FROM books";
$result = $conn->query($sql);

$books = array();

if ($result->num_rows > 0) {
  while($row = $result->fetch_assoc()) {
    $books[] = $row;
  }
  echo json_encode($books);
} else {
  echo "0 results";
}

$conn->close();
?>

3. Update.php (Update Operation): Mengubah data buku di database.

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "flutter_crud";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

$id = $_POST['id'];
$title = $_POST['title'];
$author = $_POST['author'];
$year = $_POST['year'];

$sql = "UPDATE books SET title='$title', author='$author', year='$year' WHERE id='$id'";

if ($conn->query($sql) === TRUE) {
  echo "Record updated successfully";
} else {
  echo "Error: " . $sql . "
" . $conn->error;
}

$conn->close();
?>

4. Delete.php (Delete Operation): Menghapus data buku dari database.

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "flutter_crud";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

$id = $_POST['id'];

$sql = "DELETE FROM books WHERE id='$id'";

if ($conn->query($sql) === TRUE) {
  echo "Record deleted successfully";
} else {
  echo "Error: " . $sql . "
" . $conn->error;
}

$conn->close();
?>

3. Membuat Aplikasi Flutter untuk CRUD

Setelah API siap, kita bisa melanjutkan ke tahap pengembangan aplikasi Flutter yang akan berkomunikasi dengan API tersebut. Flutter akan mengirimkan permintaan HTTP ke API untuk melakukan operasi CRUD.

3.1. Menambahkan Dependensi HTTP

Untuk melakukan permintaan HTTP ke API, kita perlu menambahkan dependensi http dalam file pubspec.yaml.

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3

Lalu jalankan perintah flutter pub get untuk menginstal dependensi tersebut.

3.2. Membuat Model Buku

Buat sebuah model untuk buku agar mudah mengelola data yang diterima dari API.

class Book {
  final int id;
  final String title;
  final String author;
  final int year;

  Book({required this.id, required this.title, required this.author, required this.year});

  factory Book.fromJson(Map json) {
    return Book(
      id: json['id'],
      title: json['title'],
      author: json['author'],
      year: json['year'],
    );
  }
}

3.3. Fungsi HTTP untuk CRUD

Buat fungsi untuk melakukan operasi CRUD dengan HTTP:

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'book.dart';

// URL API
const String apiUrl = "http://yourserver.com/";

// CREATE
Future createBook(String title, String author, int year) async {
  final response = await http.post(
    Uri.parse('${apiUrl}create.php'),
    body: {'title': title, 'author': author, 'year': year.toString()},
  );

  if (response.statusCode == 200) {
    print('Book added successfully');
  } else {
    print('Failed to add book');
  }
}

// READ
Future> getBooks() async {
  final response = await http.get(Uri.parse('${apiUrl}read.php'));

  if (response.statusCode == 200) {
    List books = [];
    List data = json.decode(response.body);
    for (var item in data) {
      books.add(Book.fromJson(item));
    }
    return books;
  } else {
    throw Exception('Failed to load books');
  }
}

// UPDATE
Future updateBook(int id, String title, String author, int year) async {
  final response = await http.post(
    Uri.parse('${apiUrl}update.php'),
    body: {'id': id.toString(), 'title': title, 'author': author, 'year': year.toString()},
  );

  if (response.statusCode == 200) {
    print('Book updated successfully');
  } else {
    print('Failed to update book');
  }
}

// DELETE
Future deleteBook(int id) async {
  final response = await http.post(
    Uri.parse('${apiUrl}delete.php'),
    body: {'id': id.toString()},
  );

  if (response.statusCode == 200) {
    print('Book deleted successfully');
  } else {
    print('Failed to delete book');
  }
}

3.4. Menampilkan Data di UI

Setelah menyiapkan fungsi CRUD, Anda bisa menampilkan data buku di UI Flutter dan memungkinkan pengguna untuk melakukan operasi CRUD.

import 'package:flutter/material.dart';
import 'book.dart';
import 'api.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter CRUD',
      home: BooksPage(),
    );
  }
}

class BooksPage extends StatelessWidget {
  Future> books = getBooks();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Books List')),
      body: FutureBuilder>(
        future: books,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return CircularProgressIndicator();
          }
          if (snapshot.hasError) {
            return Center(child: Text('Error: ${snapshot.error}'));
          }
          if (!snapshot.hasData || snapshot.data!.isEmpty) {
            return Center(child: Text('No books found'));
          }

          List books = snapshot.data!;
          return ListView.builder(
            itemCount: books.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(books[index].title),
                subtitle: Text(books[index].author),
                trailing: IconButton(
                  icon: Icon(Icons.delete),
                  onPressed: () {
                    deleteBook(books[index].id);
                  },
                ),
              );
            },
          );
        },
      ),
    );
  }
}

4. Kesimpulan

Dengan mengikuti panduan ini, Anda telah mempelajari cara membuat aplikasi Flutter yang dapat berinteraksi dengan database MySQL menggunakan API berbasis PHP untuk melakukan operasi CRUD. Proses ini melibatkan beberapa tahap, mulai dari pengaturan database MySQL, pembuatan API untuk mengelola data, hingga integrasi aplikasi Flutter dengan API tersebut menggunakan permintaan HTTP. Dengan demikian, Anda dapat membangun aplikasi yang dinamis dan dapat menyimpan serta mengelola data dengan efisien.