I'm trying to insert data into my MySQL database but I'm getting an error that says "Network request failed" on my simulator. I'm guessing fetch()'s it has something to do with my systems IP address (even though I entered the right one).
The App.js file is my React Native code. The DBConfig.php file identifies my database info. The submit_user_info.php file is responsible for populating the database and the config.inc.php (not included in this post because it's too long) file has my database configurations.
Note: config.inc.php is found in MAMP > bin > phpMyAdmin > config.inc.php
Note: In DBConfig.php I left $HostUser and $HostPass blank (='') because inside config.inc.php, on lines 568-569, both $cfg['SQLValidator']['username'] and $cfg['SQLValidator']['password'] are left blank.
Here's App.js:
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, TextInput, View, Alert, Button }
from 'react-native';
class ThisApp extends Component {
constructor(props) {
super(props)
this.state = {
TextInputName: '',
TextInputEmail: '',
TextInputPhoneNumber: ''
}
}
InsertDataToServer = () =>{
const { TextInputName } = this.state ;
const { TextInputEmail } = this.state ;
const { TextInputPhoneNumber } = this.state ;
fetch('https://MySystemsIPAddress/submit_user_info.php', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: TextInputName,
email: TextInputEmail,
phone_number: TextInputPhoneNumber
})
}).then((response) => response.json())
.then((responseJson) => {
// Showing response message coming from server after inserting records.
Alert.alert(responseJson);
}).catch((error) => {
console.error(error);
});
}
render() {
return (
<View style={styles.MainContainer}>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder="Enter Name"
onChangeText={TextInputName => this.setState({TextInputName})}
// Making the Under line Transparent.
underlineColorAndroid='transparent'
style={styles.TextInputStyleClass}
/>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder="Enter Email"
onChangeText={TextInputEmail => this.setState({TextInputEmail})}
// Making the Under line Transparent.
underlineColorAndroid='transparent'
style={styles.TextInputStyleClass}
/>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder="Enter Phone Number"
onChangeText={TextInputPhoneNumber => this.setState({TextInputPhoneNumber})}
// Making the Under line Transparent.
underlineColorAndroid='transparent'
style={styles.TextInputStyleClass}
/>
<Button title="Insert Text Input Data to Server" onPress={this.InsertDataToServer} color="#2196F3" />
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
justifyContent: 'center',
flex:1,
margin: 10
},
TextInputStyleClass: {
textAlign: 'center',
marginBottom: 7,
height: 40,
borderWidth: 1,
// Set border Hex Color Code Here.
borderColor: '#FF5722',
// Set border Radius.
//borderRadius: 10 ,
}
});
export default ThisApp;
Here's DBConfig.php
<?php
//Define your host here.
$HostName = "localhost";
//Define your database name here.
$DatabaseName = "UserInfo";
//Define your database username here.
$HostUser = "";
//Define your database password here.
$HostPass = "";
?>
Here's submit_user_info.php:
<?php
// Importing DBConfig.php file.
include 'DBConfig.php';
// Creating connection.
$con = mysqli_connect($HostName,$HostUser,$HostPass,$DatabaseName);
// Getting the received JSON into $json variable.
$json = file_get_contents('php://input');
// decoding the received JSON and store into $obj variable.
$obj = json_decode($json,true);
// Populate name from JSON $obj array and store into $name.
$name = $obj['name'];
// Populate email from JSON $obj array and store into $email.
$email = $obj['email'];
// Populate phone number from JSON $obj array and store into $phone_number.
$phone_number = $obj['phone_number'];
// Creating SQL query and insert the record into MySQL database table.
$Sql_Query = "insert into UserInfoTable (name,email,phone_number) values ('$name','$email','$phone_number')";
if(mysqli_query($con,$Sql_Query)){
// If the record inserted successfully then show the message.
$MSG = 'Data Inserted Successfully into MySQL Database' ;
// Converting the message into JSON format.
$json = json_encode($MSG);
// Echo the message.
echo $json ;
}
else{
echo 'Try Again';
}
mysqli_close($con);
?>
