I am new to Angular JS , i want to insert data from form to MySQL database table ( in my case table name is employe ) But when i hit submit it is not inserting . I compiled insert.php file in browser which gives me this error "Trying to get property of non-object" . I am sending data in JSON format and then i have decoded in the index.php file but when i tried to access the decoded data via $data object it gives me the mentioned error .
myApp.js code
var app = angular.module('myApp',[])
.controller("myController",function($scope,$http){
$scope.insertData = function(){
$http.post("insert.php",{'name': $scope.name,'fname': $scope.fname,'dept': $scope.dept})
.success(function(data,status,headers,config){
console.log("Inserted Successfuly!");
});
}
});
insert.php code
<?php
$data = json_decode(file_get_contents("php://input"));
$name = $data->name;
$fname = $data->fname;
$dept = $data->dept;
$host = 'localhost';
$dbname = 'company';
$dbusername = 'root';
$dbpass = '';
$connection = mysqli_connect($host,$dbusername,$dbpass,$dbname);
if (mysqli_connect_errno()){
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}else{
$query = "INSERT INTO employe ('id','ename','fname','dept') VALUES('','$name','$fname','$dept')";
$query_run = mysqli_query($connection,$query);
}
?>
index.html code
<html ng-app="myApp">
<head>
<title> Using Angular with PHP! </title>
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>-->
<style type="text/css" src="css/bootstrap.min.css"></style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12" ng-controller="myController">
<form>
Your Name: <input type="text" ng-model="name" /><br><br>
Father Name: <input type="text" ng-model="fname" /><br><br>
Department : <input type="text" ng-model="dept" /><br><br>
<input class="btn btn-success" type="button" value="Submit" ng-click="insertData()" />
</form>
</div>
</div>
</div>
<script type="text/javascript" src="js/angular/angular.min.js"></script>
<script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
