Implementasi sqflite

pada tanggal


Assalamualaikum teman-teman! kalian sudah tau aa itu SQFLite?

SQFLite itu sama aja dengan SQLite. cuman perbedaannya pada flutter dinamai SQFLite.

SQLite sendiri merupakan relational database management system dengan ukuran yang relatif lebih kecil. Karena berukuran lebih kecil dari MySQL, jadi DB nya sendiri akan tertanam langsung dalam kode program. Tujuan dari penggunaan SQLite atau pada flutter SQFLite ini bertujuan untuk mengembangkan aplikasi yang bersifat stand alone atau bisa dibilang kecil – kecilan, atau saat membangun proyek dengan ukuran kecil yang tidak memerlukan skalabilitas yang besar.

yuk kita buat projek dengan menggunakan SQFLite. Yuk ikuti langkah langkah berikut ini:

1. Seblum masuk ke ke kodingan kita download dulu sqflite pada puv.dev dengan menggetik sqflite

    


2. selanjutnya kita masukkan dependensinya seperti ini

    



3. Nah nantinya akan seperti ini hasil dari folder lib kita

       



4. Pada file main.dart isi seperti ini

import 'package:flutter/material.dart';
import 'package:tugas1_s5/ui/list_pegawai_page.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const ListPegawaiPage(),
    );
  }
}

5. Selanjutnya pada folder model yang bernama pegawai.dart 

class Pegawai {
  int? id;
  String? firstName;
  String? lastName;
  String? mobileNo;
  String? email;

  Pegawai({this.id, this.firstName, this.lastName, this.mobileNo, this.email});

  Map<String, dynamic> toMap() {
    var map = Map<String, dynamic>();

    if (id != null) {
      map['id'] = id;
    }
    map['firstName'] = firstName;
    map['lastName'] = lastName;
    map['mobileNo'] = mobileNo;
    map['email'] = email;
    return map;
  }

  Pegawai.fromMap(Map<String, dynamic> map) {
    this.id = map['id'];
    this.firstName = map['firstName'];
    this.lastName = map['lastName'];
    this.mobileNo = map['mobileNo'];
    this.email = map['email'];
  }
}

6. db_helper isiskan seperti ini

import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';
import 'package:tugas1_s5/model/pegawai.dart';

class DbHelper {
  static final DbHelper _instance = DbHelper._internal();
  static Database? _database;

  final String tableName = 'tablePegawai';
  final String columnId = 'id';
  final String columnFirstName = 'firstName';
  final String columnLastName = 'lastName';
  final String columnMobileNo = 'mobileNo';
  final String columnEmail = 'email';

  DbHelper._internal();
  factory DbHelper() => _instance;

  Future<Database?> get _db  async {
    if (_database != null) {
      return _database;
    }
    _database = await _initDb();
    return _database;
  }

  Future<Database?> _initDb() async {
    String databasePath = await getDatabasesPath();
    String path = join(databasePath, 'pegawai.db');

    return await openDatabase(path, version: 1, onCreate: _onCreate);
  }

  Future<void> _onCreate(Database db, int version) async {
    var sql = "CREATE TABLE $tableName($columnId INTEGER PRIMARY KEY, "
        "$columnFirstName TEXT,"
        "$columnLastName TEXT,"
        "$columnMobileNo TEXT,"
        "$columnEmail TEXT)";
    await db.execute(sql);
  }

  Future<int?> savePegawai(Pegawai pegawai) async {
    var dbClient = await _db;
    return await dbClient!.insert(tableName, pegawai.toMap());
  }

  Future<List?> getAllPegawai() async {
    var dbClient = await _db;
    var result = await dbClient!.query(tableName, columns: [
      columnId,
      columnFirstName,
      columnLastName,
      columnMobileNo,
      columnEmail
    ]);

    return result.toList();
  }

  Future<int?> updatePegawai(Pegawai pegawai) async {
    var dbClient = await _db;
    return await dbClient!.update(tableName, pegawai.toMap(), where: '$columnId = ?', whereArgs: [pegawai.id]);
  }

  Future<int?> deletePegawai(int id) async {
    var dbClient = await _db;
    return await dbClient!.delete(tableName, where: '$columnId = ?', whereArgs: [id]);
  }
}

7. Selanjutnya pada list_pegawai_page.dart kita isi seperti ini

import 'package:flutter/material.dart';
import 'package:tugas1_s5/db/db_helper.dart';
import 'package:tugas1_s5/model/pegawai.dart';
import 'package:tugas1_s5/ui/detail_pegawai.dart';

import 'package:tugas1_s5/ui/form_pegawai.dart';

class ListPegawaiPage extends StatefulWidget {
  const ListPegawaiPage({Key? key}) : super(key: key);

  @override
  _ListPegawaiPageState createState() => _ListPegawaiPageState();
}

class _ListPegawaiPageState extends State<ListPegawaiPage> {
  List<Pegawai> listPegawai = [];
  DbHelper db = DbHelper();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Daftar Pegawai'),
        backgroundColor: Colors.red,
      ),
      body: ListView.builder(
          itemCount: listPegawai.length,
          itemBuilder: (context, index) {
            Pegawai pegawai = listPegawai[index];

            return ListTile(
              onTap: () {
                //edit
                _openFormEdit(pegawai);
              },
              contentPadding: EdgeInsets.all(16),
              title: Text(
                '${pegawai.firstName} ${pegawai.lastName}',
                style: TextStyle(
                    fontSize: 18,
                    fontStyle: FontStyle.italic,
                    color: Colors.deepOrangeAccent),
              ),
              subtitle: Text('${pegawai.email}'),
              trailing: IconButton(
                icon: Icon(Icons.delete),
                onPressed: () {
                  AlertDialog hapus = AlertDialog(
                    title: Text('Information'),
                    content: Container(
                      height: 100,
                      child: Column(
                        children: [
                          Text(
                              'Apakah anda yakin ingin menghapus data ${pegawai.email}'),
                        ],
                      ),
                    ),
                    actions: [
                      TextButton(
                        child: Text('Ya'),
                        onPressed: () {
                          //delete
                          _deletePegawai(pegawai, index);
                          Navigator.pop(context);
                        },
                      ),
                      TextButton(
                        child: Text('Tidak'),
                        onPressed: () {
                          Navigator.pop(context);
                        },
                      ),
                    ],
                  );
                  showDialog(context: context, builder: (context) => hapus);
                },
              ),
              leading: IconButton(
                onPressed: () {
                  //detail
                  Navigator.push(context, MaterialPageRoute(builder: (context) => DetailPage(pegawai)));
                },
                icon: Icon(Icons.visibility),
              ),
            );
          }),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        backgroundColor: Colors.red,
        onPressed: () {
          //add
          _openFormCreate();
        },
      ),
    );
  }

  Future<void> _getAllPegawai() async {
    var list = await db.getAllPegawai();
    setState(() {
      listPegawai.clear();
      list!.forEach((pegawai) {
        listPegawai.add(Pegawai.fromMap(pegawai));
      });
    });
  }

  Future<void> _deletePegawai(Pegawai pegawai, int position) async {
    await db.deletePegawai(pegawai.id!);

    setState(() {
      listPegawai.removeAt(position);
    });
  }

  Future<void> _openFormCreate() async {
    var result = await Navigator.push(
        context, MaterialPageRoute(builder: (context) => FormPegawai()));
    if (result == 'save') {
      await _getAllPegawai();
    }
  }

  Future<void> _openFormEdit(Pegawai pegawai) async {
    var result = await Navigator.push(context,
        MaterialPageRoute(builder: (context) => FormPegawai(pegawai: pegawai)));
    if (result == 'update') {
      await _getAllPegawai();
    }
  }
}

8. form_pegawai.dart kita isis seperti ini

import 'package:flutter/material.dart';
import 'package:tugas1_s5/db/db_helper.dart';
import 'package:tugas1_s5/model/pegawai.dart';

class FormPegawai extends StatefulWidget {
  final Pegawai? pegawai;

  FormPegawai({this.pegawai});

  @override
  _FormPegawaiState createState() => _FormPegawaiState();
}

class _FormPegawaiState extends State<FormPegawai> {
  DbHelper db = DbHelper();

  TextEditingController? firstName;
  TextEditingController? lastName;
  TextEditingController? mobileNo;
  TextEditingController? email;

  @override
  void initState() {
    firstName = TextEditingController(
        text: widget.pegawai == null ? '' : widget.pegawai!.firstName);
    lastName = TextEditingController(
        text: widget.pegawai == null ? '' : widget.pegawai!.lastName);
    mobileNo = TextEditingController(
        text: widget.pegawai == null ? '' : widget.pegawai!.mobileNo);
    email = TextEditingController(
        text: widget.pegawai == null ? '' : widget.pegawai!.email);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final ButtonStyle style = ElevatedButton.styleFrom(primary: Colors.red,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)));
    return Scaffold(
      appBar: AppBar(
        title: Text('Form Pegawai'),
        backgroundColor: Colors.red,
      ),
      body: ListView(
        padding: EdgeInsets.all(16.0),
        children: [
          TextField(
            controller: firstName,
            decoration: InputDecoration(
                labelText: 'FirstName',
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(20),
                )),
          ),
          TextField(
            controller: lastName,
            decoration: InputDecoration(
                labelText: 'LastName',
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(20),
                )),
          ),
          TextField(
            controller: mobileNo,
            decoration: InputDecoration(
                labelText: 'Mobile No',
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(20),
                )),
          ),
          TextField(
            controller: email,
            decoration: InputDecoration(
                labelText: 'Email',
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(20),
                )),
          ),
          ElevatedButton(
            child: (widget.pegawai == null)
                ? Text(
              'Add',
              style: TextStyle(color: Colors.white),
            )
                : Text(
              'Update',
              style: TextStyle(color: Colors.white),
            ),
            style: style,
            onPressed: () {
              upsertPegawai();
            },
          )
        ],
      ),
    );
  }

  Future<void> upsertPegawai() async {
    if (widget.pegawai != null) {
      //insert

      await db.updatePegawai(Pegawai.fromMap({
        'id' : widget.pegawai!.id,
        'firstName' : firstName!.text,
        'lastName' : lastName!.text,
        'mobileNo' : mobileNo!.text,
        'email' : email!.text,
      }));
      Navigator.pop(context, 'update');
    } else {
      //update
      await db.savePegawai(Pegawai(
        firstName: firstName!.text,
        lastName: lastName!.text,
        mobileNo: mobileNo!.text,
        email: email!.text,
      ));
      Navigator.pop(context, 'save');
    }
  }
}

9. jangan lupa isi seperti dibawah ini untuk file detail_pegawai.dart

import 'package:flutter/material.dart';
import 'package:tugas1_s5/model/pegawai.dart';

class DetailPage extends StatelessWidget {
  final Pegawai? pegawai;

  DetailPage(this.pegawai);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detail Page'),
      ),

      body: Center(
        child: Column(
          children: [
            Text('Firs name : ${pegawai!.firstName}'),
            Text('Last name : ${pegawai!.lastName}'),
            Text('Mobile No : ${pegawai!.mobileNo}'),
            Text('Email : ${pegawai!.email}'),
          ],
        ),
      ),
    );
  }
}

Nah hasilnya akan seperti ini:





Sekian pembahasan materi tentang pengimplementasian SQFLite,semoga bisa memberikan wawasan tambahan untuk anda. :)

Komentar

Posting Komentar