Traduire automatiquement la langue d'un site PHP

Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


Sujets que vous pourriez aussi aimer :


Traduction automatisée d'un site Internet

Dans cette formation PHP, nous apportons la solution permettant d'offrir la traduction linguistique des pages d'un site Web. La méthode que nous proposons est relativement simple. Elle fait appel à des notions que nous avons déjà abordées. Il s'agit en l'occurrence des tableaux de variables.

Sources et présentation de la problématique
Nous débutons les travaux à partir de sources proposées au téléchargement.

• Télécharger le fichier traduction-linguistique-php.rar en cliquant sur son lien,
• Puis, le décompresser dans le dossier de votre choix,

La décompression conduit au fichier de la page Web principale nommé index.php. Il est accompagné de ses ressources externes dans les sous dossiers.

Comme nous l'avait appris la formation pour débuter la programmation en Php, ce projet doit être référencé dans EasyPhp. Un nom doit lui être attribué. De même, l'adresse de son emplacement depuis l'explorateur Windows doit être désignée. Dès lors, un simple clic sur le lien de l'application permet d'accéder à sa page d'accueil.



Il s'agit du formulaire d'inscription que nous avions bâti lors d'une formation PHP. C'est un code Javascript qui se charge de contrôler la validité de la saisie en temps réel. Ce formulaire est par défaut proposé dans sa version française.

Vous notez la présence de deux petits drapeaux dans le cadre supérieur.

• Cliquer sur l'icône du drapeau anglais,

En apparence, rien ne se produit. Pourtant, cette même page a été rechargée et un paramètre a été ajouté dans l'URL :

index.php?lang=1

Le code Php doit exploiter cette information pour proposer la version anglaise du formulaire d'inscription. Et comme nous l'avons appris, puisque cette donnée n'est pas postée, c'est l'instruction PHP $_GET qui permet de pointer sur son attribut pour la réceptionner.

Remarque : Nous pourrions obtenir exactement le même résultat que celui que nous allons proposer, uniquement avec du code Javascript. Dans ce langage, nous avions appris à maîtriser les tableaux de variables et à récupérer les paramètres de l'Url. Nous avons souvent insisté à ce sujet, tout ce qui peut être traité par le client (Javascript) doit l'être, pour délester le serveur (code Php). Mais ici, nous imaginons que des pages du site sont construites en fonction d'informations détenues en base de données. Un champ serait prévu pour la version française et un autre pour la version anglaise. Javascript est un code client. Il ne peut donc pas attaquer les bases de données sur le serveur. C'est pourquoi, même en l'absence de base de données dans cette formation, pour coller à la philosophie, nous proposons de développer la solution par le code serveur PHP.

• A la racine du dossier de décompression, cliquer droit sur le fichier index.php,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad++,

Nous accédons ainsi au code Html, Javascript et Php du formulaire d'inscription.

Entre les lignes 45 et 46 pour un éditeur Notepad, vous notez la présence des deux balises img pour la représentation graphique des drapeaux :

...
<div style='float:right;'>
<a href='.' target='_self'><img src='images/drapeau-francais.png' class='drapeau' /></a>
<a href='index.php?lang=1' target='_self'><img src='images/drapeau-anglais.png' class='drapeau'/></a>
</div>
...

Toutes deux sont intégrées dans des balises a href pour les liens de redirection. Le drapeau français se contente d'appeler la page d'accueil, par la racine du site, sans argument donc. Le drapeau anglais quant à lui appelle cette même page avec l'attribut lang passé en paramètre.

Les parties statiques sont nombreuses dans cette page Web telle qu'elle a été conçue à l'origine. Les mentions en français doivent être remplacées par des variables Php. Ce sont elles qui décideront de la langue à adapter. Ainsi, on note :

• Le titre dans la balise H1 en ligne 30,
• La mention dans le calque d'identifiant message en ligne 43,
• Les contenus des contrôles Html, attribut Value, dans le formulaire,

Pour ces derniers, un code Javascript se charge de vider le contenu au clic, pour libérer la saisie et de la restaurer si aucune modification n'a été entreprise. Ce code se base sur la valeur par défaut. Il permettra donc de considérer dynamiquement les traductions anglaises que nous devons intégrer.

Attribut d'URL - Paramètre de langue
La solution consiste donc à créer un tableau de variables pour chaque information à traduire. En première rangée, nous y trouverons la version française et en seconde, la version anglaise. C'est le paramètre de la langue qui doit indiquer dans quelle rangée piocher (0 pour le français, 1 pour l'anglais). Dès lors, il suffira de remplacer toutes les informations textuelles classiques dans la page Web, pour produire la traduction instantanée. Mais faut-il encore avoir récupéré ce fameux paramètre. Comme nous l'avons évoqué, c'est l'instruction PHP $_Get qui permet de le réceptionner en désignant son nom d'attribut.

Nous proposons de compléter le code de la section PHP située en entête de page.

• Après l'instruction include, ajouter les lignes PHP suivantes :

<?php
include('commun/entete.php');

$langue = 0;
if(isset($_GET['lang']))
$langue = 1;

?>
<script language='javascript' type='text/javascript'>
...

Par défaut, nous considérons que la langue est le français. C'est pourquoi, nous déclarons la variable $langue que nous initialisons sur l'indice 0. Puis, grâce à la fonction Php isset, nous testons l'existence de l'attribut lang, donc de sa présence dans l'URL. Cette fonction PHP est booléenne. Si elle renvoie VRAI (if), nous en déduisons que la traduction anglaise a été demandée. De fait, nous basculons la valeur de la variable langue sur l'indice 1.

Avant d'aller plus loin, nous devons tester la bonne réception de ce paramètre. Pour cela, nous proposons de l'inscrire temporairement dans le calque d'identifiant message, à la place de la mention d'origine : Tous les champs sont obligatoires.

• Remplacer le contenu du calque d'identifiant message par la section Php suivante :

...
<div id='message'>
<?php echo $langue; ?>
<div style='float:right;'>
<a href='.' target='_self'><img src='images/drapeau-francais.png' class='drapeau'/></a>
<a href='index.php?lang=1' target='_self'><img src='images/drapeau-anglais.png' class='drapeau'/></a>
</div>
</div>
...



Nous exploitons simplement la fonction Php echo pour restituer en lieu et place, le contenu de la variable publique $langue.

• Enregistrer les modifications (CTRL + S) et basculer sur le navigateur internet,
• Enfoncer la touche F5 du clavier pour rafraîchir la page Web,
• Cliquer sur l'un et l'autre drapeau,

Comme vous le constatez, l'indice varie en fonction du drapeau cliqué. Nous sommes donc en mesure de proposer la traduction demandée.

Traductions par les tableaux de variables
Nous devons exploiter les tableaux de variables pour ranger l'information d'origine et sa traduction. Autant de tableaux que d'informations à traduire sont nécessaires. Ce premier travail peut donc paraître un peu fastidieux. Mais il aura le mérite d'augmenter encore l'aspect dynamique du site Web.

• A la suite du code Php, ajouter les déclarations de tableau de variables suivantes :

<?php
include('commun/entete.php');

$langue = 0;
if(isset($_GET['lang']))
$langue = 1;

$titre = array('Formulaire d'inscription','Registration Form');
$annonce = array('Veuillez remplir tous les champs du formulaire','Please fill in all fields of the form');
$civilite = array('Civilité', 'Civility');
$madame = array('Madame', 'Mrs');
$monsieur = array('Monsieur','Mr.');
$nom = array('Votre nom','Your name');
$prenom = array('Votre prénom','Your first name');
$naissance = array('Naissance, ex : 19/04/1996','birth, ex : 19/04/1996');
$mail = array('Votre mail','Your e-mail');
$mailC = array('Confirmer le mail','Confirm the e-mail');
$mp = array('Votre mot de passe : entre 5 et 10 caractères','Your password : between 5 and 10 characters');
$mpC = array('Confirmer le mot de passe :','Confirm password :');
$btn = array('Valider','Validate');

?>
...

Nous exploitons donc l'instruction Php array que nous avions apprise pour déclarer et remplir un tableau de variables. Ses éléments sont listés entre ses parenthèses, séparés d'une virgule.

Maintenant que toutes les traductions sont prévues, il ne reste plus qu'à les restituer. Aucune instruction conditionnelle n'est nécessaire. La version française est située en première rangée de chaque tableau, soit à l'indice 0. La version anglaise est positionnée dans la seconde rangée, soit à l'indice 1. Dans chaque balise concernée, nous devons afficher le contenu du tableau de variables correspondant en lui passant l'indice dynamique stocké sous le nom de la variable publique $langue.

• Adapter le titre dans la balise H1 :

...
<div id='GTitre'>
<h1><?php echo $titre[$langue]; ?></h1>
</div>
...

• Adapter la mention dans le calque d'identifiant message :

...
<div id='message'>
<?php echo $annonce[$langue]; ?>
<div style='float:right;'>
<a href='.' target='_self'><img src='images/drapeau-francais.png' class='drapeau'/></a>
<a href='index.php?lang=1' target='_self'><img src='images/drapeau-anglais.png' class='drapeau'/></a>
</div>
</div>
...

• Adapter les valeurs de la liste déroulante dans le formulaire :

...
<select id='civilite' name='civilite' onChange='Javascript:if(this.value>0){ b_civilite=true; } else {b_civilite=false; }'>
<option value='0'><?php echo $civilite[$langue]; ?></option>
<option value='1'><?php echo $madame[$langue]; ?></option>
<option value='2'><?php echo $monsieur[$langue]; ?></option>
</select>
...

Pour tous les autres contrôles du formulaire, il s'agit d'implémenter les attributs value, onClick, onMouseOut et onBlur en adaptant la variable.

...
<input type='text' name='nom' id='nom' maxlength='50' class='input_form' value='<?php echo $nom[$langue]; ?>' onClick='saisie('<?php echo $nom[$langue]; ?>',this.id)' onMouseOut='retablir('<?php echo $nom[$langue]; ?>',this.id)' onblur='mev('<?php echo $nom[$langue]; ?>',this.id)' />
...

Le bouton en bas du formulaire ne doit pas être oublié.

• Enregistrer les modifications et basculer sur le navigateur Web,
• Rafraîchir la page et cliquer sur l'icône du drapeau anglais,

Comme vous le constatez, la page est intégralement et automatiquement traduite dans la langue choisie. Si vous cliquez sur le drapeau français, vous retrouvez la page dans sa langue d'origine.

Des problèmes persistent néanmoins. Ils sont cependant fort logiques. Le titre dans l'entête de la page Web n'est pas traduit. Il en va de même concernant les balises title et meta notamment pour la description. Par le jeu des imbrications de pages, ces codes interviennent dans le fichier entete.php. Il est d'ailleurs appelé au début du fichier principal, par la fonction include :

include('commun/entete.php');



Donc, pour palier le souci, nous devrions réceptionner le paramètre en amont, soit dans la page entete.php. Ce fichier est proposé dans le sous dossier commun du dossier de décompression. Pour ce faire, il s'agit de déplacer la réception du paramètre dans ce fichier et de déclarer les tableaux de variables nécessaires. Ceux que nous avons déclarés et affectés dans la page index.php ne doivent pas bouger. L'adaptation conduirait au résultat suivant :

<?php
include('commun/ouvrir.php');

$langue = 0;
if(isset($_GET['lang']))
$langue = 1;

$Mtitre = array('Formulaire d'inscription en Javascript','Registration Form with Javascript');
?>
<script language='javascript' type='text/javascript'>
var la_langue = <?php echo $langue; ?>;
</script>
<html>
<head>
<meta http-equiv=' content-type' content='text/html;charset=utf-8'>
<title>
<?php echo $Mtitre[$langue]; ?></title>
<meta name='description' content='Contrôler et valider les saisies d'un formulaire d'inscription Web par le code client Javascript'/>
<meta name='robots' content='index,follow' />
<meta http-equiv='content-language' content='fr' />
<link href='styles/mef.css' rel='stylesheet' type='text/css' />
</head>
<body>

<div class='div_conteneur_parent'>

<div class='div_conteneur_page'>
<a href='http://www.bonbache.fr/' target='_self'>
<img src='images/le_formateur.png' style='width:50px;border:none;' align='left' alt='formateur informatique' />
</a>
<div class='titre_page'><h1><?php echo $Mtitre[$langue]; ?></h1></div>

<div class='div_int_page'>

Si vous testez le résultat après avoir enregistré les modifications, vous constatez que ces soucis sont corrigés.



Toutes les autres traductions demeurent fonctionnelles. Comme nous l'avions appris, par le jeu des imbrications de pages, la variable $langue étant déclarée en amont, elle est considérée comme publique. De fait sa valeur est portée d'un fichier à un autre. Elle est donc réceptionnée et exploitée dans les tableaux de variables.

Un autre souci persiste. Lorsqu'une saisie n'est pas conforme, le code Javascript prend le relais. Il retourne une indication en français dans le calque d'identifiant message. C'est ainsi que la page avait été codée à l'origine.

Et c'est pourquoi nous avons ajouté une section de script destinée à transmettre la valeur du serveur au client cette fois.

<script language='javascript' type='text/javascript'>
var la_langue = <?php echo $langue; ?>;
</script>

Et comme cette variable Javascript est déclarée avant l'appel du script externe, sa valeur est elle aussi portée d'un script à un autre :

<script language='javascript' src='js/v_inscr.js'></script>

Cette déclaration est présente dans le fichier index.php.

De fait, nous pourrions adapter le code de la fonction mev du script externe v_inscr.js, situé dans le sous dossier js, comme suit, pour débuter :

...
function mev(txt_defaut, nom_controle)
{
var longueur = document.getElementById(nom_controle).value.length;
var info_mail = ['Votre mail ne semble pas correct, corrigez-le', 'Your email does not look correct, correct it'];
if(nom_controle=='date_n')
{
if(!isValidDate(document.getElementById(nom_controle).value, 'DMY'))
{
document.getElementById(nom_controle).style.border = '#CC3300 2px solid';
document.getElementById('message').innerText = 'Votre date de naissance doit être saisie au format jj/mm/aaaa';
b_date=false;
}
else
{
document.getElementById('message').innerText = ' ';
document.getElementById(nom_controle).style.border = '#333 1px solid';
b_date=true;
}
}
elseif(nom_controle=='mail_inscr')
{
if(document.getElementById(nom_controle).value.indexOf('@') == -1 || document.getElementById(nom_controle).value.indexOf('.') == -1)
{
document.getElementById(nom_controle).style.border = '#CC3300 2px solid';
document.getElementById('message').innerText = info_mail[la_langue];
b_mail=false;
}
...



Et après essai, vous constatez que la traduction automatique prend effet dynamiquement à tous les niveaux, y compris dans les messages retournés par le code client Javascript.

Enfin, pour les contenus dynamiques restituant l'information de bases de données, il s'agit toujours d'exploiter ce paramètre. Selon sa valeur, la requête SQL doit pointer sur le champ correspondant à extraire, pour restituer les informations dans la langue choisie.