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')"); ?>