Cara Menggunakan CRUD pada Flutter dengan SQLite: Panduan Lengkap

 

Flutter adalah framework open-source yang memungkinkan pengembang untuk membuat aplikasi mobile yang sangat cepat dan responsif untuk platform Android dan iOS. Salah satu tugas umum dalam pengembangan aplikasi adalah mengelola data, dan SQLite adalah solusi database lokal yang sangat populer di dunia pengembangan aplikasi mobile. SQLite memungkinkan penyimpanan data di perangkat secara efisien.

Pada artikel ini, kita akan membahas bagaimana cara mengimplementasikan operasi CRUD (Create, Read, Update, Delete) pada Flutter dengan menggunakan SQLite. CRUD adalah operasi dasar yang digunakan untuk berinteraksi dengan database. Mari kita mulai dengan penjelasan tentang SQLite dan cara menggunakannya di Flutter.

1. Apa Itu SQLite?

SQLite adalah sistem manajemen database relasional (RDBMS) yang ringan dan terintegrasi, yang tidak memerlukan server terpisah untuk berfungsi. Ini menjadikannya pilihan populer untuk aplikasi mobile karena dapat berjalan sepenuhnya di dalam perangkat, tanpa memerlukan koneksi internet atau server eksternal.

SQLite menyimpan data dalam bentuk file tunggal dan dapat digunakan untuk menyimpan data struktural seperti teks, angka, dan gambar dalam aplikasi. Flutter menyediakan berbagai plugin untuk mengintegrasikan SQLite ke dalam aplikasi, dan salah satu yang paling sering digunakan adalah sqflite.

2. Mengapa Menggunakan CRUD dalam Aplikasi Flutter?

Operasi CRUD adalah dasar untuk mengelola data dalam aplikasi. Berikut adalah penjelasan singkat tentang masing-masing operasi CRUD:

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

Di Flutter, kita dapat menggunakan SQLite untuk menyimpan data secara lokal di perangkat dan mengimplementasikan operasi CRUD untuk berinteraksi dengan data tersebut.

3. Persiapan: Menyiapkan Flutter dan SQLite

Sebelum memulai implementasi CRUD, pastikan Anda sudah menginstal Flutter dan mengonfigurasi proyek Flutter baru.

Langkah 1: Menambahkan Dependencies

Untuk menggunakan SQLite di Flutter, kita perlu menambahkan dependensi sqflite dan path_provider di file pubspec.yaml proyek Flutter kita. sqflite adalah plugin untuk SQLite, sementara path_provider digunakan untuk menemukan lokasi penyimpanan database pada perangkat.

Buka file pubspec.yaml dan tambahkan dependensi berikut:

dependencies:
  flutter:
    sdk: flutter
  sqflite: ^2.0.0+3
  path_provider: ^2.0.0

Setelah menambahkan dependensi, jalankan perintah berikut untuk menginstall paket yang baru ditambahkan:

flutter pub get

Langkah 2: Membuat Database Helper

Selanjutnya, kita akan membuat kelas untuk mengelola koneksi ke database SQLite dan menyediakan fungsi CRUD. Kelas ini akan bertanggung jawab untuk membuka, menutup, dan mengelola tabel di dalam database.

Buat file baru bernama database_helper.dart dan tambahkan kode berikut:

import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';
import 'dart:async';

class DatabaseHelper {
  static final DatabaseHelper _instance = DatabaseHelper._internal();
  factory DatabaseHelper() => _instance;
  static Database? _database;

  DatabaseHelper._internal();

  Future get database async {
    if (_database != null) {
      return _database!;
    } else {
      _database = await _initDatabase();
      return _database!;
    }
  }

  _initDatabase() async {
    String path = await getDatabasesPath();
    return openDatabase(
      join(path, 'my_database.db'),
      onCreate: (db, version) async {
        await db.execute('''
          CREATE TABLE my_table(
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            name TEXT,
            age INTEGER)
        ''');
      },
      version: 1,
    );
  }

  // Create - Insert data
  Future insertData(Map data) async {
    var dbClient = await database;
    return await dbClient.insert('my_table', data);
  }

  // Read - Fetch all data
  Future>> fetchData() async {
    var dbClient = await database;
    return await dbClient.query('my_table');
  }

  // Update - Update data
  Future updateData(Map data, int id) async {
    var dbClient = await database;
    return await dbClient.update('my_table', data, where: 'id = ?', whereArgs: [id]);
  }

  // Delete - Delete data
  Future deleteData(int id) async {
    var dbClient = await database;
    return await dbClient.delete('my_table', where: 'id = ?', whereArgs: [id]);
  }
}

Keterangan:

  • insertData untuk operasi Create.
  • fetchData untuk operasi Read.
  • updateData untuk operasi Update.
  • deleteData untuk operasi Delete.

4. Membuat Tampilan Antarmuka (UI)

Setelah menyiapkan database helper, kita akan membuat antarmuka pengguna (UI) untuk menampilkan dan mengelola data. Buat file baru bernama home_screen.dart dan tambahkan kode berikut:

import 'package:flutter/material.dart';
import 'database_helper.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State {
  final DatabaseHelper _dbHelper = DatabaseHelper();
  final TextEditingController _nameController = TextEditingController();
  final TextEditingController _ageController = TextEditingController();

  List> _data = [];

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

  _fetchData() async {
    var data = await _dbHelper.fetchData();
    setState(() {
      _data = data;
    });
  }

  _insertData() async {
    if (_nameController.text.isNotEmpty && _ageController.text.isNotEmpty) {
      Map row = {
        'name': _nameController.text,
        'age': int.parse(_ageController.text),
      };
      await _dbHelper.insertData(row);
      _fetchData();
    }
  }

  _updateData(int id) async {
    if (_nameController.text.isNotEmpty && _ageController.text.isNotEmpty) {
      Map row = {
        'name': _nameController.text,
        'age': int.parse(_ageController.text),
      };
      await _dbHelper.updateData(row, id);
      _fetchData();
    }
  }

  _deleteData(int id) async {
    await _dbHelper.deleteData(id);
    _fetchData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('CRUD SQLite Example')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _nameController,
              decoration: InputDecoration(labelText: 'Name'),
            ),
            TextField(
              controller: _ageController,
              decoration: InputDecoration(labelText: 'Age'),
              keyboardType: TextInputType.number,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                ElevatedButton(
                  onPressed: _insertData,
                  child: Text('Add'),
                ),
                ElevatedButton(
                  onPressed: () {
                    if (_data.isNotEmpty) {
                      _updateData(_data[0]['id']);
                    }
                  },
                  child: Text('Update'),
                ),
              ],
            ),
            Expanded(
              child: ListView.builder(
                itemCount: _data.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text('${_data[index]['name']} (${_data[index]['age']})'),
                    trailing: IconButton(
                      icon: Icon(Icons.delete),
                      onPressed: () {
                        _deleteData(_data[index]['id']);
                      },
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

5. Menghubungkan UI dengan Database

Untuk menghubungkan UI dengan fungsionalitas database, Anda dapat memanggil operasi CRUD yang telah dibuat dalam DatabaseHelper ketika tombol ditekan. Pada contoh ini, kita membuat antarmuka untuk menambahkan data baru, memperbarui data, dan menghapus data.

6. Menjalankan Aplikasi

Setelah semua bagian selesai, Anda dapat menjalankan aplikasi di emulator atau perangkat fisik untuk menguji fungsionalitas CRUD dengan SQLite.

flutter run

7. Kesimpulan

Dengan menggunakan SQLite dan plugin sqflite di Flutter, Anda dapat dengan mudah mengimplementasikan operasi CRUD di aplikasi mobile Anda. Langkah-langkah yang dibahas dalam artikel ini memberikan dasar yang kuat untuk membangun aplikasi yang dapat menyimpan, membaca, memperbarui, dan menghapus data secara lokal di perangkat pengguna.

Operasi CRUD adalah fundamental dalam pengembangan aplikasi yang berhubungan dengan data, dan dengan SQLite, Anda memiliki solusi ringan yang sangat cocok untuk aplikasi yang membutuhkan penyimpanan data lokal.

 

 

Dadang Heksa

Itaque quidem optio quia voluptatibus dolorem dolor. Modi eum sed possimus accusantium. Quas repellat voluptatem officia numquam sint aspernatur voluptas. Esse et accusantium ut unde voluptas.

8 Comments

Georgia Reader Reply

Et rerum totam nisi. Molestiae vel quam dolorum vel voluptatem et et. Est ad aut sapiente quis molestiae est qui cum soluta. Vero aut rerum vel. Rerum quos laboriosam placeat ex qui. Sint qui facilis et.

Aron Alvarado Reply

Ipsam tempora sequi voluptatem quis sapiente non. Autem itaque eveniet saepe. Officiis illo ut beatae.

Lynda Small Reply

Enim ipsa eum fugiat fuga repellat. Commodi quo quo dicta. Est ullam aspernatur ut vitae quia mollitia id non. Qui ad quas nostrum rerum sed necessitatibus aut est. Eum officiis sed repellat maxime vero nisi natus. Amet nesciunt nesciunt qui illum omnis est et dolor recusandae. Recusandae sit ad aut impedit et. Ipsa labore dolor impedit et natus in porro aut. Magnam qui cum. Illo similique occaecati nihil modi eligendi. Pariatur distinctio labore omnis incidunt et illum. Expedita et dignissimos distinctio laborum minima fugiat. Libero corporis qui. Nam illo odio beatae enim ducimus. Harum reiciendis error dolorum non autem quisquam vero rerum neque.

Sianna Ramsay Reply

Et dignissimos impedit nulla et quo distinctio ex nemo. Omnis quia dolores cupiditate et. Ut unde qui eligendi sapiente omnis ullam. Placeat porro est commodi est officiis voluptas repellat quisquam possimus. Perferendis id consectetur necessitatibus.

Nolan Davidson Reply

Distinctio nesciunt rerum reprehenderit sed. Iste omnis eius repellendus quia nihil ut accusantium tempore. Nesciunt expedita id dolor exercitationem aspernatur aut quam ut. Voluptatem est accusamus iste at. Non aut et et esse qui sit modi neque. Exercitationem et eos aspernatur. Ea est consequuntur officia beatae ea aut eos soluta. Non qui dolorum voluptatibus et optio veniam. Quam officia sit nostrum dolorem.

Kay Duggan Reply

Dolorem atque aut. Omnis doloremque blanditiis quia eum porro quis ut velit tempore. Cumque sed quia ut maxime. Est ad aut cum. Ut exercitationem non in fugiat.

Leave a Reply

Your email address will not be published. Required fields are marked *