Online Snippets Library

Insert Record in to database using AngularJS and PHP

Insert Record in to database using AngularJS and PHP,we will use $ 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.

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


<!doctype html>
<html ng-app="listpp">
<meta charset="UTF-8">
<title>Angular With PHP</title>
<script src="">
<script src=""></script>     
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
<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 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 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 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 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()">
var listApp = angular.module('listpp', []);    
listApp.controller('PhoneListCtrl', function ($scope , $http) {
$scope.product_submit = function() {
                '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){

Create service.php and add following code.


$host = "localhost"; 
$user = "root"; 
$pass = ""; 
$database = "test";
$con = mysql_connect($host,$user,$pass);
if (!$con) {
die('Could not connect: ' . mysql_error());
$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')");