Delete Multiple Rows using PHP/MySQLi in AngularJS

Projects Inventory

2 weeks ago

Getting Started

I’ve used CDN for Bootstrap and Angular JS so you need internet connection for them to work.

Creating our Database

First, we’re going to create our database and insert sample data that you can use in deleting.

1. Open phpMyAdmin.
2. Click databases, create a database and name it as angular.
3. After creating a database, click the SQL and paste the below codes.

<span style="font-size: 10pt;">CREATE TABLE `members` (
  `memid` int(11) NOT NULL AUTO_INCREMENT,
  `firstname` varchar(30) NOT NULL,   `lastname` varchar(30) NOT NULL,
  `address` text NOT NULL,
PRIMARY KEY(`memid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;</span>

<span style="font-size: 10pt;">CREATE TABLE `members` (

`memid` int(11) NOT NULL AUTO_INCREMENT,

`firstname` varchar(30) NOT NULL, `lastname` varchar(30) NOT NULL,

`address` text NOT NULL,

PRIMARY KEY(`memid`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1;</span>

INSERT INTO `members` (`memid`, `firstname`, `lastname`, `address`) VALUES
(1, 'Neovic', 'Devierte', 'Silay City'),
(2, 'Julyn', 'Divinagracia', 'E.B. Magalona'),
(3, 'Gemalyn', 'Cepe', 'Bohol'),
(4, 'Matet', 'Devierte', 'Silay City'),
(5, 'Tintin', 'Devierte', 'Silay City'),
(6, 'Bien', 'Devierte', 'Cebu City'),
(7, 'Cherry', 'Ambayec', 'Cebu City'),
(8, 'Jubilee', 'Limsiaco', 'Silay City'),
(9, 'Janna ', 'Atienza', 'Talisay City'),
(10, 'Desire', 'Osorio', 'Bacolod City'),
(11, 'Debbie', 'Osorio', 'Talisay City'),
(12, 'Nipoy ', 'Polondaya', 'Victorias City'),
(13, 'Johnedel', 'Balino', 'Cauyan, Negros'),
(14, 'Nereca', 'Tajonera', 'Cauayan, Negros'),
(15, 'Jerome', 'Robles', 'Cebu City');

INSERT INTO `members` (`memid`, `firstname`, `lastname`, `address`) VALUES

(1, 'Neovic', 'Devierte', 'Silay City'),

(2, 'Julyn', 'Divinagracia', 'E.B. Magalona'),

(3, 'Gemalyn', 'Cepe', 'Bohol'),

(4, 'Matet', 'Devierte', 'Silay City'),

(5, 'Tintin', 'Devierte', 'Silay City'),

(6, 'Bien', 'Devierte', 'Cebu City'),

(7, 'Cherry', 'Ambayec', 'Cebu City'),

(8, 'Jubilee', 'Limsiaco', 'Silay City'),

(9, 'Janna ', 'Atienza', 'Talisay City'),

(10, 'Desire', 'Osorio', 'Bacolod City'),

(11, 'Debbie', 'Osorio', 'Talisay City'),

(12, 'Nipoy ', 'Polondaya', 'Victorias City'),

(13, 'Johnedel', 'Balino', 'Cauyan, Negros'),

(14, 'Nereca', 'Tajonera', 'Cauayan, Negros'),

(15, 'Jerome', 'Robles', 'Cebu City');

Index.html

Next, this is our index that contains our table.

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="utf-8">
    <title>AngularJS Delete Multiple Rows using PHP/MySQLi</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="memberdata" ng-init="fetch()">
<div class="container">
    <h1 class="page-header text-center">AngularJS Delete Multiple Rows using PHP/MySQLi</h1>
    <div class="row">
                <div class="col-md-8 col-md-offset-2">
                        <div class="alert alert-success text-center" ng-show="success">
                                <button type="button" class="close" ng-click="clearMessage()"><span aria-hidden="true">&times;</span></button>
                                <i class="fa fa-check"></i> {{ successMessage }}
                        </div>
                        <div class="alert alert-danger text-center" ng-show="error">
                                <button type="button" class="close" ng-click="clearMessage()"><span aria-hidden="true">&times;</span></button>
                                <i class="fa fa-warning"></i> {{ errorMessage }}
                        </div>
                        <button class="btn btn-danger" ng-click="deleteAll()"><span class="glyphicon glyphicon-trash"></span> Delete</button>
                        <table class="table table-bordered table-striped" style="margin-top:10px;">
                                <thead>
                    <tr>
                        <th><input type="checkbox" ng-model="checkAll" ng-change="toggleAll()"></th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Address</th>
                   </tr>
                </thead>
                                <tbody>
                                        <tr ng-repeat="member in members">
                                                <td><input type="checkbox" ng-model="member.Selected" ng-change="toggleOne()"></td>
                                                <td>{{ member.firstname }}</td>
                                                <td>{{ member.lastname }}</td>
                                                <td>{{ member.address }}</td>
                                        </tr>
                                </tbody>
                        </table>
                        </div>
                </div>
        </div>
</div>
<script src="angular.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>AngularJS Delete Multiple Rows using PHP/MySQLi</title>

</head>

<h1 class="page-header text-center">AngularJS Delete Multiple Rows using PHP/MySQLi</h1>

<i class="fa fa-check"></i> {{ successMessage }}

</div>

<i class="fa fa-warning"></i> {{ errorMessage }}

</div>

<button class="btn btn-danger" ng-click="deleteAll()"><span class="glyphicon glyphicon-trash"></span> Delete</button>

<thead>

<tr>

<th>First Name</th>

<th>Address</th>

</tr>

</thead>

<tbody>

<td>{{ member.firstname }}</td>

<td>{{ member.lastname }}</td>

<td>{{ member.address }}</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

Angular.js

This contains our angular.js script.

var app = angular.module('app', []);
app.controller('memberdata',function($scope, $http){
    $scope.success = false;
    $scope.error = false;
 
    $scope.fetch = function(){
        $http.get("fetch.php").success(function(data){
                $scope.members = data;
            });
    }
 
    $scope.toggleAll = function(){
        for (var i = 0; i < $scope.members.length; i++) {
            $scope.members[i].Selected = $scope.checkAll;
        }
    };
 
    $scope.toggleOne = function(){
        $scope.checkAll = true;
        for (var i = 0; i < $scope.members.length; i++) {
            if (!$scope.members[i].Selected) {
                $scope.checkAll = false;
                break;
            }
        };
    };
       
    $scope.deleteAll = function(){
        checkedId = [];
        for (var i = 0; i < $scope.members.length; i++) {
            if ($scope.members[i].Selected) {
                checkedId.push($scope.members[i].memid);
            }
        }
        $http.post("delete.php", checkedId)
        .success(function(data){
            console.log(data);
            if(data.error){
                $scope.error = true;
                $scope.success = false;
                $scope.errorMessage = data.message;
                $scope.checkAll = false;
            }
            else{
                $scope.success = true;
                $scope.error = false;
                $scope.successMessage = data.message;
                $scope.fetch();
                $scope.checkAll = false;
            }
        });
    }
 
    $scope.clearMessage = function(){
        $scope.success = false;
        $scope.error = false;
    }
 
});

var app = angular.module('app', []);

app.controller('memberdata',function($scope, $http){

$scope.success = false;

$scope.error = false;

$scope.fetch = function(){

$http.get("fetch.php").success(function(data){

$scope.members = data;

});

}

$scope.toggleAll = function(){

for (var i = 0; i < $scope.members.length; i++) {

$scope.members[i].Selected = $scope.checkAll;

}

};

$scope.toggleOne = function(){

$scope.checkAll = true;

for (var i = 0; i < $scope.members.length; i++) {

if (!$scope.members[i].Selected) {

$scope.checkAll = false;

break;

}

};

$scope.deleteAll = function(){

checkedId = [];

for (var i = 0; i < $scope.members.length; i++) {

if ($scope.members[i].Selected) {

checkedId.push($scope.members[i].memid);

}

$http.post("delete.php", checkedId)

.success(function(data){

console.log(data);

if(data.error){

$scope.error = true;

$scope.success = false;

$scope.errorMessage = data.message;

$scope.checkAll = false;

}

else{

$scope.success = true;

$scope.error = false;

$scope.successMessage = data.message;

$scope.fetch();

$scope.checkAll = false;

}

});

}

$scope.clearMessage = function(){

$scope.success = false;

$scope.error = false;

}

});

Fetch.php

This is our PHP api/code that fetches table data from our MySQL Database.

<?php
        $conn = new mysqli('localhost', 'root', '', 'angular');
       
        $output = array();
        $sql = "SELECT * FROM members";
        $query=$conn->query($sql);
        while($row=$query->fetch_array()){
                $output[] = $row;
        }
 
        echo json_encode($output);
?>

<?php

$conn = new mysqli('localhost', 'root', '', 'angular');

$output = array();

$sql = "SELECT * FROM members";

$query=$conn->query($sql);

while($row=$query->fetch_array()){

$output[] = $row;

}

echo json_encode($output);

Delete.php

Lastly, this is our PHP code/api in deleting the checked rows of our table.

<?php
  $conn = new mysqli('localhost', 'root', '', 'angular');
 
  $data = json_decode(file_get_contents("php://input"));
 
  $out = array('error' => false);
 
  foreach ($data as $key => $value) {
    $sql = "DELETE FROM members WHERE memid = '".$value."'";
    $query = $conn->query($sql);
  }
 
  if($query){
    $out['message'] = "Member(s) deleted Successfully";
  }
  else{
    $out['error'] = true;
    $out['message'] = "Something went wrong. Cannot delete Member(s)";
  }
 
  echo json_encode($out);
?>

<?php

$conn = new mysqli('localhost', 'root', '', 'angular');

$data = json_decode(file_get_contents("php://input"));

$out = array('error' => false);

foreach ($data as $key => $value) {

$sql = "DELETE FROM members WHERE memid = '".$value."'";

$query = $conn->query($sql);

}

if($query){

$out['message'] = "Member(s) deleted Successfully";

}

else{

$out['error'] = true;

$out['message'] = "Something went wrong. Cannot delete Member(s)";

}

echo json_encode($out);

Delete Multiple Rows using PHP/MySQLi in AngularJS

Getting Started

Creating our Database

Index.html

Angular.js

Fetch.php

Delete.php

Download Code: Delete Multiple Rows

Related Posts: