I need to retrieve all my data from database and bind them in text-field using angular.js and PHP. I am explaining my code below.
index.php
<?php
include_once 'dbconfig.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CRUD Operations With PHP and MySql - By Cleartuts</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<center>
<div id="body">
<div id="content">
<table align="center">
<tr>
<th colspan="5"><a href="add_data.html">add data here.</a></th>
</tr>
<th>First Name</th>
<th>Last Name</th>
<th>City Name</th>
<th colspan="2">Operations</th>
</tr>
<?php
$sql_query="SELECT * FROM users";
$result_set=mysql_query($sql_query);
while($row=mysql_fetch_row($result_set))
{
?>
<tr>
<td><?php echo $row[1]; ?></td>
<td><?php echo $row[2]; ?></td>
<td><?php echo $row[3]; ?></td>
<td align="center"><a href="edit_data.php?edt_id=<?php echo urlencode($row[0]) ?>"><img src="images/pencil_small.png" align="EDIT" /></a></td>
<td align="center"><a href="javascript:delete_id('<?php echo $row[0]; ?>')"><img src="images/cross-small-icon.png" align="DELETE" /></a></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
</center>
</body>
</html>
When user will click on edit button it will redirect to the next page(i.e-edit_data.php) which is given below and this page contains all the data which are going to be edited.
edit_data.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="edit_data">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CRUD Operations With PHP and MySql - By Cleartuts</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="js/angularjs.js" type="text/javascript"></script>
<script src="js/update.js" type="text/javascript"></script>
</head>
<body>
<center ng-controller="updateController">
<div id="body">
<div id="content">
<table align="center">
<tr>
<td><input type="text" name="first_name" placeholder="First Name" ng-model="first_name" required /></td>
</tr>
<tr>
<td><input type="text" name="last_name" placeholder="Last Name" ng-model="last_name" required /></td>
</tr>
<tr>
<td><input type="text" name="city_name" placeholder="City" ng-model="city" required /></td>
</tr>
<tr>
<td>
<button type="submit" name="btn-update" ng-click="update_data();"><strong>UPDATE</strong></button>
</td>
</tr>
</table>
</div>
</div>
</center>
</body>
</html>
In this page i need to display all fetched data inside text-field.
update.js:
var app=angular.module("edit_data", []);
app.controller("updateController",function($scope,$http){
$scope.errors = [];
$scope.msgs = [];
$scope.update_data=function(){
$http.post('js/update.php',{"first_name":$scope.first_name,"last_name":$scope.last_name,"city":$scope.city}
).success(function(data, status, headers, config){
if(data.msg!=''){
$scope.msgs.push(data.msg);
}else{
$scope.errors.push(data.error);
}
}).error(function(data, status) { // called asynchronously if an error occurs
// or server returns response with an error status.
$scope.errors.push(status);
});
}
});
I need to retrieve these three data first_name,last_name,user_city from my Mysql database.Please help me to resolve this issue.
