Editing data with Angular and php

Asked

Viewed 1,346 times

1

Does anyone know how to select a die and go to an editing screen, using html, Angularjs and php?

Example: I have a list of contacts. I want to make a button that saves the id of this contact and when I click, this button, it takes me to another html page where I can edit the data of this contact.

I have it:

<a href="editar.html?id={{usuario.id}}" class="btn btn-xs btn-primary">Editar</a>

And it works. I’m directed to edit.html and with the id in the url:

localhost:8888/systems/systems_web/Cadastro_angularjs/edit.html? id=1

On this page I have the following code:

<script type="text/javascript">
angular.module("myCrud", []);

angular.module("myCrud").controller("myCrudCtrl", function ($scope, $http) {

    var carregarUsuario = function () {
        $http.get("php/buscaPEdicao.php", {params: {id: usuario}}).success(function (data){
            console.log(data);
            $scope.usuarios = data;
        });
    };
    carregarUsuario();
   });
   </script>
   </head>
   <body ng-controller="myCrudCtrl">
    <div class="jumbotron">
    <table class="table">
        <tr>
            <td>Nome</td>
            <td>Email</td>
            <td>Password</td>
        </tr>
        <tr ng-repeat="usuario in usuarios">
        <td><input type="text" ng-model="usuario.newName">{{usuario.name}}</td>                       
        <td><input type="text" ng-model="usuario.newEmail">{{usuario.email}}</td>
        <td><input type="text" ng-model="usuario.newPass">{{usuario.pass}}</td>
        </tr>
    </table>
</div>

And my php:

<?php
$id = $_POST['id'];

$usuario = mysqli_query($con, "SELECT * FROM users WHERE id='$id'");

header('Content-Type: application/json');

$return = array();

while ($dados = mysqli_fetch_assoc($usuario)) {
     array_push($return, $dados);
}

echo json_encode($return);
?>
php angularjs

  • Have some code to add to the question?

  • Not @rray... I just made the button with link to the page I will create.

  • The problem is $_GET['id'] is never set?

  • @rray, first I took the exclamation mark and it didn’t work. .

  • 1

    As you can see @rray, I changed $_GET['id'] to $_POST['id'] and I ran a test by Postman and the id is set.

  • You are calling the method carry without passing the parameter user.

  • @Daniel, actually what I did is wrong, no parameter is passed.

  • But where does the user of {id: usuario}?

  • Yes, I saw some videos and there are people who put id as parameter. Mas and then? Because I put user as parameter and nothing changes. You are familiar with angular @Daniel?

  • Friend let me see if I understand, you are having difficulty searching the user information when making the request for 'php/buscaPEdicao.php' ?

  • Exactly @Mathdesigner47.

  • But whatever your question, try to be more specific, at what points are you having difficulty?

  • I understand yes, I will put an answer here.

  • @Mathdesigner47, is the following: I have a screen, in html, where I register contacts. On this same screen I have a button with link to another html file where I have to search from the database, only the data of the selected contact, I pass the id by the link button. However, I am not able to make the data, this contact, appear in this other page in html, understand? If you still don’t understand, write to [email protected], or access my git with the https://github.com/GugaSevero/CRUD_AngularJSfiles

  • @Gustavosevero now I understand, I will write an answer.

Show 10 more comments

2 answers

1

Here’s an example, I believe that’s what you’re trying to do. Hug.

angular.module("myCrud", ["ngResource"]);

angular.module("myCrud").controller("myCrudCtrl", function ($scope, $resource) {
   //resUsuario = $resource("/yourUrl");
   $scope.current_user = {};
   $scope.users = [];
   $scope.users.push({id: 1, name: "AAA"});
   $scope.users.push({id: 2, name: "BBB"});
   $scope.users.push({id: 3, name: "CCC"});
  
   $scope.setCurrentUser = function(user) {
     $scope.current_user = user;
     
    // Usando o $resource para chamar uma API
    // resUsuario.get({user_id: user.id}).then(function doSomething(response) {
    //   $scope.current_user = response;
    // });
   };
  
   $scope.save = function(user) {
     alert("Usar '$http' e fazer o seu post do objeto 'current_user'");
     
     // Usando o $resource para chamar uma API
     //resUsuario.save($scope.current_user).then(function doSomething(res){
     //  console.log("salvo com sucesso");
     //});
   };
  
});
<!DOCTYPE html>
<html ng-app="myCrud">
<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-resource.js"></script>
  
</head>
<body ng-controller="myCrudCtrl">
  <h2>LIST</h2>
  <table>
    <tr>
      <th>ID</th>
      <th>NAME</th>
    </tr>
    <tr ng-repeat="user in users">
      <td ng-bind="user.id"></td>
      <td ng-bind="user.name"></td>
      <td><button type="button" ng-click="setCurrentUser(user)">edit</button></td>
    </tr>
  </table>
  

  <h2>FORM</h2>
  <form ng-submit="save()">
    <div>
      <label>ID</label>
      <input ng-model="current_user.id" disabled></div>
    </div>
    <div>
      <label>NAME</label>
      <input ng-model="current_user.name"></div>
    </div>
    <div>
      <button>salvar</button>
    </div>
  </form> 
</body>
</html>

  • Was able to test?

0

Put your code in the following way:

<script type="text/javascript">
angular.module("myCrud", []);

angular.module("myCrud").controller("myCrudCtrl", function ($scope, $http) {

    var carregarUsuario = function () {
        //mudei de 'get' para 'post'
        $http.post("php/buscaPEdicao.php", {id: usuario}).success(function (data){
            console.log(data);
            $scope.usuarios = data;
        });
    };
    carregarUsuario();
   });
   </script>
   </head>
   <body ng-controller="myCrudCtrl">
    <div class="jumbotron">
    <table class="table">
        <tr>
            <td>Nome</td>
            <td>Email</td>
            <td>Password</td>
        </tr>
        <tr ng-repeat="usuario in usuarios">
        <td><input type="text" ng-model="usuario.newName">{{usuario.name}}</td>                       
        <td><input type="text" ng-model="usuario.newEmail">{{usuario.email}}</td>
        <td><input type="text" ng-model="usuario.newPass">{{usuario.pass}}</td>
        </tr>
    </table>
</div>

And in php code it looks like this

<?php
$post = file_get_contents("php://input");
$json = json_dencode($post);
$id = $json['id'];


$usuario = mysqli_query($con, "SELECT * FROM users WHERE id='$id'");

header('Content-Type: application/json');

$return = array();

while ($dados = mysqli_fetch_assoc($usuario)) {
     array_push($return, $dados);
}

echo json_encode($return);
?>

  • Tip: the answers that usually receive votes are the ones that explain why the code solves the problem.

Browser other questions tagged php angularjs

You are not signed in. Login or sign up in order to post.