1. Tambahkan kodingan sqflite di pubsc.yaml seperti dibawah ini:
2. sdk: '>=2.18.5 <3.0.0'
3. Kemudian buat folder database pada folder lib dan buat file db_helper.dart didalamnya. Lalu ketikan kode berikut
import 'package:uas/model/mahasiswa.dart';
import 'package:sqflite/sqflite.dart';
import 'package:sqflite/sqlite_api.dart';
import 'package:path/path.dart';
class DbHelper {
static final DbHelper _instance = DbHelper._internal();
static Database? _database;
//INISIALISASI BEBERAPA VARIABLE YANG DIBUTUHKAN final String tableName = 'tableMhs';
final String columnId = 'id';
final String columnNama = 'nama';
final String columnNim = 'nim';
final String columnEmail = 'email';
final String columnProdi = 'prodi';
DbHelper._internal();
factory DbHelper() => _instance;
//CEK APAKAH DATABASE ADA
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, 'mhs_db');
return await openDatabase(path, version: 1, onCreate: _onCreate);
}
//MEMBUAT TABLE DAN FIELD
Future<void> _onCreate(Database db, int version) async {
var sql = 'CREATE TABLE $tableName($columnId INTEGER PRIMARY KEY,' "$columnNama TEXT,"
"$columnNim TEXT,"
"$columnEmail TEXT,"
"$columnProdi TEXT)";
await db.execute(sql);
}
//INSERT KE DATABASE
Future<int?> saveMhs(Mahasiswa mhs) async{
var dbClient = await _db;
return await dbClient!.insert(tableName, mhs.toMap());
}
//READ DATABASE
Future<List?> getAllMhs() async { var dbClient = await _db;
var result = await dbClient!.query(tableName,
columns: [columnId, columnNama, columnProdi, columnNim, columnEmail]);
return result.toList();
}
Future<List?> getAllMahasiswa() async { var dbClient = await _db;
var result = await dbClient!.query(tableName,
columns: [columnId, columnNama, columnProdi, columnNim, columnEmail]);
return result.toList();
}
//UPDATE DATABASE
Future<int?> updateMhs(Mahasiswa mhs) async { var dbClient = await _db;
return await dbClient!.update(tableName, mhs.toMap(), where: '$columnId = ?', whereArgs: [mhs.id]);
}
//HAPUS DATABASE
Future<int?> deleteMhs(int id) async{
var dbClient = await _db;
return await dbClient!.delete(tableName, where: '$columnId = ?', whereArgs:
[id]);
}
}
Kode diatas berfungsi sebagai menyambungkan table-tabel yang kita buat nanti ke databasenya
4. Kemudian membuat file bernama mahasiswa.dart yang berada di folder model yang berada di folder lib. Berikut kodingannya :
class Mahasiswa{
int? id;
String? nama;
String? nim;
String? email;
String? prodi;
Mahasiswa ({this.id, this.nama, this.nim, this.email, this.prodi});
Map<String, dynamic> toMap(){
var map = Map<String, dynamic>();
if (id != null){
map['id'] = id;
}
map['nama'] = nama;
map['nim'] = nim;
map['email'] = email;
map['prodi'] = prodi;
return map;
}
Mahasiswa.fromMap(Map<String, dynamic> map){
this.id = map['id'];
this.nama = map['nama'];
this.nim = map['nim'];
this.email = map['email'];
this.prodi = map['prodi'];
} }
Isi kodingan dari file tersebut adalah pembuatan class dan tipenya yang kita butuhkan
5. Selanjutnya membuat tampilan awal di (list_mahasiswa.dart) didalam folder lib selanjutnya akan diwariskan ke main.dart, Berikut kodenya
import 'package:flutter/material.dart';
import 'package:uas/database/db_helper.dart';
import 'package:uas/edit_mahasiswa.dart';
import 'package:uas/form_mahasiswa.dart';
import 'package:uas/model/mahasiswa.dart';
import 'package:uas/edit_mahasiswa.dart';
import 'package:uas/tabel_mahasiswa.dart';
class Menu extends StatefulWidget { const Menu({super.key});
@override
_MenuState createState() => _MenuState();
}
class _MenuState extends State<Menu> { List<Mahasiswa> listMhs = [];
DbHelper db = DbHelper();
@override
void initState() {
//Menjalankan fungsi getAllMahasiswa pertama kali dimuat _getAllMhs();
super.initState();
}
@override
Widget build(BuildContext context) { return Scaffold(
appBar: AppBar(
title: Center(
child: Text('Data Mahasiswa'), )),
body: ListView.builder(
itemCount: listMhs.length, itemBuilder: (context, index) { Mahasiswa mhs = listMhs[index];
return Padding(
padding: EdgeInsets.only(top: 20), child: ListTile(
leading: Icon(
Icons.person, size: 50, ),
title: Text('${mhs.nim}'), subtitle: Column(
mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 8), child: Text('Nama: ${mhs.nama}'), ),
Padding(
padding: EdgeInsets.only(top: 8), child: Text('Email: ${mhs.email}'), ),
Padding(
padding: EdgeInsets.only(top: 8), child: Text('Prodi: ${mhs.prodi}'), ),
], ),
trailing: FittedBox(
fit: BoxFit.fill, child: Row(
children: <Widget>[
// button edit IconButton(
onPressed: () {
_openFormEdit(mhs);
},
icon: Icon(Icons.edit), ),
// delete button IconButton(
icon: Icon(Icons.delete), onPressed: () {
// membuat dialog // konfirmasi hapus
AlertDialog hapus = AlertDialog(
title: Text('Information'), content: Container(
height: 100, child: Column(
children: <Widget>[
Text('Yakin ingin menghapus data $ {mhs.nama}')
], ), ),
//terdapat 2 button
//jika ya jalankan _deleteMhs() jika tidak maka tutup dialog
actions: [ TextButton(
onPressed: () {
_deleteMhs(mhs, index);
Navigator.pop(context);
},
child: Text('Ya'), ),
TextButton(
child: Text('Tidak'), onPressed: () {
Navigator.pop(context);
}, ) ], );
showDialog(
context: context, builder: (context) => hapus);
},
) ], ), ), ), );
}, ),
// membuat button mengapung dibagian bawah kanan layar
// BUTTON REKAP
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[
FloatingActionButton(
child: Icon(Icons.add), onPressed: () {
AlertDialog hapus = AlertDialog(
title: Text('Information'), content: Container(
height: 100, child: Column(
children: <Widget>[Text('Tambah Data ?')], ),
),
// Terdapat 2 button actions: [
TextButton(
onPressed: () {
Navigator.pop(context);
_openFormCreate();
},
child: Text('Ya'), ),
TextButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Tidak'), )
], );
showDialog(context: context, builder: (context) => hapus);
}, ),
SizedBox(
height: 10, ),
], ), );
}
//mengambil semua data mahasiswa Future<void> _getAllMhs() async { var list = await db.getAllMhs();
//perubahan state
setState(() {
//hapus data listMhs listMhs.clear();
//perulangan var list list!.forEach((mhs) { //masukan data ke list
listMhs.add(Mahasiswa.fromMap(mhs));
});
});
}
// hapus data mhs
Future<void> _deleteMhs(Mahasiswa mhs, int position) async { await db.deleteMhs(mhs.id!);
setState(() {
listMhs.removeAt(position);
});
}
// halaman tambah mahasiswa
Future<void> _openFormCreate() async { var result = await Navigator.push(
context, MaterialPageRoute(builder: (context) => FormMahasiswa()));
if (result == 'save') { await _getAllMhs();
} }
//membuka halaman edit
Future<void> _openFormEdit(Mahasiswa mhs) async { var result = await Navigator.push(context,
MaterialPageRoute(builder: ((context) => FormMahasiswa(mhs:
mhs))));
if (result == 'update') { await _getAllMhs();
} }
// membuka halaman rekap tabel mahasiswa void _openTabelMahasiswa(){
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => TabelMahasiswa()));
}
// membuat snackbar
void snackBar(String value){
ScaffoldMessenger.of(context)
.showSnackBar(new SnackBar(content: new Text(value)));
} }
6. Selanjutnya membuat tampilan pada form input, buat file form_mahasiswa.dart. Berikut kode nya:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:uas/database/db_helper.dart';
import 'package:uas/model/mahasiswa.dart';
class FormMahasiswa extends StatefulWidget { final Mahasiswa? mhs;
FormMahasiswa({this.mhs});
@override
_FormMahasiswaState createState() => _FormMahasiswaState();
}
class _FormMahasiswaState extends State<FormMahasiswa> { DbHelper db = DbHelper();
TextEditingController? nama;
TextEditingController? namaAkhir;
TextEditingController? nim;
TextEditingController? email;
TextEditingController? prodi;
@override
void initState() { nama =
TextEditingController(text: widget.mhs == null ? '' : widget.mhs!.nama);
nim =
TextEditingController(text: widget.mhs == null ? '' : widget.mhs!.nim);
email = TextEditingController(
text: widget.mhs == null ? '' : widget.mhs!.email);
prodi = TextEditingController(
text: widget.mhs == null ? '' : widget.mhs!.prodi);
super.initState();
}
@override
Widget build(BuildContext context) { return Scaffold(
appBar: AppBar(
title: Text('Form Kontak'), ),
body: ListView(
padding: EdgeInsets.all(16.0), children: [
Padding(
padding: const EdgeInsets.only(
top: 20, ),
child: TextField(
inputFormatters: [
FilteringTextInputFormatter.allow(RegExp(r"^[a-zA-Z]+")) ],
controller: nama,
decoration: InputDecoration(
labelText: 'Nama',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8), )),
), ),
Padding(
padding: const EdgeInsets.only(
top: 20, ),
child: TextField(
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(RegExp("[0-9]")), ],
controller: nim,
decoration: InputDecoration(
labelText: 'NIM',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8), )),
), ),
Padding(
padding: const EdgeInsets.only(
top: 20, ),
child: TextField(
controller: email,
keyboardType: TextInputType.emailAddress, decoration: InputDecoration(
hintText: '[email protected]', labelText: 'Email',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8), )),
), ),
Padding(
padding: const EdgeInsets.only(
top: 20, ),
child: TextField(
controller: prodi,
decoration: InputDecoration(
labelText: 'Prodi',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8), )),
), ),
Padding(
padding: const EdgeInsets.only(top: 20), child: ElevatedButton(
child: (widget.mhs == null) ? Text(
'Add',
style: TextStyle(color: Colors.white), )
: Text(
'Update',
style: TextStyle(color: Colors.white), ),
onPressed: () { upsertMahasiswa();
}, ), ) ], ), );
}
Future<void> upsertMahasiswa() async { if (widget.mhs != null) {
//update
await db.updateMhs(Mahasiswa.fromMap({
'id': widget.mhs!.id, 'nama': nama!.text, 'nim': nim!.text, 'email': email!.text, 'prodi': prodi!.text }));
Navigator.pop(context, 'update');
} else { //insert
await db.saveMhs(Mahasiswa(
nama: nama!.text, nim: nim!.text, email: email!.text, prodi: prodi!.text, ));
Navigator.pop(context, 'save');
} } }
Dalam kode tersebut kita akan membuat beberapa form mahasiswa yang terdiri dari Nana, NIM, Email , dan Prodi dengan menggunakan menu dropdown. Didalam kodingan diatas sudah disetting inputan NIM harus angka dan berjumlah 12. Kemudian jika form tidak diisi maka tidak bisa ditambah.
7. Lalu kita buat file untuk mengedit form yang telah diinputkan. Berikut kodenya
import 'package:flutter/material.dart';
import 'package:uas/database/db_helper.dart';
import 'package:uas/form_mahasiswa.dart';
import 'package:uas/model/mahasiswa.dart';
class ListMahasiswa extends StatefulWidget { const ListMahasiswa({super.key});
@override
_ListMahasiswaState createState() => _ListMahasiswaState();
}
class _ListMahasiswaState extends State<ListMahasiswa> { List<Mahasiswa> listMhs = [];
DbHelper db = DbHelper();
@override
void initState() {
//Menjalankan fungsi getAllMahasiswa pertama kali dimuat _getAllMhs();
super.initState();
}
@override
Widget build(BuildContext context) { return Scaffold(
appBar: AppBar(
title: Center(
child: Text('Data Mahasiswa'), )),
body: ListView.builder(
itemCount: listMhs.length, itemBuilder: (context, index) { Mahasiswa mhs = listMhs[index];
return Padding(
padding: EdgeInsets.only(top: 20), child: ListTile(
leading: Icon(
Icons.person, size: 50, ),
title: Text('${mhs.nim}'), subtitle: Column(
mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 8), child: Text('Nama: ${mhs.nama}'), ),
Padding(
padding: EdgeInsets.only(top: 8), child: Text('Email: ${mhs.email}'), ),
Padding(
padding: EdgeInsets.only(top: 8), child: Text('Prodi: ${mhs.prodi}'), ),
], ),
trailing: FittedBox(
fit: BoxFit.fill, child: Row(
children: <Widget>[
// button edit IconButton(
onPressed: () { _openFormEdit(mhs);
},
icon: Icon(Icons.edit), ),
// delete button IconButton(
icon: Icon(Icons.delete), onPressed: () {
// membuat dialog // konfirmasi hapus
AlertDialog hapus = AlertDialog(
title: Text('Information'), content: Container(
height: 100, child: Column(
children: <Widget>[
Text('Yakin ingin menghapus data ${mhs.nama}') ],
), ),
//terdapat 2 button
//jika ya jalankan _deleteMhs() jika tidak maka tutup dialog
actions: [ TextButton(
onPressed: () {
_deleteMhs(mhs, index);
Navigator.pop(context);
},
child: Text('Ya'), ),
TextButton(
child: Text('Tidak'), onPressed: () {
Navigator.pop(context);
}, ) ], );
showDialog(
context: context, builder: (context) => hapus);
}, ) ], ), ), ), );
}, ),
// membuat button mengapung dibagian bawah kanan layar floatingActionButton: FloatingActionButton(
child: Icon(Icons.add), onPressed: () {
_openFormCreate();
}, ), );
}
//mengambil semua data mahasiswa Future<void> _getAllMhs() async { var list = await db.getAllMhs();
//perubahan state setState(() {
//hapus data listMhs listMhs.clear();
//perulangan var list list!.forEach((mhs) { //masukan data ke list
listMhs.add(Mahasiswa.fromMap(mhs));
});
});
}
// hapus data mhs
Future<void> _deleteMhs(Mahasiswa mhs, int position) async { await db.deleteMhs(mhs.id!);
setState(() {
listMhs.removeAt(position);
});
}
// halaman tambah mahasiswa
Future<void> _openFormCreate() async { var result = await Navigator.push(
context, MaterialPageRoute(builder: (context) => FormMahasiswa()));
if (result == 'save') { await _getAllMhs();
} }
//membuka halaman edit
Future<void> _openFormEdit(Mahasiswa mhs) async { var result = await Navigator.push(context,
MaterialPageRoute(builder: ((context) => FormMahasiswa(mhs: mhs))));
if (result == 'update') { await _getAllMhs();
} } }