194

Blocs de construction

Contrôle des actions  |  Structure d'un formulaire

Créez site7 en copiant site6.

  1. /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.

  1. /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
  1. 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.

  1. function build($block) {
  2.     $file = BLOCKS_DIR.DIRECTORY_SEPARATOR.$block.'.php';
  3.     require_once $file;
  4.     $func = basename($block);
  5.     $args=func_get_args();
  6.     array_shift($args);
  7.     return call_user_func_array($func, $args);
  8. }

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
  1. function home($lang) {
  2.     head('title', translate('home:title', $lang));
  3.    
  4.     $languages='home';
  5.     $banner = build('banner', $lang, compact('languages'));
  6.  
  7.     $footer = view('footer', $lang);
  8.  
  9.     $content = view('home', $lang);
  10.  
  11.     $output = layout('standard', compact('banner', 'footer', 'content'));
  12.  
  13.     return $output;
  14. }

$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
  1. <body>
  2. <?php echo $banner; ?>
  3. <div id="content">

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

  1. /cms/site7
    1. blocks
      1. banner.php
      2. languages.php
banner.php
  1. function banner($lang, $components=false) {
  2.     $home_page=url('home', $lang);
  3.     $logo = view('logo', $lang, compact('home_page'));
  4.  
  5.     $languages=false;
  6.  
  7.     if ($components) {
  8.         foreach ($components as $v => $param) {
  9.             switch ($v) {
  10.                 case 'languages':
  11.                     if ($param) {
  12.                         $languages = build('languages', $lang, $param);
  13.                     }
  14.                     break;
  15.                 default:
  16.                     break;
  17.             }
  18.         }
  19.     }
  20.  
  21.     $output = view('banner', false, compact('logo', 'languages'));
  22.  
  23.     return $output;
  24. }

Ajoutez la vue du bloc directement dans le dossier views.

  1. /cms/site7
    1. views
      1. banner.phtml
banner.phtml
  1. <div id="banner">
  2. <?php
  3. echo $logo;
  4. if (isset($languages)) {
  5.     echo $languages;
  6. }
  7. ?>
  8. </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
  1. function languages($lang, $action) {
  2.     $fr_page=url($action, 'fr');
  3.     $en_page=url($action, 'en');
  4.  
  5.     $output = view('languages', $lang, compact('fr_page', 'en_page'));
  6.  
  7.     return $output;
  8. }

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.

  1. /cms/site7
    1. views
      1. fr
        1. languages.phtml
        2. logo.phtml
      2. en
        1. languages.phtml
        2. logo.phtml
languages_fr.phtml
  1. <div id="languages">
  2. <ul class="menu menubar">
  3. <li><a id="english" href="<?php echo $en_page; ?>" title="English version"><span>English</span></a></li>
  4. </ul>
  5. </div>
languages_en.phtml
  1. <div id="languages">
  2. <ul class="menu menubar">
  3. <li><a id="french" href="<?php echo $fr_page; ?>" title="Version française"><span>Français</span></a></li>
  4. </ul>
  5. </div>
logo_fr.phtml
  1. <div id="logo" class="menu">
  2. <h1><a href="<?php echo $home_page; ?>" title="Accueil"><span>frasq.org</span></a></h1>
  3. </div>
logo_en.phtml
  1. <div id="logo" class="menu">
  2. <h1><a href="<?php echo $home_page; ?>" title="Home"><span>frasq.org</span></a></h1>
  3. </div>
screen.css
  1. img {vertical-align:middle;}
  2.  
  3. .menu {margin:0;padding:0;}
  4. .menu li {list-style:none;}
  5. .menu a {text-decoration:none;}
  6. .menu a span {display:none;}
theme.css
  1. .menu, .menubar {font-family:Helvetica, "Helvetica Neue", Arial, sans-serif;}
  2.  
  3. #banner {height:50px;margin:10px 0 5px 0;border-bottom:2px solid #aec14e;}
  4.  
  5. #logo {width:400px;float:left;}
  6. #logo h1 {padding:0;margin:0;}
  7. #logo h1 a {float:left;width:400px;height:40px;background:transparent url(../logos/sitelogo.png) no-repeat;margin-top:2px;}
  8.  
  9. #languages {width:100px;float:left;margin-top:13px;margin-left:200px;}
  10. #french {width:32px;height:24px;float:left;margin-right:2px;background:transparent url(../buttons/fr.png) no-repeat center center;}
  11. #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 :

  1. /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

Commentaires

Votre commentaire :
[p] [b] [i] [u] [s] [quote] [pre] [br] [code] [url] [email] strip aide 2000

Entrez un maximum de 2000 caractères.
Améliorez la présentation de votre texte avec les balises de formatage suivantes :
[p]paragraphe[/p], [b]gras[/b], [i]italique[/i], [u]souligné[/u], [s]barré[/s], [quote]citation[/quote], [pre]tel quel[/pre], [br]à la ligne,
[url]http://www.izend.org[/url], [url=http://www.izend.org]site[/url], [email]izend@izend.org[/email], [email=izend@izend.org]izend[/email],
[code]commande[/code], [code=langage]code source en c, java, php, html, javascript, xml, css, sql, bash, dos, make, etc.[/code].