Hello friends in this blog we are going to learn how to update or Edit Mysql table data by using Angular Javascript with PHP script. In previous post we have learn about how to fetch or select data from Mysql database table and display that data on web page without page refresh. But We have move one step ahead like how to edit inserted data by using PHP with Angular Javascript framework. If you have work on any project with Angular Javascipt Framework with PHP and if you work with form data, so at that time you have to required to update data which you have insert into the system, so how to update form data by using Angular Javascript with PHP programming without page refresh event. With help of Angular Javascript directive we can update Mysql table data by using PHP code from back end side operation and we can update data on front end side by using Angular Javascript function without page refresh event. So this is my tutorial on how to update mysql data by using Angular Javascript with php language. In this blog we have make update data function with three argument, when user click on update button textbox are filled with data and we have write php code for update data, we have also discuss how to change button name as per requirement and last and very important things like required field validation also we have discuss in this video which attached with this post.
Source Code
index.php
<!DOCTYPE html>
<!-- index.php !-->
<html>
<head>
<title>Webslesson Tutorial | AngularJS Tutorial with PHP - Update / Edit Mysql Table Data</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<br /><br />
<div class="container" style="width:500px;">
<h3 align="center">AngularJS Tutorial with PHP - Update / Edit Mysql Table Data</h3>
<div ng-app="myapp" ng-controller="usercontroller" ng-init="displayData()">
<label>First Name</label>
<input type="text" name="first_name" ng-model="firstname" class="form-control" />
<br />
<label>Last Name</label>
<input type="text" name="last_name" ng-model="lastname" class="form-control" />
<br />
<input type="hidden" ng-model="id" />
<input type="submit" name="btnInsert" class="btn btn-info" ng-click="insertData()" value="{{btnName}}"/>
<br /><br />
<table class="table table-bordered">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Update</th>
</tr>
<tr ng-repeat="x in names">
<td>{{x.first_name}}</td>
<td>{{x.last_name}}</td>
<td><button ng-click="updateData(x.id, x.first_name, x.last_name)" class="btn btn-info btn-xs">Update</button></td>
</tr>
</table>
</div>
</div>
</body>
</html>
<script>
var app = angular.module("myapp",[]);
app.controller("usercontroller", function($scope, $http){
$scope.btnName = "ADD";
$scope.insertData = function(){
if($scope.firstname == null)
{
alert("First Name is required");
}
else if($scope.lastname == null)
{
alert("Last Name is required");
}
else
{
$http.post(
"insert.php",
{'firstname':$scope.firstname, 'lastname':$scope.lastname, 'btnName':$scope.btnName, 'id':$scope.id}
).success(function(data){
alert(data);
$scope.firstname = null;
$scope.lastname = null;
$scope.btnName = "ADD";
$scope.displayData();
});
}
}
$scope.displayData = function(){
$http.get("select.php")
.success(function(data){
$scope.names = data;
});
}
$scope.updateData = function(id, first_name, last_name){
$scope.id = id;
$scope.firstname = first_name;
$scope.lastname = last_name;
$scope.btnName = "Update";
}
});
</script>
insert.php
<?php
//insert.php
$connect = mysqli_connect("localhost", "root", "", "testing");
$data = json_decode(file_get_contents("php://input"));
if(count($data) > 0)
{
$first_name = mysqli_real_escape_string($connect, $data->firstname);
$last_name = mysqli_real_escape_string($connect, $data->lastname);
$btn_name = $data->btnName;
if($btn_name == "ADD")
{
$query = "INSERT INTO tbl_user(first_name, last_name) VALUES ('$first_name', '$last_name')";
if(mysqli_query($connect, $query))
{
echo "Data Inserted...";
}
else
{
echo 'Error';
}
}
if($btn_name == 'Update')
{
$id = $data->id;
$query = "UPDATE tbl_user SET first_name = '$first_name', last_name = '$last_name' WHERE id = '$id'";
if(mysqli_query($connect, $query))
{
echo 'Data Updated...';
}
else
{
echo 'Error';
}
}
}
?>
I like your work keep it up ....
ReplyDeletehelllo? :D i can't find select.php file on this tutorial
ReplyDeletehello :D
ReplyDeletei can't find select.php file at this tutorial
Thank you for your sharing.
ReplyDeleteit's a helpful for me.
Hi,
ReplyDeleteCan you please upgrade these tutorials to Angular / Angular 4 as Angular jS is finishing .
Thanks
Can u please upgrade your tutorials to Angular 4 as Angular JS is finishing
ReplyDeleteThanks
Thank you very.............. much webslesson
ReplyDeleteHow do you add pagination to this example? Or how to add Update/Edit to:
ReplyDeletehttps://www.webslesson.info/2018/06/php-mysql-pagination-using-angularjs.html
Thank you!
where the select.php code bro
ReplyDelete