sencha, form, php, bdd

Version imprimable

26/04/2012, 00h27
Heri75011

sencha, form, php, bdd

Bonjour, je suis sur un projet important pour l'obtention de ma licence d'informatique qui consiste à faire un comparateur de prix et je patauge depuis quelques semaines , je préfère toujours essayer de me débloquer seul mais là malgrès mes recherches je bloque toujours...
J'utilise sencha touch 2, je l'apprends avec les tutos, mon code est très mal structuré, je n'ai pas du tout suivi de structure MVC...

J'ai mon fichier index.html vide dans le body, mon css et mon index.js qui contient beaucoup de ligne de code car il y a tous les variable en ext.(panel entre autre) et leur contenu.

J'ai plus tendance à suivre les tutos que d'utiliser la bibliothèque de sencha...
J'ai donc un tabpanel regroupant dans item 5 ext.panel et 1 toolbar pour le header, et des fonctions qui marchent se situant au début du code (toujours dans le index.js) , jusque là ca va, mais voici mon problème suivant :

Une de mes fonctions consiste à scanner un code barre, lorsque cela réussi, j'entre dans une nouvelle fonction (b) , je souhaiterai dans cette fonction renvoyer un formulaire... mon formulaire est deja prêt, codé, en revanche, je n'ai aucune idée de comment renvoyer une nouvelle fenêtre pour l'afficher... la seul façon pour moi actuellement de changer de fenêtres dans mon application est de slider dans mon tabpanel en cliquant sur les icônes en dessous, j'ai crée un nouveau form.js attaché a un form.html, mais je pense pas que mon formulaire doit se trouver dans un nouveau fichier js car si je dois avoir un fichier js par fenêtre j'en aurai trop, ça ralenti trop mon programme, et je pense pas pouvoir effectuer ce que je souhaite avec cette méthode (par exemple ouvrir le formulaire, avec une case pré rempli qui sera une variable déclaré dans la fonction (b) lorsque le scan réussi).

Donc, comment renvoyer une nouvelle fenêtre contenant mon formulaire? j'imagine que mon (immense) formulaire contenu dans une variable ext.panel (ca marchera même si c'est pas un ext.form.panel?) se situera aussi dans mon index.js , mais je ne sais pas comment l'ouvrir...

Ensuite , je souhaiterai ajouter les informations tapé de mon formulaire dans une base de données... j'ai donc ajouté la commande url : form.php, et dans le handler de mon bouton soumettre this.up('form').submit();
mon deuxième problème est le suivant, qu'est ce que dois contenir mon form.php? Dans les balises php il doit y avoir ma connexion à la base de données (j'utilise postgre donc pg_connect), habituellement mon formulaire se situe dans le même fichier php, en méthod post, avec un input de name "toto" par exemple, dans ma balise php j'ai, $toto=$_POST['toto']; puis j'insère cette valeur via Insert into values, sera-ce la même technique? je ne pense pas car cette fois-ci mon formulaire se situe dans le ext.panel de mon js... apparemment il faudrait que j'utilise JSON, mais je n'ai aucune idée de son utilisation et je ne comprends pas sa description dans la faq.

J'ai plusieurs autres problèmes mais pour l'instant je souhaiterai deja résoudre cela, et je me demandais qu'est ce que je devrais faire lorsque je bloque longtemps pour des problèmes de ce type car dans mon université le professeur ne nous aide pas, et je ne comprends pas les méthodes expliqués dans les tutos souvent en anglais.

Je tiens vraiment à vous remercier si vous m'avez lu jusqu'ici, pour votre temps, votre compréhension, et votre aide apporté :) Je suis ouvert à n'importe quel remarque, conseil, ou quoi que ce soit pour m'améliorer.

Cordialement.
26/04/2012, 11h00
kenny.kev

Bonjour à toi,

Pour être franc avec toi. J'ai pas lu ton post jusqu'au bout trop long et pas très compréhensible. Profite des 30 jours gratuit de l'appli Sencha Architect 2.0.0 pour faire ton design.

Tout d'abord le MVC côté JS est pas important voir même inutile. Je te conseil de faire du MVC côté serveur (dans ton cas côté PHP).

Le nombre de fichier js est pas vraiment important et je te conseil de découper le plus possible ton code pour que tu puisse le maintenir le plus simplement possible. Ensuite pour la prod tu utilise senchaSDKTools pour compresser ton code.

Dans ton PHP tu as le métier, c'est la que tu traites les données et tu ne communique que en JSON en envoie et en réception.
Je te conseil d'utiliser firefox avec firebug. Tu as juste à changer le userAgent de fireox et tu auras la version mobile.

Bon courage.

D'accord, merci quant même d'avoir pris le temps de me répondre.

En faite pour résumer je voulais juste savoir comment renvoyer, ouvrir une nouvelle page.

Voila comment se présente mon .js
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function { var onSucces = function(result){ //si ça marche if (blabla) // je veux ouvrir ici un formulaire, comment faire?! } } var form = new ext.form.panel( { url:form.php items : {xtype : jtextfield name : login;},{xtype : jtextfield : password} dockedItems: [ // un bouton envoyer qui génère dans le php l'insertion du login et du passworld dans une base de données. }
A quoi va ressembler form.php ? Il s'agit de ma même façon que la génération d'un formulaire php vers un autre fichier php? ou bien il y a une histoire de ajax , json...

Sinon j'ai télécharger sencha architect mais je comprends pas vraiment comment ça marche.
C'est quoi le "métier" dans mon php? A quoi sert firebug ? merci

01/05/2012, 10h59
sekaijin

je te conseille de faire le pas à pas MVC proposé dans les tutos Sencha

il t'aidera à comprendre comment structurer tout ton code.

pour ce qui est de PHP les examples sencha sont sommaire de ce côté là mais ils fonctionnes.

si tu choisis JSON pour les echanges AJAX ne construit JAMAIS ton JSON avec un String comme on le vois parfois dans les examples sur le NET

la solution la plus simple sure et efficace est de définir un Array php contenant les entrées que tu veux dans ton JSON et d'utiliser à la fin de ton script PHP
json_encode($myArray)

A+JYT

Bonjour et merci pour votre réponse.

J'ai déjà lu la plupart des tutos de sencha à propos de mvc, ajax etc... mais je ne l'assimile pas assez pour le reproduire dans mon environnement.

Pour faire simple, je vous donne mon code en ayant changé les variables, comment ajouter A,B et C dans ma base de données? Qu'est ce qu'il manque?

mon js :

Code:

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
Ext.setup({
 
    onReady: function() {
 
Var C;
 
var form = Ext.create('Ext.form.Panel', {
    fullscreen: true,
    items: [
	{
					title: 'ex',
					url: 'exemple.php?C='C,
 
 
 
	items: [
        {
 
            xtype: 'textfield',
            name: 'A'
        },
        {
            xtype: 'textfield',
            name: 'B'
}
 
 ]
	},
 
	{
                            xtype: 'button',
                            text: 'Send',
                            ui: 'confirm',
                            handler: function() {
                                this.up('form').submit();
                            }
 
 
	}
	]
});
 
 
 
 
}
});

exemple.php :

Code:

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
 
 
 <?php
 
          $dbconn = pg_connect(...);
 
$A=$_POST['A'];
$B=$_POST['B'];
$C=$_GET['C'];
$arr = array();
 
 
$query="INSERT INTO X VALUES('$A','$B','$C')";
 
$resultat = pg_query($dbconn,$query) or die('Échec requête : ' . pg_last_error());
 
while($obj = pg_fetch_object($resultat)) {
        $arr[] = $obj;
}
 
echo '{"json : ":'.json_encode($arr).'}';
 
pg_free_result($resultat);
pg_close($dbconn);
 
 
?>

Où et pourquoi dois-je mettre la connexion AJAX et les requêtes JSON? Si je ne suis pas le MVC mon code ne peut pas marcher?

En faite, malgrès tout ce que je lis, dans un exemple concret, j'ai du mal à éclaircir ces mots :S

commentaires dans le code javascript ==>

Citation:

Envoyé par Heri75011

Code:

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
Ext.setup({
 
  onReady: function() {
 
    var C; // attention à la majuscule ---> Var C;
 
    var form = Ext.create('Ext.form.Panel', {
      fullscreen: true,
      items: [
        {
          title: 'ex',
          url: 'exemple.php?C='C, // <-- Je ne comprends pas cette ligne
          items: [
            {
              xtype: 'textfield',
              name: 'A'
            },
            {
              xtype: 'textfield',
              name: 'B'
            }
          ]
        },
        {
          xtype: 'button',
          text: 'Send',
          ui: 'confirm',
          handler: function() {
            this.up('form').submit();
          }
        }
      ]
    });
  }
});

exemple.php :

Code:

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
 
 
 <?php
 
	  $dbconn = pg_connect(...);
 
$A=$_POST['A'];
$B=$_POST['B'];
$C=$_GET['C'];
$arr = array();
 
 
$query="INSERT INTO X VALUES('$A','$B','$C')";
 
$resultat = pg_query($dbconn,$query) or die('Échec requête : ' . pg_last_error()); // <--- NE JAMAIS UTILISER die CA PLANTE LE SCRIPT
 
while($obj = pg_fetch_object($resultat)) {
	$arr[] = $obj;
}
 
echo '{"json : ":'.json_encode($arr).'}';  // NE JAMAIS FAIRE CA! ON RETOURE TOUJOURS echo json_encode($var)
 
pg_free_result($resultat);
pg_close($dbconn);
 
 
?>

outre les petite erreur de syntaxe il te faut définir l'URL sans paramètres.
si C est une valeur à passer au submit du du formulaire alors il faut le mettre dans un champs hidden.

Code:

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
Ext.setup({
 
  onReady: function() {
 
    var C;
 
    var form = Ext.create('Ext.form.Panel', {
      fullscreen: true,
      items: [
        {
          title: 'ex',
          url: 'exemple.php',
          items: [
            {
              xtype: 'textfield',
              name: 'A'
            },
            {
              xtype: 'textfield',
              name: 'B'
            },
            {
              xtype: 'hiddenfield',
              name: 'C',
              value: C
            }
          ]
        }
      ]
      buttons: [{
        text: 'Submit',
        handler: function() {
          // The getForm() method returns the Ext.form.Basic instance:
          var form = this.up('form').getForm();
          if (form.isValid()) {
            // Submit the Ajax request and handle the response
            form.submit({
              success: function(form, action) {
                Ext.Msg.alert('Success', 'datas insérées');
              },
              failure: function(form, action) {
                Ext.Msg.alert('Failed',"erreur à l'insertion des datas";
              }
            });
          }
        }
      }]
    });    
  }
});

pour ce qui est du PHP surtout pas ce genre de bricole qui n'est bon que pour tester un requête php en direct et surtout à le pas mettre dans un site web quel-qu'il soit (ajax ou pas)

exemple.php

Code:

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
$dbconn = pg_connect(...);
 
$dataToInsert = array(
  'ColA' => $_POST['A'],
  'ColB' => $_POST['B'],
  'ColC' => $_POST['C'],
)
 
$response = array(
  'errors' = array()
);
 
// convertit les données de $dataToInsert en colonnes acceptable par la table X
$values = pg_convert($dbconn, 'X', $dataToInsert);
// insertion des données dans la table
$response['success'] = pg_insert($db, 'X', $values);
 
if ($response['success']) {
  header('Status: 200 OK');
} else {
  header('Status: 500 Internal Server Error');
  $response['errors']['queryError'] = pg_last_error($dbconn);
}
if (! pg_close($dbconn)) {
  $response['errors']['closeError'] = pg_last_error($dbconn);
}
 
header('Content-Type: application/json');
echo json_encode($reponse);

Note:
la gestion des statuts de réponse sont un plus qui aide Ajax à mieux fonctionner.
la rfc2616 fournit la description des codes de statut.
200 (2XX) est 0K le reste est KO
généralement on utilise 500 pour une erreur dans le script php
mais la norme prévoit qu'on puisse être plus précis.
la norme à réservé 500 à 505 pour les erreurs interne du serveur
mais on peut ajouter ces propre code au dela
il convient de respecter la codification des centaine.
2XX OK
3XX Redirection
4XX Client Error
5XX Serveur Error

si par exemple vous voulez répondre par un code de statut que l’accès à la base n'est pas autorisé il ne faut pas utiliser
401 Unauthorized qui signifie que le client à demandé une page et n'y est pas autorisé
souvent on utilise
51x ce genre de réponse. 511 Unauthorized
Mais 500 est suffisant et compris par tous

A+JYT