Angular Insert Update Delete Using PHP MySQLi

Angular Insert Update Delete Using PHP MySQLi

Today, We want to share with you Angular Insert Update Delete Using PHP MySQLi.
In this post we will show you Angular Insert Update Delete Using PHP MySQLi, hear for Angular Insert Update Delete Using PHP MySQLi we will give you demo and example for implement.
In this post, we will learn about Angular Insert Update Delete Using PHP MySQLi with an example.

We shall create a Basic AngularJS(crud operation) web application that will have the following 4 functionality following.

PHP MySQL and AngularJS CRUD Example – Step by Step

• Add record using angularjs with php
• Get record using angularjs with php
• Update record using angularjs with php
• Delete record using angularjs with php

AngularJS Insert Update Delete Using PHP MySQL

1. First of all we are Creating MySQL Database(Database structure and connection)

CREATE TABLE IF NOT EXISTS product (
id int(11) NOT NULL AUTO_INCREMENT,
item varchar(200) NOT NULL,
inactive int(11) NOT NULL,
cr_date int(11) NOT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

INSERT Some Data Records

INSERT INTO product (id, item, inactive, cr_date) VALUES
(1, ‘Myemail verify checker - infinityknow tools’, 0, 1256915970),
(2, ‘Live Counter - infinityknow tools’, 2, 1990568993),
(3, ‘online find check tools - infinityknow tools’, 2, 1390817659),
(4, ‘Development and testting tools - infinityknow tools’, 2, 1375218652);

2. The project File structure steps

js/ – Simple Javascript library files. Like as , jquery.js,angular.js,
app/ – Our custom js-controller files for our main project
partials/ – Small pagelets – pages that we wish to more time used on controller
ajax/ – The .php(all) files to communicate to server side page created(Connect.php, Create.php, Read.php, Update.php, Delete.php)
css/ – simple custom or libs css file Stylesheet files Like (style.css)

3. INCLUDE on The Stylesheets(css file External library)

4. INCLUDE the required javascript library Like(angular libs.)

<a href="http://js/angular.min.js">http://js/angular.min.js</a>
<a href="http://app/app.js">http://app/app.js</a>

5. Create Simple The Controller Code in this Location(app.js)

var ng4app = angular.module('myApp', []);
ng4app.controller('productController', function($scope, $http) {
  getitem(); // Load all available product 
  function getitem(){  
  $http.post("ajax/getitem.php").success(function(data){
        $scope.product = data;
       });
  };
  $scope.additem = function (item) {
    $http.post("ajax/additem.php?item="+item).success(function(data){
        getitem();
        $scope.itemInput = "";
      });
  };
  $scope.deleteitem = function (item) {
    if(confirm("Are you sure to delete this line?")){
    $http.post("ajax/deleteitem.php?itemID="+item).success(function(data){
        getitem();
      });
    }
  };

  $scope.toggleinactive = function(item, inactive, item) {
    if(inactive=='2'){inactive='0';}else{inactive='2';}
      $http.post("ajax/updateitem.php?itemID="+item+"&inactive="+inactive).success(function(data){
        getitem();
      });
  };

});

6. Our pagelet or partials file (item.html)

<div class="widget-box" id="recent-box">
<div class="widget-header header-color-blue">
<div class="row">
<div class="col-sm-6">
<h4 class="bigger lighter">
	<i class="glyphicon glyphicon-align-justify"></i> 
	item Manegement
</h4>
</div>
<div class="col-sm-3">
<button class="btn btn-sm btn-danger header-elements-margin"><i class="glyphicon  glyphicon-plus"></i> Add New item</button>
</div>
<div class="col-sm-3">



</div>
</div></div>
<div class="widget-body ">
<form id="newitemForm" class="add-item">
<div class="form-actions">
<div class="input-group">

<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-plus"></i> Add New item</button>
</div>
</div>
</div>
</form>
<div class="item">
	<label class="checkbox">
     
	<span>{{item.item}} [{{item.ID}}]</span>
	<a class="pull-right"><i class="glyphicon glyphicon-trash"></i></a>
    </label>
</div>
</div>
</div>

7. CRUD Files(add-item,delete-item,update-item and get-item)

source code of additem.php

query($query) or die($mysqli->error.__LINE__);

$data_reslt = $mysqli->affected_rows;

echo $jsondata_res = json_encode($data_reslt);
}
?>

source code of getitem.php

query($query) or die($mysqli->error.__LINE__);

$data_reslt = $mysqli->affected_rows;

echo $jsondata_res = json_encode($data_reslt);
}
?>

source code of updateitem.php

query($query) or die($mysqli->error.__LINE__);

$data_reslt = $mysqli->affected_rows;

$jsondata_res = json_encode($data_reslt);
}
?>

source code of deleteitem.php

query($query) or die($mysqli->error.__LINE__); //error display
$data_reslt = $mysqli->affected_rows;
echo $jsondata_res = json_encode($data_reslt);
}
?>

Download