Inline Edit using AngularJS in PHP/MySQLi

January 18, 2021
PHP
inline edit using angularjs

Tutorial: How to Inline Edit using AngularJS in PHP/MySQLi

About Inline Edit using AngularJS in PHP/MySQLi

Getting Started

This is a tutorial for Inline Edit using AngularJS in PHP/MySQLi. I’ve used CDN for Bootstrap and Angular JS, so you need an internet connection for them to work.

Creating a Database

First, we are going to create our database and insert sample data.

1. Open phpMyAdmin.

2. Click databases, create a database and name it as angular.

3. After creating a database, click the SQL and paste the below codes. See image below for detailed instruction.

CREATE TABLE `members` (
  `memid` int(11) NOT NULL AUTO_INCREMENT,
  `firstname` varchar(30) NOT NULL,
  `lastname` varchar(30) NOT NULL,
  `address` text NOT NULL,
PRIMARY KEY(`memid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `members` (`memid`, `firstname`, `lastname`, `address`) VALUES
(1, 'Neovic', 'Devierte', 'Silay'),
(2, 'Julyn', 'Divinagracia', 'E.B.'),
(3, 'Gemalyn', 'Cepe', 'Bohol'),
(4, 'Matet', 'Devierte', 'Silay City'),
(5, 'Tintin', 'Devierte', 'Silay City'),
(6, 'Bien', 'Devierte', 'Cebu City'),
(9, 'Janna ', 'Atienza', 'Talisay City'),
(10, 'Desire', 'Osorio', 'Bacolod City');

inline edit using angularjs in php

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="utf-8">
    <title>AngularJS Inline Edit using PHP/MySQLi</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.5.7/angular.min.js"></script>
</head>
<body ng-controller="memberdata" ng-init="fetch()">
<div class="container">
    <h1 class="page-header text-center">AngularJS Inline Edit using PHP/MySQLi</h1>
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="alert alert-success text-center" ng-show="success">
                <button type="button" class="close" ng-click="clearMessage()"><span aria-hidden="true">&times;</span></button>
                <i class="fa fa-check"></i> {{ message }}
            </div>
            <div class="alert alert-danger text-center" ng-show="error">
                <button type="button" class="close" ng-click="clearMessage()"><span aria-hidden="true">&times;</span></button>
                <i class="fa fa-warning"></i> {{ message }}
            </div>
            <table class="table table-bordered table-striped" style="margin-top:10px;">
                <thead>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Address</th>
                        <th>Action</th>
                   </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="member in members" ng-include="getTemplate(member)">
                    </tr>
                </tbody>
            </table>
            <script type="text/ng-template" id="normal">
        		<td>{{member.firstname}}</td>
                <td>{{member.lastname}}</td>
                <td>{{member.address}}</td>
                <td><button type="button" ng-click="edit(member)" class="btn btn-success"><span class="glyphicon glyphicon-pencil"></span> Edit</button></td>
    		</script>
    		<script type="text/ng-template" id="edit">
        		<td><input type="text" class="form-control"  ng-model="editmember.firstname"></td>
                <td><input type="text" class="form-control"  ng-model="editmember.lastname"></td>
                <td><input type="text" class="form-control" ng-model="editmember.address"></td>
                <td>
                    <button type="button" ng-click="save(editmember)" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Save</button>
            		<button type="button" ng-click="reset()" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
                </td>
    		</script>
        </div>
    </div>
</div>
<script src="angular.js"></script>
</body>
</html>

angular.js

This contains a angular js script.

var app = angular.module('app', []);
app.controller('memberdata', function($scope, $http){
    $scope.success = false;
    $scope.error = false;
    $scope.editMode = false;
 
    $scope.editmember = {};
 
    $scope.getTemplate = function (member) {
        if (member.memid === $scope.editmember.memid) return 'edit';
        else return 'normal';
    };
 
    $scope.fetch = function(){
    	$http.get('fetch.php').success(function(data){ 
            $scope.members = data; 
        });
    }
 
    $scope.edit = function(member){
        $scope.editmember = angular.copy(member);  
    }
 
    $scope.save = function(editmember){
        $http.post('save.php', editmember)
        .success(function(data){
            console.log(data);
            if(data.error){
                $scope.error = true;
                $scope.success = false;
                $scope.message = data.message;
            }
            else{
                $scope.fetch();
                $scope.reset();
                $scope.success = true;
                $scope.error = false;
                $scope.message = data.message;
            }
        });
    }
 
    $scope.reset = function () {
        $scope.editmember = {};
    };
 
    $scope.clearMessage = function(){
    	$scope.success = false;
    	$scope.error = false;
    }
 
});

fetch.php

This is our PHP api that fetches data from a MySQL Database.

<?php
    $conn = new mysqli('localhost', 'root', '', 'angular');
 
    $output = array();
    $sql = "SELECT * FROM members";
    $query=$conn->query($sql);
    while($row=$query->fetch_array()){
        $output[] = $row;
    }
 
    echo json_encode($output);
?>

save.php

Lastly, this is our PHP code/api in saving the changes we made to our table.

<?php
  $conn = new mysqli('localhost', 'root', '', 'angular');
 
  $data = json_decode(file_get_contents("php://input"));
 
  $out = array('error' => false);
 
  $memid = $data->memid;
  $firstname = $data->firstname;
  $lastname = $data->lastname;
  $address = $data->address;
 
  $sql = "UPDATE members SET firstname = '$firstname', lastname = '$lastname', address = '$address' WHERE memid = '$memid'";
  $query = $conn->query($sql);
 
  if($query){
    $out['message'] = "Member updated Successfully";
  }
  else{
    $out['error'] = true;
    $out['message'] = "Cannot update Member";
  }
 
  echo json_encode($out);
?>

And that ends this tutorial. If you have any comments or questions, feel free to message me or comment below. Hope this helps. Happy Coding!

Download Here

 

Facebook Comments

Leave a Reply

Your email address will not be published.