AngularJS Inline Edit using PHP/MySQLi

Submitted by nurhodelta_17 on Thursday, January 18, 2018 - 20:56.

Getting Started

I've used CDN for Bootstrap and Angular JS so you need internet connection for them to work.

Creating our 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');

index.html

This is our index which contains our table.

<!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 our 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 our 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);
?>

That ends this tutorial. Happy Coding :)

Add new comment

425 views