Media Pengembangan Web & App | by APPKEY

Pembuatan AplikasiMobile ProgrammingTutorial Membuat CRUD Flutter dengan Mudah

Tutorial Membuat CRUD Flutter dengan Mudah

-

CRUD Flutter adalah salah satu proyek kecil-kecilan yang belakangan ini populer di kalangan web developer pemula. Sebelumnya, Anda pasti sudah sering mendengar istilah Aplikasi CRUD (Create, Read, Update, Delete) adalah aplikasi simpel yang digunakan dalam aplikasi sederhana maupun aplikasi kompleks.

Pada artikel ini, Web App akan mengajak Anda belajar membuat Flutter CRUD SQLite yang belakangan ini menjadi kombo sempurna dalam membangun aplikasi sederhana. Jika Anda tertarik dengan pembahasan Tutorial CRUD Flutter SQLite kali ini, pastikan Anda menyimak artikelnya sampai akhir!

Pengertian CRUD (Create, Read, Update, Delete)

crud-flutter-2

Anda mungkin sudah sering mendengar istilah CRUD. Namun pembahasan kali ini hanya untuk mengingatkan Anda kembali tentang CRUD. Saat kita membangun API, hal yang terpenting dari API adalah kemampuannya dalam menyediakan empat tipe fungsi dasar.

Model harus dapat membuat, membaca, memperbarui, dan menghapus sumber daya. Ilmuwan dan ahli komputer sering menyebut fungsi-fungsi ini dengan akronim CRUD. Sebuah model harus memiliki kemampuan untuk melakukan paling banyak empat fungsi ini agar menjadi lengkap. Jika suatu tindakan tidak dapat dijelaskan oleh salah satu dari empat operasi ini, maka tindakan tersebut berpotensi menjadi modelnya sendiri.

Paradigma CRUD umum dalam membangun aplikasi web, karena menyediakan kerangka kerja yang mudah diingat untuk mengingatkan developer tentang bagaimana membangun model yang lengkap dan dapat digunakan.

Referensi pertama untuk operasi CRUD datang dari Haim Kilov pada tahun 1990 dalam sebuah artikel berjudul, “Dari semantik ke pemodelan data berorientasi objek.” Namun, istilah ini pertama kali dipopulerkan oleh buku James Martin tahun 1983, Managing the Data-base Environment. Berikut rinciannya:

  • CREATE: prosedur yang digunakan untuk melakukan pernyataan INSERT untuk membuat record baru.
  • READ: prosedur yang digunakan untuk membaca catatan tabel berdasarkan keynoted utama dalam parameter input.
  • UPDATE: prosedur yang dipakai untuk engeksekusi pernyataan UPDATE pada tabel berdasarkan kunci utama yang ditentukan untuk catatan dalam klausa WHERE dari pernyataan tersebut.
  • DELETE: prosedur yang dipakai untuk menghapus baris tertentu dalam klausa WHERE.

Flutter : Sekilas tentang Flutter

Flutter adalah framework yang belakangan ini banyak digunakan oleh para developer di seluruh dunia untuk mengembangkan aplikasi mobile dengan Android dan iOS. Google merilis Flutter pada bulan Mei 2017.  Flutter adalah framework open-source yang mudah untuk digunakan dan ramah untuk pemula.

Flutter terdiri dari dua bagian penting di dalamnya:

  • SDK (Software Development Kit)

Kumpulan alat yang akan membantu Anda mengembangkan aplikasi. Ini termasuk alat untuk mengompilasi kode Anda ke dalam kode mesin asli (kode untuk iOS dan Android).

  • Framework (Library UI berdasarkan widget)

Kumpulan elemen UI yang dapat digunakan kembali (tombol, input teks, bilah geser, dan sebagainya) yang dapat Anda sesuaikan untuk kebutuhan Anda sendiri.

Pengembangan aplikasi dalam Flutter, Anda harus menggunakan bahasa pemrograman Dart. Bahasa ini diciptakan oleh Google pada Oktober 2011. Terbilang masih baru, namun bahasa ini mengalami peningkatan pengguna secara pesat selama beberapa tahun terakhir. Ingin tahu lebih banyak tentang pengembangan aplikasi Flutter? Cek di sini!

Apa itu SQLite? : Pengertian SQLite

SQLite adalah paket perangkat lunak domain publik yang menyediakan sistem manajemen Database relasional, atau RDBMS. Database relasional digunakan untuk menyimpan catatan yang ditentukan pengguna dalam tabel besar. Selain penyimpanan dan manajemen data, mesin database dapat memproses perintah kueri kompleks yang menggabungkan data dari beberapa tabel untuk menghasilkan laporan dan ringkasan data.

Produk RDBMS populer lainnya termasuk Oracle Database, IBM DB2, dan Microsoft SQL Server di sisi komersial, dengan MySQL dan PostgreSQL menjadi produk open source yang populer.

“Lite” di SQLite tidak mengacu pada kemampuannya. Sebaliknya, SQLite ringan dalam hal kerumitan pengaturan, overhead administratif, dan penggunaan sumber daya. SQLite didefinisikan oleh fitur-fitur berikut:

  • Serverless – SQLite tidak memerlukan proses atau sistem server terpisah untuk beroperasi. Pustaka SQLite mengakses file penyimpanannya secara langsung.
  • Zero Configuration – Artinya, tidak pengaturan di dalam SQLite, karena tidak adanya server sehingga penggunaanya menjadi lebih mudah.
  • Lintas Platform – Seluruh instance database berada dalam satu file lintas platform, tidak memerlukan administrasi.

Di atas adalah sebagian kecil dari fitur yang ada di SQLite. Masih ada banyak fitur lain yang berguna Anda. Ingin tahu lebih jauh tentang SQLite dan apa bedanya dengan MySQL? Kenalan lebih jauh dengan SQLite di sini sekarang!

Tutorial Membuat CRUD Flutter SQLite

Selanjutnya Web App akan membahas cara membuat Flutter CRUD SQLite dengan mudah. Untuk membuat CRUD Flutter SQLite sangat mudah, Anda hanya perlu mengikuti langkah-langkah berikut ini.

Artikel Terkait  Pedoman Membuat Virtual Assistant Sederhana dengan Python

  1. Membuat Project Baru di Flutter

Hal pertama yang harus Anda lakukan untuk membuat CRUD Flutter adalah Anda harus membuat project baru Anda sendiri di Flutter jika Anda belum memiliki project apapun yang membutuhkan CRUD. Berikut ini, WebApp akan memberikan contoh Aplikasi “Daftar Kegiatan” dalam Flutter.

a. Pertama-tama, pilih salah satu IDE yang kamu sukai. Pada contoh ini kami menggunakan Android Studio. Anda bisa gunakan IDE lainnya, lihat beberapa IDE terbaik lainnya di

b. Buatlah perintah seperti di bawah ini:

flutter create daftarkegiatan
flutter create --org com.webapp daftarkegiatan

Perintah ini akan membuat aplikasi Flutter dasar bisa terinstal di perangkat Anda dengan baik.
c. Buka Android Studio untuk jalankan aplikasinya.
d. Modifikasi file main.dart yang ada di direktori lab. Ganti kode dengan snippet di bawah ini lalu jalankan aplikasi.

import 'package:flutter/material.dart';
    

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

    // setiap komponen di Flutter adalah widget
    // bahkan keseluruhan aplikasi adalah widget
    class App extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Daftar Kegiatan',
          home: Scaffold(appBar: AppBar(title: const Text('To-Do List'))),
        );
      }
    }

e. Setelah menjalankan kode tersebut Anda akan melihat sebuah laman kosong dengan judul bar “Daftar Kegiatan”

f. Update code Anda agar sesuai seperti di bawah ini

import 'package:flutter/material.dart';
    

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

    class App extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(title: 'Daftar Kegiatan', home: DaftarKegiatan());
      }
    }
    

    class DaftarKegiatan extends StatefulWidget {
      @override
      _DaftarKegiatanState createState() => _DaftarKegiatanState();
    }
    

    class _DaftarKegiatanState extends State<DaftarKegiatan> {
    

      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: const Text('Daftar Kegiatan')));
      }
    }

g. Sekarang kita akan implementasikan fungsionalitas Daftar Kegiatan di dalam kelas State. Lihat kode di bawah ini:

class _DaftarKegiatanState extends State<DaftarKegiatan> {
     final List<String> _todoList = <String>[];
      final TextEditingController _textFieldController = TextEditingController();
    

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: const Text('Daftar Kegiatan')),
          body: ListView(children: _getItems()),
          floatingActionButton: FloatingActionButton(
              onPressed: () => _displayDialog(context),
              tooltip: 'Tambahkan',
              child: Icon(Icons.add)),
        );
      }
    

      void _addTodoItem(String title) {
        // Menutupnya di dalam state yang ditetapkan akan memberi notifikasi
        // aplikasi yang state nya telah berubah
        setState(() {
          _daftarkegiatan.add(judul);
        });
        _textFieldController.clear();
      }
    

      // Menghasilkan list dari widget item
      Widget _builddaftarItem(String judul) {
        return ListTile(title: Text(judul));
      }
    

      // Hasilkan item widget tunggal
      Future<AlertDialog> _displayDialog(BuildContext context) async {
        return showDialog(
            context: context,
            builder: (BuildContext context) {
              return AlertDialog(
                title: const Text('Tambahkan kegiatan dalam daftar'),
                content: TextField(
                  controller: _textFieldController,
                  decoration: const InputDecoration(hintText: 'Tambah kegiatan di sini'),
                ),
                actions: <Widget>[
                  FlatButton(
                    child: const Text('TAMBAH'),
                    onPressed: () {
                      Navigator.of(context).pop();
                      _addTodoItem(_textFieldController.text);
                    },
                  ),
                  FlatButton(
                    child: const Text('BATAL'),
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                  )
                ],
              );
            });
      }
    

List<Widget> _getItems() {
        final List<Widget> _todoWidgets = <Widget>[];
        for (String title in _todoList) {
          _todoWidgets.add(_buildTodoItem(title));
        }
        return _todoWidgets;
      }
    }
  1. Menambahkan Database SQLite

Setelah Anda  membuat aplikasinya, sekarang saatnya Anda menambahkan Database ke dalam aplikasi Anda untuk menyimpan data di Cloud. Anda bisa menggunakan database seperti Firebase atau SQLite. Namun pada artikel kali ini, kamu akan menggunakan SQLite.

Berikut adalah langkah-langkahnya melengkapi aplikasi CRUD Flutter Anda.

  1. Menambahkan dependensi pada proyek Anda. Caranya dengan menambahkan paket sqflite dan path_provider di file pubspec.yaml proyek Anda. Berikut ini yang harus Anda siapkan.
  • sqlite: SQLite package untuk mengintegrasikan fungsi database SQLite.
  • path_provider: package yang berguna untuk menentukan jalur database.
  1. Berikut ini adalah contoh kode untuk menambahkan dependensi
dependencies:
      flutter:
        sdk: flutter
      sqflite: ^1.3.0 
      path_provider: ^1.6.7 

3. Membuat mode data. Untuk melakukannya, kita harus membuat struktur data yang ingin kita manipulasi di dalam database. Kita pun harus membuat kelas dengan properti yang diperlukan dan metode untuk memetakan data sebelum dimasukkan ke dalam database. Ini dia contohnya:

class MemoModel{
      final int id;
      final String judul;
      final String konten;
    

      MemoModel({this.id,this.judul,this.konten});
    

      Map<String,dynamic> toMap(){ // digunakan saat menambahkan data ke database
        return <String,dynamic>{
          "id" : id,
          "judul" : judul,
          "konten" : konten,
        };
      }
    }

4. Menambahkan Import

Tambahkan import yang dibutuhkan dari database helper file.

import 'package:sqflite/sqflite.dart'; //sqflite package
    import 'package:path_provider/path_provider.dart'; //path_provider package
    import 'package:path/path.dart'; //digunakan untuk paths
    import './memo_model.dart'; //import model class
    import 'dart:io';
    import 'dart:async';

5. Inisialiasaikan Database CRUD Flutter Anda

Deklarasikan fungsi yang digunakan di atas untuk import dan membuka koneksi database. Lihat di bawah ini:

class MemoDbProvider{
        
    Future<Database> init() async {
        Directory directory = await getApplicationDocumentsDirectory(); //mengembalikan direktori yang menyimpan file permanen
        final path = join(directory.path,"memos.db"); //membuat jalur ke database
    

          return await openDatabase( //membuka database atau membuat database jika belum ada
            path,
            version: 1,
            onCreate: (Database db,int version) async{
              await db.execute("""
              CREATE TABLE Memos(
              id INTEGER PRIMARY KEY AUTOINCREMENT,
              title TEXT,
              content TEXT)"""
          );
        });
      }
        
    }

Artikel Terkait  12 Istilah Sakral yang Penting Dimengerti Oleh Cloud Developer

6. Menggunakan Insert

Membuat sebuah fungsi untuk mendapatkan model data CRUD Flutter, mengkonversikannya ke map dan menambahkan data ke database menggunakan insert() helper method.

Future<int> addItem(MemoModel item) async{ //mengembalikan angka atau intem yang ditambahkan sebagai integer 
        
        final db = await init(); //buka database
        
        return db.insert("Memos", item.toMap(), //fungsi toMap() dari MemoModel
        conflictAlgorithm: ConflictAlgorithm.ignore, //abaikan konflik pada duplicate entries
        );
     }

7. Tambahkan Read

Menggunakan sqflite kita dapat melakukan query data dalam banyak cara dengan menggunakan argumen seperti where, groupBy, have, orderBy dan kolom di dalam query() helper.

Future<List<MemoModel>> fetchMemos() async{ //mengembalikan memos sebagai list (array)
        
        final db = await init();
        final maps = await db.query("Memos"); //query semua baris du dalam tabel sebagai array dari maps
    

        return List.generate(maps.length, (i) { //membuat list dari memos
          return MemoModel(              
            id: maps[i]['id'],
            title: maps[i]['title'],
            content: maps[i]['content'],
          );
      });
      }

8. Tambahkan delete

Gunakan argumen where di helper delete() untuk menghapus baris tertentu dari tabel.

Ingatlah untuk menggunakan whereArgs untuk meneruskan argumen ke pernyataan where untuk mencegah serangan injeksi SQL.

Future<int> deleteMemo(int id) async{ //mengembalikan angka dari item yang dihapus
        final db = await init();
      
        int result = await db.delete(
          "Memos", //tabel nama
          where: "id = ?",
          whereArgs: [id] // menggunakan whereArfs untuk menghindari injeksi SQL
        );
    

        return result;
      }

9. Tambahkan Update

Gunakan update() helper untuk memperbarui catatan apa pun dalam database. Untuk memperbarui catatan tertentu, gunakan argumen where.

Future<int> updateMemo(int id, MemoModel item) async{ // mengembalikan angka dari baris yang diupdate 
      
        final db = await init();
      
        int result = await db.update(
          "Memos", 
          item.toMap(),
          where: "id = ?",
          whereArgs: [id]
          );
          return result;
     }

10. Hasil Akhir

Integrasikan metode di atas dalam proyek Anda sesuai keinginan dan buat proyek Anda berfungsi penuh dengan database SQLite dan operasi CRUD Flutter. Jika Anda masih merasa kesulitan dalam prosesnya, uji metode di atas dengan cuplikan kode berikut.

import 'package:flutter/widgets.dart';
    import './dbprovider.dart';
    import './memo_model.dart';
    

    void main() async{
      WidgetsFlutterBinding.ensureInitialized();
      MemoDbProvider memoDb = MemoDbProvider();
    

      final memo = MemoModel(
        id: 1,
        title: 'Title 1',
        content: 'Note 1',
      );
    

      await memoDb.addItem(memo);
      var memos = await memoDb.fetchMemos();
      print(memos[0].title); //Title 1
    

      final newmemo = MemoModel(
        id: memo.id,
        title: 'Title 1 changed',
        content: memo.content,
      );
    

      await memoDb.updateMemo(memo.id, newmemo);
      var updatedmemos = await memoDb.fetchMemos();
      print(updatedmemos[0].title); //Title 1 changed
    

      await memoDb.deleteMemo(memo.id);
      print(await memoDb.fetchMemos()); //[]
    

    }

Itulah cara membuat CRUD Flutter SQLite dengan mudah. Jika Anda tertarik dengan informasi-informasi serupa, jangan lupa untuk allow notification di https://appkey.id atau bisa juga download aplikasi kami di Google Play Store agar Anda tidak ketinggalan informasi terbaru.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Rekomendasi 10 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Encoding Adalah : Proses Komunikasi Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Cara Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

Pengertian Internet & Dampak Positif dan Negatif Internet

Internet mungkin bukan sesuatu yang asing lagi, sebab semua kalangan pasti tahu apa itu internet. Hanya saja jika ditanya...

10 Aplikasi Coding Android Terbaik

Ketersediaan aplikasi coding Android memang banyak dicari oleh orang-orang yang sedang atau akan memulai untuk membuat aplikasi android. Jika...

Domain Google? Apa Bedanya Dengan Domain Biasa?

Saat memutuskan untuk membuat website menjadi salah satu bentuk media digital marketing Anda dalam bersaing di zaman digital ini,...

7 Aplikasi Membuat Aplikasi Android Secara Offline

Aplikasi membuat aplikasi android saat ini banyak dicari penekun IT untuk membuat aplikasi Android secara offline tanpa harus menggunakan...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya