AngularJS delete using php MYSQL

The Delete statement is used to delete the data from the MySQL database.
In AngularJS we should post the form data to delete in JSON format to the PHP file.
The PHP server side code used to get the posted data from AngularJS and decode the JSON format.
The MySQL connection and query execution also done in PHP code.

Syntax for MySQL Delete Statement with PHP and MySQL:

$conn = mysql_connect('myServer', ' myUser ', ' myPassword ');
mysql_select_db(' myDb ', $conn);
$result=mysql_query("delete from tbl_name where id=value");

Syntax for MySQL Delete Statement with PHP and MySQLi:

$conn = mysqli_connect('myServer', 'myUser', 'myPassword', 'myDb');
$result=mysqli_query($conn, "delete from tbl_name where id=value");

Syntax for MySQL Delete Statement with PHP and PDO:

$conn = new PDO ("mysql:host=myServer;dbname=myDb", "myUser", "myPassword");
$result=$conn->query("delete from tbl_name where id=value");

Sample code for MySQL Delete with PHP in AngularJS:

Let’s create a sample code for MySQL delete with PHP by PDO method.

 Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy AngularJS Tutorials</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
        angular.min.js"> </script>
    </head>
    <body ng-app="deleteApp" ng-controller="deleteCtrl">
        <h1>MYSQL Delete with PHP in AngularJS</h1>
        <table border="1">
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Mobile</th>
                    <th>Email</th>
                    <th>Delete</th>
                </tr>
                <tr ng-repeat="x in content" >
                    <td>{{x.id}}</td>
                    <td>{{x.name}}</td>
                    <td>{{x.mobile}}</td>
                    <td>{{x. email}}</td>
                    <td><button ng-click="delete(x.id)">Delete</button></td>
                </tr>
        </table>
        <h3>Please Use Ctrl+F5 for Refresh</h3>
    </body>
    <script>
        var app = angular.module("deleteApp", []);
        app.controller("deleteCtrl", function($scope, $http) {
            $http.get("select.php").then(function(response) {
                $scope.content = response.data.details;
            });
            $scope.delete = function(value) {
                $http({ method  : 'POST',
                  url     : 'delete.php',
                  data    : ({value: value}),
                  headers : {'Content-Type': 'application/x-www-form-urlencoded'}
                }) .success(function(data) {
                   $scope.content = data;
                });
            };
        });
    </script>
</html>

Data:

Set of data has been used in our AngularJS Application.

content = response.data.details;
value
content = data;

HTML:

Viewable HTML contents in AngularJS Application.

<body ng-app="deleteApp" ng-controller="deleteCtrl">
        <h1>MYSQL Delete with PHP in AngularJS</h1>
        <table border="1">
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Mobile</th>
                    <th>Email</th>
                    <th>Delete</th>
                </tr>
                <tr ng-repeat="x in content" >
                    <td>{{x.id}}</td>
                    <td>{{x.name}}</td>
                    <td>{{x.mobile}}</td>
                    <td>{{x. email}}</td>
                    <td><button ng-click="delete(x.id)">Delete</button></td>
                </tr>
        </table>
        <h3>Please Use Ctrl+F5 for Refresh</h3>
</body>

Logic:

Controller logic for the AngularJS application.

var app = angular.module("deleteApp", []);
app.controller("deleteCtrl", function($scope, $http) {
    $http.get("select.php").then(function(response) {
        $scope.content = response.data.details;
    });
    $scope.delete = function(value) {
        $http({ method  : 'POST',
        url     : 'delete.php',
        data    : ({value: value}),
        headers : {'Content-Type': 'application/x-www-form-urlencoded'}
        }) .success(function(data) {
            $scope.content = data;
        });
    };
});

Code Explanation for MySQL Delete with PHP in AngularJS:

Code Explanation for AngularJS delete Using PHP Mysql

To bind the content to <td> by ng-repeat directive.
The “delete(x.id)” function is used to delete the specific data from the MySQL database.
The “deleteCtrl” used to create the controller for the Application with arguments $scope object and $http service.
The $http is a service and it is used to call the get method, this http get request will get the content from the “select.php” as response.
The response.data.details is used to get the response data.
The delete function is used to POST the arugument value to the “delete.php“.
The $scope.content=data is used to get the updated results as response data.

Sample code for delete.php:

<?php
    error_reporting(0);
    $conn = new PDO("mysql:host=myServer;dbname=myDb", "myUser", "myPassword");   
    $_POST = json_decode(file_get_contents('php://input'), true);
    if(!empty($_POST[value]))
    {
        $del_query=$conn->prepare("delete from tbl_name where id=:id");
        $del_query->bindParam(':id, $_POST[value]);
        $chk_ins=$del_query->execute();
    }
    $sel_query = $conn->prepare("select * from tbl_name order by id ");
    $sel_query->execute();
    echo json_encode($sel_query->fetchAll());
?>

Code Explanation for delete.php:

The $conn connection string used to connect the MySQL database by PHP.
The json_decode function is used to decode the JSON formatted POST data.
To check the posted data is empty or not.
To prepare the delete query for delete data from the MySQL Database table.
To bind the id value to the delete query.
To execute the delete query.
To select the updated data in the table.
To execute the select query.
To fetch all data from the result set and encode the data in JSON format.

Sample Output for MySQL Delete with PHP in AngularJS:

Sample Output for AngularJS delete using PHP Mysql

The output shows the form to get input from user. Then User click the delete button.

When user click the delete button then the data will be deleted from the MySQL database.

PDF

AngularJS delete using php MYSQL

Syntax for MySQL Delete Statement with PHP and MySQL:

Syntax for MySQL Delete Statement with PHP and MySQLi:

Syntax for MySQL Delete Statement with PHP and PDO:

Sample code for MySQL Delete with PHP in AngularJS:

Data:

HTML:

Logic:

Code Explanation for MySQL Delete with PHP in AngularJS:

Sample code for delete.php:

Code Explanation for delete.php:

Sample Output for MySQL Delete with PHP in AngularJS:

Related Searches to AngularJS delete using PHP Mysql

Wikitechy

Join our Community

Other Languages