CODEWITHSUNDEEP
phpangularjs
Rishabh
Rishabh

Reputation: 650

Insert data into database in angularjs

I am trying to insert data in database but its not working at all! I followed a tutorial and work according to it But its not working. I tried a lot but no success till now.

Here is my html file

<!DOCTYPE html>
<html>
<script  src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">  </script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form>
Name:-<input type="text" ng-model="bname" />
Phone:-<input type="text" ng-model="bphone" />
<input type="button" value="Submit" ng-click="insertData()" />
</form>
</div>
<script>
 var app = angular.module('myApp',[]);
 app.controller('myCtrl',function($scope,$http){    
 $scope.insertData=function(){      
 $http.post("insert.php", {
    'bname':$scope.bname,
    'bphone':$scope.bphone})        

 .success(function(data,status,headers,config){
 console.log("Data Inserted Successfully");
 });
    }
     });
     </script>
     
</body>
</html>

And insert.php in which I am inserting data in database

<?php 
$data = json_decode(file_get_contents("php://input"));
$bname = mysql_real_escape_string($data->bname);
$bauthor = mysql_real_escape_string($data->bphone);
mysql_connect("localhost", "root", ""); 
mysql_select_db("angular");
mysql_query("INSERT INTO ang('name', 'phone')    VALUES('".$bname."','".$bauthor."')");
?>

UPDATE

    <?php 
$data = json_decode(file_get_contents("php://input"));
$con = new mysqli('localhost', 'root', '', 'angularjs');
$bname = mysqli_real_escape_string($con, $data->bname);
$bphone = mysqli_real_escape_string($con, $data->bphone);
if($con->connect_errno > 0){
  die('Unable to connect to database [' . $con->connect_error . ']');
}
mysqli_query($con,"INSERT INTO jstable (name, phone)VALUES ('".$bname."', '".$bphone."')");    
mysqli_close($con);
?>

After Updating my code I got this error :-

Notice: Trying to get property of non-object in E:\xampp\htdocs\insert.php on line 4

Notice: Trying to get property of non-object in E:\xampp\htdocs\insert.php on line 5

I searched regarding this error and found many result but none of them was helpful in my case!

Upvotes: 1

Views: 30809

Answers (5)

Hajis Hakkim
Hajis Hakkim

Reputation: 54

you can insert data with image and also validate input.

<form ng-controller="insert_Ctrl"  method="post" action=""  name="myForm" enctype="multipart/form-data" novalidate>
    <div>
        <p><input type="text" class="form-control" placeholder="Name" name="name" ng-model="name" required>
            <span style="color:red" ng-show="myForm.name.$invalid&&myForm.name.$touched">Enter Name</span>
        </p>
    </div>
    <div>
        <p><input type="file" ng-model="myFile" class="form-control"  onchange="angular.element(this).scope().uploadedFile(this)">
            <span style="color:red" ng-show="(myForm.myFile.$error.required&&myForm.myFile.$touched)">Select Picture</span>
        </p>
    </div>
    <div>
        <input type="button" name="submit2"  ng-click="uploadFile()" class="btn-primary" ng-disabled="myForm.name.$invalid || myForm.myFile.$invalid" value="Insert">
    </div>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script src="insert.js"></script>

insert.js

var app = angular.module('myApp',[]);
app.service('uploadFile', ['$http','$window', function ($http,$window) {
    this.uploadFiletoServer = function(file,info,uploadUrl){
        var fd = new FormData();
        fd.append('file', file);
        fd.append('data', angular.toJson(info));
        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
        .success(function(data){
            alert("insert successfull");
            $window.location.href = ' ';//your window location
        })
        .error(function(){
            alert("Error");
        });
    }
}]);
app.controller('insert_Ctrl',  ['$scope', 'uploadFile', function($scope, uploadFile){
    $scope.uploadFile = function() {
        $scope.myFile = $scope.files[0];
        var file = $scope.myFile;
        var info = {
            'name':$scope.name,
        };
        var url = "save_data.php";
        uploadFile.uploadFiletoServer(file,info,url);
    };
    $scope.uploadedFile = function(element) {
        var reader = new FileReader();
        reader.onload = function(event) {
            $scope.$apply(function($scope) {
                $scope.files = element.files;
                $scope.src = event.target.result  
            });
        }
        reader.readAsDataURL(element.files[0]);
    }
}]);

save_data.php

<?php
    require "dbconnection.php";
    $datas=$_POST['data'];
    $myArray = json_decode($datas, true);
    $name=$myArray['name'];
    $ext = pathinfo($_FILES['file']['name'],PATHINFO_EXTENSION);
    $image = time().'.'.$ext;
    move_uploaded_file($_FILES["file"]["tmp_name"],"upload/".$image);
    $query="insert into test_table values ('null','$name','$image')";
    mysqli_query($con,$query);
?>

Upvotes: 0

Chintan
Chintan

Reputation: 11

**insert.php**

<!DOCTYPE html>
<html>
<script  src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">  </script>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <form>
            Name:-<input type="text" ng-model="uname" />
            Phone:-<input type="text" ng-model="uphone" />
            <input type="button" value="Submit" ng-click="insertData()" />
        </form>
    </div>
    <script>
    var app = angular.module('myApp',[]);
    app.controller('myCtrl',function($scope,$http){    
        $scope.insertData=function(){      
            $http.post("testinsert.php", {
                'uname':$scope.uname,
                    'uphone': $scope.uphone
                })
                    .success(function (data, status, headers, config) {
                        console.log("Inserted Successfully!");


                    });
            }
        });
    </script>

</body>
</html>

**testinsert.php**

<?php 
$data = json_decode(file_get_contents("php://input"));
$uname = $data->uname;
$uphone = $data->uphone;
$con = mysql_connect("localhost","root","");
mysql_select_db("angular");
$sql = "insert into Table Name(user_name,user_phone) values('$uname','$uphone')";
$result = mysql_query($sql);
?>

Upvotes: 1

Tirthraj Barot
Tirthraj Barot

Reputation: 2679

I modified your code in the following manner

HTML CODE:

<!DOCTYPE html>
<html>
<script  src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">  </script>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <form>
            Name:-<input type="text" ng-model="bname" />
            Phone:-<input type="text" ng-model="bphone" />
            <input type="button" value="Submit" ng-click="insertData()" />
        </form>
    </div>
    <script>
    var app = angular.module('myApp',[]);
    app.controller('myCtrl',function($scope,$http){    
        $scope.insertData=function(){      
            $http.post("test.php", {
                'bname':$scope.bname,
                'bphone':$scope.bphone
            }).then(function(response){
                    console.log("Data Inserted Successfully");
                },function(error){
                    alert("Sorry! Data Couldn't be inserted!");
                    console.error(error);

                });
            }
        });
    </script>

</body>
</html>

and test.php

<?php 
$data = json_decode(file_get_contents("php://input"));
// $bname = mysql_real_escape_string($data->bname);
// $bauthor = mysql_real_escape_string($data->bphone);

$bname = $data->bname;
$bphone = $data->bphone;


mysql_connect("localhost", "root", "password"); 
mysql_select_db("test");

mysql_query("INSERT INTO `ang`(`name`,`phone`)
    VALUES ('".$bname."','".$bphone."') ") or die(mysql_error());
echo $bname." ".$bphone;
?>

This works well..

Upvotes: 4

Archish
Archish

Reputation: 870

change your code like this, it might solve your problem.

mysql_connect("localhost", "root", ""); 
mysql_select_db("angular");
$data = json_decode(file_get_contents("php://input"),true);
$bname = mysql_real_escape_string($data['bname']);
$bauthor = mysql_real_escape_string($data['bphone']);

Upvotes: 0

jeroen
jeroen

Reputation: 91792

You are emptying your values (setting them to false...) using mysql_real_escape_string() before you open a database connection. You should open the connection first.

But the best solution would be to switch to PDO or mysqli and use prepared statements. Then you don't have to do any escaping any more.

Upvotes: 0

Related Questions