Halo teman – taman! tau gk sih SQFLite itu apa ?
Sebenarnya, SQFLite sama saja dengan SQLite. Hanya saja karena ini pada Flutter jadi sebagai penamaan bahwasanya SQFLite merupakan plugin SQLite pada Flutter.
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.
Jadi, itu merupakan sedikit penjelasan dari saya tentang SQFLite atau SQLite. Teman – teman juga dapat browsing untuk mendapatkan informasi lebih luas lagi tetang apa itu SQLite. Kali ini saya akan memberikan contoh implementasi penggunalan SQFLite pada proses CRUD di aplikasi Pegawai.
Pada project kali ini, kita akan membutuhkan dependencies yang kita peroleh dari pub.dev.
Cukup mengetikan SQFLite pada tombol pencarian.
Sebelumnya, berikut beberapa file yang dibutuhkan pada project kali ini
Selanjutnya kita perlu copy dependencies, pilih sqflite dan buka tab bagian Installing copykan dependencies dan tambahkan pada file pubspec.yaml di bagian dependencies
dependencies:
flutter:
sdk: flutter
sqflite: ^2.0.0+3Selanjutnya pada file main.dart hapus bagian yang tidak dibutuhkan
import 'package:flutter/material.dart';
import 'package:sqflite_belajar/ui/list_pegawai_page.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ListPegawaiPage(),
);
}
}
Sebelum lanjut ke list_pegawai_page.dart, kita perlu membuat model dan db_helper terlebih dahulu
- Model (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'];
}
}
- db_helper.dart
import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';
import 'package:sqflite_belajar/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]);
}
}DB Helper ini yang akan berfungsi sebagai database untuk menyimpan dan menampung data nantinya.
Selanjutnya kita bisa menambahkan kode program pada
- list_pegawai_page.dart
import 'package:flutter/material.dart';
import 'package:sqflite_belajar/db/db_helper.dart';
import 'package:sqflite_belajar/model/pegawai.dart';
import 'package:sqflite_belajar/ui/detail_pegawai.dart';
import '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();
}
}
}
Jika sudah sampai di sini, kita bisa run program untuk melihat hasilnya. Namun, karena kita belum menambahkan data sama sekali jadi pada halaman list masi kosong seperti pada gambar di bawah :
Selanjutnya kita akan membuat form untuk menambahkan data pegawai
- form_pegawai.dart
import 'package:flutter/material.dart';
import 'package:sqflite_belajar/db/db_helper.dart';
import 'package:sqflite_belajar/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');
}
}
}
Terakhir kita perlu menambahkan detail pegawai saat kita mengklik di halaman pegawai.
import 'package:flutter/material.dart';
import 'package:sqflite_belajar/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}'),
],
),
),
);
}
}
Berikut hasil dari project CRUD Data Pegawai :
Jadi bagaimana teman – teman, mudah bukan ?
Semoga artikel kali ini, dapat menambah referensi dan sebagai sumber informasi bagi teman – teman semua !