Fetching Data From MySql Database To Flutter App

\nThis article has two Parts\n\n\n\n<ol>\n<li>PHP API for fetching data</li>\n\n\n\n<li>Flutter Screen of Orders</li>\n</ol>\n\n\n\n<h3 class=\"wp-block-heading\">Part 1: PHI API Explanation</h3>\n\n\n\nExplanation of PHP code step by step:\n\n\n\n<ol>\n<li>Include Necessary Files:</li>\n</ol>\n\n\n\n<pre class=\"wp-block-code\"><code> include('cors.php');\n include('../database.php');</code></pre>\n\n\n\nThese lines include two external PHP files: <code>cors.php</code> and <code>database.php</code>. These files likely contain functions or configurations needed for handling CORS (Cross-Origin Resource Sharing) and database connection setup.\n\n\n\n<ol start=\"2\">\n<li>Set Response Content Type:</li>\n</ol>\n\n\n\n<pre class=\"wp-block-code\"><code> header('Content-Type: application/json');</code></pre>\n\n\n\nThis line sets the response's content type to JSON. It indicates that the server will send JSON data in the response.\n\n\n\n<ol start=\"3\">\n<li>Initialize an Empty Response Array:</li>\n</ol>\n\n\n\n<pre class=\"wp-block-code\"><code> $response = array();</code></pre>\n\n\n\nAn empty associative array called <code>$response</code> is created to store the response data, including success status, a message, and the order data.\n\n\n\n<ol start=\"4\">\n<li>Check the Request Method:</li>\n</ol>\n\n\n\n<pre class=\"wp-block-code\"><code> if ($_SERVER['REQUEST_METHOD'] === 'GET') {</code></pre>\n\n\n\nThis conditional statement checks if the HTTP request method is a GET request. It ensures that the code below is executed only for GET requests.\n\n\n\n<ol start=\"5\">\n<li>Retrieve Mobile Number from Query Parameters:</li>\n</ol>\n\n\n\n<pre class=\"wp-block-code\"><code> $mobile = $_GET['mobile'];</code></pre>\n\n\n\nIt retrieves the mobile number from the query parameters of the GET request. This mobile number will be used to filter orders.\n\n\n\n<ol start=\"6\">\n<li>Prepare SQL Query to Fetch Orders:</li>\n</ol>\n\n\n\n<pre class=\"wp-block-code\"><code> $sql = \"SELECT * FROM checkout WHERE c_mobile = :mobile\";\n $stmt = $conn->prepare($sql);\n $stmt->bindParam(':mobile', $mobile);</code></pre>\n\n\n\nThese lines prepare an SQL query to fetch orders from a table named <code>checkout</code> where the <code>c_mobile</code> column matches the provided mobile number. It uses a prepared statement to safely bind the <code>:mobile</code> parameter.\n\n\n\n<ol start=\"7\">\n<li>Execute the SQL Query:</li>\n</ol>\n\n\n\n<pre class=\"wp-block-code\"><code> if ($stmt->execute()) {</code></pre>\n\n\n\nThis conditional statement checks if the SQL query executed successfully.\n\n\n\n<ol start=\"8\">\n<li>Fetch Orders and Build the Response:</li>\n</ol>\n\n\n\n<pre class=\"wp-block-code\"><code> $orders = $stmt->fetchAll(PDO::FETCH_ASSOC);\n $response['success'] = true;\n $response['message'] = \"Orders fetched successfully.\";\n $response['data'] = $orders;</code></pre>\n\n\n\nIf the query execution is successful, it fetches the orders as an array of associative arrays. Then, it sets the response's <code>success</code> status to true, provides a success message, and includes the fetched order data in the response.\n\n\n\n<ol start=\"9\">\n<li>Handle Execution Errors:</li>\n</ol>\n\n\n\n<pre class=\"wp-block-code\"><code> } else {\n $response['success'] = false;\n $response['message'] = \"Error: \" . $stmt->errorInfo();\n }</code></pre>\n\n\n\nIn case the SQL query execution encounters an error, it sets the <code>success</code> status to false and includes an error message in the response.\n\n\n\n<ol start=\"10\">\n<li>Invalid Request Method Handling: <code>} else { $response['success'] = false; $response['message'] = \"Invalid request method.\"; }</code> If the request method is not a GET request, it sets the <code>success</code> status to false and provides a message indicating that the request method is invalid.</li>\n\n\n\n<li>Output the Response as JSON: <code>php echo json_encode($response);</code> Finally, the code converts the <code>$response</code> array into a JSON string and sends it as the response to the client.</li>\n</ol>\n\n\n\nThis code is designed to handle GET requests for fetching orders by mobile number from a database and respond with the retrieved data in JSON format. The response includes information about the success of the operation and, if successful, the fetched order data.\n\n\n\n<h3 class=\"wp-block-heading\">Part 2: Flutter Screen Explanation</h3>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'dart:convert';\nimport 'package:flutter/material.dart';\nimport 'package:http/http.dart' as http;</code></pre>\n\n\n\n<ul>\n<li>In this part, we import necessary libraries for the Flutter application. We import <code>dart:convert</code> for JSON decoding, <code>package:flutter/material.dart</code> for Flutter widgets, and <code>package:http/http.dart</code> as <code>http</code> to make HTTP requests.</li>\n</ul>\n\n\n\n<pre class=\"wp-block-code\"><code>class Orders extends StatefulWidget {\n const Orders({Key? key}) : super(key: key);\n @override\n State<Orders> createState() => _OrdersState();\n}</code></pre>\n\n\n\n<ul>\n<li>Here, we define a Flutter widget called <code>Orders</code>. It extends <code>StatefulWidget</code>, indicating that its state can change. It has a constructor and a method that returns the state object <code>_OrdersState</code>.</li>\n</ul>\n\n\n\n<pre class=\"wp-block-code\"><code>class _OrdersState extends State<Orders> {\n final TextEditingController mobileController = TextEditingController();\n List<Map<String, dynamic>> orders = [];\n bool isLoading = false;</code></pre>\n\n\n\n<ul>\n<li>This is the state class for the <code>Orders</code> widget. It includes a <code>TextEditingController</code> for handling user input, a list of orders as maps, and a boolean <code>isLoading</code> to track whether data is being loaded.</li>\n</ul>\n\n\n\n<pre class=\"wp-block-code\"><code>void searchOrders() async {\n setState(() {\n isLoading = true;\n });</code></pre>\n\n\n\n<ul>\n<li><code>searchOrders()</code> is a method that is called when the user clicks the search button. It sets <code>isLoading</code> to true to indicate that data retrieval is in progress.</li>\n</ul>\n\n\n\n<pre class=\"wp-block-code\"><code>// Replace with your API endpoint.\nfinal apiUrl = Uri.parse('https://booppers.tk/api/fetch_order.php?mobile=${mobileController.text}');</code></pre>\n\n\n\n<ul>\n<li>This line creates a URI for the API endpoint to fetch orders. It includes the user's input (mobile number) as a query parameter.</li>\n</ul>\n\n\n\n<pre class=\"wp-block-code\"><code>final response = await http.get(apiUrl);</code></pre>\n\n\n\n<ul>\n<li>This line sends an HTTP GET request to the API endpoint using the <code>http</code> package and awaits the response.</li>\n</ul>\n\n\n\n<pre class=\"wp-block-code\"><code>if (response.statusCode == 200) {\n final Map<String, dynamic> data = json.decode(response.body);\n if (data['success']) {\n setState(() {\n orders = List<Map<String, dynamic>>.from(data['data']);\n });\n } else {\n // Handle API error here\n }\n} else {\n // Handle API request error here\n}</code></pre>\n\n\n\n<ul>\n<li>Here, we check the HTTP status code of the response. If it's 200 (OK), we parse the response body as JSON and check if the 'success' field in the data is true. If so, we update the <code>orders</code> list with the retrieved data. If 'success' is false, you can add error handling for API errors. If the status code is not 200, you can handle request errors.</li>\n</ul>\n\n\n\n<pre class=\"wp-block-code\"><code>setState(() {\n isLoading = false;\n});</code></pre>\n\n\n\n<ul>\n<li>Finally, after handling the API response or errors, we set <code>isLoading</code> back to false to indicate that data retrieval is complete.</li>\n</ul>\n\n\n\nThe remaining code is related to building the user interface, including widgets like <code>Container</code>, <code>TextField</code>, <code>ElevatedButton</code>, and <code>DataTable</code>, along with their properties and styles. This code allows users to search for orders by mobile number and displays the results in a horizontally scrollable <code>DataTable</code>. If no orders are found, it displays a \"No orders found\" message.\n\n\n\nFluu Code Of Flutter Screen:\n\n\n\n<pre class=\"wp-block-code\"><code>import 'dart:convert';\nimport 'package:flutter/material.dart';\nimport 'package:http/http.dart' as http;\n\nclass Orders extends StatefulWidget {\n const Orders({Key? key}) : super(key: key);\n @override\n State<Orders> createState() => _OrdersState();\n}\n\nclass _OrdersState extends State<Orders> {\n final TextEditingController mobileController = TextEditingController();\n List<Map<String, dynamic>> orders = [];\n bool isLoading = false;\n\n void searchOrders() async {\n setState(() {\n isLoading = true;\n });\n\n // Replace with your API endpoint.\n final apiUrl =\n Uri.parse('https://booppers.tk/api/fetch_order.php?mobile=${mobileController.text}');\n\n final response = await http.get(apiUrl);\n\n if (response.statusCode == 200) {\n final Map<String, dynamic> data = json.decode(response.body);\n if (data['success']) {\n setState(() {\n orders = List<Map<String, dynamic>>.from(data['data']);\n });\n } else {\n // Handle API error here\n }\n } else {\n // Handle API request error here\n }\n\n setState(() {\n isLoading = false;\n });\n }\n\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n title: Text('Search Orders'),\n backgroundColor: Colors.pink,\n ),\n body: SingleChildScrollView(\n child: Column(\n children: [\n Container(\n margin: EdgeInsets.all(30),\n child: Image.network('https://your-image-url-here.com'),\n ),\n Container(\n margin: EdgeInsets.all(10),\n alignment: Alignment.center,\n child: Text('Search Orders', style: TextStyle(fontSize: 25),),\n ),\n Padding(\n padding: const EdgeInsets.all(16.0),\n child: TextField(\n controller: mobileController,\n decoration: InputDecoration(\n labelText: 'Enter Mobile Number',\n border: OutlineInputBorder(\n borderRadius: BorderRadius.circular(10),\n ),\n ),\n ),\n ),\n ElevatedButton(\n onPressed: searchOrders,\n child: Text('Search'),\n ),\n if (isLoading)\n CircularProgressIndicator()\n else if (orders.isNotEmpty)\n SingleChildScrollView(\n scrollDirection: Axis.horizontal, // Enable horizontal scrolling\n child: DataTable(\n columns: const <DataColumn>[\n DataColumn(label: Text('Order ID')),\n DataColumn(label: Text('Customer Name')),\n DataColumn(label: Text('Mobile')),\n DataColumn(label: Text('State')),\n DataColumn(label: Text('Address')),\n ],\n rows: orders.map((order) {\n return DataRow(\n cells: <DataCell>[\n DataCell(Text(order['id'].toString())),\n DataCell(Text(order['c_name'].toString())),\n DataCell(Text(order['c_mobile'].toString())),\n DataCell(Text(order['c_state'].toString())),\n DataCell(Text(order['c_address'].toString())),\n ],\n );\n }).toList(),\n ),\n )\n else\n Text('No orders found.'),\n ],\n ),\n ),\n );\n }\n}\n</code></pre>\n