Écrire un CMS en PHP

195

Blocs de construction

Créez site7 en copiant site6.

/cms
1. ...
2. site6
3. site7

Dans ce chapitre, nous allons programmer la génération d'un bloc qui ajoute un bandeau au site.

Pour tester le résultat en ligne, http://www.frasq.org/cms/site7 dans la barre d'adresse de votre navigateur.

Créez les dossiers blocks, buttons et logos dans site7.

/cms/site7
1. blocks
2. buttons
3. logos

Un bloc fabrique une partie modulaire du site. Contrairement à une action, un bloc n'est jamais directement accessible via une URL.

Ajoutez la fonction build au fichier engine.php dans le dossier library :

engine.php

define('BLOCKS_DIR', ROOT_DIR . DIRECTORY_SEPARATOR . 'blocks');

Spécifie dans quel dossier se trouvent les blocs. Un bloc est une fonction définie dans un fichier du même nom.

function build($block) {
$file = BLOCKS_DIR.DIRECTORY_SEPARATOR.$block.'.php';
require_once $file;
$func = basename($block);
$args=func_get_args();
array_shift($args);
return call_user_func_array($func, $args);
}

build exécute la fonction définie dans le fichier désigné par $block. Le reste des arguments de l'appel à build est passé à la fonction. Cette fonction doit retourner du code HTML ou Javascript qui sera inséré dans le document de sortie, typiquement par une action ou un autre bloc.

EXEMPLE : build('editing/editpage', $lang, $pagenum) appelle la fonction editpage définie dans le fichier editing/editpage.php en lui passant les arguments $lang et $pagenum.

Ajoutez un bandeau avec un logo et un menu à la page d'accueil :

home.php

function home($lang) {
head('title', translate('home:title', $lang));
$languages='home';
$banner = build('banner', $lang, compact('languages'));
$footer = view('footer', $lang);
$content = view('home', $lang);
$output = layout('standard', compact('banner', 'footer', 'content'));
return $output;
}

$banner contient le résultat de la génération du bloc banner.

Le bloc est placé par la vue qui organise la disposition du contenu final :

standard.phtml

<body>
<?php echo $banner; ?>
<div id="content">

Ajoutez les fichiers banner.php et languages.php dans le dossier blocks avec les contenus suivants :

/cms/site7
1. blocks
  1. banner.php
  2. languages.php

banner.php

function banner($lang, $components=false) {
$home_page=url('home', $lang);
$logo = view('logo', $lang, compact('home_page'));
$languages=false;
if ($components) {
foreach ($components as $v => $param) {
switch ($v) {
case 'languages':
if ($param) {
$languages = build('languages', $lang, $param);
}
break;
default:
break;
}
}
}
$output = view('banner', false, compact('logo', 'languages'));
return $output;
}

Ajoutez la vue du bloc directement dans le dossier views.

/cms/site7
1. views
  1. banner.phtml

banner.phtml

<div id="banner">
<?php
echo $logo;
if (isset($languages)) {
echo $languages;
}
?>
</div>

banner construit le bloc languages si languages est dans la liste des composants du bandeau définie par le paramètre $components.

languages.php

function languages($lang, $action) {
$fr_page=url($action, 'fr');
$en_page=url($action, 'en');
$output = view('languages', $lang, compact('fr_page', 'en_page'));
return $output;
}

Ajoutez les vues du bloc des langues et du bloc du logo dans les dossiers views/fr pour la version en français et views/en pour la version en anglais.

/cms/site7
1. views
  1. fr
    1. languages.phtml
    2. logo.phtml
  2. en
    1. languages.phtml
    2. logo.phtml

languages_fr.phtml

<div id="languages">
<ul class="menu menubar">
<li><a id="english" href="<?php echo $en_page; ?>" title="English version"><span>English</span></a></li>
</ul>
</div>

languages_en.phtml

<div id="languages">
<ul class="menu menubar">
<li><a id="french" href="<?php echo $fr_page; ?>" title="Version française"><span>Français</span></a></li>
</ul>
</div>

logo_fr.phtml

<div id="logo" class="menu">
<h1><a href="<?php echo $home_page; ?>" title="Accueil"><span>frasq.org</span></a></h1>
</div>

logo_en.phtml

<div id="logo" class="menu">
<h1><a href="<?php echo $home_page; ?>" title="Home"><span>frasq.org</span></a></h1>
</div>

screen.css

img {vertical-align:middle;}
.menu {margin:0;padding:0;}
.menu li {list-style:none;}
.menu a {text-decoration:none;}
.menu a span {display:none;}

theme.css

.menu, .menubar {font-family:Helvetica, "Helvetica Neue", Arial, sans-serif;}
#banner {height:50px;margin:10px 0 5px 0;border-bottom:2px solid #aec14e;}
#logo {width:400px;float:left;}
#logo h1 {padding:0;margin:0;}
#logo h1 a {float:left;width:400px;height:40px;background:transparent url(../logos/sitelogo.png) no-repeat;margin-top:2px;}
#languages {width:100px;float:left;margin-top:13px;margin-left:200px;}
#french {width:32px;height:24px;float:left;margin-right:2px;background:transparent url(../buttons/fr.png) no-repeat center center;}
#english {width:32px;height:24px;float:left;margin-right:2px;background:transparent url(../buttons/en.png) no-repeat center center;}

Ajoutez les icônes des boutons dans le dossier buttons et le logo du site dans le dossier logos :

/cms/site7
1. buttons
  1. en.png
  2. fr.png
2. logos
  1. sitelogo.png

fr.png

en.png

sitelogo.png

Entrez http://localhost/cms/site7 dans la barre d'adresse de votre navigateur. Cliquez sur un drapeau pour basculer l'affichage dans une autre langue.

site7.zip

frasq.org

Blocs de construction

Commentaires

Votre commentaire :