Sending data from your ionic app to PHP code is one of the hardest task and when I search it on Google I found posts which either too complex or not well written to understand concept properly. At last I found it and share my experience in this post. Please follow my step to do this.
I will not gonna cover that how to create a ionic project. If you haven’t create any ionic project then just create it by visiting this link http://datainflow.com/how-to-install-ionic
Step 1:
Now Create a simple view html template in ionic. I just put a code of simple register page view in ionic.
view.html
<!-- view.html start --> <ion-view view-title="Register" name="register-view"> <ion-content class="padding" drag-content="false"> <div class="list list-inset"> <label class="item item-input"> <i class="icon ion-ios-email placeholder-icon"></i> <input type="text" placeholder="Email Id" ng-model="data.username"> </label> <label class="item item-input"> <i class="icon ion-locked placeholder-icon"></i> <input type="password" placeholder="Password" ng-model="data.password"> </label> </div> <button class="button button-block loginbtn" ng-click="login()">Register</button> </ion-content> </ion-view> <!-- view.html end -->
Step 2:
Now Create a controller. I have already created a controller and here is my code for this register controller.
registerController.js
/* registerController.js start */ angular.module('starter').controller('registerController',function($scope,$http){ $scope.main.dragContent = false; $scope.data = {}; $scope.data.username = ''; $scope.data.password = ''; $scope.login = function(){ var email = $scope.data.username; var pass = $scope.data.password; var link = 'http://localhost/testproject/register.php?email='+email+'&pass='+pass; $http.get(link).success(function(result){ //success result }); } }) /* registerController.js end */
Let me explain this code. Here when a user click the button with his/her email id & password, it will come to the controller & I store these into the email and pass variable. Now I create a link where I give the address of my local server project file. And try to send a request to the sever by $http->get().
Step 3:
Now create a php project in your local server if you use Xamp,Wamp or Lamp. Inside this folder make a file name it “register.php”.
register.php
<!-- register.php start --> <?php header('Access-Control-Allow-Origin: *'); $servername = "localhost"; $username = "root"; $password = ""; $dbname = "test"; $conn = new mysqli($servername, $username, $password, $dbname); $email_id = $_REQUEST['email']; $password = $_REQUEST['pass']; $sql = "INSERT INTO test_tab (email,pass)VALUES ($email_id,$password)"; if ($conn->query($sql) === TRUE) { echo "New record inserted successfully"; } ?> <!-- register.php end -->
Here I use header(‘Access-Control-Allow-Origin: *’). Because we need it for cros platform. Then I store the data as a request input. And send success to the ionic controller.
If any query regarding this post please submit your valuable comment in the bellow. I am always here to help you.
Great job i got excellent help from you, keep doing good job