Hello friends in this tutorial we are going to learn how to remove or delete data from Mysql table by using Angular Javascript with PHP code without pag refresh. In previous post we have made done discussion on how to udate Mysql table data by using Angular Javascript. Suppose you have worked on some application which build on Angular Javascript and PHP and on that application you want to delete data, so how can you delete data in Angular Javascript with PHP code, this things we have discuss in video tutorial which you can find with this post. In most of the application there deletion of data is most required task, because in application there is lots of spam data and unwanted data are posted into your so want to remove that data and you want only clean data, then at that time deletion of data action are required. This is simple application with crud operation is ready which we have made by using Angular javascript code with php programming, here we can insert or add data into mysql table, we can fetch data from mysql table data and display on web page, we can update or edit mysql table data and lastly we can delete mysql data, this way we can make this simple application with PHP crud operation with Angular Javascript framework.
Source Code
<!DOCTYPE html>
<!-- index.php !-->
<html>
<head>
<title>Webslesson Tutorial | AngularJS Tutorial with PHP - Delete Mysql Table Data</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<br /><br />
<div class="container" style="width:500px;">
<h3 align="center">AngularJS Tutorial with PHP - Delete Mysql Table Data</h3>
<div ng-app="myapp" ng-controller="usercontroller" ng-init="displayData()">
<label>First Name</label>
<input type="text" name="first_name" ng-model="firstname" class="form-control" />
<br />
<label>Last Name</label>
<input type="text" name="last_name" ng-model="lastname" class="form-control" />
<br />
<input type="hidden" ng-model="id" />
<input type="submit" name="btnInsert" class="btn btn-info" ng-click="insertData()" value="{{btnName}}"/>
<br /><br />
<table class="table table-bordered">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Update</th>
<th>Delete</th>
</tr>
<tr ng-repeat="x in names">
<td>{{x.first_name}}</td>
<td>{{x.last_name}}</td>
<td><button ng-click="updateData(x.id, x.first_name, x.last_name)" class="btn btn-info btn-xs">Update</button></td>
<td><button ng-click="deleteData(x.id )"class="btn btn-danger btn-xs">Delete</button></td>
</tr>
</table>
</div>
</div>
</body>
</html>
<script>
var app = angular.module("myapp",[]);
app.controller("usercontroller", function($scope, $http){
$scope.btnName = "ADD";
$scope.insertData = function(){
if($scope.firstname == null)
{
alert("First Name is required");
}
else if($scope.lastname == null)
{
alert("Last Name is required");
}
else
{
$http.post(
"insert.php",
{'firstname':$scope.firstname, 'lastname':$scope.lastname, 'btnName':$scope.btnName, 'id':$scope.id}
).success(function(data){
alert(data);
$scope.firstname = null;
$scope.lastname = null;
$scope.btnName = "ADD";
$scope.displayData();
});
}
}
$scope.displayData = function(){
$http.get("select.php")
.success(function(data){
$scope.names = data;
});
}
$scope.updateData = function(id, first_name, last_name){
$scope.id = id;
$scope.firstname = first_name;
$scope.lastname = last_name;
$scope.btnName = "Update";
}
$scope.deleteData = function(id){
if(confirm("Are you sure you want to delete this data?"))
{
$http.post("delete.php", {'id':id})
.success(function(data){
alert(data);
$scope.displayData();
});
}
else
{
return false;
}
}
});
</script>
delete.php
<?php
//delete.php
$connect = mysqli_connect("localhost", "root", "", "testing");
$data = json_decode(file_get_contents("php://input"));
if(count($data) > 0)
{
$id = $data->id;
$query = "DELETE FROM tbl_user WHERE id='$id'";
if(mysqli_query($connect, $query))
{
echo 'Data Deleted';
}
else
{
echo 'Error';
}
}
?>
why need to use 3 php in each page insert.php, select.php ,delete.php can you tell calling php with single page how to marge 3 pages codes in to one page php and angularjs please give me the code
ReplyDeletegreat work
ReplyDeletesalam manitabahuda