Angular kod umożliwiający sięgnięcia do tabel powiązanych

pytanie zadane 21 lipca 2018 w JavaScript przez sauber94 Nowicjusz (140 p.)

Witam, posiadam bazę danych na phpMyAdmin. Korzystam obecnie z tego kodu zmodyfikowanego pod swoje tabele:
https://www.webslesson.info/2016/09/angularjs-tutorial-with-php-update-edit-mysql-table-data.html

Załóżmy, że mam tabele: ZADANIE, PRACOWNIK, MATERIAŁY, SPRZĘT. Muszę przypisać do danego zadania: pracownika oraz materiały jak i sprzęt. Czy ktoś wie jak coś takiego zrobić w Angular?

2 odpowiedzi

odpowiedź 21 lipca 2018 przez zgrybus Pasjonat (24,860 p.)

Pierwsza rada - usuń wersje 1 i przejdź na normalnego Angualar :)

1	komentarz 21 lipca 2018 przez sauber94 Nowicjusz (140 p.) A co w tym jest nie tak?

komentarz 21 lipca 2018 przez Tomek Sochacki Ekspert (227,490 p.)

Na Angular1 nadal stoi wiele apek komercyjnych i prawda jest taka, że w wielu przypadkach trzeba je utrzymywac, bo klient nie zawsze zapłaci Ci za migrację do Angular 6 jeśli nie da mu to realnych korzyści... Chhyba, że masz szczęście do takich kasiastych klientów, którzy nie mają pomysłu co zrobić z nadmiarem gotówki :)

A tak na prawdę do czy praujesz w AngularJS, Angular, React, Vue itp. to de facto żadna różnica. Poznasz jeden framework i zalapiesz ideę pracy z modelem, kontrolerem i widokiem to poradzisz sobie w każdym innym, kwestia doczytania dokumentacji i zrobienia 1-2 projektów.

odpowiedź 21 lipca 2018 przez Tomek Sochacki Ekspert (227,490 p.)

Ale chwila, tak na prawdę to Angular w ogóle nie powinien nawet wiedzieć gdzie są zapisane dane w back-endzie i skąd się one biorą?

Zapisy do bazy najlepiej realizować bezpośrednio w back-endzie, który fajnie żeby pełnił rolę API z odpowiednimi endpointami. W Angular natomiast możesz sobie po prostu stworzyć formularz, którego dane wyślesz do back-endu i tam dokonasz zapisu do bazy.

Napisz z czym dokładniej masz problem i co dokładnie chcesz zrobić w Angular bo niezbyt rozumiem samo pytanie...

komentarz 21 lipca 2018 przez sauber94 Nowicjusz (140 p.)

Mam przykładowo w phpMyAdmin takie tabele jak: pracownik, klient, zlecenie, zadanie, materiały, sprzęt.

Chcę napisać kod który umożliwi stworzenie zlecenia (id klienta zlecającego, rodzaj zlecenia, data rozpoczęcia/zakończenia) dalej zlecenie musi składać się z zadań do którego mogę przydzielić pracownika oraz dodać materiały jak i sprzęt do realizacji tego zadania.

komentarz 21 lipca 2018 przez Tomek Sochacki Ekspert (227,490 p.)

No oki, ale nadal nie powiedziałeś, w czym tkwi problem, w czym mamy pomóc, chodzi o jakiś problem z formularzem Anguar? (jeśli tak to jaki robisz, reactive?) Pokaż w takim razie kod i powiedz co nie działa prawidłowo, bo rozumiem, że na serwer dostajesz inne dane od oczekiwanych?

komentarz 22 lipca 2018 przez sauber94 Nowicjusz (140 p.)

Problem tkwi w tym, że nie wiem jak zrobić pole, w którym mogę wybrać przykładowo id_klienta, który wcześniej został stworzony w tabeli KLIENT.

W phpMyAdmin poprzez opcje 'Wstaw' mam możliwość wybrać id_klienta a pola takie jak rodzaj_zlecenia czy data_rozpoczecia to już ręcznie sobie uzupełniam. Chcę takie coś zrobić w angular bym mógł sobie w formularzu wybrać id_klienta(FK) tworząc zlecenie.

Tutaj screen phpMyAdmin: https://zapodaj.net/images/5c54b81d8989e.png

komentarz 22 lipca 2018 przez Tomek Sochacki Ekspert (227,490 p.)

To moim zdaniem najlepiej po prostu zrobić pole select w widoku client-side.

Na początku, np. w onInit() możesz pobrać sobie listę danych do zaczytania do pola select poprzez strzał do API i gdy dostaniesz odpowiedź do pokazujesz selecta. Jeśli pracujesz z nowym Angularem to polecam pobawić się np. rxjs i np. aktywację pola select uzależnić od istnienia danych z API. Jeśli np. trzymałbyś je w jakieś tablicy coś na wzór:

interface UserInfo {
  id: number;
  name: string; // itd.
}


// i potem w componencie:
constructor(private API: JakisSerwis)
data: Array<userInfo> = [];
ngOnInit() {
  this.data = this.API.getAllUsersInfo();
}


// i potem w widoku gdzieś w ngFor:
<option *ngFor="let user of data | async" [value]="user['id']">
  {{user['id']}}
</option>

Kod pisany na szybko ale generalnie coś takiego mniej więcej. Ewnetualnie jeśli nie chcesz pipe async to możesz samodzielnie robić subscribe i w razie potrzeby odłączać się od tego, np. w ngOnDestroy itp. rozwiązań jest wiele.

Można też np. do czasu pobrania danych pole select zrobić jako disabled albo dać jakiegoś małego "preloadera" to już zależy od UX.

komentarz 22 lipca 2018 przez sauber94 Nowicjusz (140 p.)

Bo obecnie mam taki kod jak poniżej i brakuje mi aby id_klienta i id_firmy czytało z FK i pokazywało mi wybór tak jak w phpMyAdmin.

index.php

<!DOCTYPE html> 
 <!-- index.php !--> 
 <html> 
      <head> 
           <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;"> 
                <div ng-app="myapp" ng-controller="usercontroller" ng-init="displayData()"> 
                     <label>id_klienta</label> 
                     <input type="text" name="id_klienta" ng-model="id_klienta" class="form-control" /> 
                     <br /> 
                     <label>id_firmy</label> 
                     <input type="text" name="id_firmy" ng-model="id_firmy" class="form-control" /> 
                     <br /> 
                     <label>Rodzaj zlecenia</label> 
                     <input type="text" name="rodzaj_zlecenia" ng-model="rodzaj_zlecenia" class="form-control" /> 
                     <br /> 
                     <label>Data rozpoczecia</label> 
                     <input type="text" name="data_rozpoczecia" ng-model="data_rozpoczecia" 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>id_klienta</th> 
                               <th>id_firmy</th>
                               <th>Rodzaj zlecenia</th>
                               <th>Data rozpoczecia</th>
                               <th>Zaktualizuj</th> 
                          </tr> 
                          <tr ng-repeat="x in names"> 
                               <td>{{x.id_klienta}}</td> 
                               <td>{{x.id_firmy}}</td> 
                               <td>{{x.rodzaj_zlecenia}}</td>
                               <td>{{x.data_rozpoczecia}}</td>
                               <td><button ng-click="updateData(x.id, x.id_klienta, x.id_firmy, x.rodzaj_zlecenia, x.data_rozpoczecia)" class="btn btn-info btn-xs">Zaktualizuj</button></td> 
                          </tr> 
                     </table> 
                </div> 
           </div> 
      </body> 
 </html> 
 <script> 
 var app = angular.module("myapp",[]); 
 app.controller("usercontroller", function($scope, $http){ 
      $scope.btnName = "Dodaj"; 
      $scope.insertData = function(){ 
           if($scope.id_klienta == null) 
           { 
                alert("Musisz podać id_klienta"); 
           } 
           else if($scope.id_firmy == null) 
           { 
                alert("Musisz podać id_firmy"); 
           } 
           else if($scope.rodzaj_zlecenia == null) 
           { 
                alert("Musisz podać rodzaj_zlecenia"); 
           } 
           else if($scope.data_rozpoczecia == null) 
           { 
                alert("Musisz podać data_rozpoczecia"); 
           } 
           else 
           { 
                $http.post( 
                     "insert.php", 
                     {'id_klienta':$scope.id_klienta, 'id_firmy':$scope.id_firmy, 'rodzaj_zlecenia':$scope.rodzaj_zlecenia, 'data_rozpoczecia':$scope.data_rozpoczecia, 'btnName':$scope.btnName, 'id':$scope.id} 
                ).success(function(data){ 
                     alert(data); 
                     $scope.id_klienta = null; 
                     $scope.id_firmy = null; 
                     $scope.rodzaj_zlecenia = null;
                     $scope.data_rozpoczecia = null;
                     $scope.btnName = "Dodaj"; 
                     $scope.displayData(); 
                }); 
           } 
      } 
      $scope.displayData = function(){ 
           $http.get("select.php") 
           .success(function(data){ 
                $scope.names = data; 
           }); 
      } 
      $scope.updateData = function(id, id_klienta, id_firmy, rodzaj_zlecenia, data_rozpoczecia){ 
           $scope.id = id; 
           $scope.id_klienta = id_klienta; 
           $scope.id_firmy = id_firmy; 
           $scope.rodzaj_zlecenia = rodzaj_zlecenia;
           $scope.data_rozpoczecia = data_rozpoczecia;
           $scope.btnName = "Zaktualizuj"; 
      } 
 }); 
 </script>

select.php

 <?php 
 //select.php 
 $connect = mysqli_connect("localhost", "root", "", "sampledb"); 
 $output = array(); 
 $query = "SELECT * FROM zlecenie"; 
 $result = mysqli_query($connect, $query); 
 if(mysqli_num_rows($result) > 0) 
 { 
      while($row = mysqli_fetch_array($result)) 
      { 
           $output[] = $row; 
      } 
      echo json_encode($output); 
 } 
 ?>

insert.php

<?php 
 //insert.php 
 $connect = mysqli_connect("localhost", "root", "", "sampledb"); 
 $data = json_decode(file_get_contents("php://input")); 
 if(count($data) > 0) 
 { 
      $id_klienta = mysqli_real_escape_string($connect, $data->id_klienta);       
      $id_firmy = mysqli_real_escape_string($connect, $data->id_firmy); 
      $rodzaj_zlecenia = mysqli_real_escape_string($connect, $data->rodzaj_zlecenia); 
      $data_rozpoczecia = mysqli_real_escape_string($connect, $data->data_rozpoczecia); 


      $query = "INSERT INTO zlecenie(id_klienta, id_firmy, rodzaj_zlecenia, data_rozpoczecia) VALUES ('$id_klienta', '$id_firmy', '$rodzaj_zlecenia', '$data_rozpoczecia')"; 
      if(mysqli_query($connect, $query)) 
      { 
           echo "Data Inserted..."; 
      } 
      else 
      { 
           echo 'Error'; 
      } 
 } 
 ?>

komentarz 22 lipca 2018 przez Tomek Sochacki Ekspert (227,490 p.)

ok, piszesz w AngularJS, a ja Ci podałem kod dla Angular 2+ ale nie ważne.

Nigdzie jednak nie widzę u Ciebie pola select do wybierania tego id... sorki, ale chyba nie pomogę bo kompletnie nie rozumiem problemu... phpmyadmin to w ogóle oddzielne narzędzie po prostu do obsługi bazy jakich jest wiele i nie jest to w żaden sposób powiązane z aplikacją...

komentarz 22 lipca 2018 przez sauber94 Nowicjusz (140 p.)

Zrobiłem sobie już taki kod, który czyta mi z danej tabeli z określonego rekordu w moim przypadku imię oraz nazwisko klientów w bazie i jednego z nich mogę sobie wybrać. Mimo wszystko mam problem. Dodając poniższy kod do indexu głównego (ten co dałem wyżej) nieco mi się to wszystko rozwala, screen: https://zapodaj.net/images/75764aa7b1ac1.png

index.php

<!DOCTYPE html>  
 <html>  
      <head>  
           <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
      </head>  
      <body>  
           <br /><br />  
           <div class="container" style="width:600px;">  
                <h3 align="center">Wybierz imie klienta</h3>  
                <br />  
                <div ng-app="myapp" ng-controller="usercontroller" ng-init="loadKlient()">  
                     <select name="klient" ng-model="klient" class="form-control" ng-change="loadState()">  
                          <option value="">Wybierz klienta</option>  
                          <option ng-repeat="klient in klients" >{{klient.imie}} {{klient.nazwisko}}</option>  
                     </select>  
                     <br />   
                </div>  
           </div>  
      </body>  
 </html>  
 <script>  
 var app = angular.module("myapp",[]);  
 app.controller("usercontroller", function($scope, $http){  
      $scope.loadKlient = function(){  
           $http.get("load_klient.php")  
           .success(function(data){  
                $scope.klients = data;  
           })  
      }  
 });  
 </script>

load_klient.php

<?php  
 //load_klient.php  
 $connect = mysqli_connect("localhost", "root", "", "sampledb");  
 $output = array();  
 $query = "SELECT * FROM klient ORDER BY imie ASC";  
 $result = mysqli_query($connect, $query);  
 while($row = mysqli_fetch_array($result))  
 {  
      $output[] = $row;  
 }  
 echo json_encode($output);  
 ?>

komentarz 22 lipca 2018 przez Tomek Sochacki Ekspert (227,490 p.)

Spróbuj użyć ng-cloak:

https://docs.angularjs.org/api/ng/directive/ngCloak

komentarz 22 lipca 2018 przez sauber94 Nowicjusz (140 p.)

Jak wstawię ng-cloak to niby usunie mi te 'krzaki' lecz nie działa button do zatwierdzenia danych oraz znikają dane które tak naprawdę są w bazie.

Wydaje mi się, że coś jest nie tak z kodem poniżej tak jakby blokował dostęp do bazy danych :

<div ng-app="myapp" ng-controller="usercontroller" ng-init="loadKlient()">  
                     <select name="klient" ng-model="klient" class="form-control" ng-change="loadState()">  
                          <option value="">Wybierz klienta</option>  
                          <option ng-repeat="klient in klients" >{{klient.imie}} {{klient.nazwisko}}</option>  
                     </select>  
                     <br />   
                </div>