flutter

Menambahkan Data dengan API dalam Flutter

1. Membuat Fungsi kirimDataApi

Bukalah file helper.dart lalu masukan kode berikut ini:

Future kirimDataApi(Map<String, dynamic> dataMurid) async {
  final urlTujuan = Uri.parse(
    'https://belajar-pemrograman.my.id/data/terimaJson.php',
  );

  final respon = await http.post(
    urlTujuan,
    headers: {'Content-Type': 'application/json;charset=UTF-8'},
    body: jsonEncode(dataMurid),
  );
  final status = respon.statusCode;

  return respon.statusCode;
}

Keterangan:

  • Uri.parse digunakan untuk merubah string menjadi objek Uri
  • http.post digunakan untuk mengirimkan data lalu setelah data terkirim maka server akan mengirimkan http.response

 

2. Membuat Class TambahMuridApi

Copy file tambah_murid.dart menjadi tambah_murid_api.dart lalu rubahlah nama classnya menjadi TambahMuridApi seperti berikut ini:

class TambahMuridApi extends StatefulWidget {
  const TambahMuridApi({super.key});

  @override
  State createState() => TambahMuridState();
}

3. Perubahan di file TambahMuridState

Masih dalam file tambah_murid_api.dart lalu pada metode onPressed dalam tombol Simpan, rubahlah kode berikut ini:

masukinDataMurid(dataMurid);

                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        content: Text(
                          'Nilai tersimpan: $namaLengkap, $kotaTinggal, $jKel, $tglLahir, $alamat',
                        ),
                      ),
                    );

menjadi

  kirimDataApi(dataMurid).then((kodeStatus) {
                      if (kodeStatus == 200) {
                        ScaffoldMessenger.of(context).showSnackBar(
                          SnackBar(
                            content: Text('Sukses kirim data ke Server'),
                          ),
                        );
                      } else {
                        ScaffoldMessenger.of(context).showSnackBar(
                          SnackBar(content: Text('Error kirim data ke Server')),
                        );
                      }
                    });

Keterangan:

  • Metode then akan di jalankan ketikan proses async telah selesai

 

4. Pembuatan File PHP pada Server

Saya membuat file terimaJson.php dengan isi seperti berikut ini:

 $file = 'dataMurid.json';


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


if($objekJsonTambahan->nama != ''){

$isiFile = file_get_contents($file);
$dataMurid = json_decode($isiFile, true); 
$jumlahArray = count($dataMurid);

$idMurid = $dataMurid[$jumlahArray-1]['id']+1;


$objekJsonTambahan->id = $idMurid;
$dataMurid[] = $objekJsonTambahan;

$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 post
  • 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
  • file_put_contents($file, $dataJsonKeString) dginakan untuk menulis isi dari variabel $dataJsonKeString ke file

 

5. Penambahan Pada Menu Drawer

Bukalah file dashboard.dart lalu tambahkan pada variabel judul string berikut ini:
‘Tambah Murid API’
Lalu pada variabel pages maka tambahkan kode berikut ini:
TambahMuridApi(),
Lalu tambahkan pada objek Drawer kode berikut ini:
ListTile(
              title: Text('Tambah Murid API'),
              onTap: () {
                setState(() {
                  _indeks = 5;
                });
                Navigator.pop(context);
              },
            ),

 

6. Jalankan Aplikasi

Tekan menu Run -> Start Debugging atau shortcut tombol F5