Ini merupakan artikel terakhir dengan tema Tutorial Crud dengan Flutter, pada artikel ini kita akan mencoba untuk melakukan edit dan delete pada data yang sudah kita munculkan ke listview pada artikel sebelumnya https://tukangaplikasi.com/blog/android/tutorial-crud-dengan-flutter-bagian-3/

Begini konsep nya, kita akan mengirimkan parameter ke class yang akan kita gunakan untuk edit. Kemudian, kita akan menampilkan datanya ke dalam textformfield. Untuk kali ini action, pada class MyListPopulate, kita sudah menyiapkan GestureDetector. Jadi sekarang kita tinggal menambahkan onTap, dimana onTap ini akan membuka alertdialog,




@override
Widget build(BuildContext context) {
  return ListView.builder(
    itemCount: widget.listPegawai.length,
    shrinkWrap: true,
    scrollDirection: Axis.vertical,
    itemBuilder: (BuildContext context, int index) {
      return GestureDetector(
        onTap: (){
          return showDialog<void>(
            context: context,
            builder: (BuildContext context) {
              return AlertDialog(
                title: Text('Action'),
                actions: <Widget>[
                  FlatButton(
                    child: Text('Delete'),
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                  ),
                  FlatButton(
                    child: Text('Edit'),
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                  ),
                ],
              );
            },
          );
        },
        child: Card(
          child: Container(
            width: MediaQuery.of(context).size.width * 0.50,
            child: ListTile(
              title: Text(
                widget.listPegawai[index].namaLengkap,
                style: TextStyle(fontSize: 18),
              ),
              subtitle: Text(
                widget.listPegawai[index].alamatLengkap,
              ),
            ),
          ),
        ),
      );
    },
  );
}

Hasilnya akan seperti ini

Tutorial Crud dengan Flutter Bagian 4 - 1

Pertama kita akan membuat hapus data terlebih dahulu. Kita akan membuat fungsi baru yaitu deleteData, kita akan menerima parameter pada fungsi tersebut jadi kita akan mengubah script onPressed, menjadi seperti ini

deleteData(widget.listPegawai[index].userId);
Navigator.of(context).pop();

kemudian berikut fungsi deleteData

deleteData(String userId) async {
  try {
    final response = await http
        .post("http://192.168.1.13:84/tutorial_api/delete.php", body: {
      "userId": userId,
    });

    if (response.statusCode < 200 || response.statusCode > 300) {
      print(response.statusCode);
      throw new Exception('Failed to insert data');
    } else {
      showDialog(
          context: context,
          builder: (BuildContext context) {
            return AlertDialog(
              content: Text("Berhasil"),
            );
          });
    }
  } catch (e) {
    print(e.toString());
    return null;
  }
  setState(() {
    widget.listPegawai
        .removeWhere((listpegawai) => listpegawai.userId == userId);
  });
}

untuk dibagian PHP nya seperti ini

<?php
  include 'koneksi.php';
  $userId = $_POST['userId'];
  $sql = "DELETE from pegawai where userId = '".$userId."' ";
  mysqli_query($conn, $sql);
?>

Jika dijalankan hasilnya seperti ini

Tutorial Crud dengan Flutter Bagian 4

Sekarang kita sudah berhasil menghapus data, berikutnya kita akan mencoba untuk mengedit data, kami akan meng copy-paste form input yang kita gunakan pada artikel https://tukangaplikasi.com/blog/android/tutorial-crud-dengan-flutter/. Sedikit penjelasan, kami hanya akan mengirimkan parameter data, jadi tanpa memanggil datanya dari table lagi.

Sama seperti delete kita akan mengubah seditikit dibagian FlatButton

FlatButton(
                      child: Text('Edit'),
                      onPressed: () {
                        Navigator.of(context).pop();
                        Navigator.push(
                          context,
                          MaterialPageRoute(builder: (context) => EditPage(dataedit:widget.listPegawai[index])),
                        );
                      },
                    ),

Nah jadi script di atas kita akan mengirimkan data listpegawai sesuai index atau urut. Kemudian kita akan meletakan value yang kita terima ke dalam textformfield

namaLengkapController.text = widget.dataedit.namaLengkap;
alamatController.text = widget.dataedit.alamatLengkap;
notelpController.text = widget.dataedit.namaLengkap;
tanggalLahirController.text = DateFormat('yyyy-MM-dd').format(widget.dataedit.tanggalLahir);
_dateTime =widget.dataedit.tanggalLahir;

Kemudian kita akan mengubah sedikit bagian form, yaitu pada bagian tombol nya

new Expanded(
                        child: new FlatButton(
                          color: Colors.red,
                          onPressed: () {
                            prosesUbah();
                          },
                          shape: new RoundedRectangleBorder(
                            borderRadius: new BorderRadius.circular(30.0),
                          ),
                          child: new Container(
                            padding: const EdgeInsets.symmetric(
                              vertical: 20.0,
                              horizontal: 20.0,
                            ),
                            child: new Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                new Expanded(
                                  child: Text(
                                    "Ubah Data",
                                    textAlign: TextAlign.center,
                                    style: TextStyle(
                                        color: Colors.white,
                                        fontWeight: FontWeight.bold),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),

berikut fungsi prosesUbah

prosesUbah() async {
  String _namaInput = namaLengkapController.text;
  String _noTelp = notelpController.text;
  String _alamat = alamatController.text;
  String _tanggalLahir = tanggalLahirController.text;
  try {
    final response = await http
        .post("http://192.168.1.13:84/tutorial_api/edit.php/", body: {
          "userId":widget.dataedit.userId,
      "namaLengkap": _namaInput,
      "notelp": _noTelp,
      "alamatLengkap": _alamat,
      "tanggallahir": _tanggalLahir
    });

    if (response.statusCode < 200 || response.statusCode > 300) {
      print(response.statusCode);
      throw new Exception('Failed to insert data');
    } else {
      showDialog(
        barrierDismissible: true,
        context: context,

          builder: (BuildContext context) {
          return AlertDialog(
            actions: <Widget>[
              FlatButton(
                child: Text('Ok'),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => MyHomePage()),
                  );
                },
              ),
            ],
            content: Text("Berhasil"),
          );
        });
  }
  } catch (e) {
    print(e.toString());
    return null;
  }
}

lalu ini PHP nya

<?php
include 'koneksi.php';

 
 $namaLengkap 	= $_POST['namaLengkap'];
 $alamatLengkap = $_POST['alamatLengkap'];
 $tanggallahir 	= $_POST['tanggallahir'];
 $notelp 		= $_POST['notelp'];
 $userId		= $_POST['userId'];


$sql = "update pegawai set namaLengkap = '".$namaLengkap."',
alamatLengkap='".$alamatLengkap."',
tanggallahir = '".$tanggallahir."',notelp = '".$notelp."'
where userId = '".$userId."'
 ";
$result = mysqli_query($conn, $sql);





?>

Begini hasilnya

Tutorial Crud dengan Flutter Bagian 4 3

Untuk mendapatkan full source untuk artikel ini silahkan kunjungi https://github.com/bobykurniawan11/tutorial/commit/c69313a674a47ad5e74701d13ff7d9ebb3dc12bb

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Kami memberikan tutorial baru tiap harinya !!!

You have Successfully Subscribed!