In this article we are Teach you How to Edit Inline Data in PHP/MySQLi using AngularJS. We will simplify the Edit Inline Data in a Row. using this script you can edit inline data at once with help of AngularJS and PHP/MySQLi. This Script is easy and usefull which you can implemented in your web pages easily. I’ve used CDN for Bootstrap and Angular JS so you need internet connection for them to work.
How to Edit Inline Data in PHP/MySQLi using AngularJS
1-Creating Database
- Open Phpmyadmin in your Browser
- Click on Database Tab Display on Top side
- Give the Database name “inline”.
- After Creating Database Open it.
- Click on SQL Tab on Top area
- Copy the Below Source Code and paste it.
- Then Click on Go.
-- phpMyAdmin SQL Dump -- version 4.7.0 -- https://www.phpmyadmin.net/ -- -- Host: 127.0.0.1 -- Generation Time: Jan 19, 2018 at 08:51 PM -- Server version: 10.1.26-MariaDB -- PHP Version: 7.1.8 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET AUTOCOMMIT = 0; START TRANSACTION; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Database: `inline` -- -- -------------------------------------------------------- -- -- Table structure for table `members` -- CREATE TABLE `members` ( `memid` int(11) NOT NULL, `firstname` varchar(30) NOT NULL, `lastname` varchar(30) NOT NULL, `address` text NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `members` -- INSERT INTO `members` (`memid`, `firstname`, `lastname`, `address`) VALUES (1, 'Deepak', 'Raj', 'Lucknow'), (2, 'Priya', 'Raj', 'Lucknow'), (3, 'Abhi', 'Singh', 'New Delhi'), (4, 'Anandi', 'Pandey', 'Gujrat'), (5, 'Deepsikha', 'Mishra', 'lucknow'), (6, 'Alkesh', 'Singh', 'hydrabad'), (9, 'Silpa', 'Raj', 'Delhi'), (10, 'Akash', 'Kumar', 'Mumbai'); -- -- Indexes for dumped tables -- -- -- Indexes for table `members` -- ALTER TABLE `members` ADD PRIMARY KEY (`memid`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `members` -- ALTER TABLE `members` MODIFY `memid` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=15;COMMIT; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
OR Import DB File
After Downloading the source code extract it in your root folder.
- Open Phpmyadmin in your Browser
- Click on Database Tab Display on Top side
- Give the Database name “inline”.
- After Creating Database Open it.
- Click on Import Tab on Top area
- You can Find Database folder in Downloaded source code where find register.sql file then Select it.
- Then Click on Go.
2 – Creating index Page
in this step we are going to creating a table where fecth data from MySQL Database and edit inline with help of angularJS. in this source code I’ve used CDN for Bootstrap and Angular JS so you need internet connection for them to work.
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<title>How to Edit Inline Data in PHP/MySQLi using AngularJS</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="well text-center">How to Edit Inline Data in PHP/MySQLi using AngularJS</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">×</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">×</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-primary"><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-success"><span class="glyphicon glyphicon-floppy-disk"></span> Save</button>
<button type="button" ng-click="reset()" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
</td>
</script>
</div>
</div>
</div>
<script src="angular.js"></script>
</body>
</html>
3 – Fetch Data From MySQL Database using PHP
This step we are going to create fetch.php file where fetch data from database in index page.
<?php
$conn = new mysqli('localhost', 'root', '', 'inline');
$output = array();
$sql = "SELECT * FROM members";
$query=$conn->query($sql);
while($row=$query->fetch_array()){
$output[] = $row;
}
echo json_encode($output);
?>
4 – Creating AnularJS Code To Edit Inline Data
This step we are creating a code to edit and save data inline.
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;
}
});
5 – Creating Update Code using PHP
This step we are going to add php code to update data into MySQL Database.
<?php
$conn = new mysqli('localhost', 'root', '', 'inline');
$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);
?>
If you facing any type of problem with this source code then you can Download the Complete source code in zip Formate by clicking the below button Download Now otherwise you can send Comment.