Envoyer les données saisies d'un formulaire angularJS dans la bdd mysql

**MInfo25** · 07/09/2015, 19h45

Bonjour,

J'ai crée un formulaire avec angularJS et je souhaiterais envoyer dans la base de données les infos saisies par l'utilisateur via ce formulaire. Mais je n'y arrive pas. Aidez-moi merci.
Voici mon formulaire index.html :

Code html :

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
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link href='http://fonts.googleapis.com/css?family=Merriweather:400,700' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
 
		<!--Controllers----->
		<script src="js/controllers/menu.js"></script>	
 
		<title>Notre appli</title>
    </head>
    <body>
<div ng-app="formApp">
 
<div ng-controller="FormController">
 
<form action="insert.php" method="Post">
<label class="labelNom" for="Nom">Nom :</label>
<input id="Nom" type="text" class="inputNom" name="Nom" ng-model="Nom" /> <br/><br/>
 
<label class="labelPrenom" for="Prenom">Prenom :</label>
<input id="Prenom" type="text" class="inputPrenom" name="Prenom" ng-model="Prenom" /><br/><br/>
 
<label class="labelAge" for="Age">Age :</label>
<input id="Age" type="text" class="inputAge" name="Age" ng-model="Age" /><br/><br/>
 
<label class="labelMail" for="Email">Email :</label>
<input id="Email" type="email" class="inputmail" name="Email" ng-model="Email" /><br/><br/>
 
<label class="labePays" for="Pays">Pays :</label>
<SELECT id="Pays" type="pays" class="selectpays"  name="pays" ng-model="Pays">
<OPTION>France
<OPTION>Italie
<OPTION>Gabon
</SELECT>
<br/><br/>
<input type="button"  value="ajouterPerson" ng-click="insertdata()"/><br/>
</form>
</div>
</div>
</body>
</html>

Voici mon fichier JS menu.js :

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
'use strict';
 
var myApp = angular.module('formApp', []);
 
// On ajoute à notre application un contrôleur FormController
myApp.controller('FormController', function($scope, $http) {
 
	$scope.insertdata = function(){
		$http.post('insert.php',{
		'nom':$scope.Nom,
		'prenom':$scope.Prenom,
		'Age':$scope.Age,
		'Email':$scope.Email,
		'pays':$scope.Pays})
						.success(function(data,status, headers, config){
							console.log("data inserted Successfully");}).
 
	}			
 
 
});

Voici le fichier qui est sensé traiter les données du formulaire pour les envoyer dans la base insert.php :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
<?php 
$data = json_decode(file_get_contents("php://input"));
$nom=mysql_real_escape_string($data->Nom);
$prenom=mysql_real_escape_string($data->Prenom);
$age=mysql_real_escape_string($data->Age);
$email=mysql_real_escape_string($data->Email);
$pays=mysql_real_escape_string($data->Pays);
mysql_connect("localhost","root"," ");
mysql_select_db("angular");
mysql_query("INSERT INTO angular(nom,prenom,age,mail,pays) VALUES('$nom','$prenom','$age','$email','$pays')");
 
?>

**Marco46** · 08/09/2015, 11h57

Angular est exécuté côté client, pas côté serveur.

Un tel code ne peut pas fonctionner :

Code :

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

1
2
 
<form action="insert.php" method="Post">

La webapp n'a pas insert.php à dispo.

Invité · 19/10/2015, 18h20

Tu n'as pas de message d'erreur dans la console ? Lu rapidement, ton code parait logique.

As tu bien accès à insert.php ?
Ensuite, Php ne retourne-t-il pas une erreur dans Firebug ?

**Marco46** · 20/10/2015, 10h21

What

?

PHP s'exécute côté serveur, Angular s'exécute côté client. Ce code n'a rien de rationnel !!!

Invité · 20/10/2015, 12h59

Pourquoi ce n'est pas rationnel?

$HTTP de Angular envoie les variables au fichier PHP, qui récupère les variables puis les injecte dans la base de données Mysql.

J'ai déjà fait du code comme ça pour une authentification, même si je n'ai pas un niveau terrible.

Avec Jquery, on envoie sans arrêt des variables aux fichiers PHP qui enregistre les variables en base de données.

Php décode les objets JSON à l'aide de la fonction json_decode();
Php encode les objets JSON à l'aide de la fonction json_encode();

C'est comme cela que l'on fait communiquer Javascript et PHP.

C'est comme cela que l'on peut créer des applications AngularJs avec un Back-End en langage PHP, qui attaque une base de données MySQL (Php ne sert qu'à faire des requêtes SQL dans mysql, avec les données Json qu'il a converti):

Exemple :
http://nicolash.org/angular/angular_example.html

Article :
https://nicolashcodes.wordpress.com/...r-suppression/

**Marco46** · 20/10/2015, 14h22

C'est comme cela que l'on peut créer des applications AngularJs avec un Back-End en langage PHP, qui attaque une base de données MySQL (Php ne sert qu'à faire des requêtes SQL dans mysql, avec les données Json qu'il a converti):

Non non non et non et 100 fois non. Une webapp en SPA doit communiquer avec des webservices et pas exécuter des scripts arbitraires sur le serveur. Et j'ai envie de dire, peu importe le framework javascript utilisé.

Le tuto que tu as linké est un anti-pattern, certainement pas un exemple à suivre.

Outre le fait que le code angular est bourré de mauvaises pratiques (contrôleur contenant de la logique implémentée dans le $scope, utilisation de variables primaires dans le $scope, déclaration de l'application dans le même fichier que la déclaration d'un composant, etc ... J'ai beaucoup de mal à comprendre comment ce code peut fonctionner en l'état en production.

Par exemple :

Code :

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

1
2
3
4
5
6
7
 
$http.get("db.php?action=get_product").success(function(data)
        {
            //$scope.product_detail = data;   
            $scope.pagedItems = data;    
 
        });

Il n'y a pas de mention à un nom de domaine. Donc le db.php est recherché en local. Donc à l'endroit où le html est traité c'est à dire dans le navigateur. Comment un navigateur pourrait-il exécuter db.php et attaquer un db mysql ? Un script php doit être exécuté par un module dédié dans un serveur web.

Tout ça n'a donc aucun sens et met simplement en lumière des lacunes incroyables en architecture.

Donc si tu veux faire fonctionner un vieux site php avec Angular, la 1ère étape est de refactorer le back en lui faisant exposer des services web encapsulant l'ancienne logique.

Invité · 20/10/2015, 14h30

Il n'y a pas de mention à un nom de domaine. Donc le db.php est recherché en local. Donc à l'endroit où le html est traité c'est à dire dans le navigateur. Comment un navigateur pourrait-il exécuter db.php et attaquer un db mysql ? Un script php doit être exécuté par un module dédié dans un serveur web.

Je ne comprends pas pourquoi tu dis que db.php est recherché en local ?

Ce n'est pas le navigateur qui exécute db.php, c'est db.php qui s'exécute sur le serveur et renvoie une réponse au navigateur.
On se sert de Callbacks pour gérer tout cela.

Si cela ne fonctionne pas, alors pourquoi mon script fonctionne en ligne?
Exemple :
http://nicolash.org/angular/angular_example.html

je n'ai pas prétendu que c'était la norme à suivre, cependant, cela démontre qu'il est possible d'utiliser Angular et PHP en symbiose pour écrire dans une Base de données relationelle(Mysql), comme ce que MInfo25 demande initialement.

Je suis par ailleurs d'accord, c'est un casse tête de faire marcher Angular et Php en symbiose pour gérer de la base de données relationnelle, car un objet
JSON est difficile à enregistrer dans une Base de données relationelle.

Merci néanmoins de ta réponse.

**Marco46** · 20/10/2015, 15h37

Envoyé par MoumouteMasters

Je ne comprends pas pourquoi tu dis que db.php est recherché en local ?

Parce que je me suis trompé. $http accepte les chemins relatifs en prenant la racine du serveur automatiquement.

Envoyé par MoumouteMasters

je n'ai pas prétendu que c'était la norme à suivre, cependant, cela démontre qu'il est possible d'utiliser Angular et PHP en symbiose pour écrire dans une Base de données relationelle(Mysql), comme ce que MInfo25 demande initialement.

MySQL n'a rien à voir la dedans. Je parle de l'interface Angular / PHP.

'fin bref

Envoyé par MoumouteMasters

Je suis par ailleurs d'accord, c'est un casse tête de faire marcher Angular et Php en symbiose pour gérer de la base de données relationnelle, car un objet
JSON est difficile à enregistrer dans une Base de données relationelle.

Non on est pas d'accord, je ne parle pas de BDD, cela n'a rien à voir avec ce que je voulais dire. Je parlais d'utiliser un script sous cette forme comme façade pour le serveur.

C'est pas grave, ça "marche".

Envoyer les données saisies d'un formulaire angularJS dans la bdd mysql

AngularJS

Discussions similaires

Partager

Partager