Online Snippets Library

Insert Record in to database using AngularJS and PHP

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 Methods

$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.

Example

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