Install Ionic Cordova<\/a><\/strong><\/em>. If you have done it already, skip this step.<\/p>\n app.module.ts<\/em><\/p>\n Import http module as we will use http post method in our form and import reactive form module as we will use reactive form in our app.<\/p>\n <\/p>\n home.html<\/em><\/p>\n We will create our registration form here in reactive form format and validate them using reactive method. In our form there will be four fields (name, email, password, confirm password). Submit button will\u00a0 be disabled if form is invalid and after submit we will call a function registerToApp()<\/p>\n <\/p>\n home.ts<\/em><\/p>\n Import formbuilder, validators, http, response, header, rxjs map. And next we will declare them in constructor.<\/p>\n <\/p>\n In this file we have to create our form validation rules here for specific fields of our registration form in reactive form builder module<\/p>\n <\/p>\n We must have to define the submit function registerToApp here<\/p>\n <\/p>\n As\u00a0we want to make our code clean, we will create a separate service for registration. We will create a folder service within “src” folder and within that service folder we will create registration.service.ts file.<\/em><\/strong><\/p>\n registration.service.ts<\/em><\/p>\n We will import all the necessary files to create our own service and as we are going to inject this service we have to define this service as injectable<\/p>\n <\/p>\n We will define a function here doRegister(), within this function we will define headers and Create a http post method to insert data into database by insert_data.php which we will create in the next step. In this function \u00a0First parameter\u00a0 will be the exact path of that php file from localhost if using xampp and this function will return an output\u00a0 from that php file which we will hold in \u2018res\u2019 variable and we will do mapping to get the results in json format<\/p>\n <\/p>\n Let\u00a0us create a file within “src > assets” folder and named it as insert_data.php<\/em><\/strong><\/p>\n insert_data.php<\/em><\/p>\n Here we will assign our form values to php variables and We will connect to our database registration and run mysql query to insert data to table called registered_members by using simple php code here<\/p>\n In both the cases(failed or success) it will return a json encoded array… if we return only text here it will return an json parse error every time in our console<\/p>\n Here we are using a simple cheking. That is if an email which is entered in that registration form is already exist, it will show an error message.<\/p>\n If everything is alright the Then insert the values into the database.<\/p>\n <\/p>\n Return to app.module.ts<\/em><\/p>\n Import that service we have just created in this file so that we can access it anywhere<\/p>\n <\/p>\n go back to home.ts<\/em><\/p>\n Import registration.service.ts and declare it in constructor<\/p>\n Within the function named registerToApp() we will run our registration service and subscribe the returned values so that we can view if the values are submitted properly or not. if success then it will return a success function along with insertion of those data into database.<\/p>\n That’s all. You have created a simple registration form using Ionic and Php.<\/strong><\/p>\n You can view the full project on Github\u00a0<\/a><\/strong><\/em><\/p>\nStep 2<\/strong><\/h5>\n
![\"Step](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/09\/step2.png\")
<\/p>\nStep 3<\/strong><\/h5>\n
![\"Step](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/09\/step3.png\")
<\/p>\nStep 4<\/strong><\/h5>\n
![\"Step](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/09\/step4-1.png\")
<\/p>\n![\"Step](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/09\/step4-2.png\")
<\/p>\n![\"Step](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/09\/step4-3.png\")
<\/p>\nStep 5<\/strong><\/h5>\n
![\"Step](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/09\/step5-1.png\")
<\/p>\n![\"Step](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/09\/step5-2.png\")
<\/p>\nStep 6<\/strong><\/h5>\n
![\"database\"](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/09\/database.png\")
<\/p>\n![\"database](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/09\/database-table.png\")
<\/p>\n![\"Step](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/09\/step6.png\")
<\/p>\nStep 7<\/strong><\/h5>\n
![\"Step](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/09\/step7.png\")
<\/p>\nStep 8<\/strong><\/h5>\n
![\"Step8.1\"](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/09\/step8-1.png\")
<\/p>\n![\"Step8.2\"](\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2017\/09\/step8-2.png\")
<\/p>\n