Sending Data From Flutter To MySql Database Using PHP

In this article we will do three major tasks:

1. Create Sql Table
2. Create the flutter checkout screen
3. Create API using PHP

Step 1: Create SQL Table

CREATE TABLE checkout (
  id INT  PRIMARY KEY,
  c_name VARCHAR(255),
  c_mobile VARCHAR(10),
  c_state VARCHAR(255),
  c_address TEXT
);

The above SQL code creates a table called "checkout" with columns for storing customer information, including a unique identifier (id), name (c_name), mobile number (c_mobile), state (c_state), and address (c_address). The table is designed to efficiently store and retrieve customer checkout data for use in an application.

Step 2: Create a Flutter Screen Called Checkout

Certainly! Let's break down the Flutter code for the Checkout Screen and explain it step by step for your blog post. This code handles form input and sends data to a server using HTTP POST requests.

Flutter Screen Part 1: Import Dependencies

import 'package:ecommerce_app/Home/Home.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

In this step, you import the necessary packages, including the Flutter framework, a custom Home widget, and the http package for making HTTP requests.

Flutter Screen Part 2: Create a Stateful Widget for CheckoutScreen

class CheckoutScreen extends StatefulWidget {
  const CheckoutScreen({Key? key}) : super(key: key);

  @override
  _CheckoutScreenState createState() => _CheckoutScreenState();
}

This step defines a stateful widget for the Checkout Screen. It extends StatefulWidget and specifies that it will use _CheckoutScreenState for its state.

Flutter Screen Part 3: Define State and Initialize Variables

class _CheckoutScreenState extends State {
  final _formKey = GlobalKey();
  String selectedState = 'Select State';
  // Other variable declarations...
}

In this part, you create the state for the CheckoutScreen. You initialize a form key, a variable for the selected state, and other variables as needed for your form fields.

Flutter Screen Part 4: Build the Scaffold and UI

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Checkout Now'),
      backgroundColor: Colors.pink,
    ),
    body: SingleChildScrollView(
      child: Column(
        children: [
          // UI components such as images, headings, and the form...
        ],
      ),
    ),
  );
}

This step defines the UI of the Checkout Screen within a Scaffold. It includes an app bar, an image, a form, and other UI components.

Flutter Screen Part 5: Create Form Fields

Widget _buildTextInputField(
    String labelText, TextEditingController controller, {
    TextInputType inputType = TextInputType.text,
    String? Function(String?)? validator,
}) {
  return TextFormField(
    controller: controller,
    decoration: InputDecoration(
      labelText: labelText,
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(50),
        borderSide: BorderSide(color: Colors.pink),
      ),
    ),
    keyboardType: inputType,
    validator: validator,
  );
}

This part defines a function _buildTextInputField to create text input fields for the form. It allows customization of input type and validation.

Flutter Screen Part 6: Create the State Dropdown

Widget _buildStateDropdown() {
  return DropdownButtonFormField(
    // Dropdown UI...
  );
}

This function creates a state dropdown field. It uses DropdownButtonFormField and builds a dropdown list of Indian states.

Flutter Screen Part 7: Handle Form Submission

void sendDataToServer() async {
  // Create a map of the form data...
  // Make an HTTP POST request to send the form data...
}

This function, sendDataToServer, is called when the user submits the form. It creates a map of form data and sends it to the server via an HTTP POST request using the http package. The response is handled based on its status code.

Flutter Screen Part 8: Handle Response and Navigation

if (response.statusCode == 200) {
  // Request was successful, you can handle the response here...
} else {
  // Request failed, handle the error...
}

In this part, you check the response status code. If the request is successful (status code 200), you can handle the response. If there's an error, you handle it accordingly. In this example, if the request is successful, it navigates to the "Home" screen using Navigator.

Flutter Screen Final: Full Source Code

import 'package:ecommerce_app/Home/Home.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http; // Import the http package.

class CheckoutScreen extends StatefulWidget {
  const CheckoutScreen({Key? key}) : super(key: key);

  @override
  _CheckoutScreenState createState() => _CheckoutScreenState();
}

class _CheckoutScreenState extends State {
  final _formKey = GlobalKey();
  String selectedState = 'Select State';

  List indianStates = [
    'Select State',
    'Andhra Pradesh',
    'Arunachal Pradesh',
    'Assam',
    'Bihar',
    'Chhattisgarh',
    'Goa',
    'Gujarat',
    'Haryana',
    'Himachal Pradesh',
    'Jharkhand',
    'Karnataka',
    'Kerala',
    'Madhya Pradesh',
    'Maharashtra',
    'Manipur',
    'Meghalaya',
    'Mizoram',
    'Nagaland',
    'Odisha',
    'Punjab',
    'Rajasthan',
    'Sikkim',
    'Tamil Nadu',
    'Telangana',
    'Tripura',
    'Uttar Pradesh',
    'Uttarakhand',
    'West Bengal',
    // Rest of the states
  ];

  // Define controllers for the form fields to get their values.
  TextEditingController nameController = TextEditingController();
  TextEditingController mobileController = TextEditingController();
  TextEditingController addressController = TextEditingController();

  @override
  void dispose() {
    nameController.dispose();
    mobileController.dispose();
    addressController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Checkout Now'),
        backgroundColor: Colors.pink,
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              margin: EdgeInsets.all(30),
              child: Image.network('https://api.example.com/assets/img/cart.png'),
            ),
            SizedBox(height: 20),
            Container(
              margin: EdgeInsets.all(10),
              alignment: Alignment.center,
              child: Text('Checkout Now', style: TextStyle(fontSize: 25)),
            ),
            Form(
              key: _formKey,
              child: Column(
                children: [
                  _buildTextInputField('Your Name', nameController),
                  SizedBox(height: 20),
                  _buildTextInputField('Your Mobile Number', mobileController,
                      inputType: TextInputType.number,
                      validator: (value) {
                        if (value!.isEmpty) {
                          return 'Please enter your mobile number';
                        } else if (value.length != 10) {
                          return 'Mobile number should be 10 digits';
                        }
                        return null;
                      }),
                  SizedBox(height: 20),
                  _buildStateDropdown(),
                  SizedBox(height: 20),
                  _buildTextInputField('Your Address', addressController),
                  ElevatedButton(
                    onPressed: () {
                      if (_formKey.currentState!.validate()) {
                        // Form is valid, send data to the server.
                        sendDataToServer();
                      }
                    },
                    child: Text('Submit'),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildTextInputField(
      String labelText, TextEditingController controller, {
        TextInputType inputType = TextInputType.text,
        String? Function(String?)? validator,
      }) {
    return TextFormField(
      controller: controller,
      decoration: InputDecoration(
        labelText: labelText,
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(50),
          borderSide: BorderSide(color: Colors.pink),
        ),
      ),
      keyboardType: inputType,
      validator: validator,
    );
  }

  Widget _buildStateDropdown() {
    return DropdownButtonFormField(
      decoration: InputDecoration(
        labelText: 'Your State',
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(50),
          borderSide: BorderSide(color: Colors.pink),
        ),
      ),
      value: selectedState,
      items: indianStates.map((state) {
        return DropdownMenuItem(
          value: state,
          child: Text(state),
        );
      }).toList(),
      onChanged: (value) {
        setState(() {
          selectedState = value!;
        });
      },
    );
  }

  void sendDataToServer() async {
    // Create a map of the form data.
    Map formData = {
      'name': nameController.text,
      'mobile': mobileController.text,
      'state': selectedState,
      'address': addressController.text,
    };

    // Make an HTTP POST request to send the form data.
    final response = await http.post(
      Uri.parse('https://api.example.com/api/checkout.php'),
      body: formData,
    );

    if (response.statusCode == 200) {
      // Request was successful, you can handle the response here.
      print('Response: ${response.body}');
      // Request was successful, navigate to the thank you page.
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => Home()),
      );
    } else {
      // Request failed, handle the error.
      print('Error: ${response.reasonPhrase}');
    }
  }
}

Step 3: Create API Using PHP

Here's the PHP code for handling a POST request and inserting data into a MySQL database:

PHP API Part 1: Import Necessary Files and Establish a Database Connection

// Set the response content type to JSON.
header('Content-Type: application/json');

// Initialize an empty response array to hold the result.
$response = array();

// Check if the request is a POST request.
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Handle the POST request here.
} else {
    // Handle other request methods (e.g., GET).
}

// Get data from the POST request.
$c_name = $_POST['name'];
$c_mobile = $_POST['mobile'];
$c_state = $_POST['state'];
$c_address = $_POST['address'];

// Create an SQL query to insert the data into the database using prepared statements.
$sql = "INSERT INTO checkout (c_name, c_mobile, c_state, c_address) VALUES (:name, :mobile, :state, :address)";

// Prepare the SQL statement for execution.
$stmt = $conn->prepare($sql);

// Bind the parameters to the prepared statement.
$stmt->bindParam(':name', $c_name);
$stmt->bindParam(':mobile', $c_mobile);
$stmt->bindParam(':state', $c_state);
$stmt->bindParam(':address', $c_address);

// Execute the prepared statement.
if ($stmt->execute()) {
    // If data insertion is successful, set success to true and provide a success message.
    $response['success'] = true;
    $response['message'] = "Data inserted successfully.";
} else {
    // If an error occurs during data insertion, set success to false and provide an error message.
    $response['success'] = false;
    $response['message'] = "Error: " . $stmt->errorInfo();
}

} else {
    // If the request method is not POST, set success to false and provide an error message for an invalid request method.
    $response['success'] = false;
    $response['message'] = "Invalid request method.";
}

// Output the response as a JSON-encoded string.
echo json_encode($response);

prepare($sql);
    
    // Bind the parameters.
    $stmt->bindParam(':name', $c_name);
    $stmt->bindParam(':mobile', $c_mobile);
    $stmt->bindParam(':state', $c_state);
    $stmt->bindParam(':address', $c_address);

    if ($stmt->execute()) {
        $response['success'] = true;
        $response['message'] = "Data inserted successfully.";
    } else {
        $response['success'] = false;
        $response['message'] = "Error: " . $stmt->errorInfo();
    }
} else {
    $response['success'] = false;
    $response['message'] = "Invalid request method.";
}

// Output the response as JSON.
echo json_encode($response);
?>