PHP, Javascript, Ajax, MySQL, UTF8 - comment démêler l'imbroglio?
Bonjour à tous.
Je suis en train d'auto-apprendre ce petit monde du développement web, et histoire de prendre de suite les bonnes habitudes, j'aimerais savoir s'il y a déjà quelque part un sujet qui traite de la bonne "transmission" du contenu d'un champ éditable à travers PHP, Javascript, et MySQL - tout cela en UTF8.
Le "sujet de l'exercice" (PHP) que je m'étais proposé de réaliser était simple sur le papier:
- page HTML et base de donnée MySQL en UTF8
- sur la page HTML, un texte (non éditable) avec un bouton "Editer" à côté
- le bouton "Editer" déclenche un Javascript qui va remplacer le texte et le bouton "Editer" du dessus par un formulaire avec un champ texte éditable contenant la valeur et un bouton "Modifier"
- le bouton "Modifier" va appeler un code Javascript qui, à travers XMLHttpRequest, va faire une requête PHP au serveur avec le nouveau contenu du champ. Ce script PHP va mettre à jour le champ correspondant dans la base de données, et renvoyer le code HTML original (texte non éditable et bouton "Editer"), destiné à son tour à remplacer le formulaire.
Je vais mettre ci-dessous quelques tentatives de code pour gérer cela, mais vous allez de suite voir que "ça ne marche pas"...
Toutes les pages sont "codées" en UTF8 (jusque là, j'ai bon!):
Code:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Le code HTML "original" est le suivant (simplifié), où [VALEUR] est remplacé par la bonne valeur:
Code:
1
2
3
4
| <span id="span_test">
[VALEUR]
<input type="submit" value="Modifier" onclick="edit_field('[VALEUR]')" />
</span> |
Le code Javascript appelé (la fonction edit_field) est le suivant:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| function edit_field(field_value)
{
var inner_html_code;
inner_html_code = "<form name='form_test'>";
inner_html_code += "<input type='text' name='field' value='[FIELD_VALUE]' />";
inner_html_code += "<input type='submit' value='Modifier' onclick='set_edit_field(document.form_test.elements[0].value)' />";
inner_html_code += "</form>";
inner_html_code = inner_html_code.replace("[FIELD_VALUE]", field_value);
document.getElementById("span_test").innerHTML = inner_html_code;
} |
Ce formulaire, quand l'utilisateur clique sur le bouton "Modifier", déclenche le code Javascript suivant:
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
| function set_edit_field(field_value)
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("span_test").innerHTML = xmlhttp.responseText;
}
else
{
document.getElementById("span_test").innerHTML = "Modification en cours...";
}
}
xmlhttp.open("GET", "set_edit_field.php?value="+field_value, true);
xmlhttp.send();
} |
Et enfin, pour finir, le code du PHP appelé par le script précédent (simplifiée également, où aucune vérification n'est effectuée):
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <?php
// set_edit_field.php?value=<value>
require("conn.php");
// Connection details
$con = mysql_connect($conn_host, $conn_login, $conn_passwd);
if (!$con)
{
die('Could not connect to database: ' . mysql_error());
}
mysql_select_db($conn_database_name, $con);
mysql_query("SET NAMES 'utf8'");
mysql_query("UPDATE TEST_TABLE SET NAME = '" . $_REQUEST['value'] . "'"]);
mysql_close($con);
echo $_REQUEST['value'] . '<input type="submit" value="Modifier" onclick="edit_field(\'' . $_REQUEST['value'] . '\')" />';
?> |
Bien évidemment, tout ceci ne fonctionne pas...
Il se pose le problème du respect de l'encodage UTF8 entre les différentes fonctions et module, le problème de l'url-encodage/décodage lors de l'exécution du script set_edit_field.php (pour le caractère "&", par exemple), le problème du caractère <'> pour la base de données, etc...
D'où ma question originale: quel est le moyen "académique" de gérer ces problèmes?
Merci de votre attention,
Daniel
