Edit and Update Data in Mysql Database Using AngularJS with PHP

Hi, friends in this post I show you how to edit and update data in Mysql database using AngularJS with PHP. Edit and update tools which are needed by us most of the time in almost all of our web applications. Nowadays with new web technologies, no one needs different pages for edit & update contents. It gives a wonderful user experience when the user wants to edit some content and upon his one click for an update, the display content instantly turns into editable by clicking on the edit button and it can be saved and refreshed immediately without moving to a separate page. So in this post, we will learn about creating an editing & updating system using AngularJS. Here I hope you have the basic knowledge of AngularJS to execute this.

   

index.php

<!doctype html>
<html>
<head>
<meta charset="UTF-8"> 
<title>SoftAOX | Edit and Update Data in Mysql Database Using AngularJS with PHP</title>  
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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="container">  
    <h3 align="center">Edit and Update Data in Mysql Database Using AngularJS with PHP</h3>  
    <div ng-app="sa_update" ng-controller="controller" ng-init="displayData()"> 
        <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="btnUpdate" class="btn btn-success" ng-click="update_data()" value="{{btnName}}">  
        </div>
        <div class="col-md-6">
            <table class="table table-bordered">
                <tr>
                    <th>S.No</th>
                    <th>Name</th>
                    <th>Email ID</th>
                    <th>Age</th>
                    <th>Edit</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 ng-click="updateData(x.id, x.name, x.email, x.age)" class="btn btn-success btn-xs">Edit</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>  
</div> 
<!-- Script -->
<script>
    var app = angular.module("sa_update", []);
    app.controller("controller", function($scope, $http) {
		$scope.btnName = "Update";
        $scope.update_data = 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(
                    "edit.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 = "Update";
                    $scope.displayData();
                });
            }
        }
        $scope.displayData = function() {
            $http.get("display.php")
                .success(function(data) {
                    $scope.names = data;
                });
        }
        $scope.updateData = function(id, name, email, age) {
            $scope.id = id;
            $scope.name = name;
            $scope.email = email;
            $scope.age = age;
            $scope.btnName = "Update";
        }
    });
</script>
</body>  
</html>  
display.php

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

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

Was this article helpful?

Yes No
×

How can we improve it?

×

We appreciate your helpul feedback!

Your answer will be used to improve our content. The more feedback you give us, the better our pages can be.

Follow us on social media:

Facebook Pinterest
Share via:

Leave a Reply

Your email address will not be published. Required fields are marked *