1
61

Building blocks

Controlling actions  |  Structuring a form

Create site7 by copying site6.

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

In this chapter, we are going to program the generation of a block which adds a banner to the site.

To test the result online, enter http://www.frasq.org/cms/site7 in the address bar of your navigator.

Create the folders blocks, buttons and logos in site7.

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

A block builds a modular part of the site. Contrary to an action, a block is never directly accessible via a URL.

Add the function build to the file engine.php in the folder library:

engine.php
  1. define('BLOCKS_DIR', ROOT_DIR . DIRECTORY_SEPARATOR . 'blocks');

Specifies where all the blocks are stored. A block is a function defined in a file with the same name.

  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 executes the function defined in the file designated by $block. The rest of the arguments to build is passed to the function. This function must return an HTML ou Javascript code which will be inserted in the output document, typically by an action or another block.

EXAMPLE: build('editing/editpage', $lang, $pagenum) calls the function editpage defined in the file editing/editpage.php with the arguments $lang and $pagenum.

Add a banner with a logo and a menu to the home page:

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 contains the result of the generation of the banner block.

The block is placed by the view which organizes the layout of the final content:

standard.phtml
  1. <body>
  2. <?php echo $banner; ?>
  3. <div id="content">

Add the files banner.php and languages.php in the folder blocks

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

Add the view for the block directly in the folder 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 builds the languages block if languages is in the component list of the banner defined by the parameter $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. }

Add the views for the languages block and the logo block in the folders views/en for the English version and views/fr for the French version.

  1. /cms/site7
    1. views
      1. fr
        1. languages.phtml
        2. logo.phtml
      2. en
        1. languages.phtml
        2. logo.phtml
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>
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>
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>
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>
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;}

Copy the icons for the buttons in the folder buttons and the logo of the site in the folder logos:

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

en.png

sitelogo.png

Enter http://localhost/cms/site7 in the address bar of your navigator. Click on a flag in the banner to switch the display in another language.

site7.zip

Comments

Your comment:
[p] [b] [i] [u] [s] [quote] [pre] [br] [code] [url] [email] strip help 2000

Enter a maximum of 2000 characters.
Improve the presentation of your text with the following formatting tags:
[p]paragraph[/p], [b]bold[/b], [i]italics[/i], [u]underline[/u], [s]strike[/s], [quote]citation[/quote], [pre]as is[/pre], [br]line break,
[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]command[/code], [code=language]source code in c, java, php, html, javascript, xml, css, sql, bash, dos, make, etc.[/code].