Insert Record in to database using AngularJS and PHP,we will use $http.post service of AngularJS.$http AngularJS service is used to communicate with remote server.
$http.get:is used to perform GET request.
$http.head:is used to perform HEAD request.
$http.post:is used to perform POST request.
$http.put: is used to perform PUT request.
$http.delete:is used to perfor DELETE request.
$http.jsonp:is used to perfor JSONP request.
$http.patch:is used to perfor PATCH request.
First We create product table in database.
CREATE TABLE IF product EXISTS `product` ( `productId` int(12) NOT NULL, `productDesc` varchar(255) NOT NULL, `productName` varchar(150) NOT NULL, `productPrice` varchar(50) NOT NULL, `productQuantity` int(12) NOT NULL );
Create insert.php and add following code.
PHP
<!doctype html>
<html ng-app="listpp">
<head>
<meta charset="UTF-8">
<title>Angular With PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>
<body ng-controller="PhoneListCtrl">
<div class="panel panel-info col-sm-5">
<div class="panel-heading">Add Product Form</div>
<div class="panel-body">
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="col-sm-4 control-label">Product Name</label>
<div class="col-sm-8">
<input type="text" placeholder="Product Name" ng-model="productName" name="productName" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Product Description</label>
<div class="col-sm-8">
<input type="text" placeholder="Product Description" name="productDesc" ng-model="productDesc" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Product Price</label>
<div class="col-sm-8">
<input type="text" placeholder="Product Price" name="productPrice" ng-model="productPrice" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Product Quantity</label>
<div class="col-sm-8">
<input type="text" placeholder="Product Quantity" name="productQuantity" ng-model="productQuantity" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label"></label>
<div class="col-sm-8">
<input type="button" class="btn btn-default" name="submit_product" value="Add Record" ng-click="product_submit()">
</div>
</div>
</form>
</div>
</div>
</body>
</html>
<script>
var listApp = angular.module('listpp', []);
listApp.controller('PhoneListCtrl', function ($scope , $http) {
$scope.product_submit = function() {
$http.post('service.php',
{
'productName' : $scope.productName,
'productDesc' : $scope.productDesc,
'productPrice' : $scope.productPrice,
'productQuantity' : $scope.productQuantity
}
)
.success(function (data, status, headers, config) {
alert("Record Added Successfully");
})
.error(function(data, status, headers, config){
});
}
});
</script>
Create service.php and add following code.
PHP
<?php
$host = "localhost";
$user = "root";
$pass = "";
$database = "test";
$con = mysql_connect($host,$user,$pass);
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db($database,$con);
$data = json_decode(file_get_contents("php://input"));
$productName = $data->productName;
$productDesc = $data->productDesc;
$productPrice = $data->productPrice;
$productQuantity = $data->productQuantity;
mysql_query("INSERT INTO `product` (`productId`, `productDesc`, `productName`, `productPrice`, `productQuantity`) VALUES (NULL, '$productDesc', '$productName', '$productPrice', '$productQuantity')");
?>
