flutter

Hapus data dengan API dalam Flutter

1. Membuat Fungsi hapusDataMuridApi

Bukalah file helper.dart lalu masukkan kode berikut ini:

Future hapusDataMuridApi(int id) async {
  final urlTujuan = Uri.parse(
    'https://belajar-pemrograman.my.id/data/hapusJson.php',
  );

  Map<String, dynamic> idMurid = {"id": id};
  final respon = await http.delete(
    urlTujuan,
    headers: {'Content-Type': 'application/json;charset=UTF-8'},
    body: jsonEncode(idMurid),
  );

  return respon.statusCode;
}

Keterangan:

  • http.delete berarti saya mengirim http delete ke server
  • Uri.parse dalah metode yang digunakan untuk merubah string json menjadi objek uri
  • jsonEncode(idMurid)-> disini kode ini digunakan untuk merubah  Map<String, dynamic> menjadi  string json

 

2. Membuat File di Server Web

Buatlah file hapusJson.php dan masukkan kode berikut ini:

$file = 'dataMurid.json';


$stringJson = file_get_contents('php://input');

$o = json_decode($stringJson);

$id = $o->id;

if($id > 0){

$isiFile = file_get_contents($file);

$dataMurid = json_decode($isiFile, true); 

$filteredArray = array_filter($dataMurid, function($item) use ($id) {
    return $item['id'] !== $id;
});

$dataMurid = array_values($filteredArray);
$dataJsonKeString = json_encode($dataMurid, JSON_PRETTY_PRINT);
file_put_contents($file, $dataJsonKeString);

return http_response_code(200);
}else{
return http_response_code(400);
}

Keterangan:

  • file_get_contents(‘php://input’) digunakan untuk membaca data kiriman http delete
  • json_decode($stringJson) digunakan untuk mengubah string menjadi objek
  • json_decode($isiFile, true) digunakan untuk mengubah string menjadi array assosiatif
  • json_encode untuk merubah array menjadi string
  • array_filter digunakan untuk menfilter array jika pengujian didalamnya bernilai true maka nilai arraynya akan disimpan
  • file_put_contents($file, $dataJsonKeString) dginakan untuk menulis isi dari variabel $dataJsonKeString ke file

 

3. Perubahan pada file tampil_murid_api

Bukalah file tampil_murid_api.dart lalu pada bagian fungsi refreshData maka rubahlah seperti berikut ini:

void refreshData() {
    setState(() {
      dataSemuaMurid = tampilDataMuridApi();
    });
  }

Lalu dalam tombol Hapus pada metode onPressed masukkan kode berikut ini:

 hapusDataMuridApi(m["id"]).then((kodeStatus) {
                                  if (kodeStatus == 200) {
                                    refreshData();
                                  }
                                });

Keterangan:

  • Metode then digunakan agar setelah fungsi hapusDataMuridApi selesai dijalankan maka blok didalam then ini akan dijalankan

 

4. Jalankan Aplikasi

Tekan menu Run -> Start Debugging atau shortcut tombol F5