Écrire un CMS en PHP

178

Images et traductions

Créez site3 en copiant site2.

/cms
1. ...
2. site2
3. site3

Dans ce chapitre, nous allons programmer le contenu de la page d'accueil et sa traduction.

Pour tester le résultat en ligne, entrez http://www.frasq.org/cms/site3 dans la barre d'adresse de votre navigateur. Essayez les adresses http://www.frasq.org/cms/site3/fr et http://www.frasq.org/cms/site3/en.

Créez le dossier images dans site3.

/cms/site3
1. images

Ajoutez l'icône pour Ubuntu dans images.

/cms/site3
1. images
  1. ubuntu.png

ubuntu.png

Ajoutez un pied de page avec l'icône d'Ubuntu à home.phtml. En français dans views/fr :

<h3>Bienvenue</h3>
<div id="footer">
<p>©2010-2011 frasq.org - Tous droits réservés - <a href="http://www.frasq.org">www.frasq.org</a></p>
<p><img src="<?php echo $base_path; ?>/images/ubuntu.png" alt="" width="16" height="16" /> <a href="http://www.ubuntu.com" target="_blank">Ubuntu</a></p>
</div>

Puis en anglais dans views/en :

<h3>Welcome</h3>
<div id="footer">
<p>©2010-2011 frasq.org - All rights reserved - <a href="http://www.frasq.org">www.frasq.org</a></p>
<p><img src="<?php echo $base_path; ?>/images/ubuntu.png" alt="" width="16" height="16"/> <a href="http://www.ubuntu.com" target="_blank">Ubuntu</a></p>
</div>

Si vous entrez http://localhost/cms/site3/fr dans la barre d'adresse de votre navigateur, l'icône n'est pas affichée. Rappelez-vous que le fichier .htaccess ordonne à Apache de rediriger toutes les requêtes vers index.php. index.php va retourner un document "HTTP/1.0 404 Not Found". Installez l'extension Live HTTP Headers de Firefox. Choisissez En-tête Live HTTP dans le menu Outils. Rechargez la page http://localhost/cms/site3 pour afficher l'en-tête du document renvoyé par le site.

GET /cms/site3/images/ubuntu.png HTTP/1.1
Host: localhost
...

HTTP/1.0 404 Not Found
...

Éditez .htaccess et ajoutez les lignes suivantes pour laisser passer tous les fichiers avec une extension .gif, .png, .jpg, .jpeg ou .ico ainsi que .css pour les feuilles de style et .js pour les sources en JavaScript.

RewriteCond %{REQUEST_FILENAME} -f
RewriteRule /*\.(css|js|gif|png|jpe?g|ico)$ - [NC,L]

.htaccess

La première ligne impose que l'URL pointe bien sur un fichier existant. Sinon, la requête doit être redirigée vers index.php. Cette condition est importante pour que le site puisse capturer des erreurs d'adressage ou gérer le téléchargement de fichiers dont les noms ont des extensions qui pourraient porter à confusion. La règle suivante indique que toutes les URL se terminant par une des extensions de fichier données ne doivent pas être récrites.

Vérifiez que l'icône est bien affichée en entrant http://localhost/cms/site3/fr et http://localhost/cms/site3/en dans la barre d'adresse de votre navigateur.

Ajoutez le fichier strings.inc dans includes avec le contenu suivant :

/cms/site3
1. includes
  1. strings.inc

strings.inc

global $strings;
$strings = array(
array('title' => 'frasq.org',
),
'fr' => array(
'home:title' => 'Accueil',
),
'en' => array(
'home:title' => 'Home',
),
);

strings.inc définit la variable globale $strings. $strings contient un tableau qui associe pour chaque langue gérée par le programme une liste de chaînes de caractères à leurs traductions. Le tableau des chaînes de caractères qui ne dépendent pas de la langue est placé à la position 0.

Ajoutez le fichier translate.php dans library avec le contenu suivant :

/cms/site3
1. library
  1. translate.php

translate.php

global $strings;
$strings = array();
@include 'strings.inc';
function translate($s, $lang) {
global $strings;
if ($s) {
if (array_key_exists($lang, $strings) && array_key_exists($s, $strings[$lang])) {
return $strings[$lang][$s];
}
if (array_key_exists(0, $strings) && array_key_exists($s, $strings[0])) {
return $strings[0][$s];
}
}
return false;
}

Modifiez la version française de la page d'accueil :

home_fr.phtml

<?php
require_once 'translate.php';
$title=translate('home:title', 'fr');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo $title; ?></title>
</head>
<body>
<h3>Bienvenue</h3>
<div id="footer">
<p><img src="<?php echo $base_path; ?>/images/ubuntu.png" alt="" width="16" height="16" /> <a href="http://www.ubuntu.com" target="_blank">Ubuntu</a></p>
</div>
</body>
</html>

Le titre de la page est maintenant généré dynamiquement selon la langue de la page qui est affichée.

Dans la version en anglais, passez 'en' en argument à translate.

home_en.phtml

<?php
require_once 'translate.php';
$title=translate('home:title', 'en');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo $title; ?></title>
</head>
<body>
<h3>Welcome</h3>
<div id="footer">
<p><img src="<?php echo $base_path; ?>/images/ubuntu.png" alt="" width="16" height="16"/> <a href="http://www.ubuntu.com" target="_blank">Ubuntu</a></p>
</div>
</body>
</html>

Entrez http://localhost/cms/site3/fr puis http://localhost/cms/site3/en dans la barre d'adresse de votre navigateur pour valider la page d'accueil en français et en anglais.

site3.zip

frasq.org

Images et traductions

Commentaires

Votre commentaire :