April 1, 2017

Insert, Update, Delete Data in MySQL using AngularJS with PHP

Hi, friends in this post we going to see how to insert, update, delete data in MySQL using AngularJS with PHP. AngularJS is a JavaScript Framework and it is a library written using JavaScript. If you are a new to AngularJS and looking for an example on AngularJS, this post will help you a lot. This post will cover on insert, update, and delete operations with AngularJS. We’ll do the view, insert, edit, and delete operations on a one page using AngularJS with PHP.

In this example AngularJS web application, we’ll perform the following four functionalities.

1. Get the user’s data from the MySQL database using PHP and display the user’s data in a web page using AngularJS.
2. Insert user data to the MySQL database using AngularJS and PHP.
3. Edit and update user data using AngularJS with PHP and MySQL.
4. Delete user data from the MySQL database using AngularJS and PHP.

Now we going to insert, edit, update, delete on one page without page refresh. In front-end page essentially AngularJS will handle the entire process. In the back-end, PHP will interact with the MySQL database and provide the corresponding requested data to the front-end and MySQL will help to connect with the database.

index.php

<!doctype html>
<html>
<head>
<meta charset="UTF-8"> 
<title>SoftAOX | Insert, Update, Delete Data in MySQL using AngularJS with PHP</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.4.8/angular.min.js"></script>  
</head>  
<body>  
<div class="col-md-12">
	<h3 align="center">Insert, Update, Delete Data in MySQL using AngularJS with PHP</h3>
	<div ng-app="sa_app" ng-controller="controller" ng-init="show_data()">
		<div class="col-md-6">
		   	<label>Name</label>
            <input type="text" name="name" ng-model="name" class="form-control">
            <br/>
            <label>Email</label>
            <input type="text" name="email" ng-model="email" class="form-control">
            <br/>
            <label>Age</label>
            <input type="text" name="age" ng-model="age" class="form-control">
            <br/>
            <input type="hidden" ng-model="id">
            <input type="submit" name="insert" class="btn btn-primary" ng-click="insert()" value="{{btnName}}">
		</div>
        <div class="col-md-6">
            <table class="table table-bordered">
                <tr>
                    <th>S.No</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Age</th>
                    <th>Edit</th>
                    <th>Delete</th>
                </tr>
                <tr ng-repeat="x in names">
                    <td>{{x.id}}</td>
                    <td>{{x.name}}</td>
                    <td>{{x.email}}</td>
                    <td>{{x.age}}</td>
                    <td>
                        <button class="btn btn-success btn-xs" ng-click="update_data(x.id, x.name, x.email, x.age)">
                            <span class="glyphicon glyphicon-edit"></span> Edit
                        </button>
                    </td>
                    <td>
                        <button class="btn btn-danger btn-xs" ng-click="delete_data(x.id )">
                            <span class="glyphicon glyphicon-trash"></span> Delete
                        </button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
<script>  
var app = angular.module("sa_app", []);
app.controller("controller", function($scope, $http) {
    $scope.btnName = "Insert";
    $scope.insert = function() {
        if ($scope.name == null) {
            alert("Enter Your Name");
        } else if ($scope.email == null) {
            alert("Enter Your Email ID");
        } else if ($scope.age == null) {
            alert("Enter Your Age");
        } else {
            $http.post(
                "insert.php", {
                    'name': $scope.name,
                    'email': $scope.email,
                    'age': $scope.age,
                    'btnName': $scope.btnName,
                    'id': $scope.id
                }
            ).success(function(data) {
                alert(data);
                $scope.name = null;
                $scope.email = null;
                $scope.age = null;
                $scope.btnName = "Insert";
                $scope.show_data();
            });
        }
    }
    $scope.show_data = function() {
        $http.get("display.php")
            .success(function(data) {
                $scope.names = data;
            });
    }
    $scope.update_data = function(id, name, email, age) {
        $scope.id = id;
        $scope.name = name;
        $scope.email = email;
        $scope.age = age;
        $scope.btnName = "Update";
    }
    $scope.delete_data = function(id) {
        if (confirm("Are you sure you want to delete?")) {
            $http.post("delete.php", {
                    'id': id
                })
                .success(function(data) {
                    alert(data);
                    $scope.show_data();
                });
        } else {
            return false;
        }
    }
});
</script>  
</body>  
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

<!doctype html>

<html>

<head>

<title>SoftAOX | Insert, Update, Delete Data in MySQL using AngularJS with PHP</title>

</head>

<body>

<h3 align="center">Insert, Update, Delete Data in MySQL using AngularJS with PHP</h3>

<br/>

<label>Email</label>

<br/>

<br/>

</div>

<tr>

<th>Email</th>

<th>Delete</th>

</tr>

<td>{{x.email}}</td>

<td>

<span class="glyphicon glyphicon-edit"></span> Edit

</button>

</td>

<td>

<span class="glyphicon glyphicon-trash"></span> Delete

</button>

</td>

</tr>

</table>

</div>

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

app.controller("controller", function($scope, $http) {

$scope.btnName = "Insert";

$scope.insert = function() {

if ($scope.name == null) {

alert("Enter Your Name");

} else if ($scope.email == null) {

alert("Enter Your Email ID");

} else if ($scope.age == null) {

alert("Enter Your Age");

} else {

$http.post(

"insert.php", {

'name': $scope.name,

'email': $scope.email,

'age': $scope.age,

'btnName': $scope.btnName,

'id': $scope.id

}

).success(function(data) {

alert(data);

$scope.name = null;

$scope.email = null;

$scope.age = null;

$scope.btnName = "Insert";

$scope.show_data();

});

}

$scope.show_data = function() {

$http.get("display.php")

.success(function(data) {

$scope.names = data;

});

}

$scope.update_data = function(id, name, email, age) {

$scope.id = id;

$scope.name = name;

$scope.email = email;

$scope.age = age;

$scope.btnName = "Update";

}

$scope.delete_data = function(id) {

if (confirm("Are you sure you want to delete?")) {

$http.post("delete.php", {

'id': id

})

.success(function(data) {

alert(data);

$scope.show_data();

});

} else {

return false;

}

});

</script>

</body>

</html>

insert.php

<?php
$conn = mysqli_connect("localhost", "root", "", "angularjs");
$info = json_decode(file_get_contents("php://input"));
if (count($info) > 0) {
    $name     = mysqli_real_escape_string($conn, $info->name);
    $email    = mysqli_real_escape_string($conn, $info->email);
    $age      = mysqli_real_escape_string($conn, $info->age);
    $btn_name = $info->btnName;
    if ($btn_name == "Insert") {
        $query = "INSERT INTO insert_emp_info(name, email, age) VALUES ('$name', '$email', '$age')";
        if (mysqli_query($conn, $query)) {
            echo "Data Inserted Successfully...";
        } else {
            echo 'Failed';
        }
    }
    if ($btn_name == 'Update') {
        $id    = $info->id;
        $query = "UPDATE insert_emp_info SET name = '$name', email = '$email', age = '$age' WHERE id = '$id'";
        if (mysqli_query($conn, $query)) {
            echo 'Data Updated Successfully...';
        } else {
            echo 'Failed';
        }
    }
}
?>

<?php

$conn = mysqli_connect("localhost", "root", "", "angularjs");

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

if (count($info) > 0) {

$name = mysqli_real_escape_string($conn, $info->name);

$email = mysqli_real_escape_string($conn, $info->email);

$age = mysqli_real_escape_string($conn, $info->age);

$btn_name = $info->btnName;

if ($btn_name == "Insert") {

$query = "INSERT INTO insert_emp_info(name, email, age) VALUES ('$name', '$email', '$age')";

if (mysqli_query($conn, $query)) {

echo "Data Inserted Successfully...";

} else {

echo 'Failed';

}

if ($btn_name == 'Update') {

$id = $info->id;

$query = "UPDATE insert_emp_info SET name = '$name', email = '$email', age = '$age' WHERE id = '$id'";

if (mysqli_query($conn, $query)) {

echo 'Data Updated Successfully...';

} else {

echo 'Failed';

}

display.php

<?php
$conn   = mysqli_connect("localhost", "root", "", "angularjs");
$output = array();
$query  = "SELECT * FROM insert_emp_info";
$result = mysqli_query($conn, $query);
if (mysqli_num_rows($result) > 0) {
    while ($row = mysqli_fetch_array($result)) {
        $output[] = $row;
    }
    echo json_encode($output);
}
?>

<?php

$conn = mysqli_connect("localhost", "root", "", "angularjs");

$output = array();

$query = "SELECT * FROM insert_emp_info";

$result = mysqli_query($conn, $query);

if (mysqli_num_rows($result) > 0) {

while ($row = mysqli_fetch_array($result)) {

$output[] = $row;

}

echo json_encode($output);

}

delete.php

<?php
$conn = mysqli_connect("localhost", "root", "", "angularjs");
$data    = json_decode(file_get_contents("php://input"));
if (count($data) > 0) {
    $id    = $data->id;
    $query = "DELETE FROM insert_emp_info WHERE id='$id'";
    if (mysqli_query($conn, $query)) {
        echo 'Data Deleted Successfully...';
    } else {
        echo 'Failed';
    }
}
?>

<?php

$conn = mysqli_connect("localhost", "root", "", "angularjs");

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

if (count($data) > 0) {

$id = $data->id;

$query = "DELETE FROM insert_emp_info WHERE id='$id'";

if (mysqli_query($conn, $query)) {

echo 'Data Deleted Successfully...';

} else {

echo 'Failed';

}

Preview & Download

Mraj

Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts. If you have any questions let me drop an email with the article name to the following email id: [email protected]

Insert, Update, Delete Data in MySQL using AngularJS with PHP

Share:

index.php

insert.php

display.php

delete.php

Preview & Download

Mraj

Don't miss on latest updates