Discussion :

[Invité]

Bonjour tout le monde,

Tout est à peu près résumé dans le titre
Pour être plus précise, en fait j'ai un tableau libelle[] qu'on remplit en saisissant du texte dans des inputs et j'aurai besoin de récupérer ce tableau en PHP afin d'enregistrer son contenu
C'est un tableau classique, il se présente sous cette forme : [{"libelle":"Déduction 1"},{"libelle":"Déduction 2"}]

D'après ce que j'ai compris, le transfert de variables est pas censé se passer dans ce sens la mais plutot PHP vers angular normalement. Néanmoins, j'ai vraiment besoin de récupérer mon tableau en PHP, du coup si quelqu'un avait une solution ou un début d'idées...

Merci d'avance

[mathieu]

il suffit de passer l'objet à un appel AJAX.
cela peut se faire avec la classe Http par exemple :
https://angular.io/docs/ts/latest/ap...ttp-class.html

[Invité]

J'en étais arrivée à cette conclusion aussi. Je connais rien du tout en ajax, j'ai tenté de récupérer un script sur et de l'adapter pour mon cas mais ça ne marche absolument pas ^^" En fait, j'ai essayé de faire afficher ma variable avant de faire quoi que ce soit d'autre pour tester (j'ai laissé tomber l'idée de transférer mon tableau d'angular à PHP parce que je trouvais absolument pas comment faire) et à la place, ça m'affiche tout le html de ma page

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
 
<script type="text/javascript">
        function request(callback) {
            var xhr = getXMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                    callback(xhr.responseText);
                }
            };
            var deduction = encodeURIComponent(document.getElementById("deduction").value);
            xhr.open("GET", "recapControle.php?deduc=" + deduction, true);
            xhr.send(null);
        }
 
        function readData(sData) {
            alert(sData);
        }
 
    </script>
 
    <input type="text" name="deduction" id="deduction" ng-model="ctrl.deduction.libelle"/>
    <button type="button" data-ng-click="ctrl.ajouterDeduction()" onclick="request(readData);">Ajouter</button>

Je vois pas trop où pourrait être le problème... Une idée ?

[Invité]

Re-bonjour tout le monde,

Finalement j'ai trouvé un autre moyen qu'ajax parce que je m'embrouillais la tête et que ça marchait pas. Donc à la place, j'ai tout simplement concaténé le contenu de mon tableau en délimitant chaque élément avec | et je l'ai passé sous forme de cookie. Après je le récupère en PHP et je crée mon tableau avec un explode tout bête

Voila, merci de ton aide Matthieu

[Watilin]

Une requête GET en ajax, c’est comme si tu affichais la page dans ton navigateur. Au niveau du tuyau, autrement dit le protocole HTTP, c’est exactement la même chose ; la différence c’est que la requête est faite par ton script et non par toi-même.
L’objet XHR reçoit la même réponse de la part du serveur : le code source de la page. Donc ce que tu vois est normal.

Pour envoyer tes données JSON, il faut que tu fasses une requête POST. Si ton serveur n’est pas trop vieux, tu as accès au corps de la requête via la ressource spéciale php://input, et ça rend la requête un poil plus simple à envoyer (autrement il faut encoder en application/x-www-form-urlencoded et nommer un paramètre, c’est la vieille méthode, c’est moins sympa).

Bien évidemment il te faut un script PHP pour recevoir le contenu. Je vais supposer qu’il s’appelle savejson.php mais tu lui donnes le nom que tu veux.

Code JS :

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

xhr.open('POST', 'savejson.php', true);

Au niveau de la fonction de rappel, aujourd’hui les navigateurs gèrent tous des évènements d’un niveau un peu plus élevé, c’est quand même plus confortable :

Code JS :

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

1
2
3
4
5
6
7
xhr.onload = function () {
  alert('Réponse du serveur : ' + xhr.responseText);
};
 
xhr.onerror = function () {
  alert('Erreur ajax : ' + xhr.status + ' ' + xhr.statusText);
};

Et pour envoyer les données, il ne faut pas oublier de préciser le bon Content-Type.

Code JS :

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

1
2
3
xhr.setRequestHeader('Content-Type', 'application/json'); // à placer après open() et avant send()
 
xhr.send(JSON.stringify(libelle));

Du côté du PHP, tu gères la requête comme si tu traitais un fichier, en utilisant l’adresse 'php://input' comme un chemin de fichier normal. Tu le passes en paramètre à fopen ou file_get_contents. Après ça, tu ne devrais pas avoir de mal à traiter les données comme tu le souhaites.

Optionnellement tu peux renvoyer une réponse avec un echo classique, pour indiquer si les choses se sont bien passées ou pas. Cette réponse sera reçue en tant que xhr.responseText.

Voici un exemple simple :

Code PHP :

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

1
2
3
4
5
6
7
<?php
header('Content-Type: text/plain; charset=utf-8');
ini_set('html_errors', '0');
error_reporting(-1);
 
echo "JSON bien reçu :)\n";
var_dump(file_get_contents('php://input'));

[Invité]

Avec angularJs, on fait des rqts $http.GET ou $http.POST pour envoyer au back end PHP ou JAVA , on ne fait pas la méthode XHR dans le controleur ( C'est du MVC).


Voici le pattern sympa que j'utilise toujours désormais pour faire tourner AngularJs avec une BDD relationelle et PHP, autrement dit, faire du MAPPING OBJET-RELATIONNEL.

Dans cet exemple, j'envoie l'objet {} JSON $scope.station à mon fichier Back-end crud.php en lui spécifiant que je veux utiliser la function insert_station() du script php.

J'aurais aussi pu envoyer un tableau d'objets JSON [] en paramêtre, comme la demoiselle veut faire .

Mon but est d'insérer dans mysql une 'station' au format suivant {'nom':'station1','type':'bla bla','image':'bla-bla.jg' etc ...} qui est un objet JSON

Je tape donc cela dans mon controleur angularjs :

Code :

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

1
2
3
$http.post('crud.php?action=insert_station',$scope.station).success(function(data){
        alert('Cest bon !');
    }).error(function(data){ $scope.infos = data});

Voici maintenant mon fichier back end PHP en technologie PDO, on route en début de script avec un switch case, en fonction de ce que AngularJS réclame, le json est décodé ou encodé au choix avec la fonction appropriée.

Dans notre cas, mon objet JSON va être reçu par ma function PHP insert_station() (grâce au switch qui route), puis décodé, et la rqt SQL va l'enregistrer en BDD :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<?php
 
/* -------------------------------------------------BACK END EN PDO------------------------------------------  */
 
include('connexionConfig.php');
 
header( 'content-type: text/html; charset=utf-8' );
error_reporting(E_ALL ^ E_NOTICE); // important pour ne pas afficher les notice PHP sans cela le script ne marche pas.
 
/**  Switch Case pour récupérer la l'action demandée par le controleur  Angular **/
 
switch($_GET['action'])  {
    case 'get_stations' :   get_stations();
    break;
    case 'insert_station' : insert_station();
    break;
 
}
 
/* --------------------------------------------------CRUD  ------------------------------------------*/
 
 
function get_stations() { 
	try 
	{   
		$DB = connection();	
		$data = $DB->query('SELECT * FROM stations');
		/* Convertit en JSON  */    
		print_r(json_encode($data->fetchAll(PDO::FETCH_ASSOC)));
		/* ferme la connexion ? */
		$DB=null;
	}  
	catch(PDOException $e) 
	{
		file_put_contents('PDOErreurs.txt', $e->getMessage(), FILE_APPEND);  
	} 	              
}
 
function insert_station() {  
	/* Récupération des données POST Provenant du Front end*/
	 $data = json_decode(file_get_contents("php://input")); 
 
	/* Insertion en Bdd avec PDO */
	try {
		$DB = connection();	
		$req = $DB->prepare("INSERT INTO stations VALUES (?,?,?,?,?,?,?)"); 
		$req->execute(array(null,$data->nom,$data->type,$data->image,$data->telephone,$data->email,$data->taille));
		$DB=null;
 
	} catch (PDOException $e) {
		file_put_contents('PDOErreurs.txt', $e->getMessage(), FILE_APPEND);  
		die();
	}	
}

Pourquoi un switch en début de script PHP ? Parce que cela permet de faire du CRUD de manière trèèès structurée, pour de grooosses applications.

Dans le cadre professionel collaboratif, normalement, dès que possible on crée des services, pour éviter les redondances de modèles de données et pouvoir collaborer avec les collègues.
Un exemple ? Imaginons que tu aies créé une requête SQL qui retourne toutes les villes de France, Si tu la transforme en Service ANGULARJS, alors toute ton entreprise pourra en bénéficier en injectant le service dans leurs controleurs, fini les redondances, et oui, cela marche très bien avec un back en PHP, JAVA ou NOSQL au choix !!.


Ne pas oublier le fichier PHP qui configure la connexion à la BDD : connexionConfig.php :

Code :

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

1
2
3
4
5
6
7
8
<?php
function connection(){
    static $DBH;
    $DBH = new PDO('mysql:host=localhost;dbname=test', 'root', 'root');
          $DBH->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
    return $DBH;
}
?>

Je te laisse voir ça sur ce post pour la connexion PDO à mysql à la fin du post
https://www.developpez.net/forums/d1...angularjs-web/


EDiT : Hé oui cela marche dans les deux sens, dans mon exemple, le back end PHP peux envoyer un tableau JSON à ANGULARJS avec sa function get_stations(). Pour bien gérer ce type de système il faut bien comprendre la théorie du tableau JSON et des OBJETS JSON, parce qu'on est sans cesse en train de jongler avec ça dans le back end ET dans le front end ! Une fois que tu as compris ça roule tout seul et marche très bien, des fois on rame un peu avec le pdo et certains sgbd (postgre...) mais bah ca marche très bien, et trèèès fiable (testé en prod).


EDIT 2 : mon pb actuel est de trouver le même type de pattern pour un back end JAVA, si quelqu'un l'a je suis preneuse !

[Watilin]

Ah bah super, merci DevDePassage, à nous deux on fait une réponse complète

Je ne maîtrise pas Angular alors j’ai répondu sur l’aspect ajax vanilla, que Piaandy6 disait ne pas réussir à faire marcher. Mais c’est sûr, c’est mieux de ne pas mélanger le code vanilla et le code framework

[Invité]

Oui je connais aussi XHR, cool ta réponse, oui, ca donne des aspects différents et moi je n'utilise pas souvent le passage de vars par l'url, qui fonctionne aussi avec angularjs (J'ai vu un collègue le faire pour changer de vue avec un ID) ...