image

Un site multi-langues

Voici une proposition d'organisation pour un site qui souhaiterait gérer le multilangues.

Une première idée est de traiter les pages en HTML et de produire autant de pages que de langues souhaitées.
C'est simple mais vous allez rapidement comprendre le problème.

Sur ce principe, on peut mettre en place une organisation de fichiers comme suit:

  • portfolio.html
  • portfolio_en.html
  • portfolio_it.html

Le premier fichier est celui de la langue naturelle (pour nous le francais), les deux autres correspondent aux traductions en anglais (en) et italien (it).
Remarque : il est plus judicieux de nommer tous les fichiers avec un suffixe de langue. Donc
portfolio.html doit s'écrire portfolio_fr.html

Mais, si le contenu structurel d'une page doit être modifié, alors il faut répércuter (avec soin) cette modification dans tous les autres fichiers de langue.
C'est un travail laborieux et surtout très inefficace.
Clairement, une autre approche doit être envisagée.

Dans cette approche, un traitement devra être appliqué à tous les textes des fichiers; on va donc passer à un site concu en PHP.

Le principe consiste à regrouper, dans une structure organisée, tous les textes de traduction à afficher sur la page.
Cette structure peut être :

    • soit un tableau associatif, par exemple:

  $TEXT = array (
  'portfolio_titre' => 'mes créations uniques',
  'portfolio_description' => 'bonjour, je suis Marcel PAGNOL ...'
);
    •  soit un fichier de texte
    • soit une base de données, par exemple une table avec 2 champs (la clé k et la valeur v) :
                 k    |   v
-------------------------------------------------------------------------------------
portfolio_titre | mes créations uniques
portfolio_description | bonjour, je suis Marcel PAGNOL ...
  • soit un fichier binaire optimisé pour la taille (comme dans wordpress avec poedit et ses catalogues de traduction)

Chaque structure peut avoir ses avantages et ses inconvénients.
Parmis les critères de choix, on peut avancer : la facilité d'usage, la rapidité de traitement, la taille des données produites ...

Notre exemple utilisera un tableau associatif. Dans ce cas, le nom de la clé doit être unique; dans chaque fichier de langue, on retrouvera les mêmes noms de clés.
Evidemment, les traductions seront adaptées.

Par exemple, on peut avoir:

  • un fichier de traduction en francais fr.php
     
  • un fichier de traduction en anglais en.php
     
  • un fichier de traduction en espagnol es.php
     

En fait, plusieurs conventions de nommage et plusieurs fichiers doivent être mis en place.
Les fichiers constitutifs du projet sont:

 
  |- index.php
  |-- / Config /
  |       |-- Config.php
  |-- / Libs /
  |       |-- functions.php
  |-- / Langs /
           |-- fr.php
           |-- en.php
           |-- es.php
           |-- lang.tmp

Config/Config.php contient généralement les paramètres de l'application. Ici, on vient ajouter 3 constantes:

 
  • un fichier de traduction en francais fr.php

    Le choix de la langue est géré au moyen d'une variable de session.
    Il ne faut donc pas oublier d'activer dans l'application le moteur de SESSION avec l'instruction session_start().

  • Au départ, si rien n'est précisé, on va choisir la langue par défaut qui est spécifiée par la constante LANG_DEFAULT.
    Puis, on recherche par prudence dans la constante LANGS, si la langue spécifiée fait effectivement partie des langues reconnues.
    Si ce n'est pas le cas, la langue est alors imposée par la constante LANG_DEFAULT.

    Le fichier Libs/functions.php contient trois fonctions utiles pour réaliser les traitement de conversion de texte ( get_lang(), get_lang_messages() et is_lang_exist() ).
    Voici son contenu (les fonctions sont commentées):

     

    Au final, voici le code du fichier qui doit présenter les textes traduits. Pour changer de langue, il suffit de modifier la valeur placée dans la variable de session $_SESSION[ 'lang' ].
    Ceci peut être traiter par un bout de code (mais cela est une autre histoire, à vous de faire ...)

     
image

Gestion multilangue dans les fichiers JS

Dans un site multilangue, il ne faut pas oublier de traiter le Javascript.

Quand un site gère l'internationnalisation, il ne faut pas oublier de traiter les textes produits par les fichiers Javascript.

La solution à apporter dépend de la manière dont les fichiers Javascript sont liés au HTML du site.

> Première approche

Le Javascript est directement intégré dans la page HTML.
Cela ne correspond pas à l'approche "classique" qui stipule que les données (le HTML) et les traitements (le Javascript) doivent être séparés; mais, si l'on souhaite optimiser son site, cette organisation permet de réduire le nombre de requètes entre le navigateur et le serveur.

Pour illustrer, imaginons que le plugin magnific popup soit intégré dans le site.
Ce plugin permet d'afficher une gallerie d'images et la documentation nous indique que plusieurs clés tClose, tLoading, tprev, ... doivent être traduites :

 

Le tableau associatif préparé en PHP doit prendre une forme JSON (Javascript Object Notation) dans le Javascript.
Le JSON est simplement une forme d'écriture où les données sont organisées sous forme de paire clé / valeur; les clés doivent être encadrées par des guillemets.
Vous pourez trouver plus d'informations sur le site d'Alsacréation

Remarque: le JSON est finalement particulièrement facile à manipuler; c'est certainement pour cette raison que ce format est privilégié pour l'AJAX.

A partir d'un tableau PHP de langue organisé comme suit ( /langs / fr.php ):

 

L'instruction echo json_encode( $TEXT ) permet de produire l'écriture :

 

Reste à intégrer cela dans le Javascript. L'écriture doit apparaitre dés le début dans la zone de déclaration des variabes. Une petite inscrustation de PHP avec un

 

les instructions PHP ne peuvent pas modifier le contenu du Javascript.

Le principe consiste à travailler avec une variable tableau Javascript d'échange. La variable tableau est crée dans le HTML (dans un petit script isolé).
Cette variable devient alors accessible à l'ensemble des fichiers Javascript.

 
 

Dans cette méthode, il faut prendre une précaution en nommant la variable tableau d'échange. Car cette variable devient globale dans le Javascript, elle est rattachée à l'objet Window.
Il faut être absolument certain qu'un autre plugin n'utilise pas la même variable (dans ce cas, il y aurait un conflit).
Par sécurité, l'usage est d'ajouter un préfixe; par exemple

var mpagnol_TEXT = { ... }
image

Mise à jour de la base de données OVH

Parfois, lors de la mise à jour des données dans la base OVH, un blocage peut survenir; voici une solution.

Lorsque vous souhaitez mettre en ligne le site que vous avez préparé en local, vous allez certainement transférer votre base de données de votre machine vers l'espace de base de données qui vous est alloué dans la base de données hébergée chez OVH.

Le principe consiste à exporter sous forme de fichier .sql la base locale et, coté serveur de production, à importer ce fichier.

Malheureusement, parfois, cela ne fonctionne pas. On constate un "blocage" de la page web, rien ne semble se passez ... et en effet, aucune donnée n'est injectée.

Voici une copie d'écran qui illustre cette situation:

importation bloquée dans phpmyadmin de OVH

OVH explique la procédure pour importer des données sur leurs serveurs. C'est ici : ovh.com/fr/g1393.importation-base-de-donnees-mysql
Des scripts sont même présentés (mais ils ne donnent pas toujours des résultats satisfaisants).

Le site wordetweb.com/word-et-web/OVH-Sauvegarder-Restaurer-une-base-de-donnees-via-un-script-FR.htm propose une solution basée aussi sur un script (que j'ai testé et qui fonctionne).

Dans la rubrique OVH - Base de données - Restauration  deux possibilités sont proposées:

  • le fichier est en .sql classique [ OVH - Base de données - Restauration type SQL ]
  • le fichier est zippé [ OVH - Base de données - Restauration type GZIP]

Le principe consiste à transférer par FTP le fichier .sql dans la racine du site (par exemple). Nommons ce fichier import.sql.
Ensuite, il faut écrire le script qui va venir lire ce fichier et le traiter avec la commande mysql. Nommons ce script import.php. Ce script est implanté dans la racine de votre site (mais vous pouvez vous organiser tout autrement, c'est simplement un choix).

L'organisation des fichiers est la suivante:

  |- import.php
  |- import.sql
  |- config.inc.php

Le fichier config.inc.php vient définir les constantes d'accès à la base de données :


/** Chemin absolu vers le dossier du site. */
define( 'APP_PATH', __DIR__ );

// paramètres de connexion à la base MYSQL
define( 'DB_HOST', 'xxxx.mysql.db' );
define( 'DB_USER', 'xxxx' );
define( 'DB_PASSWORD', 'xxxx' );
define( 'DB_NAME', 'xxxxx' );

et le fichier import.php:


$mysql = 'mysql';
$command = $mysql . ' --host='. DB_HOST .' --user='. DB_USER .' --password='. DB_PASSWORD .' '. DB_NAME .' < '.$archive_SQL;
echo "

Restauration de la base " . DB_NAME . " à partir du fichier ".$archive_SQL."

";
system( $command );
echo '

Fin de l\'importation SQL dans la base ' . DB_NAME . '' . ' (sur le serveur SQL '. DB_HOST .')

';

Pour exécuter ce script, on doit l'appeler dans l'URL:
votre-nom-de-domaine/import.php ( exemple: mpagnol.mmi-angouleme.fr/import.php)

Il ne faudra pas oublier d'effacer le fichier .sql! Laisser ce fichier en l'état constiturait une grosse faille de sécurité puisque n'importe quel internaute pourrait le consulter par l'URL pseudo-etudiant.mmi-angouleme.fr/import.sql.

Sommaire