Discussion :

[vinceom92]

Bonjour,

Je souhaiterais faire des requêtes SQL INSERT INTO et UPDATE en utilisant AJAX. Je vous explique : j'ai une page qui affiche l'intégralité du cours. Après chaque question, j'ai mis un <textarea> (avec un compteur qui s'incrémente) pour que l'internaute puisse saisir sa réponse. J'aimerais qu'en quittant un <textarea> (évènement onChange), la réponse de l'internaute s'enregistre dans la base de données (avec bien sûr les bons identifiants de la question et de l'utilisateur). A noter qu'une question est dans uniquement un cours.

Pour cela, j'utilise ces deux fonctions javascript :

Code javascript :

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
55
56
<script type='text/javascript'>
function init_xhr() {
    if (window.XMLHttpRequest) // Firefox
 
        xhr = new XMLHttpRequest();
 
    else {
 
        if (window.ActiveXObject) // Internet Explorer
 
           xhr = new ActiveXObject("Microsoft.XMLHTTP");
 
        else { // XMLHttpRequest non supporté par le navigateur
 
            alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
 
            return;
        }
    }
    return xhr;
}
</script>
 
<script type='text/javascript'>
function go(tp_rep_id, reponse) {
 
    var xhr = init_xhr();
 
    xhr.onreadystatechange = function () {
 
        if (xhr.readyState == 4 && xhr.status == 200) {
 
            reponse = xhr.responseText;
 
            if (reponse=="0") document.getElementById("image" + tp_rep_id).innerHTML = "<img src=tp_en_attente.png align=left title='En attente de validation' />";
 
            if (reponse=="1") document.getElementById("image" + tp_rep_id).innerHTML = "<img src=en_travaux.png align=left title='Réponse incomplète' />";
 
            if (reponse=="4") document.getElementById("image" + tp_rep_id).innerHTML = "<img src=tp_validee.png align=left title='Réponse OK' />";
 
        }
    }
 
    xhr.open("POST", "fichier_traitement.php", true);
 
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    /* Utilisation des variables PHP (identifiants du cours et de l'utilisateur) - Il détecte les bons identifiants (cours, l'utilisateur connecté) */
    var id_cours_tp = '<?php echo $id_cours_tp; ?>'; /* A mon avis, ce n'est pas la peine de transférer l'identifiant du cours puisqu'une question ne peut pas être dans plusieurs cours ! */
	var id_utilisateur = '<?php echo $query_recuperation_identifiant_connecte; ?>';
	var id_question = ''; 
	// Cette ligne ne va pas (il faut qu'il transfère dans le traitement PHP les identifiants du cours, de l'utilisateur connecté, de l'identifiant de la bonne question et la réponse saisie) pour pouvoir les mettre dans la requête SQL INSERT INTO, de plus il faut voir comment récupérer l'identifiant de la bonne question pour la transférer dans le traitement PHP
	message = "id_cours_tp=" + id_cours_tp + "id_utilisateur=" + id_utilisateur + "tp_rep_id=" + tp_rep_id + encodeURIComponent(reponse); // en faisant un  alert(reponse);, il prend en compte la réponse saisie, en faisant un alert(message); , il prend en compte les identifiants du cours, de l'utilisateur (j'ai ajouté tp_rep_id pour qu'il prenne en compte l'identifiant et le contenu de la réponse) et du contenu de la réponse
 
	document.getElementById("image" + tp_rep_id).innerHTML = "<img src=progressbar.gif align=left title='En attente du serveur' width=24 />";
}
</script>

Voici le code du <textarea> sur l'évènement onChange (il faudra faire en sorte que s'il y a la réponse de l'utilisateur dans la base de données, elle s'affiche dans le <textarea>) :

Code php :

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

1
2
3
4
5
6
7
8
// Affichage des questions (avec le compteur) du chapitre, s'il y en a
if ($row['contenu_question']) {
	$compteur_question++;
	echo '<div class="exercice"><ul><li>'.$row['contenu_question'].'</li></ul><a name="question'.$compteur_question.'"></a>
        <div class="reponse_cours_tp">Votre réponse <b>n°'.$compteur_question.'</b>
        <div style="position:relative; top:1.5em;left:0em;float:left;" id="image'.$compteur_question.'"></div>:<br /><textarea onkeyup="dynamicHeight(this);" rows="1" style="height: 40px;" cols="80" name="reponse'.$compteur_question.'" onChange="go('.$compteur_question.', this.value);"></textarea>
</div></div>';
}

Avec ce code (les deux fonctions javascript), uniquement l'icône "En attente du serveur" s'affiche quelque soit la réponse saisie. Il utilise le bon identifiant de l'utilisateur. Comme vous pouvez le voir dans les codes, j'ai mis des commentaires.

A mon avis, il faut changer le contenu de la variable "message" puisqu'il faut transmettre les différentes variables (identifiant de la bonne question, identifiant de l'utilisateur connecté et le contenu de la réponse saisie encodé pour gérer les caractères spéciaux) vers le fichier du traitement PHP. Justement, ce fichier doit récupérer l'identifiant de la question, l'identifiant de l'utilisateur, le contenu de la réponse saisie encodée de la zone de texte <textarea> active.

Dans ce fichier, j'ai fait un test pour vérifier l'existence d'une réponse : s'il y en n'a pas, il faut faire la requête SQL d'insertion (INSERT INTO) sinon il ne faut pas en insérer une mais la modifier (UPDATE). Pour ce faire, j'ai mis le code suivant mais lors des essais il n'effectue pas les requêtes SQL (affichage d'une seule icône : "En attente du serveur"). Quand je teste les requêtes SQL dans PHPMyAdmin, elles fonctionnent.

De plus, quand j'accède au fichier en passant par l'adresse URL, ce message s'affiche : "Vous n'avez pas le droit !!!".
La transmission des variables entre la page qui permet d'afficher un cours et le traitement PHP qui permet la requête SQL (soit INSERT INTO soit UPDATE) ne s'effectue pas d'où pourquoi l'icône "En attente du serveur" s'affiche quelque soit la réponse saisie.


Voici le code de traitement PHP :

Code php :

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
<?php
include('config_bdd.php');
// On ouvre la session pour la transmission des variables
session_start(); // Démarre une nouvelle session ou reprend une session existante
 
// Récupération des variables
//$id_cours_tp = (isset($_POST["id_cours_tp"])) ? $_POST["id_cours_tp"] : NULL; // Ce n'est même pas la peine de transférer l'identifiant du cours puisqu'une question est dans un seul cours !
$id_utilisateur = (isset($_POST["id_utilisateur"])) ? $_POST["id_utilisateur"] : NULL;
$id_question = (isset($_POST["id_question"])) ? $_POST["id_question"] : NULL;
$contenu_reponse = (isset($_POST["contenu_reponse"])) ? $_POST["contenu_reponse"] : NULL; // A voir, il faut récupérer ce que l'utilisateur a écrit comme réponse
// Sélection des réponses pour insérer ou modifier les données dans la base de données
$selection_reponse=mysql_query("
SELECT texte_reponse
FROM reponses
WHERE id_question='".$id_question."'")
or die('Erreur lors de la sélection des réponses d\'un Cours/TP'.mysql_error()); // Envoie une requête à un serveur MySQL
 
// On teste si les valeurs existent - à voir pour $contenu_reponse
if (isset($id_utilisateur)&&(isset($id_question))) {// && $contenu_reponse
	// S'il n'y a aucune réponse dans la base de données, il faut l'insérer
	if(mysql_num_rows($selection_reponse)==0) {
		// Insertion dans la base de données des réponses de l'utilisateur
		$insertion_reponses = "
                INSERT INTO reponses (auteur_reponse,id_question,texte_reponse,date_maj_reponse)
                SELECT auteur_reponse,'$id_question','$contenu_reponse',now()
                FROM reponses, test_site_utilisateur
                WHERE test_site_utilisateur.pseudo_utilisateur=reponses.auteur_reponse";
		$query_insertion_reponses = mysql_query($insertion_reponses)
                or die('Erreur sur la requête SQL qui insère les réponses de l\'utilisateur aux questions.'.mysql_error());
	}
	else
		// S'il y a déjà une réponse dans la base de données, il faut la modifier
		$modification_reponses = "
                UPDATE reponses
                SET auteur_reponse=
                (SELECT pseudo_utilisateur
                FROM test_site_utilisateur
                WHERE pseudo_utilisateur=auteur_reponse),id_question='$id_question',texte_reponse='$contenu_reponse',date_maj_reponse=now()";
		$query_modification_reponses = mysql_query($modification_reponses)
                or die('Erreur sur la requête SQL qui modifie les réponses de l\'utilisateur aux questions.'.mysql_error());
}
else {
	// Message si les variables sont vides, nulles
	echo "Vous n'avez pas le droit !!!";
}
?>

Comment faire pour que quand on poste une réponse, la requête SQL s'exécute (avec le bon identifiant de la question et le contenu de la réponse saisie) puis affiche la bonne icône (c'est-à-dire

Code javascript :

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

1
2
3
4
5
if (reponse=="0") document.getElementById("image" + tp_rep_id).innerHTML = "<img src=tp_en_attente.png align=left title='En attente de validation' />";
 
if (reponse=="1") document.getElementById("image" + tp_rep_id).innerHTML = "<img src=en_travaux.png align=left title='Réponse incomplète' />";
 
if (reponse=="4") document.getElementById("image" + tp_rep_id).innerHTML = "<img src=tp_validee.png align=left title='Réponse OK' />";

) et si on accède au traitement PHP sans poster de réponse, un message d'erreur s'affiche au lieu de faire la requête SQL ?

Comme je l'ai mis en commentaire dans les codes, je ne pense pas qu'il est nécessaire de transmettre l'identifiant du cours puisqu'une question ne peut pas être dans plusieurs cours mais dans un seul.

Je viens vers vous après avoir essayé.

Cordialement

Note du mercredi 9 avril 2013 : Dans la fonction go, j'ai modifié le contenu de la variable message donc cette ligne : message = "id_cours_tp=" + id_cours_tp + "id_utilisateur=" + id_utilisateur + "tp_rep_id=" + tp_rep_id + encodeURIComponent(reponse);
-En faisant un alert(reponse);, il prend en compte la réponse saisie.
-En faisant un alert(message);, il prend en compte les identifiants du cours, de l'utilisateur (j'ai ajouté tp_rep_id pour qu'il prenne en compte l'identifiant et le contenu de la réponse) et du contenu de la réponse.
-En faisant alert(message);, dans la boite de dialogue il affiche les identifiants de l'utilisateur, du cours et de la réponse.
En ce qui concerne celui de la réponse, il renvoie son identifiant mais par rapport à la page et non à celui de la base de données : il faudra donc trouver un moyen pour qu'il sélectionne et envoie le bon identifiant dans la base de données.

[sebdu]

Bonjour,

Ne l'ayant pas comprise, je ne vais pas répondre à la question
Mais pourquoi ne pas faire le test d'insert ou update sur la sortie du champ de réponse ?

pouvez vous préciser la question ?

[vinceom92]

L'objectif recherché est tout simple.

Je voudrais que quand l'utilisateur quitte la zone de texte (évenement onChange) :

- s'il n'y a pas de réponse dans la base de données alors il l'insère avec les bons identifiants (dans la table reponses) -> Requête SQL : INSERT INTO
- s'il y a déjà une réponse dans la base de données (c'est-à-dire si l'utilisateur change sa réponse) alors il la modifie avec les bons identifiants (dans la table reponses) -> Requête SQL : UPDATE
- suivant l'état du onreadystatechange, une icône s'affiche (fichiers tp_en_attente.png, en_travaux.png, tp_validee.png, progressbar.gif) à côté de la réponse correspondante. Actuellement, seule progressbar.gif s'affiche.

En fait, c'est juste pour faire soit une requête SQL INSERT INTO soit une requête SQL UPDATE et afficher une icône suivant ce que renvoie onreadystatechange à côté de la réponse saisie sans recharger la page donc dynamiquement.

[vinceom92]

Je reviens vers vous pour vous signaler que j'en suis toujours au même point. La transmission entre les deux pages ne s'effectue pas : Quand j'affiche une alerte sur la page qui permet d'envoyer les données vers le traitement PHP, il m'indique les bonnes valeurs alors que sur la page du traitement PHP, il n'y a aucune variable qui est transmise. En résumé, la liaison entre les deux fichiers ne se fait pas.

Est-ce que quelqu'un pourrait m'indiquer, avec son code, comment faut-il faire pour que des variables soient transmises entre les deux pages en utilisant AJAX et l'objet xhr pour utiliser les variables transmises dans des requêtes SQL INSERT INTO ou UPDATE ?

[freddou17]

A aucun moment je ne vois de

Code :

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

1
2
 
xhr.send(parametresAenvoyer)... (Ajax mtd POST)

dans ta fonction go

je n'ai pas regardé dans le code en détail du coup je peux me tromper

[vinceom92]

Voici les deux scripts javascript actualisé (j'ai juste modifié le nom des variables par rapport au précédent) :

Code javascript :

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
55
function init_xhr() {
    if (window.XMLHttpRequest) // Firefox
 
        xhr = new XMLHttpRequest();
 
    else {
 
        if (window.ActiveXObject) // Internet Explorer
 
           xhr = new ActiveXObject("Microsoft.XMLHTTP");
 
        else { // XMLHttpRequest non supporté par le navigateur
 
            alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
 
            return;
        }
    }
    return xhr;
}
</script>
 
<script type='text/javascript'>
function go(id_cours_rep, reponse) {
 
    var xhr = init_xhr();
 
    xhr.onreadystatechange = function () {
 
        if (xhr.readyState == 4 && xhr.status == 200) {
 
            reponse = xhr.responseText;
 
            if (reponse=="0") document.getElementById("image" + id_cours_rep).innerHTML = "<img src=tp_en_attente.png align=left title='En attente de validation' />";
 
            if (reponse=="1") document.getElementById("image" + id_cours_rep).innerHTML = "<img src=en_travaux.png align=left title='Réponse incomplète' />";
 
            if (reponse=="4") document.getElementById("image" + id_cours_rep).innerHTML = "<img src=tp_validee.png align=left title='Réponse OK' />";
 
        }
    }
    xhr.open("POST", "fichier_destination.php", true);
 
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    /* Utilisation des variables PHP (identifiants du cours et de l'utilisateur) - Il détecte les bons identifiants (cours, l'utilisateur connecté) */
    var id_cours_tp = '<?php echo $id_cours_tp; ?>'; /* A mon avis, ce n'est pas la peine de transférer l'identifiant du cours puisqu'une question ne peut pas être dans plusieurs cours ! */
	var id_utilisateur = '<?php echo $query_recuperation_identifiant_connecte; ?>';
	// Cette ligne ne va pas (il faut qu'il transfère dans le traitement PHP les identifiants du cours, de l'utilisateur connecté, de l'identifiant de la bonne question et la réponse saisie) pour pouvoir les mettre dans la requête SQL INSERT INTO
	message = "id_cours_tp=" + id_cours_tp + "id_utilisateur=" + id_utilisateur + "id_cours_rep=" + id_cours_rep + encodeURIComponent(reponse); // en faisant un  alert(reponse);, il prend en compte la réponse saisie, en faisant un alert(message); , il prend en compte les identifiants du cours, de l'utilisateur (j'ai ajouté id_cours_rep pour qu'il prenne en compte l'identifiant et le contenu de la réponse)
 
	xhr.send (message); // Cette ligne n'envoie pas les données sur la page de traitement PHP
 
	document.getElementById("image" + id_cours_rep).innerHTML = "<img src=progressbar.gif align=left title='En attente du serveur' width=24 />";
}
</script>

Pour information, j'ai mis des commentaires.