AngularJS update using php MYSQL

The Update statement is used to update the data in the MySQL database.
In AngularJS we should post the form data to update in JSON format to the PHP file.
The PHP server side code used to get the posted data from AngularJS and decode the JSON format.
The MySQL connection and query execution also done in PHP code.

Syntax for MySQL Update Statement with PHP and MySQL:

$conn = mysql_connect('myServer', ' myUser ', ' myPassword ');
mysql_select_db(' myDb ', $conn);
$result=mysql_query("update tbl_name set col1=val1, col2=val2, col3=val3 
where some_col=some_condition");

Syntax for MySQL Update Statement with PHP and MySQLi:

$conn = mysqli_connect('myServer', 'myUser', 'myPassword', 'myDb');
$result=mysqli_query($conn, "update tbl_name set col1=val1, col2=val2, col3=val3 
where some_col=some_condition");

Syntax for MySQL Update Statement with PHP and PDO:

$conn = new PDO ("mysql:host=myServer;dbname=myDb", "myUser", "myPassword");
$result=$conn->query("update tbl_name set col1=val1, col2=val2, col3=val3 
where some_col=some_condition");

Sample code for MySQL Update with PHP in AngularJS:

Let’s create a sample code for MySQL update with PHP by PDO method.

 Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy AngularJS Tutorials</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
        angular.min.js"> </script>
    </head>
    <body ng-app="updateApp" ng-controller=" updateCtrl">
        <h1>MYSQL Update with PHP in AngularJS</h1>
        <form name="userForm">
           <p>Enter Name :<input type="text" ng-model="user.name"></p>
           <p>Enter Mobile :<input type="text" ng-model="user.mobile"></p>
           <p>Enter Email :<input type="email" ng-model="user.email"></p>
        </form>
        <table border="1">
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Mobile</th>
                    <th>Email</th>
                    <th>Update</th>
                </tr>
                <tr ng-repeat="x in content" >
                    <td>{{x.id}}</td>
                    <td>{{x.name}}</td>
                    <td>{{x.mobile}}</td>
                    <td>{{x. email}}</td>
                    <td><button ng-click="update(x.id)">Update</button></td>
                </tr>
        </table>
        <h3>Please Use Ctrl+F5 for Refresh</h3>
    </body>
    <script>
        var app = angular.module("updateApp", []);
        app.controller("updateCtrl", function($scope, $http) {
            $http.get("select.php").then(function(response) {       
                $scope.content = response.data.details;
            });
            $scope.user = {};
            $scope.update = function() {
                $http({ method  : 'POST',
                url     : 'update.php',
                data    : {value: value, name: $scope.user.name, mobile: $scope.user.mobile, 
                    email: $scope.user.email},
                headers : {'Content-Type': 'application/x-www-form-urlencoded'} 
                }).success(function(data) {
                $scope.content = data;
                });
            };
        });
    </script>
</html>

POST Data to PHP File in JSON format:

Set of data has been posted through AngularJS to PHP and retrieve the result from PHP file.


     $scope.update = function() {
                $http({ method  : 'POST',
                url     : 'update.php',
                data    : {value: value, name: $scope.user.name, 
                    mobile: $scope.user.mobile, email: $scope.user.email},
                headers : {'Content-Type': 'application/x-www-form-urlencoded'} 
                }).success(function(data) {
                $scope.content = data;
                });
            };

Code Explanation for MySQL Update with PHP in AngularJS:

Code Explanation for AngularJS update Using PHP Mysql

The set of input fields to get input from the user.
To bind the content to <td>by ng-repeat directive.
The “update(x.id)” function is used to update the specific data from the MySQL database.
The “updateCtrl” used to create the controller for the Application with arguments $scope object and $http service.
The $http is a service and it is used to call the get method, this http get request will get the content from the “select.php” as response.
The response.data.details is used to get the response data.
The update function is used to POST the arugument value and form user data to the “update.php“.
The $scope.content=data is used to get the updated results as response data.

Sample code for update.php:

<?php
    error_reporting(0);
    $conn = new PDO("mysql:host=myServer;dbname=myDb", "myUser", "myPassword");   
    $_POST = json_decode(file_get_contents('php://input'), true);
    if(!empty($_POST[value]))
    {
        $upd_query=$conn->prepare("update tbl_name set name=:name, mobile=:mobile, 
            email=:email where id=:id ");
        $upd_query->bindParam(':id, $_POST[value]);
        $upd_query->bindParam(': name, $_POST[name]);;
        $upd_query->bindParam(': mobile, $_POST[mobile]);
        $upd_query->bindParam(': email, $_POST[email]);
        $chk_ins=$upd_query->execute();
    }
    $sel_query = $conn->prepare("select * from tbl_name order by id ");
    $sel_query->execute();
    echo json_encode($sel_query->fetchAll());
?>

Code Explanation for update.php:

The $conn connection string used to connect the MySQL database by PHP.
The json_decode function is used to decode the JSON formatted POST data.
To check the posted data is empty or not.
To prepare the update query for update data to the MySQL Database table.
To bind set of values to the update query.
To execute the update query..
To select the updated data in the table.
To fetch all data from the result set and encode the data in JSON format.

Sample Output for MySQL Update with PHP in AngularJS:

Sample Output for AngularJS update using PHP Mysql

The output shows the form with filled input fields from user.
Then the user click the Update button for a specific row.

When user click the update button then the data will be updated in the MySQL database.

PDF

AngularJS update using php MYSQL

Syntax for MySQL Update Statement with PHP and MySQL:

Syntax for MySQL Update Statement with PHP and MySQLi:

Syntax for MySQL Update Statement with PHP and PDO:

Sample code for MySQL Update with PHP in AngularJS:

POST Data to PHP File in JSON format:

Code Explanation for MySQL Update with PHP in AngularJS:

Sample code for update.php:

Code Explanation for update.php:

Sample Output for MySQL Update with PHP in AngularJS:

Related Searches to AngularJS update using PHP Mysql

Wikitechy

Join our Community

Other Languages