PHP
JavaScript
Angular AngularJS jQuery Ajax
Linux
.htaccess

March 29, 2017

Edit and Update Data in MySQL Database Using AngularJS with PHP

2619

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>

<!doctype html>

<html>

<head>

<title>SoftAOX | Edit and Update Data in Mysql Database Using AngularJS with PHP</title>

</head>

<body>

<h3 align="center">Edit and Update Data in Mysql Database Using AngularJS with PHP</h3>

<label>Email</label><input type="text" name="email" ng-model="email" class="form-control"><br/>

</div>

<tr>

<th>Email ID</th>

</tr>

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

<td>

</td>

</tr>

</table>

</div>

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);
}
?>

<?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';
        }
    }
}
?>

<?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';

}

Preview & Download

Checkout Added to cart

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]

Delete Data from MySQL Database Using AngularJS with PHP

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

Edit and Update Data in MySQL Database Using AngularJS with PHP

Share:

index.php

display.php

edit.php

Preview & Download

Mraj

Don't miss on latest updates