Discussion :

[dchiaramello]

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 :

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

<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 :

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

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 :

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

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 :

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
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 :

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
<?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

[Benjamin Delespierre]

Hello Daniel

Personnellement je fais jamais d'ajax à la main (trop compliqué de se dépatouiller entre les différents navigateurs), j'utilise un framework.

Voici ce que ça pourrait donner en jQuery:

Code :

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

1
2
3
4
5
6
7
 
$.ajax({
    url: "mapage.php?txt=" + $('#texte').html(),
    method: 'post',
    success: function (data) { $('#text').html(data) },
    failure: function () { alert('Erreur Ajax'); }
});

Ton code php (mapage.php dans mon exemple):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
require_once "conn.php";
 
// Récupère les données et sécurise les
$html = html_entities($_REQUEST['txt']); // par exemple
 
$query = "UPDATE `table` SET `field`='$txt' where <ta clause where>";
if (mysql_query($query))
{
     // Récupère ton html original et envoie le
     // ....
     echo $html;
}

c'est un exemple, à toi de l'adapter.
Jette un oeil du coté de jQuery, c'est vraiment LE framework javascript du moment: http://jquery.com/

[dchiaramello]

Merci, je vais aller jeter un œil du côté de jQuery.

Mais j'aime bien avoir une certaine connaissance de ce qui se passe - et débuter d'emblée mon apprentissage avec un framework peut me tenir écarté de certaines difficultés et connaissances "de base" dont celui-ci, même si cela me simplifie la vie, va me faire ignorer l'existence. Ce qui me laisserait totalement démuni si un jour "ça ne marche pas" pour telle ou telle raison.

C'est pour cela que dans mon exemple, je n'ai pas abordé les différences entre différents navigateurs, mais que j'ai essayé de le cantonner à une problématique "de base" - les tribulations d'une chaine utf8 entre les différents composants, ou plutôt comment garantir son intégrité lors de son "voyage"! Et la réponse m'intéresse toujours, même si un framework peut m'affranchir de cette connaissance.

Daniel

[Benjamin Delespierre]

Ne va pas non plus te perdre dans les méandres d'Ajax juste pour un exercice. On dit bien "c'est en forgeant qu'on devient forgeron" mais on a jamais parlé d'aller chercher le minerai de fer soi même

Et si un jour ça ne marche pas, il y a les forums comme developpez.com avec des gens compétents dedans pour répondre à des questions pointues.

Mais attention, même si un framework rends la programmation plus aisée (et surtout plus rapide) il est toujours bon de connaitre, au moins dans les grandes lignes, les mécanismes internes. Sinon c'est de la pure bêtise d'utiliser un framework.

[dchiaramello]

(...)
Mais attention, même si un framework rends la programmation plus aisée (et surtout plus rapide) il est toujours bon de connaitre, au moins dans les grandes lignes, les mécanismes internes. Sinon c'est de la pure bêtise d'utiliser un framework.

Totalement d'accord avec cela!

J'ai finalement réussi à faire ce que je voulais faire, en parcourant les différents forums spécialisés par-ci par-là.
Si jamais certains sont intéressés, voici la manière dont j'ai résolu mon "cas d'école".

La page HTML "originale" est construite comme ceci:

Dans le header:

Code :

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Ma zone originale (contenant le texte et le bouton "Editer") est construite en exécutant la fonction php suivante (dont je me reservirai par la suite), avec $add_span_code_tags=1 :

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
<?php

function get_editable_field_string($field_value, $add_span_code_tags)
{
  $result = '[HTML_VALUE] <input type="submit" value="Editer" onclick="edit_field(\'[VALUE]\');return false" />';
  if ($add_span_code_tags == 1)
    $result = "<span id='span_test'>" . $result . "</span>";
  
  $result = str_replace("[HTML_VALUE]", htmlentities($field_value, ENT_COMPAT, "UTF-8"), $result);
  $field_value = str_replace("'", "\\'", $field_value);
  $field_value = str_replace('"', '&quot;', $field_value);
  $result = str_replace("[VALUE]", $field_value, $result);
  
  return $result;
}
?>

Le code de la fonction Javascript edit_field() est le suivant:
(XXXX est à remplacer par "& # 3 9 ;" sans les espaces dans le code ci-dessous, mais le forum met le caractère HTML correspondant et je ne sais pas comment désactiver ce remplacement)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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);return false' />";
  inner_html_code += "</form>";

  field_value = field_value.replace("'", "XXXX");
  field_value = field_value.replace('"', "&quot;");
  inner_html_code = inner_html_code.replace("[FIELD_VALUE]", field_value);
  document.getElementById('span_test').innerHTML = inner_html_code;
}

Le code de la fonction Javascript set_edit_field() est le suivant:

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
22
23
24
25
26
function set_edit_field(span_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="+encodeURIComponent(span_value), true);
  xmlhttp.send();
}

Et pour finir, mon script set_edit_field.php:

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
22
23
24
25
26
27
28
<?php
 
function unicode_decode($txt) {
  return ereg_replace('%u([[:alnum:]]{4})', '&#x\1;',$txt);
}
 
$value = unicode_decode($_REQUEST['value']);
$value = str_replace("\\'", "'", $value);
$value = str_replace('\\"', '"', $value);
 
require_once("conn.php");
 
// Connection details
$con = mysql_connect($conn_host, $conn_login, $conn_passwd);
if (!$con)
{
  die('Could not connect to database: ' . mysql_error());
}
mysql_query("SET NAMES 'utf8'");
mysql_select_db($conn_database, $con);
 
$sql_query = "UPDATE TEST_TABLE SET NAME = '" . str_replace("'", "\\'", $value) . "'";
mysql_query($sql_query);
 
echo get_editable_field_string($value, 0);
 
mysql_close($con);
?>

Merci de vos réponses, en tout cas.
Daniel