Write a CMS in PHP

Images and translations

Create site3 by copying site2.

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

In this chapter, we are going to program the content of the home page and its translation.

To test the result online, enter http://www.frasq.org/cms/site3 in the address bar of your navigator. Try the addresses http://www.frasq.org/cms/site3/en and http://www.frasq.org/cms/site3/fr.

Create the folder images in site3.

/cms/site3
1. images

Add the icon for Ubuntu in images.

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

ubuntu.png

Add a footer with the Ubuntu icon to home.phtml. In English in 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>

Then in French in 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>

If you enter http://localhost/cms/site3/en in the address bar of your navigator, the icon isn't displayed. Remember that the file .htaccess orders Apache to redirect all requests to index.php. index.php will return a "HTTP/1.0 404 Not Found" document. Install the extension Live HTTP Headers of Firefox. Choose Live HTTP headers from the Tools menu. Reload the page http://localhost/cms/site3/en to display the header of the document returned by the site.

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

HTTP/1.0 404 Not Found
...

Edit .htaccess and add the following lines to let the files with the extensions .gif, .png, .jpg, .jpeg or .ico and .css for style sheets and .js for sources in JavaScript pass through.

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

.htaccess

The first line imposes that the URL actually points to an existing file. Otherwise, the request is redirected to index.php. This condition is important so the site can capture addressing errors or manage downloading files whose names have extensions which could be confusing. The next rule indicates that all the URL ending with one of the given extensions mustn't be rewritten.

Check that the icon is properly displayed by entering http://localhost/cms/site3/fr and http://localhost/cms/site3/en in the address bar of your navigator.

Add the file strings.inc in includes with the following content:

/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 defines the global variable $strings. $strings holds a table which associates for each language managed by the program a list of character strings and their translations. The array of strings which are not language dependent is placed at position 0.

Add the file translate.php in library with the following content:

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;
}

Modify the English version of the home page:

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>

The title of the page is now generated dynamically according to the language of the page which is displayed.

In the French version, 'fr' is passed in argument to translate.

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>

Enter http://localhost/cms/site3/en then http://localhost/cms/site3/fr in the address bar of your navigator to validate the home page in English and in French.

site3.zip

frasq.org

Images and translations

Comments

Your comment: