Ionic Framework - PHP Blank data is getting inserted into MySQL Database

Question

Using Ionic framework I'm creating Mobile Hybrid App. when I'm trying to insert data into Database, blank data is getting inserted. I'm not able to figure out what is the silly mistake I'm doing. please help me out.

home.html

<ion-view view-title="Registration">
<ion-content class="padding">
    <form>
        <div class="list">
            <label class="item item-input item-stacked-label">
                <span class="input-label">First Name</span>
                <input type="text" placeholder="John" name="firstName" ng-model="firstName">
            </label>
            <label class="item item-input item-stacked-label">
                <span class="input-label">Last Name</span>
                <input type="text" placeholder="Doe" name="lastName" ng-model="lastName">
            </label>
            <label class="item item-input item-stacked-label">
                <span class="input-label">Email</span>
                <input type="text" placeholder="john@suhr.com" name="email" ng-model="email">
            </label>
            <label class="item item-input item-stacked-label">
                <span class="input-label">Password</span>
                <input type="password" placeholder="Password" name="password" ng-model="password">
            </label>
            <label class="item item-input item-stacked-label">
                <span class="input-label">Confirm Password</span>
                <input type="password" placeholder="Confirm Password" ng-model="confirmPassword">
            </label>
            <a href="#/login" ng-click="createAccount()" class="button button-outline button-block button-positive">
                Create Account
            </a>
        </div>
    </form>
</ion-content>

app.js

angular.module('starter', ['ionic', 'starter.controllers'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
    if (window.cordova && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        cordova.plugins.Keyboard.disableScroll(true);
    }
    if (window.StatusBar) {
        StatusBar.styleDefault();
    }
});
}).config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$stateProvider
.state('registration', {
    url: '/registration',
    templateUrl: 'templates/registration.html',
    controller:'registrationCtrl'
}),
$urlRouterProvider.otherwise('/login');});

controller.js

angular.module('starter.controllers', []).controller('registrationCtrl', function($scope, $ionicNavBarDelegate, $http) {
$ionicNavBarDelegate.showBackButton(false);
$scope.createAccount = function() {
    $http.post("http://proittechnology.com/dev/stylr/createAccount.php", {
            'firstName': $scope.firstName,
            'lastName': $scope.lastName,
            'email': $scope.email,
            'password': $scope.password
        })
        .success(function(data, status, headers, config) {
            alert("Data inserted successfully");
        });
}});

createAccount.php

$server = 'localhost';
    $username ="xxx";
    $passwd ='xxx';
    $Dbase = 'xxx';
    $db = mysqli_connect($server,$username,$passwd) or die("Could not connect database");
            mysqli_select_db($db, $Dbase) or die("Could not select database");
    $data = json_decode(file_get_contents("php://input"));
    $firstName = mysql_real_escape_string($data->firstName); 
    $lastName = mysql_real_escape_string($data->lastName);
    $email = mysql_real_escape_string($data->email);
    $password = mysql_real_escape_string($data->password);
    mysqli_query($db, "INSERT INTO users(`firstName`, `lastName`, `email`, `password`)VALUES('".$firstName."','".$lastName."','".$email."','".$password."')");

maybe do an `echo json_decode(file_get_contents("php://input"));` in your PHP file to make sure data is actually being sent — Ronnie, Nov 09 '16 at 17:27
sorry, you'll have to also change your js to show what the PHP script is returning..instead of the alert do a `console.log(data);` — Ronnie, Nov 09 '16 at 17:28
@Jose Rojas : I'm not getting what is the silly mistake I'm doing. please help me — Harshad Patil, Nov 09 '16 at 17:39
Try adding your variables to an object like $scope.form.firstName. They should be encapsulated to an object any way so you can then use angular form controls accordingly — Coldstar, Nov 09 '16 at 17:40
How are you debugging your code? `ionic serve` maybe or just open it in a browser? add `var_dump($data)` at your server side to make sure is getting the data — Jose Rojas, Nov 09 '16 at 17:54
Try attaching your form fields to an object! Ive seen this error before — Coldstar, Nov 09 '16 at 17:58
before your `$http.post()` call, do a `console.log($scope.firstName);` Do you see the text you enter in the first name field? — Ronnie, Nov 09 '16 at 17:59
No, still I'm struggling with printing form data . ok I will try console.log($scope.firstName); — Harshad Patil, Nov 09 '16 at 18:01
When i have added console.log($scope.firstName); it is showing undefined. what is the issue now not able to figure out — Harshad Patil, Nov 09 '16 at 18:03
$scope.form = {firstName: "", lastName: ""} etc. You are trying to bing to a model that you have not initialized — Coldstar, Nov 09 '16 at 18:09
...then update your html bindings like: ng-model="form.firstName" — Coldstar, Nov 09 '16 at 18:10
please guide me where shall i actually write this code $scope.form = {firstName: "", lastName: ""} ? — Harshad Patil, Nov 09 '16 at 18:14
@Coldstar he doesn't have to initialize anything. Setting ng-model="firstName" creates a $scope.firstName. I haven't used ionic..maybe it's different in that platform — Ronnie, Nov 09 '16 at 18:27

score 1 · Answer 1 · answered Nov 09 '16 at 18:13

1

try this

angular.module('starter.controllers', []).controller('registrationCtrl',
    function ($scope, $ionicNavBarDelegate, $http) {

        $ionicNavBarDelegate.showBackButton(false);
        $scope.form = {
            firstName: "first",
            lastName: "last",
            email: "emailaddr",
            password: "pass"
        };

        $scope.createAccount = function () {
            $http.post("http://proittechnology.com/dev/stylr/createAccount.php", {
                'firstName': $scope.form.firstName,
                'lastName': $scope.form.lastName,
                'email': $scope.form.email,
                'password': $scope.form.password
            }).success(function (data, status, headers, config) {
                alert("Data inserted successfully");
            });
        };
    });

then update your html bindings like: ng-model="form.firstName" etc...

answered Nov 09 '16 at 18:13

Coldstar

1,324
1
12
32

Initialize is working properly, but facing the same issue empty records are getting add to database – Harshad Patil Nov 09 '16 at 18:24
I follow your given steps but I' facing the same issue. Would you please look into it. – Harshad Patil Nov 09 '16 at 18:42
My database is on cloud and I'm running my project folder from my system localhost. is this way is correct ? please help – Harshad Patil Nov 09 '16 at 19:00
As long as your credentials and server url are correct, then you have no worries – Coldstar Nov 09 '16 at 19:33
Blank records are getting inserted into DB that means connection string is working perfectly. I think problem is in createAccount.php. – Harshad Patil Nov 09 '16 at 19:36
I added first name string in insert query and I see first name is inserted to DB . I think problem is with posting initial form value to PHP variables. Please help – Harshad Patil Nov 09 '16 at 19:41
@HarshadPatil you already confirmed it was an issue in angular when you said "When i have added console.log($scope.firstName); it is showing undefined" – Ronnie Nov 09 '16 at 19:55
@Ronnie yes still I'm stuck – Harshad Patil Nov 09 '16 at 19:58
@HarshadPatil so you are saying this http://pastie.org/10959242 outputs undefined in your console, correct? – Ronnie Nov 09 '16 at 20:01
@Ronnie yes it showing undefined but I pasted console.log above createAccount function and I see you have added console.log inside createAccount function – Harshad Patil Nov 09 '16 at 20:05
The reason I want it there is to test the data before you send it off to PHP. Enter something in the first name field and then hit your submit button. – Ronnie Nov 09 '16 at 20:14
@Ronnie : I followed your steps, I have added console.log($scope.form.firstName); inside createAccount function. now it is showing value of the variable in console. – Harshad Patil Nov 09 '16 at 20:29
@Ronnie : How will I store console.log($scope.form.firstName); in function so that my form value will get inserted ? – Harshad Patil Nov 09 '16 at 20:50

score 0 · Answer 2 · answered Nov 10 '16 at 12:46

Thank you guys for your precious support it help a lot. @Ronnie @Coldstar and @Jose Rojas please check with below correct code for inserting actual data to MySql using Ionic Framework.

createAccount.php

 $server = 'localhost';
$username ="xxx";
$passwd ='xxx';
$Dbase = 'xxx';
$db = mysqli_connect($server,$username,$passwd) or die("Could not connect database");
        mysqli_select_db($db, $Dbase) or die("Could not select database");

//http://stackoverflow.com/questions/15485354/angular-http-post-to-php-and-undefined
$postdata = file_get_contents("php://input");
if (isset($postdata)) {
    $request = json_decode($postdata);
    $firstName = $request->firstName;
    $lastName = $request->lastName;
    $email = $request->email;
    $password = $request->password;

    if ($firstName != "") {
        mysqli_query($db, "INSERT INTO users(`firstName`, `lastName`, `email`, `password`)VALUES('".$firstName."','".$lastName."','".$email."','".$password."')");
        echo "firstName: " . $firstName;
        echo "lastName: " . $lastName;
        echo "email: " . $email;
        echo "password: " . $password;
    }
    else {
        echo "Empty username parameter!";
    }
}
else {
    echo "Not called properly with username parameter!";
}

controller.js

angular.module('starter.controllers', []).controller('registrationCtrl', function ($scope, $http) {

        $scope.data = {};

        $scope.submit = function(){
            var link = 'http://proittechnology.com/dev/stylr/createAccount.php';

            $http.post(link, { firstName: $scope.data.firstName, lastName: $scope.data.lastName, email: $scope.data.email, password: $scope.data.password }).then(function (res) {
                $scope.response = res.data;
                alert('Your account has been created successfully');
            });
        };
    })

home.html

<ion-view view-title="Registration">

        <ion-content padding="true">
            <form ng-submit="submit()">
                <label class="item item-input item-stacked-label">
                    <span class="input-label">First Name</span>
                    <input type="text" name="firstName" placeholder="First Name" ng-model="data.firstName">
                </label>
                <label class="item item-input item-stacked-label">
                    <span class="input-label">Last Name</span>
                    <input type="text" name="lastName" placeholder="Last Name" ng-model="data.lastName">
                </label>
                <label class="item item-input item-stacked-label">
                    <span class="input-label">Email</span>
                    <input type="text" id="email" name="email" ng-keyup="checkemail()" placeholder="Email" ng-model="data.email">
                    <span id="email_status"></span>
                </label>
                <label class="item item-input item-stacked-label">
                    <span class="input-label">Password</span>
                    <input type="text" name="password" placeholder="Password" ng-model="data.password">
                </label>
                <input class="button button-block button-positive" type="submit" name="submit" value="Create Account">        
            </form>

            <div class="row">
                <div class="col col-50">

                </div>
                <div class="col col-50 text-right">
                    <a href="#/login" class="button button-outline button-positive">Login</a>
                </div>
            </div>
        </ion-content>


</ion-view>

Ionic Framework - PHP Blank data is getting inserted into MySQL Database

2 Answers2