Delete Multiple Rows using AngularJS with PHP/MySQLi

By CampCodes Administrator

Updated on:

delete multiple rows using angularjs

Tutorial: Delete Multiple Rows using AngularJS with PHP/MySQLi with Source Code

Getting Started on How to Delete Multiple Rows using AngularJS

Delete Multiple Rows using AngularJS with PHP/MySQLi is our tutorial for today. I’ve used CDN for Bootstrap and AngularJS, so you need an internet connection for them to work.

Creating a 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. See image below for detailed instruction.

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;
INSERT INTO `members` (`memid`, `firstname`, `lastname`, `address`) VALUES
(1, 'Lyndon', 'Bermoy', 'India'),
(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');
delete multiple rows using angularjs with php mysql
delete multiple rows using angularjs with php mysql

index.html

Next, this is a index that contains a 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="http://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>

angular.js

This contains a 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;
    }
 
});

fetch.php

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

READ ALSO:   How to Create Login and Logout Page with Session and Cookies in PHP

<?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 a PHP code/api in deleting the checked rows of a 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);
?>

That ends this tutorial. Happy Coding!

Download Here

Leave a Comment