Discussion :

[ghatfan99]

Bonjour,

Je suis entrain de créer une petite application qui permet de récupérer les données depuis un serveur et après les modifier ou ajouter d'autres entrée avec les technologies (Angular4, PHP, Mysql)

1. Pour obtenir les données j'ai un fichier getClients.php

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<?php
header('Access-Control-Allow-Origin:*');
include('connection.php');
$statement = $pdo->prepare( "select * from clients");
$statement->execute();
$results= $statement->fetchAll(PDO::FETCH_ASSOC);
 
$json = json_encode($results);
 
echo $json;
?>

et ça marche très bien coté Angular j'arrive à récupérer mes données et les afficher, mon problème est: je n'arrive pas à envoyer données au serveur et je pense que le problème vient de PHP, le fichier utilisé pour la méthode POST est postClients.php:

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<?php
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
echo "Data envoyées";
 
$data = json_decode(file_get_contents('php://input'));
echo $data;
?>

et j'ai essayé encore var_dump ($_POST) et ça ne marche pas.

mes fichier Angular sont:

1. clients.service.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { Injectable } from '@angular/core';
import {Http, Headers} from '@angular/http';
import 'rxjs/Rx';
 
 
@Injectable 
export class ClientsService {
 
  constructor(private http: Http) {}
 
  // obtenir les client du serveur
  getClients() {
    return this.http.get('http://localhost/testPhp/getClients.php');
  }
 
  // form submit to serveur
  postClient(client: any) {
    const headers = new Headers({'Content-Type': 'application/json'});
    console.log('Client object values from form: ');
    console.log(client);
    return this.http.post('http://localhost/testPhp/postClients.php', client, {headers: headers});
  }
}

et dans app.component.ts:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
onSubmit(form: NgForm) {
        this.submitted = true;
 
       this.clienteService.postClient(form.value).subscribe(
            (formContents) => console.log('Form contents in app component sended ' + formContents),
            (error) => console.log('Erreur de ' + error)
        );
 
        this.signupForm.reset();
    }

et avec le console je vérifie bien que mes données sont envoyées au service clients.service.ts :

avec var_dump($_POST) dans mon fichier postClients.php je n'ai pas d'erreur mais j'ai rien coté serveur
avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$data = json_decode(file_get_contents('php://input'));
echo $data;

j'ai une erreur 500 :

Merci à vous si vous pouvez me dire comment je peux régler ce problème

Gr

[headmax]

J'ai pas tout regardé ton code mais la première erreur relevé est que tu POST a PHP pas un formulaire en tant que content type mais un JSON .
Change ton content type par :
Dans postClient

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
headers: { 
const headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});

[ghatfan99]

merci headmax,
J'ai changé mon code dans mon tables.service.ts :

Code Javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
postTableContent(contents: any[]) {
      const formData: FormData = new FormData();
      formData.append('data', JSON.stringify(contents));
      const headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});
      console.log('form data \n' + JSON.stringify(contents));
 
      return this.http.post('http://localhost/silaboBackend/postData.php',
          formData
          , {headers: headers}
      );
  }

et j'ai toujours rien coté serveur avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$data = file_get_contents("php://input");
var_dump ($data);
var_dump ($_POST)

je ne vois pas comment récupérer les données coté serveur?

[headmax]

Salut est tu sur que le POST vers postClients.php est bien exécuté depuis angular? vérifie si tu as bien un POST F12 (réseaux) sur ton navigateur. Tu utilise un controler ou un services dans angular?

[ghatfan99]

Merci headmax,

J'utilise un service:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
postTableContent(contents: any[]) {
      const formData: FormData = new FormData();
      formData.append('data', JSON.stringify(contents));
      const headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});
      return this.http.post('http://localhost/silaboBackend/postData.php',
          formData
          , {headers: headers}
      )
          .map(res => res.json());
  }

dans reseaux j'ai bien:
status method File Domain Cause Type Transfer Size
200 Post postData.php localhost xhr 356 B 54

et dans mon fichier table.ts la methode onSubmit:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
onSubmit(form: NgForm) {
        this.tableContentsS.postTableContent(form.value)
            .subscribe(
                (formContents) => console.log('Form Contents sended correctly'),
                (error) => console.log(error)
            );
        // print form values to the console
        // console.log(JSON.stringify(form.value));
        this.signupForm.reset();
        this.viewForm = false;
    }

j'ai cherché par tout pour un example claire avec la submission d'un formulaire Angular vers php sur internet et j'ai rien trouvé

Merci pour ton aide parce que je suis vraiment bloqué

Gr

[headmax]

Salut je vois que tu stringify contents est tu sur de ce que retourne contents? car PHP attends un POST de données brutes non "stringifier" un tableau des inputs et select ... nommé en fonction de leur attribut name="nom"

formData.append('data', JSON.stringify(contents));

[ghatfan99]

j'ai remplacé le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 formData.append('data', JSON.stringify(contents));

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 formData.append('data', contents);

et ça donne rien coté serveur réponse vide,
le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 console.log('form data \n' + contents);

dans le service donne:
form data
[object Object]

Merci

[Watilin]

Peut-être qu’un var_dump($_REQUEST) pourrait donner quelques indices, notamment la taille de la requête, pour vérifier que le serveur reçoit bien les données.

Quelle est ta version de PHP ? Quel est ton niveau error_reporting ?

[headmax]

Salut , je rajouterais qu'il faut vérifier les logs Apaches pour plus de précision, mais moins de convivialité .

Si tu es sous linux :

Code ssh :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
sudo tail -n 30 /var/log/apache2/access.log
sudo tail -n 30 /var/log/apache2/error.log

[Watilin]

Merci headmax, c’est le genre de truc que j’oublie tout le temps

Je rajoute un exemple de chemin pour WAMPServer, car j’ai encore la mauvaise habitude de développer sous Windows

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

C:\wampserver3\bin\apache\apache2.4.23\logs\