Comment ajouter un multimètre dans ma table ?

La page ajout formulaire

Une première version

Voici la première version de la page ajout , on notera rapidement par rapport au code :

  • la ligne action du formulaire :cgi/ajoutmultimetre.py il faudra donc créer un répertoire cgi dans lequel on placera un script python nommé ajoutmultimetre.py

  • l'utilisation d'une feuille de style externe , à créer css/style.css

  • Les trois champs possibles du formulaire number, checkbox et select qui :

    1. Correspondent au type d'enregistrement attendus dans la base de données

    2. Ne permettent pas à l'utilisateur de saisir n'importe quoi !

Ajout des données dans la table, préparation

première version du script

Le script ci -dessous ... n'ajoute rien dans la table multimètre, par contre il montre qu'on peut récupérer les valeurs du formulaire

1
#!/usr/bin/python3
2
# -*- coding: UTF-8 -*-
3
import cgitb
4
#https://docs.python.org/2/library/cgi.html
5
import cgi,os
6
7
#pour afficher les erreurs 
8
cgitb.enable()
9
10
#on récupère le formulaire 
11
form = cgi.FieldStorage()
12
13
print ("Content-Type: text/html ;charset=utf-8\r\n\r\n")
14
15
print ("<p>name:", form["num_inventaire"].value)
16
print ("<p>addr:", form["fonctionnement_amperemetre"].value)
17
print ("<p>name:", form["letype"].value)
deuxième version : cette fois , on ajoute les données
Le script d'ajout
Attention, bien regarder les imports, ainsi que la ligne sys.path.append('../') qui indique que le montad est situé dans le répertoire au dessus
1
#!/usr/bin/python3
2
# -*- coding: UTF-8 -*-
3
import cgitb
4
#https://docs.python.org/2/library/cgi.html
5
import cgi,os,sys
6
7
#pour afficher les erreurs 
8
cgitb.enable()
9
10
#on récupère le formulaire 
11
form = cgi.FieldStorage()
12
13
print ("Content-Type: text/html ;charset=utf-8\r\n\r\n")
14
15
sys.path.append('../')
16
from montad import GestionBdd
17
18
maconnection = GestionBdd('groupep','aPh9RL1qv4hCSXht','groupep','127.0.0.1')
19
maconnection.connect()
20
21
requete = "INSERT INTO `multimetres` (num_inventaire,fonctionnement_amperemetre,modele) VALUES ('"+form["num_inventaire"].value+"','"+form["fonctionnement_amperemetre"].value+"','"+form["letype"].value+"')"
22
print(requete)
23
#on utilise le tad
24
maconnection.updaterequete(requete)
25
26
27
#for i in maconnection.L:
28
#    print(i[0],"-",str(i[2]))
29
30
maconnection.close()
31
32
print ("<p>name:", form["num_inventaire"].value)
33
print ("<p>addr:", form["fonctionnement_amperemetre"].value)
34
print ("<p>name:", form["letype"].value)
Une analyse du cycle
Les transferts d'informations
avant les requêtes ajax
Les étapes :
  1. On va sur la page contenant le formulaire
  2. On complète
  3. On valide
  4. On se retrouve sur la page de script, normalement, tout c'est bien passé !
premiers correctifs
Analyse de la requête
Notre script python génère la requete suivante :
INSERT INTO `multimetres` (num_inventaire,fonctionnement_amperemetre,modele) VALUES ('13 ','on','vert')
On constate que si le checkbox est coché, on utilise la valeur 'on' ( Fonctionne-t-il en ampèremètre ? )
En réalité, cette requête est "mal interprétée " par la base de données comme le prouve le résultat ci-dessous .
On constate que le champ fonctionnement_amperemetre est à 0 alors que qu'on avait envoyé la valeur "on".
Il faut modifier ainsi le code :
1
if form.getvalue('fonctionnement_amperemetre'):
2
    fa = 1
3
else:
4
    fa = 0
5
requete = "INSERT INTO `multimetres` (num_inventaire,fonctionnement_amperemetre,modele) VALUES ('"+form["num_inventaire"].value+"','"+str(fa)+"','"+form["letype"].value+"')"
6
Passer par des requêtes ajax
Analyse du cycle
Voici les modification apportées :
  • On utilise javascript pour intercepter le clique sur le bouton valider (donc on reste sur la page formulaire)
  • Javascript va envoyer la requête ajax (en fait envoyer les informations au script cgi)
  • On modifie le script cgi pour qu'il renvoie des informations, javascript les récupère,
  • On modifie la page formulaire à la volée.
Dans le fichier formulaire.html, il faut apporter deux modifications :
  1. Donner un id au formulaire pour le traiter en javascript :  <form action="cgi/ajoutmultimetre.py" method="post" id="formulairemulti">
  2. Ajouter avant la ligne </body> le lien vers le javascript :<script src="./js/envoiajax.js" type="application/javascript"></script>
Voici le contenu du fichier envoiajax.js
1
$(document).ready(function(){
2
3
$("#formulairemulti").submit(function (event) {
4
    event.preventDefault();
5
    $.post( 
6
        "./cgi/ajoute.py",
7
        $("#formulairemulti").serialize(),
8
					
9
        function(data) {
10
                     alert("ajout effectué");
11
        });
12
13
});
14
15
});
16
C'est du javascript (en réalité du Jquery), c'est la ligne event.preventDefault(); qui permet d'intercepter le bouton validation du formulaire
  • ligne 3: on intercepte l'évènement submit (soumission du formulaire)
  • la ligne 4 empêche l'envoi direct du formulaire
  • la ligne 5 donne le type d'envoi , ici post
  • la ligne 6 indique ou se trouve le script cgi
  • la ligne 7 envoie le formulaire en ajax, c'est à dire en arrière plan, la page formulaire reste affichée à l'écran.
  • sur la ligne 9, un fonction javascript est définie, (elle se termine ligne 11). C'est là qu'on pourra traiter la réponse du script cgi


Améliorer le dispositif
Récupérations des informations et mise à jour de la page html
Dans l'ordre, on modifie d'abord la page html , sur notre exemple la page formulaireajoutmultimetre-ajax.html
1
<!DOCTYPE html>
2
<html lang="fr">
3
  <head>
4
    <meta charset="utf-8">
5
6
    <title>Ajout d'un multimètre</title>
7
    <!-- ceci est un commentaire : on place en général les feuille de style dans le head  -->
8
    <link href="https://pbellevue.libreedu.ovh/dev/system/components/bootstrap/css/bootstrap.min.css" rel="stylesheet">
9
    <link rel="stylesheet" href="css/style.css" />
10
  </head>
11
  <body>
12
<main class="container">
13
<div class="row">
14
    <div class="col">
15
    <form action="cgi/ajoutmultimetre.py" method="post" id="formulairemulti">
16
     <div>
17
        <label for="inventaire">Entrer le numéro d'inventaire:</label>
18
        <input name="num_inventaire" id="inventaire" type="number">
19
    </div>
20
    <div>
21
        <label for="ampere">Fonctionne-t-il en ampèremètre ?</label>
22
        <input name="fonctionnement_amperemetre" type="checkbox" id="ampere" size='30'>
23
    </div>
24
    <div>
25
        <label for="letype">Quel modèle ?</label>
26
        <select name="letype" id="letype">
27
            <option value='blanc'>blanc</option>
28
            <option value='jaune'>jaune</option>
29
            <option value='vert'>vert</option>
30
        </select>
31
    </div>
32
    <div>
33
        <button>Ajouter le multimètre</button>
34
    </div>
35
    </form>
36
    </div>
37
    <div class='col'>
38
        
39
    <div id="reponse">
40
        ici bientôt une réponse ...
41
    </div>
42
    </div>
43
</div>    
44
    
45
</main>
46
<script src="https://pbellevue.libreedu.ovh/dev/system/components/jquery/jquery-3.3.1.min.js" ></script>
47
<script src="https://pbellevue.libreedu.ovh/dev/system/components/popper/popper.min.js" ></script>
48
<script src="https://pbellevue.libreedu.ovh/dev/system/components/bootstrap/js/bootstrap.min.js" ></script>
49
<script src="./js/envoiajax.js" ></script>
50
</body>
51
</html>  
Noter quelques modifications suite au passage sur https://validator.w3.org/ :
  • suppression de l'attribut type= dans les lien vers les javascripts
  • ajout de la langue par défaut dans la balise html <html lang="fr">
Mise en place de la mise en page en utilisant la grille bootstrap : documentation
Ajout d'un div pour la réponse , repéré par son identifiant unique :reponse
En première modification, on peut aller dans le javascript, et modifier la fonction contenue dans la requête ajax :
//alert("ajout effectué");
$("#reponse").html(data);
1
$(document).ready(function(){
2
3
$("#formulairemulti").submit(function (event) {
4
    event.preventDefault();
5
    $.post( 
6
        "./cgi/ajoutmultimetre.py",
7
        $("#formulairemulti").serialize(),
8
					
9
        function(data) {
10
                     //alert("ajout effectué");
11
            $("#reponse").html(data);
12
        });
13
14
});
15
16
});
17
Quand on valide le formulaire, on obtient maintenant l'illustration proposée à gauche . Intéressant pour le développeur que vous êtes, mais abscons pour le commun des mortels .
Dans la suite, on afficher un message plus Groovie .. , mais ce sera pour la suite ..