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="[email protected]" 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
– Ronnie, Commented Nov 9, 2016 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
– Ronnie, Commented Nov 9, 2016 at 17:28

Coldstar · Accepted Answer · 2016-11-09 18:13:46Z

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 9, 2016 at 18:13

Coldstar

1,3511 gold badge12 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Harshad Patil Over a year ago

Initialize is working properly, but facing the same issue empty records are getting add to database

Harshad Patil Over a year ago

I follow your given steps but I' facing the same issue. Would you please look into it.

Harshad Patil Over a year ago

My database is on cloud and I'm running my project folder from my system localhost. is this way is correct ? please help

Coldstar Over a year ago

As long as your credentials and server url are correct, then you have no worries

Harshad Patil Over a year ago

Blank records are getting inserted into DB that means connection string is working perfectly. I think problem is in createAccount.php.

|

Harshad Patil · Accepted Answer · 2016-11-10 12:46:40Z

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>

Collectives™ on Stack Overflow

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

2 Answers 2

13 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related