AngularJS Delete multiple records from MySQLi in PHP

AngularJS Delete multiple records from MySQLi in PHP

In this Post We Will Explain About is AngularJS Delete multiple records from MySQLi in PHP With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to AngularJS Delete multiple records from MySQLi in PHP with checkbox Example

In this post we will show you Best way to implement Delete Multiple Rows with Checkbox using jQuery, PHP & MySQLi, hear for AngularJS Delete Multiple Rows using PHP MySQLi with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




Creating simple Database

First, I am Gonna to make simple database and insert sample data that you can use in Database deleting.

1. Open phpMyAdmin.
2. Trigger the databases, make a new database and name it as live24u.
3. After making a mysql database, Trigger the my SQL and copy and paste the below script source codes.

Also Read :   codeigniter Controller pass parameter route Function

CREATE TABLE `students` (
  `studid` int(11) NOT NULL AUTO_INCREMENT,
  `studentFname` varchar(30) NOT NULL,
  `studentLname` varchar(30) NOT NULL,
  `studAddress` text NOT NULL,
PRIMARY KEY(`studid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `students` (`studid`, `studentFname`, `studentLname`, `studAddress`) VALUES
(1, 'ketan', 'Kakadiya', 'gokul park'),
(2, 'vishal', 'ramani', 'E.B. bhanath'),
(3, 'nilesh', 'rayani', 'vachra nagar'),
(4, 'parsh', 'Kakadiya', 'gokul park'),
(5, 'jaydeep', 'Kakadiya', 'gokul park'),
(6, 'raj', 'Kakadiya', 'anjali park'),
(7, 'nayan', 'vadodariya', 'anjali park'),
(8, 'om', 'ramanuj', 'gokul park'),
(9, 'ridham ', 'korat', 'tirupati park'),
(10, 'ansh', 'Bhanderi', 'dipushi park'),
(11, 'happy', 'Bhanderi', 'tirupati park'),
(12, 'pragnesh ', 'lunagariya', 'maganesh park'),
(13, 'dharmesh', 'chovatiya', 'ram, nagar'),
(14, 'mayur', 'sagpariya', 'omnagar, dhaba'),
(15, 'ravi', 'Dhameliya', 'anjali park');

index.html

after that, It is simple index.html main page that data contains simple table.

<!DOCTYPE html>
<html lang="en" ng-app="liveApp">
<head>
    <meta charset="utf-8">
    <title>Simple AngularJS Delete Multiple Rows using PHP and MySQLi Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="nofollow">
<script src="<a href="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body  ng-controller="studCtrl" ng-init="retrive()">
<div class="live container">
    <h1 class="live page-header text-center">AngularJS Delete Multiple Rows using PHP and MySQLi Example</h1>
    <div class="live row">
		<div class="second-live col-md-8 col-md-offset-2">
			<div class="live alert alert-success text-center" ng-show="success">
				<button type="button" class="live close" ng-click="msgCls()"><span aria-hidden="true">×</span></button>
				<i class="live fa fa-check"></i> {{ msgStudeSuccess }}
			</div>
			<div class="live alert alert-danger text-center" ng-show="error">
				<button type="button" class="close" ng-click="msgCls()"><span aria-hidden="true">×</span></button>
				<i class="live fa fa-warning"></i> {{ msgError }}
			</div>
			<button class="live btn btn-danger" ng-click="removeAll()"><span class="live glyphicon glyphicon-trash"></span> Delete</button>
			<table class="live table table-bordered" style="margin-top:11px;">
				<thead>
                    <tr>
                    	<th><input type="checkbox" ng-model="allChkBox" ng-change="allchkboxToggle()"></th>
                        <th>Student First Name</th>
                        <th>Student Last Name</th>
                        <th>Student Full Address</th>
                   </tr>
                </thead>
				<tbody>
					<tr ng-repeat="stud in students">
						<td><input type="checkbox" ng-model="stud.Selected" ng-change="firstToggle()"></td>
						<td>{{ stud.studentFname }}</td>
						<td>{{ stud.studentLname }}</td>
						<td>{{ stud.studAddress }}</td>
					</tr>
				</tbody>
			</table>
			</div>
		</div>
	</div>
</div>
<script src="main.js"></script>
</body>
</html>

angular.js

It Data contains simple main.js script.

Also Read :   what is Angular 2 and Difference between Angular 1 VS Angular 2

var liveApp = angular.module('liveApp', []);
liveApp.controller('studCtrl',function($scope, $http){
    $scope.success = false;
    $scope.error = false;
 
    $scope.retrive = function(){
    	$http.get("do_fetch.php").success(function(data){ 
	        $scope.students = data; 
	    });
    }
 
    $scope.allchkboxToggle = function(){
        for (var i = 0; i < $scope.students.length; i++) {
            $scope.students[i].Selected = $scope.allChkBox;
        }
    };
 
    $scope.firstToggle = function(){
        $scope.allChkBox = true;
        for (var i = 0; i < $scope.students.length; i++) {
            if (!$scope.students[i].Selected) {
                $scope.allChkBox = false;
                break;
            }
        };
    };
 
    $scope.removeAll = function(){
        studCheckId = [];
        for (var i = 0; i < $scope.students.length; i++) {
            if ($scope.students[i].Selected) {
                studCheckId.push($scope.students[i].studid);
            }
        }
        $http.post("deo_delete.php", studCheckId)
        .success(function(results){ 
            console.log(results);
            if(results.error){
                $scope.error = true;
                $scope.success = false;
                $scope.msgError = results.message;
                $scope.allChkBox = false;
            }
            else{
                $scope.success = true;
                $scope.error = false;
                $scope.msgStudeSuccess = results.message;
                $scope.retrive();
                $scope.allChkBox = false;
            } 
        });
    }
 
    $scope.msgCls = function(){
    	$scope.success = false;
    	$scope.error = false;
    }
 
});

do_fetch.php

It is simple PHP source code api/code that Retriving simple table data from simple MySQL record in Database.

Also Read :   Sum all properties value in object Using Angularjs Example

<?php
	$db_con = new mysqli('localhost', 'YOUR_USER_NAME', 'YOUR_PASSWORD', 'live24u');
 
	$results = array();
	$lsdsql = "SELECT * FROM students";
	$studquery=$db_con->query($lsdsql);
	while($dtrow=$studquery->fetch_array()){
		$results[] = $dtrow;
	}
 
	echo json_encode($results);
?>

deo_delete.php

Last Step, It is simple PHP source code/api in deleting this check the checked table rows of simple basic table.

<?php
  $db_con = new mysqli('localhost', 'YOUR_USER_NAME', 'YOUR_PASSWORD', 'live24u');
 
  $alldata = json_decode(file_get_contents("php://input"));
 
  $dataResults = array('error' => false);
 
  foreach ($alldata as $key => $value) {
    $mydatasql = "DELETE FROM students WHERE studid = '".$value."'";
    $lstquery = $db_con->query($mydatasql);
  }
 
  if($lstquery){
    $dataResults['message'] = "Student(s) deleted Successfully";
  }
  else{
    $dataResults['error'] = true;
    $dataResults['message'] = "Sorry Cannot delete Student(s)";
  }
 
  echo json_encode($dataResults);
?>

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example





Example

I hope you have Got What is AngularJS Delete multiple records from MySQLi in PHP with checkbox And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.