Hello friends in this blog, we will learn how to update or edit data from the MySQL table using Javascript with PHP script. In the previous post, we learned how to get or select data from the MySQL database table and display that data on the website without refreshing the page. However, we have taken a step like editing pasted data using PHP and the Angular Javascript Framework. If you have worked on a project using Angular Javascipt Framework with PHP and are working with form data, you must update the data that you have inserted into the system at this point. How to update form data with Angular Javascript with PHP programming without page refresh event. With the help of the Angular Javascript directive we can update the data of the mysql table with the PHP code of the operation on the back and the data on the front with the Angular Javascript function without a page update event. So this is my tutorial on updating MySQL data with pointed Javascript in PHP language. In this blog, we performed a data update function with three arguments. When the user clicks on the text box, the update button is full of data and we wrote the PHP code to update the data. We also explained how changes can be made. We also discussed the label of the button according to the requirements and finally and very important things like the required field validation in this video attached to this publication.
Source Code
index.php
<!DOCTYPE html>
<!-- index.php !-->
<html>
<head>
<title>MyitBuddies Tutorials | How To Update / Edit Mysql Table Data Using AngularJS Tutorial with PHP / 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">How To Update / Edit Mysql Table Data Using AngularJS Tutorial with PHP </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';
}
}
}
?>
0 comments:
Post a Comment
Please don't enter any spam link in the comment box.