I have posted tutorial on this topic about a year ago and few peoples are facing problems understanding the code. So today i am making the same tutorial again with more explanation, So all the new and old users can understand it easily. In this tutorial we would create react native application with user registration form containing 3 TextInput fields User Name, User Email and User Password. After submitting the values the data goes to our web server. Where we would receive the data using PHP API and using the MySQL queries we would insert the data into MySQL database. So let’s get started :).
NOTE: We are using 000webhost.com website for testing our PHP API + MySQL database. This website is amazing guys and gives us almost every facility to test our applications using free online server. They gave us free sub domain of which i am using in this tutorial. Our testing sub-domain is reactnativetestapi.000webhostapp.com/ .
Contents in this project React Native User Registration using PHP MySQL Database PART-1 Android iOS Tutorial:
1. Creating MySQL Database :
Log-In into your PhpMyAdmin control panel and create a database or you can use your own old already created MySQL database. In my case i have created the MySQL database and my database name is id10676035_react_native_test_database. You can see in below screenshot how my database looks like.
2. Creating User Registration Table in MySQL database to store user details:
1. Select your database, In which you want to create table and write your Table name in create table box with column number. I am creating a table named as user_data_table with 4 columns. I will explain all the columns name in next step. Now press the Go button to create new table.
2. In the name field you have to enter 4 columns name id, user_name, user_email and user_password. Set their Length/Values to 255 and select ID as Auto_Increment and Set ID key to Primary. For exact match see the below screenshot. You could click on the Screenshot to see it in bigger size. Now hit the Save button to create table with all details.
3. Here you go. Now your table is created and the Database part has completed. Next step is to create PHP API to receive data from app.
3. Creating PHP Web API to Receive data from Android iOS React Native App:
1. Now we need to make a .php extension file using Notepad or Notepad++. This PHP file would connect our MySQL database table to our react native app. Open the Notepad or Notepad++ and paste all below code and save the file with registration_api.php name. After done creating this file you have to upload this file into your Web hosting server using their File Manager our using FileZilla ftp client. Here is my domain URL after uploading this file on my own testing web server. https://reactnativetestapi.000webhostapp.com/ . After opening the domain you’ll see my file is there. We would use this file URL to test our server.
Source code for registration_api.php 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
|
<?php
//Put your own hosting server HOST name here.
$HostName = “localhost”;
//Put your own MySQL database name here.
$DatabaseName = “id10676035_react_native_test_database”;
//Put your own MySQL database User Name here.
$HostUser = “id10676035_root”;
//Put your own MySQL database Password here.
$HostPass = “1234567890”;
// Creating connection.
$con = mysqli_connect($HostName,$HostUser,$HostPass,$DatabaseName);
// Getting the received JSON into $Received_JSON variable.
$Received_JSON = file_get_contents(‘php://input’);
// decoding the received JSON and store into $obj variable.
$obj = json_decode($Received_JSON,true);
// Populate User name from JSON $obj array and store into $user_name variable.
$user_name = $obj[‘user_name’];
// Populate User email from JSON $obj array and store into $user_email variable.
$user_email = $obj[‘user_email’];
// Populate Password from JSON $obj array and store into $user_password variable.
$user_password = $obj[‘user_password’];
//Checking User entered Email is already exist or not in MySQL database using SQL query.
$CheckSQL = “SELECT * FROM user_data_table WHERE user_email=’$user_email'”;
// Executing SQL Query.
$check = mysqli_fetch_array(mysqli_query($con,$CheckSQL));
if(isset($check)){
$Duplicate_email = ‘Email Already Exist, Please Try Again With Different Email.’;
// Converting the message into JSON format.
$Duplicate_email_Json = json_encode($Duplicate_email);
// Echo, Printing the message on screen.
echo $Duplicate_email_Json ;
}
else{
// Creating SQL query and insert the record into MySQL database table if email dose not exist in database.
$Sql_Query = “insert into user_data_table (user_name,user_email,user_password) values (‘$user_name’,’$user_email’,’$user_password’)”;
if(mysqli_query($con,$Sql_Query)){
// Show the success message.
$MSG = ‘User Registered Successfully’ ;
// Converting the message into JSON format.
$json = json_encode($MSG);
// Echo, Print the message on screen.
echo $json ;
}
else{
echo ‘Try Again’;
}
}
mysqli_close($con);
?>
|
Important Note: You have to put your own hosting server details in this file like your database HostName, Database name, Database Username, Database Password. All these details will be found on your hosting Cpanel. Get ready for NEXT part of this tutorial to learn about react native application coding.
Also Read :
React Native Create Drop Shadow Effect Text in Android iOS Example
Add Single Line And Multiple Line Comments Syntax in React Native JSX
React Native Rotate Text View Elements to Specific Degree using Transform
Create Horizontal ScrollView in React Native Tutorial Android iOS
React Native User Registration with Local PhpMyAdmin MySQL Database iOS Android Tutorial
