Our this tutorial has a special purpose between developers, because many of our visitors wanted to test react native apps using Local PhpMyAdmin MySQL database and most of them doesn’t know how to? So in this tutorial we would going to create simple User Registration with Local PhpMyAdmin MySQL Database application in both iOS Android devices example tutorial. We would explain each and every step in this tutorial so don’t skip any step read the tutorial to end. Happy Reading .
Contents in this project User Registration with Local PhpMyAdmin MySQL Database iOS Android Example Tutorial:
1. The first step is to install the Local PHP server software in your computer, We are using the XAMPP in our tutorial, So if you have n’t install the XAMPP then download from its official website , It’s free.
2. After installing the XAMPP just start the Apache and MySQL server.
3. Create MySQL database and Table:
- Next step is to create MySQL database in your local host PhpMyAdmin, So open your web browser(Google chrome, Mozilla Firefox etc.) and type
localhost/phpmyadmin and press enter, Now you’ll see the Localhost/PhpMyAdmin MySQL database control panel. - Click on New link to create new MySQL database.
- Enter the Database name, we are creating the Database named as test.
- Next step is creating Table in your Local database, Enter table name as user_details with columns 4.
- Enter columns name id, name, email, password with type INT and VARCHAR. Now make the id as auto increment and make the id is primary key.
- Now the table creating part is done, Next step is start coding for PHP server files.
4. Creating PHP Files:
we have to create 2 php files first one is dbconfig.php and second is user_registration.php .
Code for dbconfig.php file:
This file contains all the most useful information about our server like server database username, host name, password and database name.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<?php
//Define your host here.
$HostName = “localhost”;
//Define your database name here.
$DatabaseName = “test”;
//Define your database username here.
$HostUser = “root”;
//Define your database password here.
$HostPass = “”;
?>
|
Code for user_registration.php file:
This file is used to insert user registration information data into MySQL database table. We would call this file into our react native code.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<?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 User name from JSON $obj array and store into $name.
$name = $obj[‘name’];
// Populate User email from JSON $obj array and store into $email.
$email = $obj[’email’];
// Populate Password from JSON $obj array and store into $password.
$password = $obj[‘password’];
//Checking Email is already exist or not using SQL query.
$CheckSQL = “SELECT * FROM user_details WHERE email=’$email'”;
// Executing SQL Query.
$check = mysqli_fetch_array(mysqli_query($con,$CheckSQL));
if(isset($check)){
$EmailExistMSG = ‘Email Already Exist, Please Try Again !!!’;
// Converting the message into JSON format.
$EmailExistJson = json_encode($EmailExistMSG);
// Echo the message.
echo $EmailExistJson ;
}
else{
// Creating SQL query and insert the record into MySQL database table.
$Sql_Query = “insert into user_details (name,email,password) values (‘$name’,’$email’,’$password’)”;
if(mysqli_query($con,$Sql_Query)){
// If the record inserted successfully then show the message.
$MSG = ‘User Registered Successfully’ ;
// Converting the message into JSON format.
$json = json_encode($MSG);
// Echo the message.
echo $json ;
}
else{
echo ‘Try Again’;
}
}
mysqli_close($con);
?>
|
5. Create a folder name as User_Project inside C:xampphtdocs like i did in below screenshot and copy the both dbconfig.php and second is user_registration.php PHP files inside this folder. We would now call these files with IP of our local system.
6. Open command prompt in windows and execute ipconfig command inside it to see your system’s IP address.
Important Note : After executing above command you’ll see many different IP address on your command prompt window, Now if you are connected to WiFi network then you need to copy/select the IPv4 address under Wireless LAN Adapter WiFi block and if you are connected to LAN then select the IPv4 address under Ethernet Adapter.
7. Start Coding for Application :
1. Open your project’s App.js file and import StyleSheet, View, TextInput, Button, Text and Alert component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, TextInput, Button, Text, Alert } from ‘react-native’;
|
2. Create constructor() in your project and make 3 state named as UserName, UserEmail and UserPassword inside it.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
constructor() {
super()
this.state = {
UserName: ”,
UserEmail: ”,
UserPassword: ”
}
}
|
3. Create a function named as UserRegistrationFunction(), Inside this function we would use the fetch() API to insert data into MySQL database, As you can see we are using the URL with IP address mentioned above step with the location of PHP file. After inserting the data successfully it will print the response message coming form PHP file in Alert.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
UserRegistrationFunction = () =>{
fetch(‘http://192.168.2.102/User_Project/user_registration.php’, {
method: ‘POST’,
headers: {
‘Accept’: ‘application/json’,
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify({
name: this.state.UserName,
email: this.state.UserEmail,
password: this.state.UserPassword
})
}).then((response) => response.json())
.then((responseJson) => {
// Showing response message coming from server after inserting records.
Alert.alert(responseJson);
}).catch((error) => {
console.error(error);
});
}
|
4. Create 3 TextInput component and 1 Button component inside the render’s return block, Each TextInput will get a value from user and stores in State. We would call the UserRegistrationFunction() on button onPress event.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
render() {
return (
<View style={styles.MainContainer}>
<Text style= {styles.title}>User Registration Form</Text>
<TextInput
placeholder=“Enter User Name”
onChangeText={name => this.setState({UserName : name})}
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
placeholder=“Enter User Email”
onChangeText={email => this.setState({UserEmail : email})}
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
placeholder=“Enter User Password”
onChangeText={password => this.setState({UserPassword : password})}
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
secureTextEntry={true}
/>
<Button title=“Click Here To Register” onPress={this.UserRegistrationFunction} color=“#2196F3” />
</View>
);
}
|
5. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 10
},
TextInputStyleClass: {
textAlign: ‘center’,
marginBottom: 7,
height: 40,
borderWidth: 1,
borderColor: ‘#2196F3’,
borderRadius: 5 ,
},
title:{
fontSize: 22,
color: “#009688”,
textAlign: ‘center’,
marginBottom: 15
}
});
|
6. Complete source code for App.js File :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
import React, { Component } from ‘react’;
import { StyleSheet, View, TextInput, Button, Text, Alert } from ‘react-native’;
export default class Project extends Component {
constructor() {
super()
this.state = {
UserName: ”,
UserEmail: ”,
UserPassword: ”
}
}
UserRegistrationFunction = () =>{
fetch(‘http://192.168.2.102/User_Project/user_registration.php’, {
method: ‘POST’,
headers: {
‘Accept’: ‘application/json’,
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify({
name: this.state.UserName,
email: this.state.UserEmail,
password: this.state.UserPassword
})
}).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}>
<Text style= {styles.title}>User Registration Form</Text>
<TextInput
placeholder=“Enter User Name”
onChangeText={name => this.setState({UserName : name})}
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
placeholder=“Enter User Email”
onChangeText={email => this.setState({UserEmail : email})}
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
placeholder=“Enter User Password”
onChangeText={password => this.setState({UserPassword : password})}
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
secureTextEntry={true}
/>
<Button title=“Click Here To Register” onPress={this.UserRegistrationFunction} color=“#2196F3” />
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 10
},
TextInputStyleClass: {
textAlign: ‘center’,
marginBottom: 7,
height: 40,
borderWidth: 1,
borderColor: ‘#2196F3’,
borderRadius: 5 ,
},
title:{
fontSize: 22,
color: “#009688”,
textAlign: ‘center’,
marginBottom: 15
}
});
|
Screenshots :
Also Read :
How To Enable Disable JavaScript Code in WebView React Native
React Native Layout Animation API Android iOS Example Tutorial
React Native Convert Text to Upper Case Lower Case on Button Click
RNCSafeAreaView was not found in the UIManager React Native iOS Error Solution
Wish You All a Very Very Happy New Year 2019
