current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.3 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite

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.

share|improve this question
    
Yours is not a single page app. First you show all the users on a page and for edit you are opening a new page. Right ? – brute_force Sep 21 '15 at 6:03
    
@brute_force:check the index.php page. – satya Sep 21 '15 at 6:04
up vote 0 down vote

make php file that connect to db and retrieve your given parameter from db, and after that call it from angular : 

var app=angular.module("myApp", []);
app.controller("updateController",function($scope,$http){
$scope.errors = [];
$scope.msgs = [];
$scope.update_data=function(){
    $http.post('update.php',  {"first_name":$scope.first_name,"last_name":$scope.last_name,"city":$scope.ci    ty}
    ).success(function(data, status, headers, config){
        $scope.resultData = data;
  }).error(function(data, status) { // called asynchronously if an error occurs
           // or server returns response with an error status.
          $scope.errors.push(status);
    });
}
});

view file:
<div ng-controller="updateController" ng-app="myApp"> <div ng-repeat=item in resultData"> {{item.yourDbdata}} </div> </div>

your update php get posted data call db and echo json_encode(query result)

share|improve this answer
up vote 0 down vote
  1. Write a function (say retrieveData()) in php file, to retrieve data from database.
  2. In retrieveData() after getting required data, do echo json_encode($result);

  3. In your html you can have input type button with value="Edit" and event ng-click="editUser()"

  4. In your js controller send a request to retrieveData(), i.e

$scope.editUser = function() { $http({ url:'path_to_function/retrieveData/', method:'POST', data: "Search=" + $scope.username , headers:{'Content-Type': 'application/x-www-form-urlencoded'} }).success(function(response, status, headers, config){ $scope.result = response ;
}); }

Here $scope.username can be any thing, for example to edit record of particular user, $scope.username will be the username of that user to fetch in database. 5. Required result will be available on html in variable $scope.result.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.