Update and Delete data in MySql database with HTTP Library API

 // import 'dart:convert';

// import 'package:flutter/material.dart';
// import 'package:http/http.dart' as http;
//
// void main() {
//   runApp(const MyApp());
// }
//
// class MyApp extends StatelessWidget {
//   const MyApp({Key? key}) : super(key: key);
//
//   @override
//   Widget build(BuildContext context) {
//     return MaterialApp(
//       title: "Update data with HTTP Library API",
//       debugShowCheckedModeBanner: false,
//       theme: ThemeData(
//         appBarTheme: const AppBarTheme(
//           backgroundColor: Colors.grey,
//           centerTitle: true,
//         ),
//       ),
//       home: const UpdateData(),
//     );
//   }
// }
//
// class UpdateData extends StatefulWidget {
//   const UpdateData({Key? key}) : super(key: key);
//
//   @override
//   State<UpdateData> createState() => UpdateDataState();
// }
//
// class UpdateDataState extends State<UpdateData> {
//   late String name;
//   late String birth_date;
//   late String phone;
//   late String gender;
//
//   @override
//   void initState() {
//     fetchUpdateModel();
//     super.initState();
//   }
//
//   Future<List<UpdateModel>> fetchUpdateModel() async {
//     final response = await http.get(
//       Uri.parse("http://192.168.1.35/Flutter/show.php"),
//     );
//
//     if (response.statusCode == 200) {
//       Iterable jsonResponse = jsonDecode(response.body);
//       List<UpdateModel> dataInputs = jsonResponse.map(
//             (model) {
//           return UpdateModel.fromJson(model);
//         },
//       ).toList();
//       return dataInputs;
//     } else {
//       throw Exception("Failed to load UpdateModel");
//     }
//   }
//
//   Future<void> updateData(UpdateModel updateModel) async {
//     TextEditingController nameController =
//     TextEditingController(text: updateModel.name);
//
//     TextEditingController birthDateController =
//     TextEditingController(text: updateModel.birth_date);
//
//     TextEditingController phoneController =
//     TextEditingController(text: updateModel.phone);
//
//     TextEditingController genderController =
//     TextEditingController(text: updateModel.gender);
//
//     String? updatedValue = await showDialog<String>(
//       context: context,
//       builder: (context) {
//         return AlertDialog(
//           title: const Text("Update data"),
//           content: Column(
//             mainAxisSize: MainAxisSize.min,
//             children: [
//               TextFormField(
//                 controller: nameController,
//                 decoration: const InputDecoration(
//                   hintText: "Enter the new name",
//                 ),
//               ),
//               TextFormField(
//                 controller: birthDateController,
//                 decoration: const InputDecoration(
//                   hintText: "Enter the new birthdate",
//                 ),
//               ),
//               TextFormField(
//                 controller: phoneController,
//                 decoration: const InputDecoration(
//                   hintText: "Enter the new phone Number",
//                 ),
//               ),
//               TextFormField(
//                 controller: genderController,
//                 decoration: const InputDecoration(
//                   hintText: "Enter the new gender",
//                 ),
//               ),
//             ],
//           ),
//           actions: [
//             TextButton(
//               child: const Text(
//                 "Cancel",
//                 style: TextStyle(fontWeight: FontWeight.bold),
//               ),
//               onPressed: () {
//                 Navigator.pop(context);
//               },
//             ),
//             TextButton(
//               child: const Text(
//                 "Update",
//                 style: TextStyle(fontWeight: FontWeight.bold),
//               ),
//               onPressed: () {
//                 Navigator.of(context).pop(nameController.text);
//                 Navigator.of(context).pop(birthDateController.text);
//                 Navigator.of(context).pop(phoneController.text);
//                 Navigator.of(context).pop(genderController.text);
//               },
//             ),
//           ],
//         );
//       },
//     );
//
//
//
//
//       if (mounted) {
//         setState(() {
//           fetchUpdateModel();
//         });
//       }
//
//     }
//   }
//
//   Future<void> deleteData(UpdateModel updateModel) async {
//     await http.post(
//       Uri.parse("http://192.168.1.35/Flutter/delete.php"),
//       body: {
//         "id": updateModel.id,
//       },
//     );
//     setState(() {
//       fetchUpdateModel();
//     });
//
//
//   }
//
//   @override
//   Widget build(BuildContext context) {
//     return Scaffold(
//       appBar: AppBar(
//         title: const Text(
//           "Update data in MySql Database with HTTP API Calling",
//           style: TextStyle(fontWeight: FontWeight.bold),
//         ),
//       ),
//       body: Center(
//         child: FutureBuilder<List<UpdateModel>>(
//           future: fetchUpdateModel(),
//           builder: (context, snapshot) {
//             if (snapshot.hasData) {
//               List<UpdateModel>? data = snapshot.data;
//               return ListView.builder(
//                 itemCount: data!.length,
//                 itemBuilder: (context, index) {
//                   return Card(
//                     child: ListTile(
//                       title: Text(
//                         "Name : ${data[index].name}",
//                         style: const TextStyle(fontWeight: FontWeight.bold),
//                       ),
//                       subtitle: Column(
//                         crossAxisAlignment: CrossAxisAlignment.start,
//                         children: [
//                           Text("BirthDate : ${data[index].birth_date}"),
//                           Text("Phone Number : ${data[index].phone}"),
//                           Text("Gender : ${data[index].gender}"),
//                         ],
//                       ),
//                       trailing: IconButton(
//                         onPressed: () {
//                           deleteData(data[index]);
//                         },
//                         icon: const Icon(Icons.delete, color: Colors.red),
//                       ),
//                       onTap: () => updateData(data[index]),
//                     ),
//                   );
//                 },
//               );
//             } else if (snapshot.hasError) {
//               return Text("Error : ${snapshot.error}");
//             } else {
//               return const Center(
//                 child: CircularProgressIndicator(),
//               );
//             }
//           },
//         ),
//       ),
//     );
//   }
// }
//
// class UpdateModel {
//   final String id;
//   final String name;
//   final String birth_date;
//   final String phone;
//   final String gender;
//
//   UpdateModel({
//     required this.id,
//     required this.name,
//     required this.birth_date,
//     required this.phone,
//     required this.gender,
//   });
//
//   factory UpdateModel.fromJson(Map<String, dynamic> json) {
//     return UpdateModel(
//       id: json["id"] ?? "",
//       name: json["name"] ?? "",
//       birth_date: json["birth_date"] ?? "",
//       phone: json["phone"] ?? "",
//       gender: json["gender"] ?? "",
//     );
//   }
// }

/// Updated code
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'API Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        appBarTheme: const AppBarTheme(
          backgroundColor: Colors.grey,
        ),
      ),
      home: MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late Future<List<UpdateModel>> futureData;

  @override
  void initState() {
    super.initState();
    futureData = fetchData();
  }

  Future<List<UpdateModel>> fetchData() async {
    final response =
        await http.get(Uri.parse('http://192.168.1.40/Flutter/show.php'));
    if (response.statusCode == 200) {
      Iterable jsonResponse = json.decode(response.body);
      List<UpdateModel> dataInputs =
          jsonResponse.map((model) => UpdateModel.fromJson(model)).toList();
      return dataInputs;
    } else {
      throw Exception('Failed to load data');
    }
  }

  /// Update method to Update the data in the MySql database
  Future<void> updateData(UpdateModel dataInput) async {
    TextEditingController nameController =
        TextEditingController(text: dataInput.name);
    TextEditingController birthDateController =
        TextEditingController(text: dataInput.birth_date);
    TextEditingController phoneController =
        TextEditingController(text: dataInput.phone);
    TextEditingController genderController =
        TextEditingController(text: dataInput.gender);

    Map<String, dynamic>? updatedData = await showDialog<Map<String, dynamic>>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('Update Data'),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              TextField(
                controller: nameController,
                decoration: const InputDecoration(
                  hintText: 'Enter new name',
                ),
              ),
              TextField(
                controller: birthDateController,
                decoration: const InputDecoration(
                  hintText: 'Enter new birthdate',
                ),
              ),
              TextField(
                controller: phoneController,
                decoration: const InputDecoration(
                  hintText: 'Enter new phone number',
                ),
              ),
              TextField(
                controller: genderController,
                decoration: const InputDecoration(
                  hintText: "Enter the gender",
                ),
              ),
            ],
          ),
          actions: <Widget>[
            TextButton(
              child: const Text(
                'Cancel',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
            TextButton(
              child: const Text(
                'Update',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              onPressed: () {
                Map<String, dynamic> updatedValues = {
                  "name": nameController.text,
                  "birth_date": birthDateController.text,
                  "phone": phoneController.text,
                  "gender": genderController.text,
                };
                Navigator.of(context).pop(updatedValues);
              },
            ),
          ],
        );
      },
    );

    if (updatedData != null) {
      await http.post(
        Uri.parse("http://192.168.1.40/Flutter/update.php"),
        body: {
          "id": dataInput.id,
          "name": updatedData["name"],
          "birth_date": updatedData["birth_date"],
          "phone": updatedData["phone"],
          "gender": updatedData["gender"],
        },
      );

      setState(() {
        futureData = fetchData();
      });
    }
  }

  /// Delete Method to delete the data in MySql database
  Future<void> deleteData(UpdateModel dataInput) async {
    await http.post(
      Uri.parse("http://192.168.1.40/Flutter/delete.php"),
      body: {
        "id": dataInput.id,
      },
    );
    setState(
      () {
        futureData = fetchData();
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Data Update and Delete in MySql database',
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
      ),
      body: Center(
        child: FutureBuilder<List<UpdateModel>>(
          future: futureData,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              List<UpdateModel>? data = snapshot.data;
              return ListView.builder(
                itemCount: data!.length,
                itemBuilder: (context, index) {
                  return Card(
                    child: ListTile(
                      title: Text(
                        data[index].name,
                        style: const TextStyle(fontWeight: FontWeight.bold),
                      ),
                      subtitle: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text("Birthdate : ${data[index].birth_date}"),
                          Text("Phone : ${data[index].phone}"),
                          Text("Gender : ${data[index].gender}"),
                        ],
                      ),
                      trailing: IconButton(
                        onPressed: () => deleteData(data[index]),
                        icon: const Icon(Icons.delete, color: Colors.red),
                      ),
                      onTap: () => updateData(data[index]),
                    ),
                  );
                },
              );
            } else if (snapshot.hasError) {
              return Text('${snapshot.error}');
            }
            return const Center(
              child: CircularProgressIndicator(),
            );
          },
        ),
      ),
    );
  }
}

class UpdateModel {
  final String id;
  final String name;
  final String birth_date;
  final String phone;
  final String gender;

  UpdateModel({
    required this.id,
    required this.name,
    required this.birth_date,
    required this.phone,
    required this.gender,
  });

  factory UpdateModel.fromJson(Map<String, dynamic> json) {
    return UpdateModel(
      id: json["id"] ?? "",
      name: json["name"] ?? "",
      birth_date: json["birth_date"] ?? "",
      phone: json["phone"] ?? "",
      gender: json["gender"] ?? "",
    );
  }
}
//  Update Data API as shown below :

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');
header('Access-Control-Allow-Headers: X-Requested-With, Content-Type');

$id = $_REQUEST["id"];
$name=$_REQUEST["name"];
$birth_date=$_REQUEST["birth_date"];
$phone=$_REQUEST["phone"];
$gender = $_REQUEST["gender"];
        
         $con = new mysqli("localhost","root","","student");
      $result= $con->query("update personal set name='$name',birth_date='$birth_date',phone='$phone',gender='$gender' where id='$id'");
      
      if($result)
      {
        $result= $con->query("select * from personal where id='$id'");    
          while($r= $result->fetch_object())
          {
            $row['personal'][]=$r;
          }
           echo json_encode($row);
      }
?>


// Delete Data API as shown below :
<?php

header('Access-Control-Allow-Origin: *');

header('Access-Control-Allow-Methods: GET, POST');

header("Access-Control-Allow-Headers: X-Requested-With");

        $id=$_REQUEST["id"];
        
         $con = new mysqli("localhost","root","","student");
   
        $result= $con->query("delete from personal where id='$id'");
          if($result)
          {   
            $result= $con->query("select * from personal");
          while($r= $result->fetch_object())
          {
            $row['personal'][]=$r;
          }
           echo json_encode($row);
        }
?>



Comments

Post a Comment

Popular posts from this blog

Second GET API Calling with Bloc simple Example in Flutter

Image
  import "package:api_with_bloc/Fourth_Get_API_call_using_Bloc/bloc/users_bloc.dart" ; import "package:api_with_bloc/Fourth_Get_API_call_using_Bloc/bloc/users_bloc_states.dart" ; import "package:flutter/material.dart" ; import "package:flutter_bloc/flutter_bloc.dart" ; void main () { runApp ( const MyApp () ) ; } class MyApp extends StatelessWidget { const MyApp ( { super .key } ) ; @override Widget build ( BuildContext context ) { return BlocProvider < UsersBloc >( create: ( context ) => UsersBloc () , child: MaterialApp ( title: "HomePage" , debugShowCheckedModeBanner: false, theme: ThemeData ( appBarTheme: const AppBarTheme ( backgroundColor: Colors. grey , centerTitle: true, ) , ) , home: const HomePageFourth () , ) , ) ; } } class HomePageFourth extends StatelessWidget { const HomePageFourth ( { super ....
Read more

Stack Container Scrollable Card widget UI with Custom Widget

Image
  import "package:flutter/material.dart" ; void main () { runApp( const MyApp ()) ; } class MyApp extends StatelessWidget { const MyApp({ super .key}) ; @override Widget build (BuildContext context) { return MaterialApp ( title: "Card Container Stack" , debugShowCheckedModeBanner: false, theme: ThemeData ( appBarTheme: const AppBarTheme ( backgroundColor: Colors. grey , centerTitle: true, ) , ) , home: const CardContainerStack () , ) ; } } class CardContainerStack extends StatelessWidget { const CardContainerStack({ super .key}) ; @override Widget build (BuildContext context) { return Scaffold ( appBar: AppBar ( title: const Text ( "Scrollable Containers" , style: TextStyle (fontWeight: FontWeight. bold ) , ) , ) , body: SingleChildScrollView ( child: Center ( child: Column ( mainA...
Read more

Pagination with Bloc Pattern in Flutter

Image
  import "package:flutter/material.dart" ; import "package:flutter_bloc/flutter_bloc.dart" ; import "package:pagination_practice/Pagination_with_Bloc/Bloc/bloc.dart" ; import "package:pagination_practice/Pagination_with_Bloc/Bloc/event.dart" ; import "package:pagination_practice/Pagination_with_Bloc/Bloc/state.dart" ; import "package:pagination_practice/Pagination_with_Bloc/post_repo.dart" ; void main () { runApp ( const MyApp () ) ; } class MyApp extends StatelessWidget { const MyApp ( { super .key } ) ; @override Widget build ( BuildContext context ) { return RepositoryProvider < PostRepo >( create: ( context ) => PostRepo () , child: BlocProvider < PostBloc > ( create: ( context ) => PostBloc ( context.read < PostRepo > () ) ..add ( FetchPostsEvent () ) , child: MaterialApp ( title: "Pagination" , debugShowCheckedModeBa...
Read more