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)
[php]
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 ;
[/php]
INSERT Some Data Records
[php]
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);
[/php]
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)
[php]
[/php]
4. INCLUDE the required javascript library Like(angular libs.)
[php]
http://js/angular.min.js
http://app/app.js
[/php]
5. Create Simple The Controller Code in this Location(app.js)
[php]
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();
});
};
});
[/php]
6. Our pagelet or partials file (item.html)
[php]
[/php]
7. CRUD Files(add-item,delete-item,update-item and get-item)
source code of additem.php
[php]
query($query) or die($mysqli->error.__LINE__);
$data_reslt = $mysqli->affected_rows;
echo $jsondata_res = json_encode($data_reslt);
}
?>
[/php]
source code of getitem.php
[php]
query($query) or die($mysqli->error.__LINE__);
$data_reslt = $mysqli->affected_rows;
echo $jsondata_res = json_encode($data_reslt);
}
?>
[/php]
source code of updateitem.php
[php]
query($query) or die($mysqli->error.__LINE__);
$data_reslt = $mysqli->affected_rows;
$jsondata_res = json_encode($data_reslt);
}
?>
[/php]
source code of deleteitem.php
[php]
query($query) or die($mysqli->error.__LINE__); //error display
$data_reslt = $mysqli->affected_rows;
echo $jsondata_res = json_encode($data_reslt);
}
?>
[/php]