flutter

• Pertemuan 1
  • Perkenalan
  • Membuat Projek dalam Flutter
  • MaterialApp dan Scaffold dalam Flutter
  • Membuat Form Login di Flutter
  • Tugas
  • Membuat Form Register di Flutter
  • Tugas
• Pertemuan 2
  • Berpindah Antar Dua Halaman dengan Navigasi dalam FLutter
  • Perbedaan StatelessWidget dan StatefulWidget dalam Flutter
  • Merubah Form Register ke Stateful Widget
  • Membuat Menu Drawer di Flutter
• Pertemuan 3
  • Merubah Form Login ke Stateful Widget
  • Menyimpan dengan SharedPreferences dalam Flutter
  • Menampilkan Halaman saat menekan menu di Drawer Flutter
  • Membuat Form Tambah Murid di Flutter
• Pertemuan 4
  • Menyiapkan Akses Database lokal SQLite dalam Flutter
  • Simpan Data dari Form ke Tabel
  • Menampilkan Data dari Database dalam Flutter
  • Menghapus data dari database dalam Flutter
  • Update data database dalam Flutter
• Pertemuan 5
  • Menampilkan data dari API dalam Flutter
  • Menambahkan Data dengan API dalam Flutter
  • Hapus data dengan API dalam Flutter
  • Update data dengan API dalam Flutter

Update data dengan API dalam Flutter

1. Membuat Fungsi helper updateDataMuridApi

Bukalah file helper.dart lalu masukkan kode berikut ini:

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

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

  return respon.statusCode;
}

Keterangan:

• Uri.parse digunakan untuk merubah string menjadi objek Uri
• http.put digunakan untuk mengirimkan data ke server dengan tujuan untuk update data di server  lalu setelah data terkirim maka server akan mengirimkan http.response

2. Pembuatan file PHP di server

Buatlah file updateJson.php lalu isi dengan kode berikut ini:

$file = 'dataMurid.json';


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


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

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

foreach ($dataMurid as $indeks=>$nilai) {
   
        if($nilai['id'] ==$objekJson->id){
            $dataMurid[$indeks]['jkel'] =$objekJson->jkel;
            
        }
   
    
}
$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

3 . Pembuatan File Edit

Copy file edit_murid.dart menjadi edit_murid_api.dart

4. Perubahan Class

Rubahlah class EditMurid menjadi EditMuridApi seperti berikut ini:

class EditMuridApi extends StatefulWidget {
  final Map<String, dynamic> dataMurid;
  const EditMuridApi({super.key, required this.dataMurid});

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

5. Perubahan  objek State

class EditMuridState extends State<EditMuridApi>

6. Pemanggilan fungsi helper updateDataMuridApi

Masih dalam file edit_murid_api.dart, pada bagian tombol update dalam metode onPressed masukan kode berikut ini:

7. Perubahan dalam file Dashboard.dart

@override
  void initState() {
    super.initState();
    if (widget.dataMurid.isNotEmpty) {
      if (widget.dataMurid['api'] == 1) {
        setState(() {
          _indeks = 6;
        });
      } else {
        setState(() {
          _indeks = 3;
        });
      }
    }
  }

Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                    builder: (context) {
                                      m['api'] = 1;
                                      return Dashboard(dataMurid: m);
                                    },
                                  ),
                                );