Hello friends, in this tutorial we learn how to delete or delete data from the MySQL table using Angular Javascript with PHP code without Pag update. In the previous post we explained how the data from the mysql table is mirrored with angled Javascript. Suppose you were working on an application based on Angular Javascript and PHP and you want to delete data in that application. So how can you delete data in Angular Javascript with PHP code? We discuss this in a video tutorial that you can find with this publication. In most applications, deleting data is the most important task because the application publishes a lot of spam and unwanted data on your website. You want to delete this data and only clean data. At this point, the data must be deleted. This is a simple application using the crud-list operation we created using Angular JavaScript code with PHP programming. Here we can insert or add data to the MySQL table website, we can update or edit the data in the MySQL table and finally we can delete the MySQL data, this way we can do this simple application with PHP crud operation with the Angular Javascript framework.
Source Code
<!DOCTYPE html>
<!-- index.php !-->
<html>
<head>
<title>MyitBuddies Tutorials | How To Delete Mysql Table Data Using AngularJS Tutorial with PHP </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">How To Delete Mysql Table Data Using AngularJS Tutorial with PHP </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';
}
}
?>
0 comments:
Post a Comment
Please don't enter any spam link in the comment box.