Unable to post data to database using Ionic - php

Question

I am trying to gain some experience with creating an Ionic app. In my app, I have created a registration form.
register.html
<form ua-signup ng-controller="registerCtrl">
<ion-view title="Sign Up">
<ion-content>
<div class="list list-inset">
<label class="item item-input">
<span class="input-label">ID</span>
<input type="text" ng-model="data.id">
</label>
<label class="item item-input">
<span class="input-label">First Name</span>
<input type="text" ng-model="data.fname">
</label>
<label class="item item-input">
<span class="input-label">Last Name</span>
<input type="text" ng-model="data.lname">
</label>
<label class="item item-input">
<span class="input-label">Email</span>
<input type="text" ng-model="data.email" ua-is-email>
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="data.pass">
</label>
<label class="item item-input">
<span class="input-label">Mobile No.</span>
<input type="tel" ng-model="data.tel">
</label>
<label class="item item-input item-select">
<div class="input-label" ng-model="data.course">
Course
</div>
<select>
<option selected>HUBIT</option>
<option>HUBMC</option>
<option>HUBIM</option>
<option>HUBGM</option>
</select>
</label>
<label class="item item-input">
<div class="input-label">
Subject
</div>
<select multiple="multiple">
<option selected>HUBIT</option>
<option>HUBMC</option>
<option>HUBIM</option>
<option>HUBGM</option>
</select>
</label>
</div>
<div class="padding">
<button type="submit" class="button button-block button-positive" ng-click="Register(data);">
<span ng-show="!loading">Create Account</span>
<i ng-show="loading" class="ion-loading-b"></i>
</button>
</div>
</ion-content>
</ion-view>
<div class="bar bar-footer bar-assertive" ng-show="error">
</div>
</form>
controller.js
app.controller('registerCtrl', function($scope,$http,$state) {
$scope.user = {};
$scope.register = function(data){
$scope.id = $scope.data.id;
$scope.fname = $scope.data.fname;
$scope.lname = $scope.data.lname;
$scope.email = $scope.data.email;
$scope.pass = $scope.data.pass;
$scope.tel = $scope.data.tel;
$scope.course = $scope.data.course;
$http.post("http://localhost:81/fyp/register.php",{
'id':$scope.id,
'fname':$scope.fname,
'lname':$scope.lname,
'email':$scope.email,
'pass':$scope.pass,
'tel':$scope.tel,
'course':$scope.course
})
.success(function(data, status, headers, config){
console.log("data inserted");
})
$state.go('tab.dash');
}
});
And my register.php which is on a xampp server
?php
if (isset($_SERVER['HTTP_ORIGIN'])) {
header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Max-Age: 86400'); // cache for 1 day
}
// Access-Control headers are received during OPTIONS requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
exit(0);
}
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
$id = mysql_real_escape_string($request->id);
$fname = mysql_real_escape_string($request->fname);
$lname = mysql_real_escape_string($request->lname);
$password = mysql_real_escape_string($request->pass);
$email = mysql_real_escape_string($request->email);
$phone = mysql_real_escape_string($request->tel);
$course = mysql_real_escape_string($request->course);
// Connect to MySQL
$db = mysql_connect("localhost","root","");
if (!$db) {
die("Could not connect to database </body></html>");
};
// open a9963146_fyp16 database
$db_select = mysql_select_db('fyp',$db);
if (!$db_select) {
die("Could not connect to database </body></html>");
};
if($id != '' && $lname != '' & $password != '' && $email != '' && $phone != ''){
$query = mysql_query("INSERT into Student(id, firstname, lastname, password, email, phone, course) values ('$id', '$fname', '$lname', '$password', '$email', '$phone', '$course')");
echo "Registered successfully!";
}
else{
echo "All fields must be filled!";
}
mysql_close( $db );
?>
I am still new to this and I am practicing. But I found out that the value I am trying to insert, is not added to my database. Why is it so? Did I do something wrong with codes in controller.js and the register.php? Can someone show me the mistakes I made and how can I correct it?

Answer 1

I would recommend you start by changing the $http.post to the following:
var body = {
'id':$scope.id,
'fname':$scope.fname,
'lname':$scope.lname,
'email':$scope.email,
'pass':$scope.pass,
'tel':$scope.tel,
'course':$scope.course
};
$http.post("http://localhost:81/fyp/register.php", body)
.then(function(response) {
console.log(response);
}, function(error) {
console.log(error);
}
The reason being that the .success method has been deprecated for this function, as described here:
The $http legacy promise methods success and error have been
deprecated. Use the standard then method instead. If
$httpProvider.useLegacyPromiseExtensions is set to false then these
methods will throw $http/legacy error.
This will probably not solve your problem, but the added error function should allow you to see whether there are any errors, which you can then share with us so we can help you further. The added variable for the body is completelyoptional.